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

Формы должны быть в виде одной колонки

Множество колонок являются сложными для восприятия
Множество колонок являются сложными для восприятия

Надписи сверху

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

Группируйте надписи со строками ввода

1-obwyjb54NCWy3sOPfm2WEg
Презентуйте надпись ближе к строке ввода данных и оставьте достаточно места между полями для удобства пользователя.

Избегайте заглавных букв

1-w6nZOf5pZSha6FoWu3YtRw
Используя только заглавные буквы в надписях, вы усложняете читабельность формы

Отображайте все поля выбора, если их меньше 5ти

1-LJ0JHTq5_k1u23Fl9XTNmA
Использование поля выбора в “выпадающем окне”, требует от пользователя кликать дважды. Используйте обычный ввод для элементов более 5ти. Выпадающий список лучше использовать при наличии более 25ти элементов.

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

1-XvUnJwHtQhJ3Wl8Apj9lhQ
Частая ошибка связанная с экономией места в использовании заголовков в плейсхолдерах. Это служит причиной проблем юзабилити описанных Кэти Шервин из Nielsen Norman Group.

Размещайте чекбоксы (radio buttons) напротив выбора

1-VLqTEZP8OrH24FooksePbQ
Размещая чекбоксы напротив элементов выбора упрощает читабельность

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

1-x5Pd-IP-Z4Mf5TqZnJU2Yw
Призыв к действию должен показывать намерение.

Уточняйте причину ошибки ввода

1-xEJu91MpUlUblEfGbIQVhw
Укажите, где пользователь ошибся и покажите причину

Используйте валидационное сообщение после заполнения поля (если только это не поможет пользователю в процессе)

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

Не прячьте короткий вспомогательный текст

1-BA2sPvjZq7a9BlbNFcqslg
Используйте короткий вспомогательный текст, где это уместно. Для более длинного текста продумайте место рядом с местом ввода, чтобы не отвлекать пользователя.

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

1-PvvS04bY3ryTNFDirjPbdA
Ведется множество споров о том, включать ли вообще второстепенные действия.

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

1-3rOjyzcj68Dm7badROWuxg
Длина поля должна меняться по мере заполнения. Возьмите это на вооружение при создание полей с определенным количеством символов, таких как номер телефона, почтовый индекс, и т. д.

Отбросьте идею использовать * и просто укажите необязательные поля

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

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

1-nmeMIuW7csU9uVTB9BIBTg
Пользователи мыслят обобщенными понятиями и длинные формы выглядят перегружено. Форма с логическими группами полей будет заполнена быстрее.

В чем вопрос?

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

Ввод данных постоянно автоматизируется. Например, мобильные и другие “карманные” устройства собираю массу данных без ведома пользователей. Подумайте о методах использования социальных, интерактивных UI, СМС, имейл, голоса,  оптического распознавания символов, локации, отпечатков пальцев, биометрии, и т. д.

Сделайте это интересным.

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