Рекомендации по интерфейсу форм

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

Основные рекомендации и ввод данных

• Стремитесь к краткости.
• Убедитесь, что в форме используется один язык (обороты, термины).
• Если на странице находится только форма и ничего кроме нее, то при загрузке страницы стоит ставить фокус на первое поле формы, это позволит сэкономить немного времени (страница поиска, входа, регистрации).
• Поддерживайте ясный путь заполнения формы.
• Избегайте вторичных действий, если это возможно.
• В противном случае четко разделяйте основное и дополнительные действия.
• Выравнивайте основное действие так же как и поля формы, это упрощает восприятие формы.
• Цветная подложка у главной кнопки сделает её более видимой.
• Отключайте кнопку «Отправить» после того как пользователь на нее нажал, это позволит избежать двойной отправки данных.
• Еще лучше — показывайте индикатор отправки.

Группировка, табы и многостраничные формы

• Размещайте похожие поля рядом.
• Группируйте поля так, чтобы пользователю приходилось переключать раскладку поменьше.
• Используйте подходящую группировку полей для организации содержимого формы.
• Используйте минимальное количество визуальных элементов, необходимые для выделения формы.
• Если форму можно легко разбить на несколько коротких форм, то используйте одну страницу для нее.
• Если форма содержит большое число вопросов, связанных с несколькими темами – используете несколько страниц.
• Если форма содержит большое число вопросов по одной теме – используйте длинную страницу.
• Для мастеров обеспечьте возможность возврата к предыдущим шагам.
• В мастерах избегайте вложенных шагов, делайте их последовательными.

Поля

• Оцените целесообразность наличия каждого поля.
• Ищите возможности для удаления ненужных полей.
• Не усложняйте одни поля для того чтобы удалить другие.
• Если возможно ввести данные больше чем одним способом — используйте гибкий ввод, например, при вводе номера телефона.
• Обеспечение гибкого ввода не делает заполнение простых полей труднее.
• Используйте маски ввода для ввода конкретных данных, например дат.
• Маски ввода могут сократить время заполнения поля, т.к. некоторые символы уже будут введены.
• Если ожидаются только символы определенного типа, то убедитесь что пользователь знает об этом.
• Если вводится не тот символ — заметно, но не навязчиво уведомите пользователя.
• Убедитесь, что значения по умолчанию соответствуют целям пользователя.
• Персонализированные значения по умолчанию позволяют вернувшимся пользователям быстрее заполнить форму, например запоминайте имейл в форме ввода комментария.
• Помните про заполнение формы с помощью клавиатуры и tab.
• Используйте tabindex для контроля работы tab.
• Обеспечьте логичный порядок заполнения полей при проектировании форм.
• Если формой будут пользоваться для управления большим количеством данных, то у полей необходимо отключить автозаполнение, иначе со временем так будут хранится все возможные значения.
• Поля недоступные для редактирования и их поля должны выглядеть соответствующим образом.

Подписи

• Подпись к полю следует располагать слева от поля, либо сверху (что предпочтительнее), т.к.:
  
  • Подпись может быть достаточно длинной, и если она не помещалась в одну строчку находясь слева, то сверху может поместиться.
  • Хорошо для интернационализации, на другом языке подпись может быть длиннее, и не сможет поместиться слева.
  • Справа появляется пустое место, которое хорошо подходит для пояснений или для валидации.
  
  
• Избегайте многострочных подписей к полям.
• Подписи должны четко отражать ожидаемые данные.
• Старайтесь не помещать на форму необязательные поля, может их вообще не стоит заполнять пользователю.
• Если большинство полей обязательны для заполнения — выделите необязательные.
• Если большинство полей необязательные — выделите обязательные.
• Лучше выделять обязательные поля текстом, но * или выделение шрифтом/цветом тоже подойдет.
• Название формы должно соответствовать задачам формы.
• Сведите к минимуму подсказки и советы необходимые для заполнения формы.
• Помощь должна быть контекстной – находится возле нужного поля и быть полезной.
• Когда запрашиваете много незнакомых для пользователя данных — используйте динамическую систему помощи, всплывающие подсказки, например.
• Используйте выравнивание и объединение в группы для показа того, как связаны между собой данные.

Рекомендации по валидации и подсказкам

• Выделяйте возникшее ошибки — показывайте их перед формой и у каждого поля.
• Обеспечьте действенные способы исправления ошибок.
• Сообщения о возникших ошибках дублируйте визуально.
• Обеспечьте четкое понимание того, что данные были отправлены корректно.
• Используйте мгновенную валидацию для полей с потенциально высоким процентом ошибок.
• Сообщайте ограничения для полей.
• Если возможно, то не ограничивайте длину поля.
• Иначе убедитесь, что данные помещаются в поле.

Рекомендации по чекбоксам и радио-кнопкам

• Флажок и радио-кнопка всегда располагаются слева от подписи.
• Кастомный дизайн элементов должен быть максимально близок к стандартному представлению.
• Располагайте списки вертикально, с одним вариантом на строке.
• Если несколько флажков или радио-кнопок расположено друг под другом, то между ними должно быть одинаковое расстояние.
• Если нужно использовать их горизонтально, с несколькими вариантами на строке, сделайте достаточно места между ними элементом и подписью, четко выделяя какая надпись куда относится. .
• Используйте позитивные формулировки для подписей чекбоксов, так, чтобы ясно понятно, что произойдет, когда пользователь выберет его.
• Пишете подписи так, чтобы пользователи могли понять, что будет если они его выберут, и что будет, если они оставят его пустым.
• Если вы не можете так сделать, то лучше сделать две радио кнопки, одну для включения возможности, а вторую — для отключения, и написать ясные подписи для каждого случая.
• Если возможно, используйте радио кнопки вместо коротких выпадающих списков.
• Всегда ставьте вариант по умолчанию для всех списков радио кнопок.
• Так как радио кнопки позволяют выбрать только один вариант, убедитесь, что оба варианта не противоречат друг другу, явно отличаются друг от друга.
• Убедитесь, что радио-кнопки полностью покрывают необходимую сферу данных, если нет, добавьте вариант «другое» и текстовое поле для ввода своего варианта. Это относится и к выпадающим спискам.
• Позвольте пользователям выбирать опцию кликая не только по чекбоксу/кнопке, но еще и по их подписи: на цель большого размера легче кликнуть, в соотвствии с законом Фиттса. В HTML формах, вы можете легко это достичь, просто окружив каждую надпись тегом label.
• Используйте чекбоксы и радиокнопки только для смены состояниея, а не как кнопку действия или отправки формы.

Выпадающие списки

• Если вариантов в списке больше чем 2-3, то их следует отсортировать по алфавиту, это убыстрит поиск нужного элемента.
• Если предполагается вариант «Другое», то он должен быть в конце.
• Если вариантов достаточно много, но они разбиваются на группы по смыслу, то это стоит сделать.
• Если список длинный, но есть группа наиболее популярных значений (около 5-7 шт.), их можно перетащить вверх списка.
• Если список ооочень длинный, то нужно использовать автокомплит.
• Если в выпадающем списке только варианты да/нет, то заменяем его на флажок.
• Если количество значений в выпадающем списке всегда постоянно, и оно меньше 4-5, то такой список разворачивается в горизонтальную группу радио-кнопок.

Рекомендации по кнопкам «Отмена» и «Очистить»

• Кнопка «Отмена» в хороших интерфейсах не требуется вовсе, т.к. используются другие механизмы навигации – кнопка назад в браузере, хлебные крошки и меню.
• Кнопку отмены желательно заменять ссылкой, подчеркивая её второстепенность.
• Кнопку очистить тоже стоит делать ссылкой. Размещать её стоить только в нужных для этого местах, к примеру в фильтрах и поисках.
• Самая главная проблема заключается в том, что пользователи часто по ошибке нажимают кнопку Reset вместо кнопки Submit. Одно нажатие — и вся кропотливая работа исчезла.
• Наличие двух кнопок в конце формы вносит неразбериху в интерфейс, и для пользователя затруднительно четко определить свой следующий шаг. Некоторое время зря тратится на рассматривание этой бесполезной кнопки, чтобы разобраться, какую же из двух кнопок надо нажимать.
• Даже если пользователь действительно желает удалить некоторые данные, которые он ввел в форму, наличие выделенной кнопки для выполнения этой функции может только замедлить его работу, так как перед ни возникают два выбора:
  
  • отредактировать поля, содержащие неверные данные, заменив старый текст на новый.
  • нажать кнопку Reset и набрать новый текст во все девственно чистые поля формы.
  
  
• Дополнительные варианты выбора только требуют дополнительных мысленных усилий, а при работе с оптимально настроенным интерфейсом будет сэкономлено больше времени, чем потеряно на дополнительное обдумывание действий там, где надо просто перейти к следующему этапу. На выбор одного из двух вариантов уходит не менее одной-двух секунд, так что лучше вообще не ставить пользователя перед этим выбором. Секунда может показаться каплей, но эта капля выливается в 100-миллионные убытки от уменьшения производительности в масштабах года для всей планеты.

При подготовке использовались материалы:

• Alertbox Якоба Нильсена.
• Куча топиков с ux.stackexchange.com.
• Статьи с SmashingMagazine
• Бизнес-линч.
• Советы с artgorbunov.ru.