Создание хороших форм

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

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

Формы должны быть одноколоночными

Многоколоночность нарушает вертикальную направленность взгляда пользователя.

Выравнивайте названия полей по верху

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

Расположение названий с полями ввода

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

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

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

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

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

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

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

Размещайте чекбоксы друг под другом для лучшего восприятия

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

Сделайте кнопки «призыв к действию» информативными

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

Указывайте ошибки в соответствующей строке

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

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

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

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

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

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

Стоит ли вообще включать вторичные действия — тема большой философской дискуссии.

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

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

Пометьте * и обозначьте необязательные для заполнения поля

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

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

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

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

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

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

Сделайте процесс веселым

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