Как улучшить формы обратной связи на сайте

Сделать минимум полей в форме для регистрации

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

Как же должна выглядеть форма регистрации? Примерно так:

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

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

Указать тип в полях ввода

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

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

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

Помните, формат данных должен упрощать ввод, а не усложнять его.

Предусмотреть доступность для всех пользователей

Доступность — то, про что чаще всего все забывают. Но давайте разберемся, что это и зачем она нужна. 

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

Приведу пример формы с плохой доступностью. Дизайнеры любят добавить «легкости» интерфейсу.

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

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

Адаптировать голосовых помощников для всех пользователей

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

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

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

Адаптировать сайт для смартфонов 

Согласно статистике от Broadband Search, больше половины трафика идет от пользователей мобильных телефонов. Поэтому адаптивность сайтов для мобильных телефонов — это уже не опциональная фишка, а обязанность!

Заполнение формы на мобильном телефоне зачастую задача не из простых. Формы на мобильных телефонах часто выглядят не самым лучшим образом, рассмотрим примеры:

1. Скрытая кнопка «Отправить».

Даже адаптивные под телефон формы могут выглядеть недоступно для пользователя. Обычно на смартфонах все пытаются скрыть полосу скролла, а на iPhone она скрыта по умолчанию, до тех пор пока пользователь не начнет скролить. Как пример — потерянная кнопка «Отправить», а, значит, пользователь снова не сможет получить услугу.

2. Отсутствие лоадеров, видимости процесса отправки формы, сообщения об успешной отправке.

Эта проблема особенно актуальна, когда у пользователь медленный интернет. Отправляешь форму и... ничего не происходит. Что сделает мотивированный пользователь? Нажмет еще раз. А потом еще. Что сделает немотивированный пользователь — уйдет с сайта.

3. Обрезка строки.

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

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

1. Меньше полей для заполнения, по крайней мере, обязательных.
2. Грамотная и лояльная валидация.
3. Не забываем про контрастность.
4. Проверяем форму на разных девайсах, разной ширины, качества дисплея.
5. Проверяем удобство заполнения с разных устройств ввода.

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

Фото на обложке: Rawpixel.com/shutterstock.com