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

61

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

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

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

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

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

Поля ввода

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

Метки

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

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

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

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

Подсказки

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

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

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

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

Поля ввода

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

Например, следующая форма заказа пиццы запрашивает имя и фамилию пользователя в отдельных полях:

Форма с несколькими полями

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

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

Указание типа поля для мобильной формы

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

Использование placeholder в форме

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

Использование заполнителя с плавающей меткой

Для стилизации базового элемента placeholder можно также использовать следующие CSS3 псевдокласы:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: lime;
}

:-ms-input-placeholder { /* IE 10+ */
  color: lime;
}

::-moz-placeholder { /* Firefox 19+ */
  color: lime;
}

:-moz-placeholder { /* Firefox 18- */
  color: lime;
}

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

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

Варианты выбора в одном поле формы

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

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

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

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

Группировка полей в форме

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

Сравнение формы с одним столбцом и несколькими

Метки

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

Использование меток в форме

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

Правильные отступы для меток в форме

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

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

Выделение кнопок действий в форме

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

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

В заключение

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

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

Пройди тесты
Лучший чат для C# программистов