Юзабилити форм для сайта
При планировании дизайна сайта в первую очередь внимание уделяется общему виду страницы, удобству навигации и красивым изображениям. Но есть одна деталь, которая может не сразу прийти на ум, хотя необходима для положительного пользовательского опыта. Эта деталь – формы для сайта.
Дело в том, что пользователи неохотно заполняют формы, поэтому сделайте этот процесс максимально простым. Даже небольшие изменения значительно повышают удобство использования и, как следствие, увеличивают конверсию на сайте.
Этот аспект пользовательского опыта сильно недооценен, хотя веб-формы – это важная часть онлайн-взаимодействия. Почти каждый человек раз в неделю заполняет какие-либо данные на сайте, поэтому оптимизированные формы могут стать решающим фактором для привлечения новых клиентов.
В этой статье мы представим основные рекомендации, которые помогут улучшить формы для сайта и повысить лояльность посетителей.
Ясность дизайна
Чем больше декоративных элементов, полей, цветов и разных шрифтов используется в форме, тем сложнее в ней ориентироваться. Поэтому для формы используйте только фирменные цвета: они повысят уровень доверия и вовлеченность посетителей. Шрифты должны быть простыми, чтобы пользователи могли легко читать сообщения. Саму форму делайте неширокой, чтобы на мобильных телефонах она смотрелась хорошо.
Только необходимые поля
Заполнение большого количество полей утомительно, тем не менее, некоторые формы запрашивают слишком много данных и в итоге теряют клиентов. Посмотрите на это с точки зрения пользователя: разглашение слишком большого количества информации о себе кажется рискованным. Для увеличения конверсий оставьте только необходимые поля: зачастую хватает только ввода имени и электронного адреса.
Выделение активного поля
Как только пользователь зашел на страницу, к примеру, авторизации, первое необходимое для заполнения поле должно быть активным и выделенным. Во-первых, это поможет посетителю сориентироваться, во-вторых, избавит его от лишних действий.
Маркировка полей ввода
Связанные между собой элементы должны располагаться близко друг к другу, чтобы пользователь без труда понимал, какое поле он заполняет и на какую кнопку нажимает. При этом метки все же должны располагаться за пределами полей, иначе есть возможность, что пользователь потеряет контекст при вводе данных.
Яркая кнопка призыва к действию
Большие и яркие кнопки призыва к действию более заметны и, соответственно, не дают пользователям уйти, не отправив форму, а понятная и краткая надпись типа “Отправить” или “Зарегистрироваться” даст понять, что нужно сделать.
Только необходимые проверки
Валидация при заполнении полей – это важная часть использования форм, но слишком большое их количество разочаровывает пользователей. Если на каждом этапе ввода данных возникает ошибка, посетитель в конечном итоге просто откажется от заполнения. Для каждого поля должна существовать лишь одна проверка, а сообщение об ошибке – располагаться рядом с полем и содержать предельно ясное сообщение, чтобы действия для устранения ошибки были понятными пользователю.
Маски ввода
Чтобы уменьшить количество проверок, можно использовать маски ввода: таким образом, введенные данные сразу же будут форматироваться в нужный вид, и пользователям не придется думать, как записать номер телефона или дату рождения.
Краткие и четкие вопросы
Слишком длинные и запутанные формулировки пугают и оставляют ощущение, что заполнение займет много времени. Помимо краткости формулируйте вопросы непредвзято: подталкивая пользователей к определенным ответам, вы искажаете результаты. Неправильная информация в итоге приведет к неверным выводам.
Удобство для пользователей смартфонов
Большинство сайтов посещается с мобильных устройств, значит, в первую очередь формы должны быть адаптированы для них. Вот несколько советов для этого:
- Делайте макет формы шириной в один столбец;
- Маркируйте обязательные для заполнения поля;
- Добавьте опцию “показать пароль”;
- Пишите коротко и понятно;
- Выводите сообщение об ошибке в той же строке, что и поле;
- В конце добавьте большую кнопку призыва к действию.
Избегайте раскрывающихся списков
Для выбора нужного варианта из раскрывающегося списка пользователю приходится делать клик два раза. В отличие от этого флажки и радиобаттоны позволяют сделать выбор в одно нажатие, что сокращает время на заполнение.
Сообщение с благодарностью
Многим разработчикам такое сообщение кажется излишним, и они не утруждают себя добавлением его в формы. Тем не менее, сообщение с благодарностью не просто показывает, что форма была заполнена верно и успешно отправлена, но и дарит пользователю приятное впечатление от взаимодействия с сайтом.
Заключение
Итак, как мы уже поняли, для улучшения пользовательского опыта, повышения конверсии и заинтересованности в продукте, необходимо создать хорошие условия взаимодействия посетителей с сайтом и его формами. Небольшие изменения для удобства несут в себе огромный потенциал для получения данных от клиентов, оставления ими заявок, регистраций и оплаты.
