Формы – дизайн с точки зрения юзабилити

Удобство для пользователя – основа основ дизайна. А как узнать, что именно удобно в каждом конкретном случае? Спрашивать, изучать и исследовать :). То есть отходить от бытового понятия о том, что дизайн и юзабилити – это наитие и интуиция, и больше полагаться на результаты исследований.

Целый ряд исследований юзабилити провел Matteo Penzo, результаты он опубиковал на сайте uxmatters.com. Данным, которые я хочу привести в этом посте, уже более двух лет (http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php), но используются они в реальной жизни совсем нечасто, к сожалению. Именно поэтому мне показалось, что будет полезным сделать краткий перевод этих результатов для своего блога.

Кому будет интересна и полезна эта статья? Дизайнерам, специалистам по юзабилити, баннермейкерам, маркетологам.

Целью исследования было установить, как пользователи заполняют он-лайн формы.

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

Текст в форме слева, равнение по левому краю:

наиболее популярное расположение элементов формы: подписи слева, равнение по левому краю.

Цифры на рисунке показывают, в какой последовательности пользоватль просматривает элементы формы.

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

Если в форме есть открывающийся список, он привлекает максимум внимания к себе.

Текст слева, равнение по правому краю:

Если текстовые метки были выровнены по правому краю (right alignment), пользователю нужно было значительно меньше времени (примерно в 2 раза меньше) и шагов, чтобы заполнить форму. В этом случае переход зрачка от текстовых меток к полям формы занимал всего 170 миллисекунд для опытного пользователя и 240 – для новичка.

 

Текст над полями ввода:

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

Там, где пользователи все же переводили взгляд от текста к полю ввода, они тратили всего 50 миллисекунд (сравните с 500 для текста слева, первый рисунок).
Раскрывающийся список по-прежнему привлекал максимум внимания пользователей.

Текст над полями ввода, набран болдом:

Если текст сделать более жирным (bold), время перехода от текста к полю ввода увеличивается с 50 до 80 миллисекунд. Пользователям было труднее читать и распознавать текст, набранный болдом.

Основные выводы:

• Текстовые метки лучше всего размещать над полями ввода. Это позволяет пользователям не рассматривать текст и поля ввода отдельно друг от друга.
• Если текст размещается слева от полей ввода, лучше применить к нему выравнивание по правому краю.
• Не делать текст жирным (bold) либо делать рамки полей ввода как можно тоньше, чтобы они не конкурировали с «жирным» текстом.
• Раскрывающиеся списки привлекают к себе особое внимание, поэтому использовать их надо только для важных элементов формы.