Формы: как правильно нарушать правило одной колонки

Формы: как правильно нарушать правило одной колонки

Есть в Лондоне такое агенство cxpartners, которое занимается user centered design, активно использует тестирование с применением айтрекинга, а в перерывах пишет блог.

Сегодня как раз обсудим некоторые моменты, описанные в их статье Web form design guidelines: an eyetracking study, а именно — какой контент стоит располагать горизонтально, и чтобы жизнь при этом становилась не хуже, а лучше.

 

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

На заметку:

Люк Роблески (Luke Wroblewski), надеюсь он так читается, в своей книге Web Form Design: Filling in the Blanks описывает это как Clear Scan Lines. Своим левым краем поля создают четкую ось, вдоль которой человек сканирует форму:

Кстати, поэтому еще и советуют располагать подписи к полям не слева, а над полями, если достаточно места по вертикали.

Однако иногда есть резон расположить поля горизонтально, когда два куска информации, вводимые в разные поля, составляют тем не менее единое целое. Например, имя и фамилия:

И тут возникает интересный момент. Оказывается, не все йогурты (ударение теперь модно ставить на у) одинаково полезны. Автор статьи, очаровательная девушка Chui Chui Tan, приводит в пример две формы регистрации — Yahoo и Ebay. Взглянем:


Из-за кружков фиксаций хрен чего разберешь, но сейчас все поясним

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

В чем секрет? В двух поинтах.

  1. Первый (менее важный) дырка между полями в форме Yahoo меньше
  2. В яху-варианте для обоих полей сделано единое название My Name. Поэтому посетители воспринимали два поля как один кусок информации.

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

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

Смотрим на My Name и Birthday в финальном примере.

 

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 20

naikom blog
спасибо, весьма занимательно
Gordio
А как вы думаете, я совсем с ума выжил? http://gordio.pp.ua/blog/linux/volume-notifications-script.html#cform
#
Gordio
Egypt
Спасибо.) попробовал, получилось.)
Читатель
Большое спасибо, довольно интересная статья. Особенно с полем зрения.
макисм
Спасибо вам и у меня получилось.)
Dezm
Да это можно сказать, целаю наука - юзабилия.
П.с. Очень приятный дизайн блога, если не секрет, сами создавали или работала студия???
Максег
Забавные комменты, тот, у которого получилось, и не пытался даже ничего сделать, а второй, кто спрашивает про дизайн, до футера не мог страницу домотать. :)))
Gordio
Максег, стоп. Это я то второй? Я конечно же дочитал и показал что у меня вот так, и менять пока не думаю :)
В моем случае скорее гики будут, которые навряд не смогут понять что куда писать ;Ъ
#
Gordio
Гулия
Спасибо! Думаю в будущем пригодиться :).
pamm-forex
Не знал что даже на формы нужно смотреть. Нужно будет у себя такое реализовать
Светлана
интересная информация, надо будет воспользоваться
Андрей
Спасибо за статью. Нужная информация.
Татьяна
Спасибо за инфу!!! Обязательно обращу на это внимание.
Светлана
Спасибо за информацию! Надо будет сделать некоторые изменения на моем сайте.
svatlana
Спасибо. Приму на заметку. Психологическое восприятие надо учитывать всегда))))
Геннадий
Недавно переделывал формы на одном из наших магазинов и подписи к полям разместил именно над полями ввода, а раньше было сбоку. Тепловая карта порадовала.
chat
wERY N?CE THANKS
#
chat
doomaer
Добрый день меня зовут Сергей! Я начинающий веб программист))
Вот мои сайты:
http://emoe.in.ua/
http://www.audi-ais.com/
http://tntmedia.com.ua/
Если вы это прочитали то перейдите по ссылочкам))
Спасибо

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler