Новости / Оптимизация лид-форм для лендингов и интернет-магазинов: дизайн и юзабилити

Оптимизация лид-форм для лендингов и интернет-магазинов: дизайн и юзабилити

16.092015
1358
Оптимизация лид-форм для лендингов и интернет-магазинов: дизайн и юзабилити

Оптимизация лид-форм для лендингов и интернет-магазинов: дизайн и юзабилити

Дизайн форм и копирайтинг

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



Элементы форм

  • высота поля для заполнения должна быть не менее 30px или 35px для мобильных устройств
  • рекомендуемый текст на кнопке  CTA - глагол в неопределенной форме с обращением к действию: в форме авторизации “ВОЙТИ”, в форме оформления корзины товаров - “ЗАКАЗАТЬ СЕЙЧАС”, “ПОЛУЧИТЬ ПОДАРОК”
  • в поле, где нужно ввести номер телефона, есть маска ввода номера
  • располагайте поля в таком порядке, чтобы для их заполнения не приходилось переключать раскладку клавиатуры более одного раза
  • по статистике, форма с одним полем заполняют 16%, с 2 и 3 полями - 14%, 4 и более полей - те же 14%. Старайтесь делать как можно меньше обязательных полей, но универсального рецепта нет - все зависит от сферы и особенностей интернет-магазина. Например, если у вас идет автокалькуляция доставки товара в зависимости от города или района, дополнительные уточняющие поля будут уместны. Однако их лучше разделить на модули, которые будут активны только при необходимости, как это сделано, например, на готовом интернет-магазине shop.a25.me
  • не рекомендуется добавлять отдельное поле с для скидочного промо-кода, потому что до 93% покупателей  уходят гуглить промокод и оставляют брошенные корзины, не вернувшись. Рекомендуется добавить вопрос или утверждение с активной ссылкой (У меня есть промокод)

 

 

Функционал форм заказа и проверка ошибок при заполнении

  • проверка правильности заполнения всех полей осуществляется только после завершения заполнения поля
  • сообщения об ошибке содержат инструкцию по исправлению
  • кнопка CTA-формы не активна до момента корректного заполнения всех обязательных полей
  • при нажатии неактивной кнопки фокус (и курсор) возвращается к первому полю, требующего исправления
  • после нажатия кнопка CTA становится неактивной - во избежание дублирования заявок
  • после корректного отправления заявки обязательно поблагодарите заполнившего форму и сообщите на активной странице, что заявка успешно отправлена или заказ принят в работу
  • сообщите обратную связь о том, когда пользователи смогут получить ответ на свою заявку: конкретное время ответа мотивирует заполнить все поля и предоставить максимально подробную информацию
  • ограничение типа вводимой информации (для e-mail, номера телефона, индекса)
  • форма “запоминает” введенные данные в случае ошибки, перезагрузки или случайного закрытия страницы
  • все поля для ввода секретных данных (пароль, код безопасности, CVV и др.), с помощью звездочек скрывают вводимую информацию







лид-форма дизайн



Навигация между элементами формы

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

Дополнительные элементы

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

Санкт-Петербург Новорощинская ул., д.4, оф. 1415-1 БЦ "Собрание",
ст. метро Электросила

Москва Волоколамское шоссе, д.1, оф. 016 БЦ "Проектный институт",
ст. метро Сокол

+7(812)603-48-25 +7(495)627-75-85
Наверх

Форма заказа