Как улучшить дизайн форм захвата

Как исправить распространенные ошибки.

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

Форма в один столбец

Несколько колонок нарушают вертикальный режим.

Подписи сверху

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

Группируйте подписи с полями

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

Избегайте капса

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

Не используйте плейсхолдер как подпись

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

Располагайте чекбоксы и радиокнопки друг под другом

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

Понятный призыв к действию

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

Показывайте сообщения об ошибках

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

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

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

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

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

Длина поля как индикатор

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

Откажитесь от * и помечайте необязательные поля

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

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

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

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

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

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

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

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

Оригинал статьи: Design Better Forms
Статью перевел: Workafrolic