INPUT HINTS/PROMPTS (ПОДСКАЗКИ ПРИ ВВОДЕ/ПРИГЛАШЕНИЕ К ВВОДУ)

Проблема

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

Решение

Предоставьте пользователям необходимые подсказки, объяснения или инструкции, и покажите им, как они должны вводить данные (рис. 2.27). В тех ситуациях, когда данные могут быть введены несколькими способами, применяйте шаблон FORGIVING FORMAT (о котором упоминалось ранее).

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

Зачем

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

Как

Существует несколько способов, как предоставить пользователям подсказки и инструкции (рис. 2.28):

Рис. 2.28. При заполнении регистрационной формы Windows Live пользователи получают инструкции по вводу пароля, альтернативного электронного адреса и секретного вопроса. Кроме того, когда пользователи приступают к заполнению поля, им предоставляется дополнительная информация и возможность получить помощь, пройдя по специальной ссылке

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

• Покажите, какие форматы приемлемы для таких данных, как даты, номера телефонов, номера кредитных карт и т. д. Для дат покажите допустимые форматы следующим образом: мм/дд/гг, дд/мм/гг или мм/дд/гггг; для номеров телефонов в России покажите формат ввода как xxx-xxx-xxxx и т. д.).

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

Пусть подсказки и разъяснения будут короткими – не больше нескольких слов или одного предложения – чтобы пользователи их не игнорировали. Кроме того, располагайте подсказки и примеры как можно ближе к соответствующим элементам формы. Чтобы пользователи не путали подсказки и метки, сделайте подсказки менее заметными с помощью более светлого тона и/или меньшего шрифта.

Попробуйте использовать динамические контекстуальные подсказки

В тех случаях, когда подсказки или разъяснения должны содержать подробные или сложные инструкции, попробуйте показывать подсказки динамически, когда пользователь начинает вводить данные в элемент формы или подводит к этому элементу (или группе элементов) указатель мыши (рис. 2.29). Недостаток этого подхода заключается в том, что пользователи должны приступить к вводу текста, чтобы увидеть инструкции.

Рис. 2.29. На сайте Wufoo подсказки появляются как при наведении указателя мыши на поле, так и когда пользователь начинает вводить данные

Соотносите размеры полей ввода текста с ожидаемым объемом вводимых данных

Текстовые поля не должны быть длиннее (или короче), чем ожидаемая длина вводимых данных; когда нельзя точно предугадать длину данных, поле должно быть достаточно длинным, чтобы в него поместилась большая часть данных. Размер поля может служить скрытой подсказкой для пользователя, с помощью которой он сможет определить размер данных, которые нужно ввести. Например, если пользователь собирается ввести свой номер телефона, а текстовое поле рассчитано на семь символов, большинство пользователей поймет, что код города вводить не нужно. Кроме того, если в базе данных сохраняется всего семь цифр номера телефона, необходимо сделать так, чтобы не только текстовое поле отображало семь символов, но и возможный объем вводимых данных был ограничен семью символами. Это можно осуществить с помощью HTML следующим образом:

В данном примере элемент size="7" контролирует длину текстового поля, а элемент maxlength="7" ограничивает количество символов, которые может ввести пользователь, до семи.

Кроме того, различная длина текстовых полей указывает на то, какой тип данных нужно вводить в поле, а также упрощает процесс поиска информации на странице, особенно когда пользователи редактируют информацию (Mayhew, 1991).

Связанные шаблоны проектирования

Сокращение количества ошибок является важным аспектом проектирования результативных форм. Чтобы свести к минимуму ошибки пользователей и сократить время, которое уходит на заполнение формы, применяйте помимо шаблона INPUT HINTS/PROMPTS также такие шаблоны, как REQUIRED FIELD INDICATORS, FORGIVING FORMAT и SMART DEFAULTS.

Данный текст является ознакомительным фрагментом.