Руководство по созданию идеальной формы с точки зрения UI и UX дизайна - Продуктовый дизайн (UX/UI), брендинг и аналитика

Вы читаете перевод статьи Эндрю Койла “Design Better Forms”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

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

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

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

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

Разместите лейблы (названия полей) сверху

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

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

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

Не пишите большими буквами

Слова, написанные всеми прописными (или, проще говоря, “капсом”), сложнее читать и сканировать.

Если опций менее 6, отобразите их все сразу

Когда опции находятся в выпадающем списке, они спрятаны, и пользователь должен кликнуть дважды, чтобы сделать свой выбор. Пользуйтесь выпадающим списком если опций более пяти. А если в списке более 25 опций — обеспечьте возможность контекстуального поиска.

Постарайтесь не использовать в качестве лейбла текст плейсхолдера (заглушки)

Очень заманчиво сэкономить место за счет использования плейсхолдера (заглушки) поля в качестве лейбла. Это приводит к разным проблемам с юзабилити, которые подробно описала Кэти Шервин из Nielsen Norman Group.

Размещайте чекбоксы и радио-кнопки друг под другом — так их проще сканировать

Если чекбоксы выстроены в столбик, их гораздо проще сканировать.

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

Призыв к действию (call to action) должен отражать намерение пользователя.

Обратите внимание пользователя на строки с ошибками

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

Обратите внимание пользователя на строки с ошибками

Не комментируйте правильность заполнения, пока пользователь не закончил (за исключением случаев, когда это облегчает процесс заполнения)

Не стоит сигнализировать о правильности заполнения поля, пока пользователь не закончил, если только это не помогает процессу — как, например, при создании имени пользователя, пароля или при вводе фиксированного количества символов.

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

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

Отделите основные действия от второстепенных

Ведутся активные философские рассуждения на тему “а включать ли вообще второстепенные действия в форму?”

Пусть длина поля служит подсказкой

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

Избавьтесь от * и скажите обо всех необязательных полях словами

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

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

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

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

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

Добавьте веселья

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