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

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

Вот несколько практических советов, которые помогут вам создать идеальную форму.

 

1. Отображайте формы в одной колонке

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

0_NO7ztsurVPzLyI7J

2. Минимизируйте количество полей ввода

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

0_VGbQktdGJb0Yw9NB

0_jT_My1jop4meRPTY

3. Подгоните поля под размер ввода

Согласно юзабилити исследованию, проведенному Институтом Баймарда, если поле слишком короткое или слишком длинное, пользователь начинает задумываться о том, правильно ли он понял его название. Особенно это касается полей с техническими, или необычными названиями, вроде CVV (проверочный номер карты). Для достижения хорошего юзабилити, нужно подогнать ширину поля под размер ожидаемого ввода.

0_3xUwuTl09FcLPF0F

4. Стройте форму в логическом порядке, и спрашивайте только о необходимом

Форма — это канал связи с пользователем. Как и любой диалог, она должна выстраиваться логически. Следовательно, мы предлагаем сделать следующее:

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

Перевод статьи Винсента Ся