Создавайте лучшие веб-формы

Стандартные ошибки, которые допускают дизайнеры, и как их исправить

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

Формы должны быть в одну колонку

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

Расположите метки сверху

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

Группируйте метки с соответствующими полями

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

Не печатайте заглавными

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

Показывайте все варианты выбора, если их меньше шести

Используйте выпадающий список только, если у вас больше пяти вариантов. Реализуйте внутренний поиск по выпадающему списку, если у вас больше 25 вариантов.

Избегайте использования атрибута placeholder вместо метки

Не используйте атрибут placeholder вместо меток. Это снижает уровень UX веб-формы.

Размещайте флажки и переключатели друг под другом

Размещение флажков друг под другом улучшает читабельность.

Делайте элементы призыва к действию понятными

CTA-элемент должен говорить сам за себя.

Указывайте ошибки в той же строке

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

Используйте построчную валидацию только после того, как пользователь заполнит поле

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

Не скрывайте основные подсказки

Показывайте главные подсказки, где это возможно. Подумайте над размещением сложных подсказок рядом с полем, когда оно находится в фокусе.

Разделяйте основные и второстепенные действия

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

Используйте длину поля как подсказку

Длина поля подразумевает длину ответа. Используйте это для полей, имеющих определённую длину. Например,для номера телефонов, индексы и т.п.

Избавьтесь от звёздочек и обозначьте необязательные поля

Пользователи не всегда знают, что означает символ обязательного поля (*). Вместо этого лучше обозначить необязательные поля.

Группируйте связанную информацию

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

Зачем спрашивать?

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

Ввод данных постоянно автоматизируется. Например, мобильные устройства собирают большие объёмы данных, о чём их пользователи даже не подозревают. Подумайте о других способах, с помощью которых можно добыть информацию: социальные сети, диалоговый пользовательский интерфейс, SMS, e-mail, телефонные звонки, системы распознавания текста, местоположения пользователя и т.п.

Сделайте это веселым

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

Вадим Дворниковавтор-переводчик статьи «30. Design Better Forms»