Самые распространённые ошибки дизайна и способы их исправления. Перевод статьи от Эндрю Койла.
Будь то форма регистрации, многоуровневый пошаговый просмотр или монотонный интерфейс ввода данных, формы служат одним из наиболее важных компонентов цифрового дизайна. Эта статья описывает общие принципы и недостатки дизайна форм. Имейте в виду, что это общее руководство и на каждое правило есть исключение.
Формы должны идти столбцом
Несколько столбцов нарушают вертикальный импульс пользователя.
Заголовки — строго сверху
Пользователи заполняют маркированные по верху формы с гораздо большей скоростью, чем по левому краю. Верхние выровненные надписи так же хорошо переносятся на мобильном устройстве .
Группируйте заголовки с полями ввода
Поставьте заголовок и поле ближе друг к другу и убедитесь, что между полями достаточно высоты, чтобы пользователь не запутался.
Долой CapsLock
Текст, написанный только заглавными буквами, сложнее считывается и воспринимается.
Покажите все варианты, если их меньше шести
Размещение вариантов в раскрывающемся списке требует двух кликов мыши и скрывает варианты. Используйте селектор, если вариантов больше пяти. Включите контекстный поиск в раскрывающемся списке, если вариантов больше 25.
Не используйте текст-заполнитель в качестве заголовка
Заманчиво оптимизировать пространство, используя в качестве меток текст-заполнитель. Это вызывает много проблем с UX, которые обобщила Кэти Шервин из Nielsen Norman Group.
Ставьте флажки друг над другом
Никакого дополнительного текста, так просто легче искать.
Делайте кнопки описательными
Призыв к действию должен излагать намерение.
Указывайте на ошибки
Покажите пользователю, где произошла ошибка, и укажите причину.
Используйте встроенную проверку после того, как пользователь заполняет поле
Не используйте встроенную проверку, пока пользователь печатает, если это не помогает ему, как в случае создания пароля, имени пользователя или сообщения с количеством символов.
Не скрывайте основной вспомогательный текст
Выставляйте основной вспомогательный текст везде, где это возможно. Для сложного вспомогательного текста рассмотрите возможность размещения его рядом со вводом во время выделенного состояния.
Отделяйте первичное действие от вторичного
Существует большая философская дискуссия о том, следует ли вообще включать вторичный вариант.
Используйте длину поля как ориентир
Длина поля задаёт длину ответа. Используйте это для полей с определённым количеством символов, таких как номера телефонов или почтовые индексы.
Забудьте про «*» и обозначьте необязательные поля
Пользователи не всегда понимают, что подразумевается под обязательным маркером поля «*». Вместо этого лучше обозначить необязательные поля.
Группируйте информацию
Длинные формы подавляют. Если есть логические группы, пользователь будет быстрее понимать смысл формы.
Зачем
Всегда спрашивайте себя «зачем», при создании какого-либо элемента. Возможно, есть более подходящие и эффективные способы собрать или дать информацию.
У меня, кстати, есть Telegram-канал, где я регулярно выкладываю другие переводы статей, интервью с дизайнерами и полезные инструменты для работы.
Как же меня раздражают дизайнеры, которые подгоняют контент-заглушку под свой макет, чтобы было красивенько. Lion, Tiger, Bear, Bull, Serval? Енотовидная собака, Морская свинка, Гималайский медведь, Африканский слон, Американская короткохвостая бурозубка. На 10 языках.
Статье 5 лет скоро будет, её перевели все кому не лень.
а люди все делают все те же ошибки...
На мой взгляд, сначала надо подумать, а что если сегодня опций будет 6, а завтра заказчик захочет добавить еще несколько. Стопудово поламаеться вёрстка, хорошо если не затронит другие елементы.
Где-то читал, что если вариантов выбора больше 2-х, тогда лучше использовать селект, иначе - радиобатОны.
"Забудьте про «*» и обозначьте необязательные поля
Пользователи не всегда понимают, что подразумевается под обязательным маркером поля «*». Вместо этого лучше обозначить необязательные поля."
Те же Nielsen Norman Group говорят о том, что хорошо бы маркировать и обязательные и не обязательные поля
Я бы добавил в заголовок - по субъектинвому мнению дизайнера.
В своих формах - Имя и фамилию ставлю в 2 колонки в ряд.
Если в форме много полей, то прокручивать ее удовольствия не доставляет.
Названия полей над ячейкой убрал > уменьшил высоту всей формы.
В ячейке сразу обозначил, что надо указать.
Имя - как к вам обращаться.
И далее в таком духе...
Странная статья, чесслово
Сейчас никто простыню из формы не делает (по рамеру)
ваще к форме должен быть комплексный подход. некоторые поля бывают не нужны. (например если заявку на кредит отправлять, добавить кнопку прохода через госуслуги, тогда форма не нужна или поле индекс можно даже из номера получить). Пароли, вроде проще выслать пароль на почту или вовсе как озон вход по смс (мне удобно) чем проще сделаете тем лучше. Но и переусердствовать тоже не стоит, у меня батя может сам себе винду переустановить, разобрать комп и намазать пасту тонким слоем. При этом он у меня спросил "Где описание у ролика на YouTube :D"