Как иконки-гамбургеры и скрытая навигация вредят UX-метрикам - исследования Nielsen Norman Group

Эксперты компании Nielsen Norman Group, которая специализируется на проектировании пользовательских интерфейсов, исследовали влияние скрытой навигации на разные метрики пользовательского опыта.

Редакция рубрики «Интерфейсы» публикует перевод материала.

Мы протестировали юзабилити скрытых меню (в частности, иконок-гамбургеров) и видимой навигации (например, ссылок в верхней части страницы) и выявили следующие закономерности:

• Скрытую навигацию труднее обнаружить, чем полностью или частично видимую навигацию. Пользователи гораздо меньше пользовались скрытой навигацией. Если они и использовали ее при выполнении заданий, то делали это позже, чем в случае с видимой навигацией.
• Скрытая навигация обеспечивает худший пользовательский опыт, чем навигация, видимая полностью или частично (как на мобильных устройствах, так и на десктопах). Это подтвердилось для многих UX-метрик, включая успех задания, время его выполнения и восприятие его сложности.
• На десктопах скрытая навигация сильнее ухудшает пользовательский опыт, чем на смартфонах.
• Скрытая навигация особенно негативно влияет на поиск того контента, к которому нет прямого доступа по размещенным на странице ссылкам.

Зачем мы изучали скрытую и видимую навигацию

У адаптивного дизайна много достоинств, но одна из его слабых сторон - чрезмерная популярность подхода mobile first, который приводит к плохому отображению контента на экранах ПК. Точнее, проблема не в самом подходе, а в том, что даже самые продуманные мобильные интерфейсы при переносе на десктоп работают уже не так хорошо. В общем, принцип mobile first не должен переходить в mobile only.

Очевидно, что это общий принцип: если продукт разрабатывается для платформ X и Y, то бескомпромиссный X-подход оставит за бортом платформу Y, а вместе с ней - и ее пользователей. В курсе Scaling User Interfaces мы объясняем, почему при разработке для X и Y следует изучить сильные и слабые стороны обеих платформ и соответственно адаптировать обе версии сайта.

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

Протестировав собственных квалифицированных пользователей, мы обнаружили, что навигация, спрятанная под выпадающим меню, хуже обнаруживается на десктопах, чем на мобильных устройствах. Нам захотелось провести более широкое исследование, и мы заключили партнерское соглашение с WhatUsersDo (эта компания занимается удаленным тестированием юзабилити). В исследовании 179 человек выполняли задания на шести разных сайтах, используя смартфоны и настольные компьютеры. Полученные результаты мы отразили в этой статье. Изображения протестированных меню и подробная методология исследования приведены в другой статье.

Предметы исследования: использование навигации, возможность найти контент, сложность задания и время его выполнения

Мы запускали свои тесты на десктопных и мобильных версиях шести сайтов с разными типами навигации:

1. Скрытая навигация: основные навигационные ссылки располагаются под иконками (как в гамбургер-меню) или под кнопками, и пользователю необходимо выполнить определенное действие, чтобы их увидеть.
2. Видимая навигация: основные навигационные ссылки находятся в видимой строке навигации, заметны даже при беглом просмотре страницы и не требуют никаких предварительных действий. Этот вид навигации мы не тестировали для мобильных устройств: он для них нехарактерен.
3. Комбинированная навигация: некоторые из основных навигационных ссылок хорошо заметны, а какие-то скрыты под меню.

Мы составили по два простых задания для каждого сайта. Некоторые задания можно было выполнить и без навигации, но какие-то из них требовали использования меню (или поиска). Вот пример подобного задания:

Мы измеряли эффективность с помощью пяти метрик:

1. Использование навигации: пользовались ли ей вообще участники исследования.
2. Время навигации: время от начала работы над заданием до первого случая использования навигации.
3. Сложность задания: ее субъективное восприятие участниками.
4. Доступность контента: смогли ли участники найти нужный контент на сайте.
5. Время выполнения задания.

Первые две метрики отражают использование навигации, а три последние - качество пользовательского опыта. Узнать больше о различных типах UX-метрик, а также о том, как их собирать и анализировать, можно в нашем однодневном курсе Measuring User Experience.

Скрытая навигация использовалась меньше и позднее, чем видимая или комбинированная

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

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

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

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

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

• На десктопах люди использовали скрытое меню только в 27% случаев. Видимая или комбинированная навигация использовалась почти в два раза чаще: в 48% и в 50% случаев соответственно.
• На мобильных устройствах люди использовали скрытую навигацию в 57% случаев, а комбинированную - в 86% случаев, то есть в полтора раза чаще.

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

2. Люди значительно чаще используют навигацию (скрытую или частично видимую) на мобильных устройствах, чем на десктопах.

Этому есть несколько возможных объяснений:

• Из-за маленького экрана навигация на мобильных устройствах (неважно, скрыта она под меню или частично видна) занимает большую часть экранного пространства, чем на десктопе. Поэтому люди лучше ее замечают и чаще используют. Мы наблюдали много десктопных сессий, когда люди даже не видели иконки меню. Некоторые участники теста были уверены, что на сайтах со скрытой навигацией меню вообще не было.
• Из-за того что скрытая навигация больше распространена на мобильных устройствах, чем на настольных компьютерах, люди лучше с ней знакомы и привыкли ей пользоваться.
• Страницы на смартфонах нужно больше скроллить, на них меньше контента в верхней части экрана, и они медленнее загружаются, поэтому люди обращаются к меню вместо того, чтобы просматривать страницу и искать, есть ли там интересующий их контент. На десктопе скорость загрузки страниц достаточно высокая, а больший размер экрана обеспечивает удобный просмотр содержимого страницы. Другими словами, цена доступа к нужной информации на мобильном устройстве выше, нежели на десктопе.
• На мобильных устройствах труднее набирать текст и выше вероятность ошибок, поэтому, если навигация доступна, люди предпочитают использовать ее, а не поиск.

3. Когда навигация была скрыта, участникам требовалось больше времени, чтобы начать ее использовать - неважно, на десктопе они работали или на мобильном устройстве. Результат для нашей обобщенной модели смешанных эффектов оказался предельно значимым (p?0,1).

Участники исследования начали использовать скрытую навигацию в среднем на 5-7 секунд позже, чем видимую или комбинированную. На мобильных устройствах эта разница была меньше - около 2 секунд.

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

Несколько дополнительно потраченных секунд могут казаться мелочью, и мы согласны, что не они определяют разницу между прекрасным и ужасным пользовательским опытом. И все же в эти несколько мгновений пользователь может испытать разочарование и неуверенность. Добавьте еще несколько секунд - и человек может бросить задание или, по крайней мере, отказаться от использования меню.

Скрытая навигация ведет к худшему пользовательскому опыту

Наши следующие три метрики фокусировались на качестве пользовательского опыта:

• Доступность контента. Задания были довольно простыми и давали пользователям определенную свободу (что-то вроде «Найдите статью о технологиях, которая вас заинтересует»). В большинстве случаев участники с ними справлялись. Поэтому мы сфокусировались на более конкретном признаке успеха (мы назвали его доступностью контента). Нам хотелось зафиксировать не только сам факт выполнения задания, но и то, каким образом оно было выполнено. Доступность контента показывала, могли ли пользователи с помощью навигации обнаружить контент, если на него не было прямой ссылки с начальной страницы.
• Сложность задания. В конце каждого задания мы просили участников оценить, насколько легким или сложным было задание, по шкале от 1 до 7 (1 - очень легко, 7 - очень сложно). Сложность задания - субъективная метрика, она обычно отражает общий опыт пользователя, касающийся использования сайта. Высокая сложность задания косвенно указывает на трудности в навигации по сайту и в ее обнаружении.
• Время выполнения задания. Это время, которое требовалось участникам на завершение задания, независимо от его результатов. Использование меню способно увеличить или уменьшить это время, в зависимости от того, легко или трудно его найти, открыть или использовать. Поэтому большее время выполнения задания указывает на большую цену взаимодействия из-за менее удобной навигации.

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

1. На всех устройствах доступность контента существенно падала, если навигация была скрытой. На сайтах со скрытой навигацией доступность контента оказалась на 20% меньше, чем на сайтах с видимой или комбинированной навигацией.

Хотя доступность контента на мобильных устройствах была несколько выше, чем на десктопах, разница не была статистически значимой 2. Из-за скрытой навигации задания воспринимаются как более сложные, чем при видимой или комбинированной навигации. По сравнению с видимой навигацией уровень сложности был выше на 21%, а по сравнению с комбинированной - на 11%. Этот результат согласуется с другими полученными данными и подтверждает, что скрытая навигация затрудняет выполнение заданий. При видимой навигации участники исследования воспринимали задания как наиболее легкие: легко было обнаружить меню, сразу же просмотреть все его опции и выбрать одну из них. Другие типы навигации скрывали опции меню и повышали сложность выполнения задания.

Пользователи оценили сложность выполнения задания со скрытой навигацией на 21% выше по сравнению с видимой и на 11% выше по сравнению с комбинированной. Это агрегированные данные с мобильных устройств и настольных компьютеров. Меньшие значения здесь отражают лучший пользовательский опыт. 3. Пользователи гораздо дольше выполняли задания на сайтах со скрытой навигацией, чем с видимой и комбинированной (и на десктопах, и на мобильных устройствах).

• На десктопах люди работали на 39% медленнее, когда навигация была скрытой (по сравнению с видимой и комбинированной).
• На мобильных устройствах в случае со скрытой навигацией люди выполняли задания на 15% медленнее.

Среднее время выполнения заданий было больше на сайтах со скрытой навигацией (как на десктопах, так и на мобильных устройствах)

Разница в пользовательском опыте на мобильных устройствах и на десктопах

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

1. Скрытая навигация сильнее снижала доступность контента на десктопах, чем на мобильных устройствах. Когда пользователям нужно было найти контент с помощью навигации, то на десктопах их попытки чаще оказывались неудачными, чем на смартфонах. При скрытой навигации результаты различались в три раза. Это можно объяснить тем, что в десктопных интерфейсах строка поиска обычно заметнее, и пользователи пользуются ей, если путь к контенту им не очевиден.

2. На десктопах пользователи работали быстрее, чем на мобильных устройствах (при всех видах навигации). В среднем мобильные пользователи тратили на завершение задания на 12% больше времени. Этот результат нас не удивил: из-за маленького экрана и узкого канала коммуникации с пользователем поиск нужного контента на мобильных устройствах требует большего взаимодействия.

Почему скрытая навигация менее эффективна

У нас есть несколько ответов на этот вопрос:

1. Плохая видимость. Маленькие иконки трудно разглядеть на большом экране, да и на смартфонах они не слишком заметны.
2. Неочевидность пути к информации. Значки или иконки меню не объясняют, что находится внутри них, поэтому пользователи не догадываются, что, кликнув на них, смогут найти нужную информацию.
3. Лишняя работа. Чтобы понять, что находится внутри меню, его нужно раскрыть. Это увеличивает затраты на взаимодействие: если пользователи и предпринимают такие попытки, то тратят на поиск больше времени.
4. Отсутствие стандартов. На разных сайтах скрытая навигация воплощается по-разному, а кто-то вообще ее не использует. На мобильных устройствах уже начали формироваться общие правила, но на десктопах размещение и обозначение скрытой навигации пока очень непостоянно и противоречиво.
5. Низкая узнаваемость. На десктопах скрытая навигация применяется редко, и люди просто не ожидают, что обнаружат глобальную навигацию под расширяемым меню. Для некоторых пока в новинку иконки-гамбургеры, которые часто используются для подобных меню. Эта низкая узнаваемость усугубляется отсутствием стандартов, что снижает удобство обучения пользователей (в курсе The Human Mind and Usability мы рассказываем о том, как неоднократный показ похожих моделей улучшает обучение).

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

Наши рекомендации

Какие выводы из этого исследования вы сможете использовать в своем следующем проекте?

На экранах настольных компьютеров достаточно пространства для демонстрации навигационных опций, поэтому:

• Не используйте скрытую навигацию (вроде иконок-гамбургеров) для пользовательских интерфейсов на десктопах.
• Вместо этого показывайте навигационные опции наверху экрана или в левой части страницы.

Для телефонов нет твердых правил, но вот наши общие рекомендации:

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

Запомните: mobile first - не то же самое, что mobile only. И конечно, следуйте другим общепринятым правилам проектирования навигационных меню.