Лучшие практики использования купонов, скидок и рекламных акций UI и UX

«Покупатели любят скидки, будь то распродажи на сайте, отдельные товары или купоны. Однако, чтобы пользователи успешно использовали рекламные акции, веб-сайт должен хорошо выполнять две вещи: он должен эффективно сообщать об этих различных рекламных акциях по всему сайту, а также должен облегчать пользователям получение информации о сделках». Ким Салазар, старший специалист по взаимодействию с пользователями в Nielsen Norman Group

В этом посте собраны лучшие практики и идеи для разработки пользовательского интерфейса и опыта продвижения кодов купонов и автоматически применяемых рекламных акций на вашем веб-сайте или мобильной платформе. Мы охватим весь путь клиента, от рекламных сообщений и снижения цен на веб-сайте до проверки купонов и рекламных акций и их применения на кассе, и, наконец, выкупа. Мы написали этот пост на основе пользовательского интерфейса и UX наших клиентов, пользовательского интерфейса самых эффективных с точки зрения доходов платформ электронной коммерции DTC и различных исследований UX.

Примечание. Все скриншоты рабочего стола были сделаны на Mac, Chrome, а все скриншоты мобильных устройств были сделаны с использованием разрешения iPhone X в Chrome.

Мы надеемся, что это руководство поможет вам перепроектировать вашу платформу, включив в нее купоны и рекламные акции на уровне корзины, или улучшить существующий опыт использования купонов для клиентов. Если у вас есть какие-либо вопросы или вы хотите узнать больше о Voucherify, нашей системе продвижения, свяжитесь с нами.

Комплект пользовательского интерфейса для купонов и рекламных акций

Добейтесь более быстрого выхода на рынок с помощью готовых компонентов купонов и рекламных акций из нашего набора пользовательского интерфейса купонов и рекламных акций, доступного на Figma. Учить больше.

Оглавление:

Общие советы по рекламному UI и UX:

• Четко укажите сроки продвижения.
• Автоматически применять общедоступные купоны.
• Предложите страницу подборки продаж.
• Включите фильтрацию в своей категории продаж.
• Предложите клиенту кабину.
• Перечислите товары со скидкой в ​​разделе «Распродажи», а также в соответствующих категориях.
• Сообщайте об акциях на сайте по всему миру.
• Уточните заранее ограничения промо-акции.

Лучшие практики купона UX на конкретной странице:

1. ‍ Домашняя страница:

• Типы рекламных акций, рекламируемых на главной странице.
• Ссылка на страницы продаж.

2. ‍ Страницы категорий.
3. ‍ Всплывающие окна.
4. ‍ Лента вверху страницы .
5. ‍ Нижний колонтитул.
6. ‍ Страница продукта:

• Оставьте старый ценник.
• Четко изложите правила продвижения пакетов.

7. ‍ Корзина:

• Включите поля с кодом купона в качестве основной части как корзины покупок, так и страниц оформления заказа.
• Для рекламных акций с минимальными затратами рассчитайте пользователей и помогите им достичь цели по расходам.
• Напомните пользователям о доступных специальных предложениях, на которые они могут претендовать в корзине.
• Укажите любые особые условия или ограничения.

8. Страница оформления заказа:

• Добавьте поле с кодом купона.
• Отображать сообщение об успехе, если код успешно применен.
• Отображение сообщения об ошибке в случае неверного кода купона.
• Уточните, может ли клиент добавить более одного купона на скидку.
• Помогите пользователям найти свои скидки.
• Отразите полученные скидки.
  

Основы кодов купонов UI и UX

Здесь мы рассмотрим некоторые общие советы, которые применимы к дизайну, размещению и продвижению большинства купонов на скидку и рекламных акций. Позже мы перейдем к конкретным местам размещения промо-купонов и корзин на веб-сайте, выделив лучшее дизайнерское решение с точки зрения клиентского опыта. Помните, что недостаточно просто запустить купонную кампанию, вам также необходимо позаботиться о дизайне купона, размещении, проверке и погашении, чтобы ваша кампания имела блестящий успех.

Четко укажите сроки продвижения

Вы должны информировать клиентов о продолжительности акции купона или на уровне корзины, чтобы избежать недовольных клиентов, которые узнают на кассе, что предложение больше не действует. Это также помогает создать ощущение срочности и слегка подтолкнуть покупателей к выполнению своих заказов. Несоблюдение этого требования приводит к ухудшению пользовательского опыта и уходу клиентов с вашего сайта.

Вы можете сделать это, либо указав временные рамки (даты или часы) акции, либо добавив таймер обратного отсчета. Лучше всего всегда указывать временные рамки акции на каждом баннере и рекламном объявлении, а не только в положениях и условиях, чтобы клиенты знали о дате истечения срока действия акции.

Примеры пользовательского интерфейса:

Pomelo Fashion использует таймер обратного отсчета, чтобы четко отображать срок действия их предложений.

Шеин информирует клиентов рядом с рекламным баннером или категорией о продолжительности акции обратным отсчетом. Они также показывают количество оставшихся предметов, чтобы вызвать ощущение срочности.

Они также информируют клиентов о продолжительности предложения на странице продукта, чтобы еще больше повысить эффективность рекламных акций.

И включили таймер даже в корзину.

Вот как выглядит дисплей в их мобильном приложении:

У Pretty Little Thing есть обратный отсчет продвижения на баннере главной страницы, доступный также в мобильном разрешении:

Автоматически применяйте общедоступные купоны, чтобы обеспечить максимальное удобство

Если на сайте предлагается скидка или код купона, вы можете упростить процесс погашения, разрешив пользователям автоматически применять его в своей корзине, нажав на код скидки, или, по крайней мере, автоматически копировать его при нажатии на него, чтобы им не нужно запоминать код. Это увеличит использование рекламной акции, поскольку пользователям будет проще применять ее к своим корзинам. Вы также можете автоматически применять уникальные коды скидок, отправленные по различным каналам (электронная почта, SMS и другие), если покупатель переходит по полученной ссылке. Узнайте, как исправить UX проверки купона, следуя этому сообщению.

Если предложение общедоступно, всегда внимательно думайте, может ли оно быть просто автоматически применяемой скидкой на уровне корзины, а не общедоступным кодом купона. Это упрощает процесс оформления заказа для клиентов и может привести к увеличению коэффициента конверсии рекламной акции.

Еще одна хорошая практика UX — сделать так, чтобы код купона можно было скопировать (разместите его на веб-сайте или в мобильном приложении в виде текста, а не в виде изображения).

Примеры пользовательского интерфейса:

Vanity Planet автоматически применяет общедоступные коды купонов к подходящим заказам в корзине. После перехода к кассе общая сумма заказа пересчитывается с учетом кода скидки.

Они даже добавляют бесплатный продукт к заказу, если заказ соответствует требованиям, снова автоматически применяя код скидки:

Здесь вы можете увидеть тот же поток в мобильном разрешении:

Если вы нажмете кнопку «Показать сводку заказа», отобразится содержимое корзины, включая информацию о рекламных акциях и кодах купонов, примененных к заказу.

Предложите страницу подборки продаж

Собрать все общедоступные акции и купоны на скидку на уровне корзины на одной странице — отличный способ облегчить покупателям их поиск. Таким образом, вы можете отображать рекламные акции также для новых или незарегистрированных клиентов, в отличие от использования только кабины клиентов для отображения всех рекламных акций. Часто компании отображают все рекламные баннеры просто на главной странице, что может скрывать различные элементы страницы и мешать работе с клиентами.

Примеры пользовательского интерфейса:

Victoria's Secret представляет все доступные предложения в понятном интерфейсе на одном сайте. Обратите внимание, как информационная архитектура на сайте использует размер, чтобы подчеркнуть или уменьшить акцент на выбранных предложениях.

Включите фильтрацию в своей категории продаж для лучшего UX

Если вы предлагаете категорию продаж, в которой собраны все товары, к которым применима определенная акция корзины или код скидки, вы должны разрешить пользователям перемещаться по этой категории и фильтровать ее. Некоторые посетители просто захотят увидеть товары в продаже и ничего больше, поэтому отдельные категории продаж должны позволять им просматривать все предложения и легко перемещаться по этому разделу. Отфильтрованные параметры навигации должны позволять покупателям сортировать и фильтровать в разделах продаж, чтобы эффективно сузить выбор. Без фильтров покупка товаров по распродаже может быть тяжелой работой и может привести к тому, что клиенты уйдут с вашего сайта.

Примеры пользовательского интерфейса:

Pomelo Fashion предлагает фильтры категорий распродаж по типу и размеру продукта.

Fashion Nova предлагает фильтрацию категорий распродаж по цене или отсекам:

Предложите клиенту кабину

Отображение всех промо-акций корзины и кодов скидок, к которым может получить доступ определенный клиент, в специальной кабине клиента, помогает клиентам понять, какие акции доступны конкретно для них. Он также позволяет отображать личные, уникальные купоны на скидку, подарочные карты, баланс баллов лояльности или другие вознаграждения, в отличие от страницы продаж, на которой отображаются только общедоступные рекламные акции, а не персонализированные.

Примеры пользовательского интерфейса:

H&M предлагает личный кабинет, где клиенты могут узнать баланс своих баллов лояльности, доступные акции и скидки, уникальные ваучеры и реферальную программу.

Кабина клиента в мобильном разрешении:

Перечислите товары со скидкой в ​​разделе «Распродажи» и в соответствующих категориях.

Не ограничивайте отображение товаров со скидками выделенным разделом сайта «Продажи». Для лучшего обнаружения лучше всего перечислить товары со скидкой как на странице соответствующей категории, так и в разделе «Продажи». Некоторые пользователи переходят непосредственно к разделам «Продажи», когда хотят найти выгодную сделку, но другие специально не ищут разделы «Продажи». Пользователи, которые ищут конкретный элемент, обычно просматривают его по категориям. Сайты, которые отображают товары со скидкой вместе с товарами по полной цене, помогают пользователям находить скидки в интересующей их области.

Примеры пользовательского интерфейса:

Pretty Little Thing перечисляет товары со скидкой по товарам со скидкой и категориям продуктов, чтобы их можно было найти в обеих категориях.

Сообщайте об акциях по всему сайту по всему миру, чтобы избежать негативных отзывов в прессе.

Если сайт предлагает бесплатную доставку или другие скидки или купоны для всего сайта, покажите эти предложения на каждой странице сайта. Постоянные напоминания о скидках могут помочь пользователям найти товары в рамках своего бюджета, а также побудить их к покупке. Опять же, они изображают ваш бренд как тот, который предоставляет покупателям привилегии. Показывая рекламные акции на всем сайте только в определенных областях, вы рискуете, что не все пользователи узнают о них. Кроме того, если купоны не рекламируются на всех страницах, люди могут предположить, что они были намеренно скрыты, чтобы предотвратить их использование, что в конечном итоге негативно отражается на бренде.

Возможные скидки включают в себя:

• Рекламные объявления в пространстве героев на главной странице.
• Баннеры в верхней части каждой страницы с информацией о продвижении корзины или кодом купона, в том числе на странице корзины или на странице оформления заказа, где необходимо ввести код купона.
• Рекламные выноски на странице со списком товаров или на правой панели.
• Баннеры внизу страницы, в футере или рядом с ним.

Примеры пользовательского интерфейса:

‍Pomelo Fashion сообщает о своем купоне для всего сайта на баннере главной страницы, ленте верхней страницы и страницах категорий.

PrettyLittleThing напоминает клиентам о скидочных купонах на весь сайт даже на страницах продуктов — отличный шаг с точки зрения UX.

Вот как они представляют это в мобильной раскладке:

Pretty Little Thing рекламирует свою рекламу на уровне корзины на баннере главной страницы и ленте верхней страницы:

Они предлагают страницу продаж, на которой отображаются все товары со скидкой:

Они также показывают скидку на странице продукта:

Уточняйте ограничения на рекламные акции заранее

Иногда рекламные акции корзины или купоны на скидку могут подвергаться квалификациям или ограничениям. Если это так, убедитесь, что в предложении четко указано, какие ограничения применяются. Ссылайтесь на более подробную информацию об этих условиях, если это необходимо, но не требуйте, чтобы пользователи копались в мелком шрифте, чтобы понять основные ограничения. Нет ничего более разочаровывающего, чем ожидать получить сделку, только чтобы узнать на кассе, что вы не соответствуете требованиям. Имейте в виду, что дизайн вашего купона должен быть не только привлекательным, но, что более важно, функциональным.

Примеры пользовательского интерфейса:

Pretty Little Thing прямо на баннере своей главной страницы заявляет, что в акции не участвуют товары со скидкой и товары для красоты.

Chewy дает ссылку на дополнительную информацию о своей рекламной акции (кнопка «Узнать больше»), которая рекламируется на ленте «сэкономьте 35% на вашей первой автодоставке».

Это всплывающее окно, которое отображается после нажатия на призыв к действию:

В мобильном разрешении лента не содержит кнопки, но на нее можно нажать. После клика появляется такое же всплывающее окно с условиями акции:

Лучшие практики использования купонов на определенных страницах:

Домашняя страница:

Типы рекламных акций, рекламируемых на главной странице:

Вы не должны рекламировать все акции на главной странице, так как клиенты могут быть перегружены количеством предложений (и получить так называемую баннерную слепоту). Там должны рекламироваться только общедоступные акции корзины или купоны. Лучшая практика UX — оставить скидки для конкретных продуктов или категорий для страниц категорий или продуктов.

Примеры пользовательского интерфейса:

Happy Socks показывали на ленте своей верхней страницы и главном баннере главной страницы автоматически применяемую 30% скидку на летнюю распродажу, которая была их самой большой публичной скидкой на тот момент.

Ссылка на страницы продаж

Если на сайте действует автоматическая реклама или промо-акция с купонами, то вместо того, чтобы перечислять все подходящие продукты и условия на главной странице, вы можете просто предоставить тизер, который приведет на страницу продаж, где клиенты могут прочитать все условия и положения. рекламной акции и просмотрите подходящие продукты и предложения.

Примеры пользовательского интерфейса:

Chubbies Shorts отображает рекламный баннер на главной странице со ссылкой на страницу коллекции продаж.

Страницы категорий:

Всплывающие окна

Всплывающие окна можно использовать для рекламы скидок по купонам и рекламных акций на уровне корзины, доступных в магазине, но они имеют различные недостатки UX. Если это единственный способ рекламы рекламной акции, пользователи могут закрыть их и забыть о точных условиях скидки или требуемом коде ваучера. Поэтому всплывающие окна следует использовать с другими средствами коммуникации, такими как баннеры, электронные письма, SMS. Еще одна проблема всплывающих окон заключается в том, что они навязчивы. Они охватывают контент, который пользователи действительно хотели просматривать, и могут рассматриваться как раздражающие.

С другой стороны, всплывающие окна являются отличной заменой или дополнением к электронным письмам при назначении скидки клиенту за действие, которое он только что выполнил. Например, если клиент подписался на информационный бюллетень, вы можете отобразить полученную скидку во всплывающем окне. Таким образом, клиент получит это проще и раньше, чем если бы ему пришлось проверять свой почтовый ящик. Опять же, всплывающее окно и электронная почта могут сосуществовать, чтобы сделать скидку доступной, если покупатель захочет вернуться к ней позже.

Хорошей альтернативой всплывающим окнам в мобильном приложении являются push-уведомления.

Примеры пользовательского интерфейса:

Tula использует всплывающие окна, чтобы сообщить о рекламе на уровне корзины, но доступ к всплывающему окну можно также получить, когда пользователь нажимает на фиксированный баннер со скидкой 15%. Это дает возможность вернуться к акции позже.

Лента вверху страницы:

Как и в случае с размещением на главной странице, лента должна быть зарезервирована для общедоступной или общесайтовой корзины или рекламных акций со скидочными купонами. Это отличное место, чтобы добавить общедоступный код купона и сделать его видимым на всех страницах, включая оформление заказа, чтобы сделать код легко доступным, когда пользователи проверяют свою корзину покупок или завершают оформление заказа.

Примеры пользовательского интерфейса:

Chubbies Shorts использует ленту для рекламы крупных общедоступных тележек.

Нижний колонтитул:

Нижний колонтитул — одно из наименее читаемых мест на сайте. Размещение купонов на скидку или предложений на уровне корзины — не лучшая идея, так как скидки, вероятно, будут пропущены большинством клиентов. С другой стороны, нижний колонтитул — отличное место для добавления условий акции. Если вам не нужна отдельная страница для Условий акции, так как Условия очень короткие, вы можете разместить их в футере.

Примеры пользовательского интерфейса:

ThredUp использует нижний колонтитул для отображения условий и положений рекламных акций своей корзины.

Страница продукта:

Оставить старый ценник

Убедитесь, что ваши клиенты знают, какая цена была до того, как вы ее снизили. Люди принимают решение о покупке, основываясь на том, насколько они ценят сделку, а не на том, насколько они ценят продукт. Всегда, когда это возможно, давайте клиентам ориентировочную цену, по сравнению с которой ваша сделка будет выглядеть лучше.

Примеры пользовательского интерфейса:

Шеин зачеркивает старую цену, ставит новую и даже добавляет метку с указанием уровня скидки в процентах.

На мобильном они показывают процент скидки и долларовую стоимость скидки.

Четко изложите правила продвижения пакетов

Что касается пакетных скидок, сделайте предложения легко видимыми и предпримите шаги на страницах продуктов, чтобы пользователи могли соответствовать требованиям, если они того пожелают. Если сайт предлагает скидку на покупку нескольких единиц одного и того же продукта, пользователи должны иметь возможность легко узнать о предложении и выполнить минимальные требования.

Примеры пользовательского интерфейса:

Chubbies Shorts отображает распродажу «Купи 2, получи скидку» прямо рядом с ценником продукта на странице категории.

Они также отображают скидку в корзине.

Когда вы нажимаете на скидку, она выбирается и добавляется к заказу, уменьшая цену на 10 долларов.

Корзина:

Включите поля кода купона в качестве основной части как корзины покупок, так и страниц оформления заказа.

Пользователи, у которых есть код купона, хотят ввести его как можно скорее. Вы должны предоставить четкое место для кодов купонов в корзине до первого шага в процессе оформления заказа. Этот подход к пользовательскому интерфейсу позволяет людям проверять, действителен ли он, прежде чем вводить какую-либо личную информацию, а также позволяет соответствующим образом обновлять общую сумму на раннем этапе процесса.

Когда дело доходит до размещения кода купона, настоятельно рекомендуется сделать промо-коды основной частью процесса оформления заказа, а не элементом боковой панели. Когда промо-акции размещаются на правой панели, их, как правило, путают с рекламой и игнорируют из-за отсутствия баннерной слепоты.

С другой стороны, если у вашего клиента нет кода купона, но он видит поле купона, он может подумать, что упускает возможную сделку и уходит, потому что он начнет искать скидку. Если не все ваши купоны общедоступны, лучшим решением будет не предоставлять видимое открытое текстовое поле. Вам следует предоставить текстовую ссылку, чтобы открыть текстовое поле. Этот дизайн с меньшей вероятностью заинтересует пользователей и отправит их на поиск купонов, поскольку многие покупатели его не заметят. Компромисс, конечно, заключается в том, что его сложнее найти тем, у кого есть код купона.

Поле с кодом купона , независимо от того, раскрывается оно автоматически или скрывается под ссылкой, должно быть текстовым полем. Если ваши коды купонов имеют фиксированное количество символов или определенный шаблон, вы также можете добавить автоматическую проверку, которая будет предлагать пользователю добавить недостаточно, слишком много или неправильный тип (числовые, буквенные, специальные знаки) символы, чтобы помочь они обнаруживают ошибку раньше. Поле должно быть достаточно длинным, чтобы вместить коды купонов, используемые на сайте, чтобы пользователи могли вводить их правильно. Оптимальная длина кода купона — 8-12 символов. Если вы предлагаете предложения по кодам купонов, вы также можете отобразить их в раскрывающемся списке.

Когда дело доходит до того, как вы формулируете текст вокруг предлагаемых купонов , психология ментального бухгалтерского учета предполагает, что если ваши продукты, как правило, попадают в категорию предметов первой необходимости, вы должны сообщить своим клиентам, что они «заработали» купоны (представьте себе всплывающее окно). сообщение «Привет! Вы только что получили купон на скидку 10 долларов США!»), потому что процесс заработка делает его более серьезным источником дохода. Напротив, если ваши продукты более легкомысленны, вы должны попытаться преподнести свои купоны как сюрприз или получить их благодаря удаче (представьте себе сообщение, в котором говорится: «Вы только что выиграли купон на скидку 10 долларов!»). Вы можете прочитать больше о ментальном учете в нашем блоге.

Сами коды купонов должны легко запоминаться и записываться в поле для купонов (если только вы не предлагаете их в виде раскрывающегося списка или переключателя на выбор). Это означает, что комбинации что-то значат для клиентов, избегая одинаковых букв и цифр, таких как O и 0, и сохраняя длину менее 12 символов. Узнайте больше о когнитивной беглости в нашем блоге.

Примеры пользовательского интерфейса:

Birchbox имеет очень заметное поле с кодом купона в корзине. Они также предлагают ссылку, чтобы открыть поле с кодом купона в режиме оформления заказа для тех, кто пропустил его в режиме просмотра корзины. Это отличный способ сохранить возможность добавления кода купона на обоих этапах, скрывая поле с кодом купона в форме оформления заказа, что помогает уменьшить отток клиентов.

В мобильном разрешении поле с купоном скрыто, и его нужно развернуть, нажав на него:

Опять же, на странице оформления заказа есть ссылка на поле с промокодом:

Для рекламных акций с минимальными затратами рассчитайте пользователей и помогите им достичь цели по расходам.

Некоторые сайты предлагают такие акции, как бесплатная доставка для покупок на сумму свыше определенной суммы в долларах. Эти предложения побуждают пользователей тратить дополнительное время и деньги, чтобы претендовать на них.

Для рекламных акций с минимальными затратами сайты должны точно сообщать пользователям, сколько им нужно потратить, чтобы получить право на предложение. Отличная идея пользовательского интерфейса для этого — прямо в корзине подсчитывать, сколько пользователям нужно потратить больше, чтобы претендовать на скидку, будь то бесплатная доставка, % или скидка в долларах.

Если вы хотите, чтобы клиенты были мотивированы тратить больше, чтобы получить бесплатную доставку, но не ограничивали свои покупки, чтобы достичь «достаточного» уровня расходов, устанавливая потолок цен и привязываясь к стоимости, необходимой для получения бесплатной доставки, вы можете играть с вашим пользовательским интерфейсом, чтобы отображать прогресс в бесплатной доставке, который идет быстрее в начале расходов и медленнее в достижении «целевого» объема заказа. Это соответствует идее «целевой скорости», основанной на исследованиях. Подробнее об этом можно прочитать в этом блоге.

Сайты могут пойти еще дальше, предлагая релевантные товары в корзине, что позволит покупателям достичь минимальной цели по тратам и избавит их от необходимости самостоятельно выполнять математические расчеты.

Примеры пользовательского интерфейса:

Tula использует пользовательский интерфейс, чтобы показать в корзине, чего не хватает для бесплатной доставки.

Напоминайте пользователям о доступных специальных предложениях, на которые они могут претендовать в корзине покупок.

Последний шанс привлечь внимание пользователей и помочь им обнаружить доступные рекламные акции на уровне корзины и купоны — это страница корзины. Там они по-прежнему могут легко вносить изменения в заказ, поэтому не забудьте указать любые специальные предложения, на которые могут претендовать пользователи, такие как бесплатная доставка или скидки.

Предложения должны быть хорошо видны, чтобы привлечь внимание пользователей. Чтобы привлечь внимание пользователя, используйте соответствующее размещение и визуальный вес.

Вот некоторые из лучших практик UX:

• Для предложений на уровне продукта размещайте сообщения рядом с самим продуктом.
• Для предложений, распространяющихся на весь сайт, представьте предложение в приоритетном пространстве непосредственно над опцией перехода к оформлению заказа.
• Если скидка распространяется на доставку, может быть уместным размещение со скидками для всего сайта или рядом с общей стоимостью доставки.
  

Не предлагайте покупателям слишком много купонов и рекламных акций на уровне корзины, особенно при оформлении заказа. Перегрузка выбором может привести к оттоку. Узнайте больше о ценности разнообразия и перегруженности выбором в нашем блоге.

Примеры пользовательского интерфейса:

Chubbies Shorts отображает все доступные скидки и вознаграждения прямо в корзине.

Укажите любые особые условия или ограничения

Если в рекламной акции или купонах предусмотрены какие-либо особые условия или ограничения, укажите это на странице продаж, в ваших условиях и в корзине до того, как покупатель совершит покупку.

Примеры пользовательского интерфейса:

Шеин упоминает особые условия их продвижения в корзине, например, максимальное количество акционных товаров, которое может приобрести покупатель, и то, что товары со скидкой не подлежат возврату.

Страница оформления заказа:

Включить поле кода купона

Как мы упоминали ранее, лучше включить поле кода купона как на странице корзины, так и на странице оформления заказа, если кто-то забыл применить его на странице просмотра корзины.

Отображать сообщение об успехе, если код успешно применен

Покажите сообщение об успешном завершении и сумму скидки, чтобы подтвердить, что код купона был успешно применен. Поместите сообщение рядом с полем кода купона, чтобы пользователи могли его увидеть и связать с введенным кодом купона. Отображение этого сообщения в верхней или нижней части страницы может сбивать с толку. Убедитесь, что сообщение об успехе не является единственным источником информации об успешном применении купона. Отображать добавленную скидку в итоговой сумме заказа, в корзине и на странице оформления заказа, предпочтительно указывая, какой код купона применил какую скидку (особенно, если клиенты могут добавить более одного кода скидки в заказ).

Примеры пользовательского интерфейса:

Pretty Little Thing показывает галочку и сумму экономии, примененную к заказу после ввода действительного кода. Они также отображают сумму скидки, рассчитанную в итоговой сумме заказа, указывая, какой код скидки применил скидку.

Они также отображают примененный код купона и соответствующую скидку в мобильном представлении:

{{СТА}}

Создайте свой интерфейс с помощью готовых компонентов, включенных в наш набор пользовательского интерфейса.

Начать строительство

{{ENDCTA}}

Отображение сообщения об ошибке для недействительных кодов купонов

Если код недействителен или условия акции не соблюдены, вы должны отобразить соответствующее сообщение об ошибке с указанием типа проблемы с кодом купона. Не отображайте одно и то же сообщение об ошибке в каждом случае, так как оно не будет указывать пользователю, что не так и как он может исправить проблему.

Отображайте сообщение об ошибке рядом с полем кода купона, а не вверху или внизу страницы, поскольку пользователь может не заметить сообщение об ошибке. Убедитесь, что сообщение об ошибке видно, например, используя красный или другой контрастный цвет.

Типы сообщений об ошибках для отображения:

• Код купона недействителен.
• Код купона уже был использован и не может быть использован больше раз.
• Сумма заказа недостаточна или избыточна для применения купона (в этом случае верните информацию о том, сколько не хватает для получения купона или сколько лишнего в корзине).
• Содержимое заказа не соответствует условиям акции (в этом случае укажите, какие элементы следует удалить или добавить, чтобы соответствовать требованиям).
• Срок действия купона истек.
• Другие причины — если вы можете себе представить другие случаи, создайте сообщение специально для них. Имейте одно сообщение по умолчанию для всех других случаев, о которых вы не могли подумать.

Примеры пользовательского интерфейса:

Summer Salt отображает сообщение об ошибке, если введенный код недействителен или не соблюдены условия акции. Они поощряют клиентов перепроверять свой код. Наличие общедоступных купонов на верхней ленте помогает исправить ошибку.

Вот как они отображают это в мобильном разрешении:

Уточните, может ли клиент добавить более одного купона на скидку или комбинировать рекламные акции.

Если вы разрешаете добавлять в заказ только один купон, после того, как покупатель добавит действительный код купона, код купона исчезнет или скроется. Замените его, добавив кнопку «изменить мой код купона», поскольку клиенты могут захотеть изменить код купона на другой. Не забудьте также иметь возможность удалить код купона. Вы должны четко указать где-то на странице, что клиенты могут добавить только один код купона в заказ.

Если клиенты могут добавить больше кодов купонов, после того, как они добавили один код купона, вы можете отобразить его как «добавлен в заказ» и позволить поле кода купона перезагрузиться и снова стать пустым, чтобы клиенты могли применить другой код купона.

Если коды скидок и рекламные акции корзины не могут быть объединены, вы должны четко указать это в рекламных объявлениях, Правилах и условиях и на странице оформления заказа, особенно в виде сообщения об ошибке, если кто-то попытается добавить купон поверх товаров, уже находящихся в продаже.

Примеры пользовательского интерфейса:‍

Summer Salt добавляет добавленный купон под полем кода купона и очищает поле кода купона после применения купона к заказу, предлагая пользователям применять более одного купона в заказе.

Pretty Little Thing позволяет клиентам применять только один код купона для каждого заказа. Они заставляют поле купона исчезать после применения купона к заказу и заменяют его кнопкой «Изменить код».

Помогите пользователям найти скидки для повышения качества обслуживания клиентов

Рядом с полем кода купона вы должны отобразить ссылку на кабину клиента, где они могут увидеть все доступные скидки или просто список купонов и рекламных акций корзины на выбор. Это значительно упрощает клиентам использование ваших предложений и может увеличить размер их корзины покупок, если они увидят, что могут претендовать на скидку, если просто добавят еще несколько товаров в свою корзину.

Примеры пользовательского интерфейса:

Шеин ссылается на страницу «Мои купоны», которая собирает доступные купоны рядом с полем кода купона при оформлении заказа и упоминает общедоступные купоны под полем кода купона.

Это кабина клиента, показывающая доступные купоны и купоны с истекшим сроком действия, которая открывается при нажатии на ссылку «Мои купоны».

В мобильном приложении они отображают купоны как «предупреждение о купоне». Если вы нажмете на это всплывающее окно, вы увидите все доступные купоны и выберите, какой из них использовать.

Отразить полученную скидку

Показать любые скидки или специальные ограничения, применяемые к товарам в корзине, как рекламные акции на уровне корзины, так и купоны. Коды купонов должны быть проверены и отражены в стоимости до запроса платежной информации. Скидки на уровне корзины должны отображаться на уровне продукта или заказа, в зависимости от того, к чему они были применены. Важно, чтобы пользователи могли видеть экономию и понимать, как рассчитывается общая сумма. Лучше всего даже отображать, какой код купона и какая акция дала им точную сумму экономии в общей сумме заказа.

Специальные ограничения на товары со скидкой должны быть сообщены клиентам до того, как они разместят свой заказ.

Примеры пользовательского интерфейса:

Шеин отображает скидки на уровне продукта на уровне продукта в сводке корзины покупок.

Шейн позволяет клиентам применять коды скидок только на кассе. In the order summary, they reflect the product discounts by showing the difference between retail price and subtotal. Then, if you apply any discount codes to the whole order, it is displayed as the “discount” of the subtotal. Note that they show both, cart-level and discount coupons savings in the order total but in different places.

On the mobile app, coupons can be selected at checkout. Then they are displayed in the order total.

Резюме

This was a long one. The key takeaway here is that coupon offers and promotions shouldn't be run for the sake of it. Besides tinkering with the offer itself, your team also needs to consider the best design, placement, and validation possible. Keep in mind that the promotional ROI won't peak if you don't make your offers easy to find and apply. Even the best offer will go unnoticed if it's not promoted properly. Always remember to clearly communicate the value of the discount and any conditions customers need to meet. Hopefully, these UX tips will get you started.

{{СТА}}

Are you ready to fix your coupon UX?

Начать

{{ENDCTA}}