Правила создания качественных форм

Самые распространённые ошибки дизайна и способы их исправления. Перевод статьи от Эндрю Койла.

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

Несколько столбцов нарушают вертикальный импульс пользователя.

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

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

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

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

Заманчиво оптимизировать пространство, используя в качестве меток текст-заполнитель. Это вызывает много проблем с UX, которые обобщила Кэти Шервин из Nielsen Norman Group.

Никакого дополнительного текста, так просто легче искать.

Призыв к действию должен излагать намерение.

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

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

Выставляйте основной вспомогательный текст везде, где это возможно. Для сложного вспомогательного текста рассмотрите возможность размещения его рядом со вводом во время выделенного состояния.

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

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

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

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

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

У меня, кстати, есть Telegram-канал, где я регулярно выкладываю другие переводы статей, интервью с дизайнерами и полезные инструменты для работы.

#ux