Чужие мысли

Динамические подсказки в web-формах

Dynamic Help in Web Forms
Автор: Luke Wroblewski
Источник: UXmatters

Многие дизайнеры web-приложений стремятся уменьшить количество текста, использующегося в элементах интерфейса. Отчасти, это происходит из-за одного распространенного заблуждения – если для объяснения принципа работы требуется большая инструкция, то такой интерфейс обычно воспринимается как сложный, и, в таком случае, уменьшая количество текста, мы тем самым упрощаем работу. Есть и другое объяснение – пользователи просто не читают подсказки на экране, так же, как они не читают бумажные руководства (привет Джоэлю).

Все это относится и к web-формам. Дизайнеры стремятся использовать минимум текста, объясняющего пользователю как заполнять те или иные поля в форме. Если же подсказка или пример необходимы, то добавляется немного поясняющего текста рядом с полем ввода (как на рисунке).

Подсказка рядом с полем ввода наиболее полезна когда:

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

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

Автоматически-раскрывающиеся подсказки

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

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

В обоих приведенных примерах используется четкая визуальная связь между полями ввода и соответствующей подсказкой:

• В первом случае – выровненные прямоугольники;
• Во втором случае – общий цвет фона;

Единственный недостаток этого типа подсказок – пользователь не знает, есть ли для поля дополнительная информация, пока не начнет его заполнять. Сам вид форм часто не дает понять, что подсказки могут появиться. В результате некоторые пользователи, которые смогли бы заполнить форму (используя подсказки) даже не будут пытаться ее заполнять.

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

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

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

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

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

Активируемые блоки подсказок

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

На eBay используется специальная панель помощь, которую пользователь может отобразить или спрятать кликом по иконке помощи на форме. Когда пользователь щелкает по иконкам, расположенным рядом с полями ввода, открывается панель с информацией по этому полю. Когда панель открыта, текст подсказки автоматически меняется при перемещении от поля к полю.

Вместо заключения

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

• 29.05.2007
• Категории: Переводы
• Комментарии: 1

---