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

 

Форма должна состоять из одной колонки

Несколько колонок нарушают вертикальную динамику пользователя
Несколько колонок нарушают вертикальную динамику пользователя

Надписи нужно располагать над полями ввода

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

Сгруппируйте названия полей с самими полями ввода

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

Не вводите названия полей заглавными буквами

Слова, написанные заглавными буквами сложно читать и просматривать
Слова, написанные заглавными буквами сложно читать и просматривать

 

Если опций меньше шести — отобразите их все

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

По возможности не применяйте текст-заполнитель

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

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

1-VLqTEZP8OrH24FooksePbQ

Сделайте СТА описательными

1-VzlN4tj2hQRUel2iNzM9dw
Все СТА должны выражать намерение

Укажите причину ошибок

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

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

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

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

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

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

1-STZ7rbj0wO5u2sn0bsR-KQ

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

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

Вместо * используйте словесное обозначение необязательных полей

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

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

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

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

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

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

 

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

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

Перевод статьи Эндрю Койла