Удобство для пользователя – основа основ дизайна. А как узнать, что именно удобно в каждом конкретном случае? Спрашивать, изучать и исследовать :). То есть отходить от бытового понятия о том, что дизайн и юзабилити – это наитие и интуиция, и больше полагаться на результаты исследований.
Целый ряд исследований юзабилити провел 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) либо делать рамки полей ввода как можно тоньше, чтобы они не конкурировали с «жирным» текстом.
- Раскрывающиеся списки привлекают к себе особое внимание, поэтому использовать их надо только для важных элементов формы.
