Ассоциация профессионалов юзабилити провела специальное исследование, чтобы определить самый удобный метод навигации по веб-сайту.
Как пишит Webplanet, эксперты по юзабилити провели онлайновое исследование, сделав для одного и того же сайта шесть вариантов с различными стилями навигации. Полный текст с результатами исследования, слайды презентации, а также видеоролики с записью каждого из стилей навигации выложены в свободном доступе.
1. Стиль Yahoo (видео). Меню организовано в левой колонке в виде многоуровневой директории с заголовками и подзаголовками. Хотя все пункты находятся на виду, но из-за длины меню пользователям приходится прибегать к скроллингу.
2. Контекстное меню (видео). В левой колонке отображаются только заголовки разделов сайта, а при наведении курсора на один из них появляется контекстная информация о подзаголовках.
3. Флэш-меню (видео). Одноуровневое меню в левой колонке. Нажатие на любой из заголовков открывает список подзаголовков, при этом автоматически скрывая те, что были открыты раньше. Исследование показало, что отсутствие функции автоматического «закрытия» предыдущего заголовка очень раздражает пользователей.
4. Раскрывающееся меню (видео). Располагается в левой колонке. Нажатие на «закрытые» заголовки открывает их, нажатие на «открытые» — закрывает. Меню не закрываются автоматически, хотя есть функция «открыть все» и «закрыть все». По мнению некоторых, такой тип навигации больше подходит для онлайновых книг.
5. Выпадающее меню (видео). Располагается сверху страницы горизонтально в виде заголовков. При наведении курсора подзаголовки автоматически выпадают вниз, без необходимости в нажатии кнопки. Здесь может быть многоуровневая структура. Это меню интуитивно понятно всем пользователям, потому что его структура точно соответствует управляющему меню в большинстве Windows-программ.
6. Вылетающее меню (видео). Похоже на выпадающее, но располагается не вверху страницы, а в левой колонке. Исследование показало, что при работе с вылетающим меню пользователи очень часто страдают из-за так называемой «диагональной проблемы». Когда они пытаются выбрать один из пунктов и направляют к нему курсор напрямую (по диагонали), то курсор пролетает над другим заголовком, а нужное меню исчезает с экрана.
Каждый из 706 пользователей, принимавших участие в исследовании, получил набор из 12-ти заданий и случайным образом — один из шести вариантов сайта. Для каждого участника фиксировалось время выполнения задания, субъективная оценка сложности и точность выполнения теста.
Исследование показало, что по времени выполнения заданий, а также по субъективной оценке пользователями различных стилей навигации между ними нет никакой существенной разницы. В то же время наименьшее количество ошибок (то есть нет ответа или неправильный ответ) зафиксировано у тех, кто использовал навигацию в стиле Yahoo или выпадающее меню. Эксперты по юзабилити рекомендуют использовать один из этих методов, но самым лучшим стилем все-таки признают выпадающее меню.
Странно вот что. В графиках время выполнения задачи различается незначительно. А вот частота ошибок в случае с fly-out существенно выше, хотя ошибкой считается не клик по неправильному пункту, а невыполнение тестового задания.
"Errors" included the cases where the participant gave no answer or indicated that they did not
know. (See Figure 7.)
Как «диагональная проблема» могла, столь незначительно повлияв на время (согласно графику №8), дать почти в 2 раза больший процент ошибок? Неужели люди не замечали, что меню «перепрыгнуло» или бросали мышь после этого? Ине непонятно, может кто-то подскажет?
Кроме того, подобрав значение задержки при наведении на пункт меню первого уровня, можно значительно уменьшить «диагональную проблему».
Следует отметить, что выпадающие меню хороши когда пользователь имеет более-менее четкую задачу, и лишь при том условии, что названия пунктов меню достаточно ясно дают понять что же внутри.
Для внутрикорпоративных сайтов (а именно для них проводилось исследование) это, как правило, справедливо.
Для случаев, когда у пользователя нет четкой задачи или планируется, что определится он должен уже на сайте (например, мы хотим ему что-то продать) лучше использовать развернутые меню.
Кстати, какая поразительная разница между количеством ошибок при работе с выпадающими сверху и вылетающими сбоку меню. ?!