Сделать просто — основы юзабилити форм на сайте

Опубликовано 19.01.2017 · в Юзабилити

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

Чаще всего, конверсия сайта заключается в заполнении формы-оформление заказа, обратный звонок, подписка и т.д. Удобное и комфортное заполнение формы при этом увеличивает конверсию, а неэффективная может привести к отказу от покупки, регистрации и т.п.

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

  1. Форма содержит множество полей для заполнения
  2. Человек не смог разобраться с видом вводимых данных
  3. А может, запутался в непривычных на вид кнопках и многочисленных всплывающих подсказках?
  4. Не хотел бы оставлять личные данные?

Так как же сделать так, чтобы форма помогала пользователю, упрощала нужную операцию, а не стопорила процесс?

В сегодняшней статье мы предоставим 11 основных советов по юзабилити форм на сайте, которые применимы ко всем видам форм.

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

1. Нет кнопке «Отправить»
Никогда не нужно использовать текст «Отправить» на кнопке формы. Создавайте такие интуитивно понятные призывы к действию, как «Зарегистрироваться», «Оформить заказ», «Купить». Все должно происходить ожидаемо, в ответ на нажатие кнопки.

nekonversionnaia knopka
2. «Укажите, где я?»
Выделяйте поля, которые заполняет пользователь. При заполнении формы пользователь должен видеть, в каком поле он находится, поэтому визуально выделяйте поле, которое заполняет пользователь.

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

malenkoe_pole
4. Выводите подсказки, устраняйте «непонятности».
Объясните все требования к вводимым данным или их формату. Если поле требует определенного формата или типа данных, укажите точные инструкции.

podskazka

5. Очень много проверки
Откажитесь от использования капчи при отправке формы. Если это требование очень важно — поставьте графическую капчу-слайдер, она не нагружает пользователя.

captcha_slojno

Сложная captcha

 

 

udobno

Простая защита от спама

 

 

 

 

 

6. Пароль, еще пароль.
Не просите пользователей дважды вводить пароль, вместо этого лучше сделать возможным «Показать пароль» (checkbox или ссылкой),к нему пользователь обратится, если сомневается.

password udobnii_password

7. Javascript, помоги!
Необходимо сделать проверку данных, вводимых в поле, на стороне пользователя в процессе заполнения с помощью Javascript при потере фокуса, чтобы пользователь сразу же видел поля, в которых были допущены ошибки. Также рекомендуется визуально выделять эти поля.
Частой ошибкой является вывод информации об ошибочном заполнении формы над самой формой-порой пользователи ее просто не видят и не понимают, в чем ошибка.

proverka_javascript
8. Смягчите ограничения.
Если вам необходимо ограничить формат вводимых данных, например, создать поле с вводом даты, то это лучше сделать с помощь выпадающего списка или календаря, а не простого текстового поля ДД/ММ/ГГ. В таком случае пользователь будет совершать меньше действий при заполнении.

calendar

9. Используйте HTML-атрибут tabindex.
Возможность переключаться между полями веб-формы с помощью клавиши Tab – это большой плюс, ведь пользователь может заполнять ячейки без использования мыши. Следует уделить особое внимание этому пункту при проектировании интернет-магазинов.
10. Автозаполнение полей.
При включенном автозаполнении браузер предложит пользователю подставить в поле те данные, которые ранее уже вводились. Эта возможность удобна, однако для полей, куда вводятся секретные данные, функцию автозаполнения следует отключить.
Если пользователь уже авторизован на сайте, необходимо сделать автозаполнение полей данными из аккаунта.

checkout

 

11. Уменьшите необоснованно большое количество визуальных фиксаций.
Если текст расположен слева или справа от полей формы, пользователь потратит больше времени на ее заполнение. Это связано с особенностями восприятия: чтобы внести нужные сведения, человек совершает больше визуальных фиксаций.

left
Когда текст расположен над полями формы, пользователь воспринимает поле и текст единым целым.

up

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

Также рекомендуем ознакомиться с чеклистом проверки юзабилити вашего сайта.