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 – это также является распространенным паттерном поведения.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
6. ВАЛИДАЦИЯ ВВОДА
При нажатии на кнопку
Наиболее подходящий момент для валидации введенных клиентом данных – это нажатие на кнопку подтверждения подписки.
При деактивации поля
Также имеет смысл реализовать валидацию при деактивации поля, когда внимание клиента уже смещается со ввода данных (например, при клике вне поля).
При нажатии на return
Так как нажатие на клавишу Return зачастую аналогично нажатию на кнопку отправки, в этот момент также должна срабатывать и валидация адреса.
Не при вводе данных
При этом нет смысла проверять вводимые данные сразу же, когда клиент только начал вводить свой email. Такая неуместная валидация может ввести клиента в ступор.
Highlight поля
Если при вводе значения в поле была допущена ошибка, хорошей практикой будет выделить его, привлекая внимание клиента.
Поддержка проблем со зрением
Поле в случае ошибки можно не только подсветить, но и снабдить его соответствующей иконкой, которая привлекала бы дополнительное внимание.
Активация поля при ошибке
В случае ошибки, так как клиенту все равно придется ее корректировать, эту задачу можно упростить, активируя поле ввода автоматически. Сэкономим клиенту 1 клик.
Без re:Captcha
Понятно, для чего используется re:Captcha, но по возможности не усложняйте клиенту жизнь при подписке на вашу рассылку. Другие же как-то без этого обходятся.
Highlight успешной валидации
Если email-адрес соответствует всем требованиям, это можно дополнительно подсветить. Например, за счет зеленой обводки или галочки.
Правила: ограничения по символам
Допускаются только буквы (a-z, а-я), цифры (0-9) и специальные символы: точка, дефис, подчеркивание и собака (@). Если есть прочие символы или пробелы, выдаем ошибку.
Правила: специальные символы
Специальные символы не должны встречаться рядом друг с другом. С них не должны начинаться и ими не должны заканчиваться ни имя пользователя, ни домен.
Правила: состав домена
Домен может содержать только буквы (a-z, а-я), цифры (0-9) и дефис. Также домен должен содержать минимум 1 точку (несколько, если используются субдомены).
Правила: ровно один символ @
В email-адресе должен быть ровно один символ @. Если символа нет или встречается несколько символов, выдаем ошибку.
7. СООБЩЕНИЕ ОБ ОШИБКЕ
Предусмотрено
Если клиент ошибся при вводе и ввел некорректный email-адрес, должно появляться сообщение, которое говорило бы ему об этом.
Рядом с полем ввода
Разместите сообщение об ошибке рядом с полем ввода email-адреса, чтобы связь между ними визуально легче читалась.
Не внутри поля ввода
Не стоит размещать сообщение об ошибке внутри поля ввода, так как есть риск, что оно перекроет собой email-адрес, который клиенту нужно поправить.
Хорошо заметно
Сделайте сообщение об ошибке хорошо заметным, чтобы оно лучше привлекало внимание клиента. Текст или tooltip красного цвета хорошо для этого подойдут.
Легко читается
При этом важно учитывать, на каком фоне будет отображаться текст. В некоторых случаях текст красного цвета будет читаться «не идеально»:
Поясняет ошибку
Плюсом будет, если в зависимости от результатов валидации текст сообщения будет изменяться и подстраиваться под конкретную ошибку, которую допустил клиент.
Отталкивается от действия
Вместо просто констатации факта ошибки, в текст сообщения также можно добавить призыв ее скорректировать.
На языке интерфейса
Сообщение должно быть на языке интерфейса: если сайт отображается на русском, будет странно, если сообщение клиент увидит на английском.
Не дублируется
Базовый момент. Сообщение об ошибке должно быть одно. В его дублировании особого смысла нет.
Пропадает при повторном вводе
Текст ошибки должен пропадать при повторной активации поля и вводе данных. Иначе клиента можно ввести в заблуждение: «данные я поправил, а ошибка сохраняется».
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
8. СОГЛАСИЕ С ПОЛИТИКАМИ
Визуально вторично
Сделайте согласие с политиками визуально вторичным, чтобы оно не привлекало слишком много внимания и не бросалось в глаза.
Чекбокс активен по умолчанию
Если вы используете чекбокс для согласия с политиками, активируйте его по умолчанию, чтобы клиенту не приходилось совершать лишних действий.
Без чекбокса
Текст можно сформулировать так, чтобы отправка данных предполагала согласие с политиками. Никаких действий на стороне клиента. Элемент еще менее заметен.
Ссылки vs. текст
Так как в тексте мы ссылаемся на страницы политик, ссылки можно ненавязчиво выделить относительно обычного текста.
Ссылки визуально не «кричат»
При этом не стоит выделять ссылки слишком сильно, иначе они начнут привлекать слишком много внимания.
Текст краткий
Выполните текст согласия с политикой в максимально краткой форме, чтобы сделать его визуально менее значимым и не перегружать интерфейс.
Орфография и пунктуация
Базовый момент: как и везде, текст согласия с политиками не должен содержать ошибок. Ни орфографических, ни пунктуационных.
Текст соответствует интерфейсу
Если вы указываете в тексте согласия с политиками название кнопки, не забудьте обновить его, если интерфейс меняется, и это название изменяется / исчезает.
Без привязки текста к интерфейсу
Еще лучше, если в тексте согласия с политиками вы вообще не будете привязываться ни к каким элементам интерфейса: так вы сократите риск ошибок в будущем.
Текст ссылок корректен
Если в согласии с политиками конфиденциальности вы даете ссылки на разные документы, их текст также должен различаться и быть понятным клиенту.
Реакция на hover стандартна
Не стоит выдумывать нестандартных реакций на наведение курсора для ссылок. Это лишь может вызвать вопросы и ввести клиента в замешательство.
Ссылки в новой вкладке
Ссылки на политики должны открываться в новой вкладке, чтобы не уводить клиента полностью со страницы, на которой он находился.
Текст согласия при наведении?
Иногда условия отображаются не в новой вкладке, а в виде массивной всплывающей подсказки. Что думаете по этому поводу? Напишите в комментариях.
9. КНОПКА ПОДПИСКИ
Хорошо заметна
Сделайте кнопку подписки хорошо заметной, т.к. она отвечает за целевое действие в рамках формы.
Содержит аффорданс
Иными словами: выглядит, как кнопка. Это позволит легче понять, где ее кликабельная область, да и в целом сделает кнопку более заметной.
Текст – целевое действие
Текст кнопки должен отталкиваться от целевого действия, которое совершит клиент при клике по ней.
Текст релевантный
Текст должен соответствовать целевому действию. Если целевое действие – это подписка на рассылку, укажите это в кнопке. А вот такое исполнение может вызвать вопросы:
Текста не слишком много
Не добавляйте в кнопку много текста. Иначе он может начать выглядеть слишком скомканным, а кнопка станет визуально перегруженной.
Иконка вместо текста?
Иногда вместо текста в кнопку добавляют иконку письма. Как вам такое исполнение? Стоит взять на заметку или не однозначно? Напишите, пожалуйста, в комментариях.
Иконка в хорошем качестве
Если вы используете в кнопке иконку, убедитесь в том, что она загружена в хорошем качестве, не размывается и не пикселит.
Кнопка достаточно большая
Сделайте кнопку достаточно большой, чтобы на нее легко было нажать без риска промахнуться (особенно в мобильной версии).
Кнопка реагирует на наведение
Сделайте кнопку интерактивной, чтобы она реагировала на наведение и давала понять, что на нее можно нажать.
Кнопка реагирует на нажатие
Добавив реакцию кнопки на нажатие, мы делаем интерфейс более отзывчивым и приятным в использовании.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
10. ПОДТВЕРЖДЕНИЕ ПОДПИСКИ
Предусмотрено
Если подписка на рассылку прошла успешно, скажите об этом клиенту с помощью сообщения с подтверждением.
Только если валидация пройдена
Подтверждение должно отображаться, только если email прошел валидацию. В противном случае необходимо показывать сообщение об ошибке.
Без чрезмерной защиты от ботов
Защищаться от атак ботов никто не запрещает, но из-за этих мер не должны страдать ваши же клиенты, пытающиеся подписаться на рассылку.
Визуально привлекательно
Подтверждение можно сделать визуально привлекательным, тем самым подсвечивая позитивность факта подписки.
Highlight следующих шагов
Если после подписки от клиента потребуются дополнительные действия, подсветите их в подтверждении, чтобы лучше управлять его ожиданиями и повысить шансы активации.
Побуждение к активации подписки
Если от клиента требуется подтвердить email после заполнения формы, шансы на то, что он это сделает, можно повысить, упомянув о бонусах или подарках.
Подписка vs. регистрация
Подписываясь на рассылку, клиент ожидает, что произойдет именно подписка. Превращать это действие в процесс регистрации нового пользователя не стоит.
Цветовая гамма
Правильно выбирайте цвета для текста подтверждения. Так как это позитивная обратная связь, здесь лучше не использовать красный цвет (чаще ассоциируемый с ошибкой).
Не нужно закрывать
Спроектируйте подтверждение так, чтобы при успешной отправке данных клиенту не требовалось совершать никаких действий для его закрытия.
Деактивация поля ввода
При подтверждении подписки поле ввода должно по умолчанию деактивироваться. Нет никакого смысла в том, чтобы держать его активным после отправки данных.
TO BE CONTINUED...
Итак, в этой статье мы разобрали взаимодействие с формой подписки на email-рассылку. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce