Для того, чтобы зарегистрировать нового пользователя, продать продукт или услугу или просто инициировать диалог с клиентом, необходимо, чтобы человек заполнил форму. В статье представлены практические советы по созданию идеальной формы с учетом требований UI и UX дизайна.
В UI (пользовательский интерфейс) дизайне делается акцент на всех частях формы, с которой взаимодействует пользователь. Важно насколько четкие ваши рисунки, насколько читаемый текст и список формы, насколько легко нажать на кнопку отправки.
В UX (пользовательский опыт) дизайне ориентируются на менее заметные аспекты формы, например, насколько легко пробежать по форме взглядом, насколько очевидно, что делать дальше, и насколько хорошо форма работает на мобильных устройствах. На более глубоком уровне в UX дизайне ориентируются на весь опыт взаимодействия клиента с бизнесом. Например, если вы публикуете номер телефона для обслуживания клиентов, хороший UX дизайн технически заключается даже в таких нюансах, как качество работы вашей телефонной системы.
Следует иметь в виду, что, хотя все предложения в этой статье являются общими рекомендациями, из каждого правила есть исключения.
Содержание
Основные рекомендации по созданию форм с точки зрения UI и UX дизайна
Давайте рассмотрим основные требования UI + UX дизайна, которые эксперты выделяют как крайне важные для качественных форм. Изображения форм и советы «как надо и как не надо делать» из этого раздела, предоставлены Andrew Coyle.
Сделайте форму в одну колонку
Форма должна иметь одну колонку, так как несколько колонок могут нарушить вертикальное восприятие пользователя.
Выравнивание меток по верхнему краю
Пользователи заполняют формы с названиями строк сверху гораздо быстрее, чем формы, в которых названия находятся слева. Выравнивание по верхнему краю также хорошо выглядит на мобильных устройствах. Однако рассмотрите возможность использования выровненных по левому краю меток в случае больших записей, наборов данных с переменными опциями, потому что их легче воспринимать комплексно, такое расположение уменьшает высоту формы, метки привлекают к себе больше внимания, чем при выравнивании по верхнему краю.
Группируйте метки и поля для их ввода
Поставьте метку и поле для ее ввода близко друг к другу и убедитесь, что между полями достаточно пустого места, чтобы пользователи не путались.
Избегайте использования «caps lock»
Текст, написанный заглавными буквами («caps lock»), сложнее читать и бегло просматривать.
Показывайте все варианты выбора, если их не больше шести
Выбор опций из раскрывающегося списка требует двух кликов вместо одного и скрывает параметры. Используйте селектор ввода, если у вас более 5 параметров. Включите контекстный поиск в раскрывающемся списке, если у вас более 25 опций.
Избегайте использования текста заполнителя в качестве меток
Идея оптимизировать пространство, используя текст заполнителя в качестве меток, заманчива. Но это вызывает множество проблем в плане удобства использования.
Разместите кнопки-флажки (и радиокнопки) друг под другом, чтобы пользователи не путались
Размещение кнопок-флажков одного под другим позволяет легко в них разобраться.
Сделайте описания с призывами к действию
В призыве к действию необходимо указать цель.
Указывайте ошибки ввода
Укажите пользователю на ошибку и поясните ее причину.
Не скрывайте основной вспомогательный текст
Оставляйте на виду базовый вспомогательный текст везде, где это возможно. Для сложного вспомогательного текста есть вариант размещения его рядом с полем ввода, когда оно активно.
Разделяйте первичные и вторичные действия
Существует глобальная философская дискуссия о том, следует ли включать вторичные опции вообще.
Используйте длину поля ввода, чтобы показать параметры вводимых данных
Длина поля показывает длину ответа. Используйте это для полей, которые имеют определенное количество символов, таких как номера телефонов, почтовые индексы и т.д.
Группируйте информацию
Пользователям проще думать кластерно, а длинные формы могут приводить их в уныние. Создавая логические группы параметров для ввода, вы даете пользователю возможность лучше понять форму.
