I am ready for a long road flight for work with a week- or months-long projects.
ФОРМА ПОДПИСКИ НА РАССЫЛКУ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
105
ГАЙДЛАЙНОВ
Форма подписки – первая точка контакта с клиентом на его пути к получению email-рассылок. И от того, насколько хорошо форма спроектирована, зависит, окажется он в нашей базе подписчиков или нет. Сегодня разберем рецепт для идеальной формы подписки: 105 гайдлайнов с примерами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. РАЗМЕЩЕНИЕ ФОРМЫ
Футер сайта
Достаточно часто форму подписки на рассылку можно встретить в нижней части страницы: в футере или рядом с ним.
Блок на главной
Если рассылка – важный и активно используемый канал связи с клиентами, форму подписки можно разместить в качестве отдельного блока на главной странице.
Листинг товаров
Форму подписки также можно включить в листинг товаров, чтобы сделать интерфейс разнообразнее и снизить риск пользовательской «усталости» при просмотре.
Страница подтверждения заказа
Страницу подтверждения заказа можно использовать с умом, извлекая из нее дополнительную пользу. В том числе, размещая призыв к подписке на рассылку.
Всплывающее окно
Форму подписки можно разместить во всплывающем окне, фиксированном при прокрутке. Но главное, чтобы оно не было навязчивым и не перекрывало собой основной контент.
Интерфейс регистрации
Предложение подписаться на рассылку также можно внедрить в процесс регистрации. Но у клиента обязательно должна быть возможность отказаться от ее получения.
Рядом со ссылками на соц.сети
Так как email и соц.сети – это равноправные каналы получения информации, почему бы не разместить их рядом? Вплоть до включения в единый блок.
2. ВИЗУАЛИЗАЦИЯ
В качестве самостоятельного блока
Сделайте форму подписки заметной, реализовав ее в качестве самостоятельного блока, чтобы она привлекала больше внимания клиентов.
Видна по умолчанию
Форма должна быть видна по умолчанию, чтобы клиенту не требовалось совершать какие-либо дополнительные действия перед началом ввода email'а.
Не видна, если клиент подписан
Если клиент уже подписался на вашу рассылку, форму подписки можно не отображать, чтобы не отвлекать его и исключить риск повторной подписки.
Без визуального шума
По возможности расположите форму так, чтобы ее не окружали вторичные элементы, которые могут размыть внимание.
Визуально привлекательна
Поработайте с дизайнером над формой подписки, сделайте ее нестандартной. Визуально привлекательная форма более заметна и может повысить шансы на подписку.
Содержит релевантные элементы
Чтобы форма легче ассоциировалась с рассылкой и быстрее считывалась, в нее можно добавить соответствующие визуальные элементы. Например, конверт или письмо:
3. ПРИЗЫВ К ДЕЙСТВИЮ
Присутствует
Размещение рядом с формой подписки на рассылку явного призыва к действию может повысить вероятность, что клиент его совершит.
Отталкивается от глагола
Так как это призыв к действию, он должен отталкиваться не от существительного, а именно от глагола в повелительном наклонении.
Содержит вопрос к клиенту
В качестве альтернативы глаголу в повелительном наклонении в рамках призыва к действию клиенту можно задать вопрос:
Польза от рассылки понятна
Поясните в форме, зачем стоит подписаться на рассылку. Если этого не делать, клиент просто не будет видеть смысла в том, чтобы поделиться с вами email'ом.
Информирование о выгоде
Дайте клиенту понять, зачем ему оставлять свой email: в явной форме расскажите, какую дополнительную выгоду он получит, подписавшись на вашу рассылку.
Визуальный highlight выгоды
Выгоду, получаемую при подписке, можно дополнительно выделить на фоне остального текста в призыве к действию, чтобы сфокусировать на ней внимание клиента.
Highlight контента рассылки
В форме подписки также можно подсветить, какой именно контент будет приходить в рамках рассылки: это задаст ожидания клиента с самого начала.
Highlight частоты рассылки
Рядом с формой также можно подсветить, как часто вы будете присылать клиенту рассылку. Это позволит лучше управлять его ожиданиями.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
4. PLACEHOLDER
Предусмотрен
Базовый момент: добавьте в поле ввода email-адреса placeholder, чтобы клиенту было понятно, какие данные требуется ввести.
Визуально отличен от текста
Так как placeholder – это не введенный текст, и у него есть своя функция, стоит подчеркнуть это различие визуально. Например, сделав placeholder полувыцветшим.
Достаточно контрастен
При этом placeholder должен быть контрастным по отношению к фону и должен хорошо читаться. Проверить контрастность вашего placeholer'а можно здесь.
В формате СТА
Вместо просто названия поля в его placeholder можно добавить призыв к действию – вводу своего email.
Без указания обязательности
Если поле в форме всего одно, добавлять в его placeholder звёздочку, которая говорила бы об обязательности его заполнения, будет излишне.
Не пропадает при активации
Placeholder не должен пропадать сразу же при активации поля. Клиент должен видеть его как минимум до момента начала ввода текста.
Виден при вводе текста
При вводе placeholder может уменьшаться и оставаться видимым сверху от вводимого текста. Так клиент в любой момент сможет понять, что ввел нужный тип данных.
Placeholder – иконка?
Нестандартный и интересный вариант исполнения placeholder'а – это иконка. Как вам? Очевидно или все же может вызвать вопросы? Напишите в комментариях.
5. ЗАПОЛНЕНИЕ ФОРМЫ
Минимум полей
Попытка запросить у клиента больше данных, чем просто email, значительно снизит шансы на заполнение формы. К такой практике лучше не прибегать:
Реакция поля на наведение
Сделайте поле ввода интерактивным, чтобы оно реагировало на наведение курсора и побуждало клиента к его активации.
Реакция поля на активацию
Изменение внешнего вида поля при его активации даст клиенту дополнительное подтверждение того, что можно начать ввод данных.
Без системной обводки
При этом появление системной обводки при активации поля лучше отключить, т.к. она в большинстве случаев будет идти вразрез с общим дизайном сайта.
Раскладка на мобильных
Промаркируйте поле ввода, как email, чтобы при его активации на мобильных появлялась специальная раскладка, и клиенту не приходилось ее переключать.
Ограничение ввода
Чтобы снизить риск ошибок при вводе email, ограничьте ввод символов только буквами, цифрами и символами @, точки, дефиса и подчеркивания.
Авто-заполнение в браузере есть
Реализуйте авто-заполнение поля данными, сохраненными в браузере, чтобы избавить клиента от ручного ввода своего email-адреса.
Авто-заполнение корректно
Убедитесь, что поля с авто-заполнением промаркированы корректно. Если вы просите ввести email, не стоит в авто-подсказке предлагать вставить номер телефона.
Все Инструменты
Заполнение по умолчанию
Если клиент авторизован и мы знаем его email, поле для ввода может быть заполнено по умолчанию – ему останется лишь нажать на кнопку подписки.
Вводимый текст не обрезается
Сделайте поле достаточно широким, чтобы при вводе email'а значение не обрезалось и было видно полностью.
Выравнивание по левому краю
Выравнивайте вводимый текст по левому краю текстового поля: не стоит его центрировать и устанавливать курсор посредине placeholder'а при активации.
Цвет вводимого текста
Не используйте для текста цвета, ассоциирующиеся с некорректным вводом. Если водимый текст красный, это может ввести клиента в заблуждение, что он допустил ошибку.
Быстрая очистка
Если клиент по ошибке вставил не тот адрес, кнопка быстрой очистки позволит стереть его в 1 клик и потратить время только на ввод нового email'а.
Поле пустое? Без кнопки очистки
Если мы и так уже стерли данные в поле ввода, и в нем отображается лишь placeholder, кнопку очистки можно скрывать, т.к. она становится ненужной.
Без лишних подсказок
Не стоит размещать в форме излишние контекстные подсказки по очевидному действию заполнения поля. Они лишь будут играть роль визуального шума.
Без функции отписки
Функцию отписки лучше вывести в личный кабинет / в сами сообщения. Но если клиент сталкивается с ней при подписке, это может ввести его в ступор и вызвать вопросы.
Выбор рассылки
Если вы делаете несколько рассылок, дайте клиенту возможность выбрать ту, которая подходит ему больше всего, тем самым персонализируя его будущий опыт.
Email + SMS-рассылка?
Нестандартный кейс: при заполнении формы клиент может выбрать email или SMS-рассылку. Каковы плюсы и минусы у такого исполнения? Напишите в комментариях.
Отправка нажатием на кнопку
Базовый момент: при нажатии на кнопку подписки должно происходить подтверждение ввода и отправка данных в систему.
Отправка нажатием на return
Также предусмотрите отправку данных с помощью нажатия на клавишу Return – это также является распространенным паттерном поведения.