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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Проектирование интернет-форм (Luke Wroblewski).
• Введение в метод юзабилити-тестирования при помощи оборудования для отслеживания движения глаз (Matteo Penzo)

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

 Понравилась заметка? Подписывайся на обновления блога!
           

      ЖЖ  E-mail  RSS