Шаблоны проектирования веб-приложений - страница 19

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

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

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

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

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

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

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

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

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

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

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

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

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