Формы
Основные правила
Имя формы должно точно ее описывать. Пользователю должно быть сразу понятно, для чего предназначена та или иная форма. Иногда допускается добавить описание, но только тогда, когда это абсолютно необходимо.
Имена полей должны отражать их назначение. Не используйте абстрактные имена или аббревиатуры.
Избегайте неясностей по поводу использования персональных данных. Если в поле вводится персональная информация (номер телефона или адрес электронной почты), объясните пользователям, что вы собираетесь делать с этой информацией. Добавьте к такому полю краткое пояснение. Одного предложения будет достаточно. Используйте для этого элемент подсказка (hint).
Выделяйте элемент, с которым в данный момент работает пользователь. Фокус на этом элементе должен быть видимым и безошибочно определяемым.
Обозначайте особым образом неактивные элементы. Активные и неактивные элементы должны выглядеть по-разному. Добавьте подсказки, если неочевидно, какие действия могут привести к переключению элемента из неактивного состояния в активное. Пользователь должен понимать, почему тот или иной элемент неактивен, и что надо сделать, чтобы активировать его.
Должно быть возможно выполнять навигацию по элементам формы с помощью клавиатуры. Удостоверьтесь в том, что щелчки мышью – не единственный способ навигации.
Последовательность действий должна быть линейной. Ничто не должно сбивать фокус.
Элементы должны быть простыми для понимания. Не изобретайте новые типы элементов управления, используйте стандартные элементы.
Все сообщения, которые видит пользователь, должны быть понятными и передавать нужный смысл. Не составляйте сообщения из общих фраз.
Используйте ссылки для перехода на другие страницы или в другие разделы, а также для открытия новых окон. Ссылка должна описывать то место, куда она ведет, она не должна содержать вызов какого-либо действия. Ссылка не инициирует запуск действия – для этого предназначены кнопки.
Размещая содержимое в две колонки, располагайте названия полей ввода над соответствующими полями. Так будет понятно, что конкретное название относится к конкретному полю.
Выбор
Можно использовать как флажки (checkboxes), так и переключатели (radio-buttons). Флажок используется в том случае, когда ясно, что, установив его, пользователь получит конкретный результат. В некоторых случаях набор переключателей больше подходит, чтобы передать суть выбора. Когда надо выбрать одну из 5 опций, имеет смысл использовать переключатели. Если опций выбора от 6 до 10 – больше подойдет раскрывающийся список или поле выбора. Если опций больше 10 – поле выбора с поиском.
Одна опция
Хороший пример: Включение дополнительного свойства путем установки флажка рядом с основным полем ввода.
Хороший пример: Выбор из двух очевидных вариантов.
Для действий типа включения/выключения всегда следует использовать переключатели.
Если запрашивается согласие или подтверждение пользователя (например, в случае принятия условий соглашения о политике конфиденциальности), следует использовать флажок.
Хороший пример: Улучшение взаимодействия с пользователем путем выбора необходимых элементов для работы.
| До | После |
|---|---|
 |
 |
- Флажки заменены на переключатели,
- Названия элементов управления сформулированы кратко и понятно,
- Пояснения реализованы в виде подсказок, которые появляются, когда пользователь нажимает на соответствующий значок,
- Все элементы выровнены по одной сетке
Примечание: Не все описания и пояснения стоит представлять в виде подсказок. Если пояснение состоит из 2-4 слов, лучше поместить его рядом с полем ввода – как было описано в Основных правилах.
Неудачный пример: Непонятный результат действия.
Неясно, какой в данном случае ожидается результат: «Если флажок установлен, будет свойство работать или нет?» Такая реализация не рекомендуется.
Плохой пример: Использование раскрывающихся списков.
До 5 опций
Хороший пример: несколько флажков.
Ни одна из опций не выбрана по умолчанию. Либо, если известно, что в большинстве случаев пользователи выбирают большую часть этих опций, можно сделать все опции выбранными по умолчанию.
Хороший пример: несколько переключателей.
Одна из опций выбрана по умолчанию. Обычно выбирается самая популярная или самая важная опция.
Плохой пример: слишком короткий раскрывающийся список.
Эти четыре опции прекрасно подходят для отображения в виде группы переключателей. Недостатком раскрывающегося списка является тот факт, что пользователь не знает, что увидит, когда список раскроется. Переключатели в этом случае являются очевидным выбором.
Динамически подгружаемые опции
Необходимо понимать, как много опций может быть подгружено. В зависимости от их ожидаемого количества может быть принято решение о том, какой элемент следует выбрать для реализации.
Кнопки (Buttons)
На форме может быть только одна первичная кнопка. Все остальные кнопки должны быть вторичными.
Названия кнопок должны призывать к выполнению того или иного действия. Хорошие примеры – Сохранить, Создать, Запустить. В идеале название кнопки должно состоять из одного слова – глагола. Названия типа OK, Да или Нет не дают пользователю информации о том, какое действие будет выполнено при нажатии кнопки, и поэтому являются не самым лучшим выбором.
Пароль
Чтобы гарантировать то, что новый пароль введен правильно, дайте возможность пользователю видеть то, что он вводит. Просьба ввести пароль дважды – не самый лучший вариант.
Пользователь должен сам нести ответственность за то, какие символы он выбирает для пароля. Система безопасности не должна накладывать строгих ограничений по этому поводу. Она должна сообщать пользователям, насколько безопасен введенный пароль.
Плохой пример: Новый пароль вводится дважды.
Хороший пример: Пользователь может посмотреть введенный пароль.
Проверка
Если пользователь допускает ошибку при заполнении формы, эту ошибку необходимо обнаружить до того, как форма будет сохранена. В идеале – до того, как фокус переместится на следующее поле ввода.
Пользователя необходимо в спокойной форме проинформировать об ошибке и предложить способ ее исправления. Если ошибку нельзя обнаружить до того, как форма будет сохранена, то при ее сохранении необходимо поместить фокус на первое поле ввода, содержащее ошибку, чтобы пользователь мог ее исправить.
Примечание: Используйте встроенную проверку. Проверяйте введенные данные сразу после их ввода. Это позволит снизить количество ошибок и время, которое тратится на заполнение формы, а также повысить удовлетворенность пользователей.
Обязательные поля
Указатели обязательных полей ввода используются при необходимости. Если на форме нет обязательных полей, эта информация не нужна и не должна отображаться.
Не включайте ненужных полей ввода в форму. В идеале все поля формы должны быть обязательными для заполнения. Необходимо проинформировать пользователей о том, что обязательные поля отмечены соответствующим образом.
Примечание: Не просите пользователя предоставить больше информации, чем это необходимо. Попытки собрать слишком много данных заставляют пользователя тратить слишком много времени и портят его впечатление.
Группировка
Используйте секции для группировки похожей информации.
Секции могут быть сворачиваемыми и не сворачиваемыми. Помещайте в сворачиваемые секции дополнительные поля, которые менее важны, и которые пользователь может заполнить позже.
Поля ввода
- Так же, как и другие элементы, поля ввода должны выглядеть привычным для пользователей способом.
- Указывайте тип данных, который будет вводиться в поле (числовой, текстовый, адрес электронной почты, номер телефона и т.д.).
- Длина поля ввода зависит от типа вводимых данных.
- Названия полей должны быть понятными для пользователей, читающих с экрана.
- Используйте подсказки там, где это необходимо.
- Используйте данные, которые уже были введены. Поля ввода должны запоминать то, что пользователь, возможно, уже не помнит. Запрашивать два и более раза одну и ту же информацию невежливо. Например, если вы подписались на рассылку сайта один раз при регистрации на сайте, он должен запомнить вас и ввести ваш адрес электронной почты в соответствующее поле ввода.
- Длина поля ввода обычно отражает размер данных, которые необходимо ввести. Поля, используемые для ввода длинных почтовых адресов, имеют большую длину. Поля для ввода 6-значного почтового индекса – короткие.
Советы по созданию полей ввода
Самый простой способ объяснить пользователю, как надо заполнять поле ввода – подставить в поле пример значения.
Пояснения
Этот тип описания объясняет пользователям, как будет использоваться введенная информация. Например, «Мы будем использовать ваш адрес электронной почты, чтобы отправлять вам уведомления об изменениях статуса вашего заказа. Мы не будем рассылать спам.»
Длина поля ввода
- Номер телефона: 12 символов;
- IP-адрес: 15 символов (включая разделяющие точки);
- Имя: 300 пикселей;
- Наименьший размер поля: 64 пикселей (для коротких числовых значений);
- Пароль: 200 пикселей.