En Ru
+375 (29) 692-02-78 +375 (17) 219-48-27
Contact sales

Новые полезные сведения для проектирования интернет-форм

27 December 2006 | Alexander Sergeev | Инновации

Сегодня наткнулся на интересную статью под названием Label Placement in Forms (размещение подписей к полям формы). Авторы рассказывают о результатах исследования, которое они провели с использованием оборудования для отслеживания движения глаз. Эксперимент заключался в том, что пользователям предлагалось заполнить 4 формы с одинаковыми полями, но разным расположением подписей к полям (с левым выравниванием, с правым выравниванием, подпись над полем, болдовая подпись над полем).

Тест 1. Левое выравнивание подписей

test1.jpg

Излишне большие пробелы между подписями и полями увеличивают время, которое пользователь тратит на взаимодействие с формой. При таком расположении подписей, регистрировалось единственное скачкообразное движения глаза с подписи на поле. Это означает, что пользователи легко воспринимали связь между подписью и полем ввода. Правда это движение длилось в среднем 500 мс, что является достаточно большим числом и говорит о значительной когнитивной нагрузке.

Тест 2. Правое выравнивание подписей

test2.jpg

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

Тест 3. Подпись над полем

test3.jpg

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

Тест 4. Болдовая подпись над полем

test4.jpg

Автор исследования решил проверить и этот случай, с болдовыми подписями над полями. Оказалось, что длительность скачкообразных движений от подписи к полю почти на 60% больше по сравнению с нормальными подписями (80 мс по сравнению с 50 мс). Автор делает вывод, что возможно это связано с визуаьным конфликтом, который возникает между болдовой подписью и рамкой поля ввода.

Выводы

Автор исследования делает следующие выводы:

  • Позиция подписи. Лучшее место - над полем. Причина - пользователю не нужно отдельно смотреть на подпись и поле. Автор рекомендуют особенно вимательно относится к визуальному разделению текущего поля ввода и подписи для следующего поля.
  • Выравнивание подписи. Левое выравнивание требует от пользователя большой когнитивной нагрузки и, следовательно, увеличивает время работы с формой. Если уж вы решили расположить подпись на одной строке с полем, пишет автор, то лучше всего выравнять подпись вправо.
  • Болдовые подписи. Читать болдовые подписи немного сложнее чем нормальные. Однако если уж вы решили использовать болд, то имеет смысл облегчить рамки полей ввода.
  • Выпадающие списки. Выпадающий список привлекает больше всего внимания, в независимости от его расположения на форме. Поэтому имеет смысл распологать их после других важных полей формы, чтобы они не отвлекали пользователя от работы.
  • Подписи для комбобоксов. Чтобы убедиться в том, что пользователи знают о том, какую информацию вы от них ждете, вместо отдельной подписи лучше добавить ее в список опций комбобокса и выставить ее по умолчанию.

Ссылки по теме:

Текст: Александр Сергеев, HumanoIT Group на основе статьи Label Placement in Forms (Matteo Penzo).

Liked this post?