Создание эффективных форм для сайта

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

Компоненты форм

Типичная форма имеет следующие четыре компонента:

Контейнер формы

Он обеспечивает упорядочение полей, компоновку элементов на странице и логические соединения между несколькими полями.

Поля ввода

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

Метки

Обычно указываются над полями и сообщают пользователям, что означают соответствующие поля ввода.

Кнопки действий

Когда пользователь нажимает кнопку, выполняется действие (например, отправка данных на сервер).

Формы также могут иметь следующие компоненты:

Подсказки

Любые подсказки (всплывающие или текст), которые объясняют, как нужно правильно заполнить форму.

Проверка (валидация)

Автоматическая проверка, которая гарантирует, что данные пользователя действительны.

В этой статье рассматриваются многие аспекты, связанные со структурой, полями ввода, метками и кнопками действий.

Картинки по запросу формы для сайта

Поля ввода

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

Хотя такой пользовательский интерфейс может удовлетворять потребности маркетологов, он не удовлетворяет потребности пользователей и очевидно, что поля FirstName и LastName лучше объединить в одно поле.

Также для удобства мобильных пользователей желательно указывать тип поля. В HTML это реализуется указанием атрибута type для элемента <input>, что более подробно описано в статье Формы HTML5. Например, для ввода номера карты нужно использовать тип поля number вместо text, тогда мобильному пользователю будет высвечена клавиатура с цифрами вместо текста, что гораздо удобнее.

Используйте также текст заполнителя для полей. В HTML5 это реализуется с помощью атрибута placeholder для текстовых полей. Можно также использовать сторонние библиотеки для создания более сложных заполнителей. Это идеально подходит для наглядных подсказок в простых формах.

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

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

Для размещения опций в раскрывающемся списке необходимо два клика + список скрывает возможные параметры выбора. Используйте список только если имеется более 5 опций. Также включите контекстный поиск в раскрывающемся списке, если имеется более 25 опций, чтобы пользователю не пришлось много скроллить список в поисках нужного варианта.

Контейнер формы

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

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

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

Метки

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

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

Кнопки действий

При нажатии эти кнопки запускают действие, например, такое как отправка формы. Важно, чтобы между кнопками было визуальное различие. Отсутствие визуального различия между первичными и вторичными действиями может ухудшить поведенческие факторы. Классическим примером первичного действия является кнопка “Регистрация”, а вторичного – “Отмена”. Важно выделить кнопки первичного действия более ярким цветом.

Сообщения об ошибках

Давайте рассмотрим еще один аспект диалоговых форм — сообщения об ошибках, которые могут высвечиваться при проверке формы. Хорошие сообщения об ошибках могут помочь пользователям преодолеть трудные моменты и увеличить шансы пользователей на успешное заполнение формы. Сообщения об ошибках должны быть четкими, краткими и пояснительными. Вот несколько базовых принципов:

  • Используйте проверку в режиме реального времени с использованием Ajax-запросов без отправки формы на сервер. Например, если пользователь вводит логин в форме регистрации и нам нужно проверить его уникальность, вместо отправки формы нужно использовать асинхронный запрос.
  • Сделайте сообщения об ошибках хорошо видимыми и поместите их в непосредственной близости от поля с ошибкой. Сообщения об ошибках, которые появляются во всплывающих подсказках, не являются хорошим решением.
  • Используйте цвет для передачи значения — например, красный для ошибки, желтый для предупреждения.
  • Используйте встроенную проверку после заполнения пользователем поля (если это не помогает им во время процесса). Например, при валидации email-адреса не нужно подсвечивать ошибку, когда пользователь еще не ввел полностью данные (т.е. фокус находится еще в поле ввода). Обработайте событие blur (потеря фокуса) и запустите проверку достоверности.

В заключение

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

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

 

Больше:  Как настроить TortoiseSVN + Dropbox