Почему гамбургер-меню и скрытая навигация вредят вашему юзабилити?

Posted on by riasevastopol

Понятность вашего лендинга (discoverability) значительно уменьшается практически в два раза, в то время, когда основная навигация скрыта. Это кроме этого увеличивает время исполнения задач, очень плохо воздействуя на восприятие уровня их сложности.

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

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

Сокрытие навигации более всего воздействует на контент, недоступный напрямую по ссылкам со страницы.

  • Создание мобильной навигации независимо от гамбургер-меню

Для чего изучать скрытую и видимую навигацию?Почему гамбургер-меню и скрытая навигация вредят вашему юзабилити?

Респонсивный дизайн владеет множеством преимуществ. Но одним из его не столь желаемых проявлений есть популярность концепта «Прежде всего — мобильные» (Mobile First), очень плохо сказывающаяся на отображении контента на громадных десктопных экранах. Дело кроме того не в самом концепте.

Кроме того достаточно успешный мобильный дизайн переносится на полноэкранную версию, где он трудится не так прекрасно. «Прежде всего — мобильные» не должен преобразовываться в «Лишь мобильные».

(Разумеется, тут действует неспециализированный принцип: в случае если техника дизайна призвана охватить платформы X и Y, то бескомпромиссный подход «Прежде всего — X» станет обстоятельством второстепенности Y и очень плохо скажется на Y-пользователях. Дабы создавать дизайн и для X, и для Y, вы должны забрать в расчет потребности и сильные стороны обоих и приспособить две версии лендинга в соответствии с этим изюминкам.)

Скрытая навигация, наподобие гамбургер-меню, — один из многих шаблонов, пришедших из мобильного дизайна. Экранное пространство есть драгоценным ресурсом на гаджетах. В нелегкой борьбе за приоритизацию контента с сохранением дешёвого меню дизайнеры часто делают ставку на скрытую навигацию с меню, обозначенным печально известной иконкой. «Гамбургер» вызывает у дизайнеров зависимость не меньшую, чем давшее ему имя блюдо у любителей фаст-фуда: он эргономичен, и потому помогает сейчас миллионам людей, как на мобильных устройствах, так и на стационарных компьютерах.

Но тестирование мнения пользователей постоянно говорит о том, что навигация, запрятанная под выпадающим меню, менее находима на десктопах. Новое качественное изучение Nielsen Norman Group ставило себе целью выяснить, как силен данный эффект, и определить об относительном влиянии скрытой навигации на десктопную версию если сравнивать с мобильной. Были опрошены 179 участников, выполнивших задание на 6 разных сайтах, как на смартфонах, так и на настольных ПК.

Результаты приводятся ниже.

  • Мобильная версия, веб-приложение, адаптивный дизайн либо десктопный формат сайта?

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

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

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

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

Для каждого сайта написали 2 несложных задания. Первый тип заданий мог быть осуществлен без применения неспециализированной навигации, тогда как второй тип потребовал применения навигации (либо поиска). Вот пример тест-упражнения: «Перейдите на //www.bbc.com и посмотрите, имеется ли в том месте увлекательная для вас информация о дикой природе.

Отыскав такую статью, обозначьте ее для нас».

Для измерения эффективности дизайна, исследователи ориентировались на 5 метрик:

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

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

  • Из-за чего адаптивный дизайн — это не оптимизация мобильной конверсии?

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

Дабы количественно измерить сотрудничество с навигацией, организаторы опыта наблюдали на: (1) то, употребляется либо нет навигация на протяжении работы над упражнением, и (2) время навигации — период от начала исполнения задания до первого обращения к меню.

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

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

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

К примеру, на определенных страницах внутристрочная ссылка (In-line Link) может иметь ощутимый информационный след (Information Scent). Представьте, что вы ищете данные о фильме на сайте онлайн-издания: в случае если первый попавшийся заголовок на странице говорит о том самом кино, высоки шансы, что вы кликнете на него без применения навигации либо поиска.

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

1. И на сотовых телефонах, и на ПК люди более с радостью применяли навигацию, в то время, когда все либо кое-какие из ее возможностей были видны.

Диаграмма отражает процентное соотношение сессий с применением навигации как функции того либо иного типа устройства (десктоп, мобильный) и тип навигации (скрытая — светло синий, комбинированная — серый, видимая — красный)

  • На десктопах люди использовали скрытое меню лишь в 27% случаев, а видимое либо комбинированное — практически в два раза чаще (48% и 50% соответственно).
  • На мобильных устройствах применение скрытой навигации наблюдалось в 57% случаев, комбинированной — в 86%, либо в 1,5 раза чаще.

Обратившись к логистической регрессии со смешанными эффектами (mixed-effects logistic regression), исследователи поняли, что эти различия были статистически точны. Итог не удивляет: в то время, когда все либо кое-какие навигационные опции видны, они более удобны для пользователей.

2. Люди охотнее применяли навигацию — и скрытую, и частично видимую — на мобильных если сравнивать с ПК.

Существует пара потенциальных объяснений этого факта:

  • Навигация на мобильных (скрытых под меню либо частично видимых) занимает больше экранного места если сравнивать с навигацией на ПК — легко вследствие того что экран телефонов меньше. Потому люди чаще подмечают и применяют меню на смартфонах. На десктопах же наблюдалось большое количество сессий, на протяжении которых люди не подмечали иконку меню. Кое-какие участники кроме того объявили, что сайты со скрытой навигацией не имеют меню.
  • Потому, что скрытая навигация более распространена на гаджетах, люди привыкли к такому стилю и более с радостью прибегают к ней именно на мобильных устройствах.
  • Мобильные страницы предполагают больше скроллинга, имеют меньше контента, видимого выше «линии сгиба» (Above the Fold), и время от времени медленнее загружаются, потому люди ищут меню вместо прокручивания страницы для определения того, имеется ли тут соответствующий их потребностям контент. На компьютерах скорость загрузки страницы выше, а большой по диагонали экран предлагает лучший обзор контента. (Иначе говоря цена сотрудничества (Interaction Cost), требуемая чтобы получить информацию, выше на мобильных.)

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

3. И на мобильных, и на ПК при сокрытии навигации пользователям приходилось больше времени тратить на задачу если сравнивать с возможностями видимого либо частично видимого меню. Обобщенная модель со смешанными эффектами продемонстрировала, что результат был ограниченно точным (p

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

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

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

  • Навигация мобильных приложений и сайтов: базисные правила юзабилити

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

В следующих 3 метриках внимание фокусировалось на качестве user experience:

  • Понятность контента. Все задания были несложными, давали пользователям достаточно свободу действий (к примеру: «Отыщите статью о разработках, занимательную для вас»), исходя из этого люди были способны завершить большая часть из них. Но, учитывая цель изучения, использовался более конкретизирующий критерий успеха (понятность контента), учитывавший не только факт окончания задания, но да и то, как это было сделано. Так, понятность определяла, имели возможность ли юзеры отыскать искомый контент при помощи навигации (а не поиска) в тех случаях, в то время, когда ссылки на контент не размещались напрямую на домашней странице.
  • Уровень сложности задания. В конце теста участники выставляли оценки сложности/легкости по шкале от 1 до 7 (1 — легко, 7 — сложно). Эта метрика, отражающая восприятие задачи по словам тестируемых, есть субъективной. Она показывает, как сложился неспециализированный опыт при пользовании сайтом. Большой уровень сложности будет непрямо свидетельствовать о настоящих проблемах при дальнейшем движении и поиске навигации по ресурсу.
  • Время исполнения. Метрика воображает время, пригодившееся участникам для завершения задачи, независимо от ее успешности. Меню может расширить либо снизить показатель в зависимости от того, легко либо сложно его отыскать, открыть, применять. Долгое время исполнения отражает ухудшение цены сотрудничества благодаря менее применимой навигации.

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

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

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

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

Другие типы навигации скрывают опции и повышают цену сотрудничества.

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

3. Юзеры существенно продолжительнее трудились над заданием на сайтах со скрытой навигацией если сравнивать с видимыми либо комбинированными вариантами на телефонах и на персональных компьютерах.

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

На мобильных в тех же условиях участники делали задание на 15% медленнее.

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

  • 10 проверенных приемов создать плавную навигацию на мобильной версии сайта

Отличие между десктопным и мобильным пользовательским опытом

В первой части статьи упоминалось, что мобильные пользователи были скорее склонны применять навигацию, чем те, кто трудился на ПК (см. рис. 1). Ниже будут отмечена отличие между компьютерами и телефонами довольно UX-метрик.

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

Данное явление может разъясняться повышенной склонностью десктопных пользователей прибегать к поисковой строчку: на ПК она по большей части более заметна, и визитёры сайта смогут выбрать поиск, в случае если путь к контенту неочевиден.

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

Из-за чего скрытая навигация менее действенна?

По каким обстоятельствам скрытой навигации свойственны все эти особенности? В статье уже давались попытки объяснения:

1. Нехорошая заметность. Маленькую иконку тяжелее подметить на экране большего размера (а также на экране мобильного).

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

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

4. Недочёт стандартов. Скрытая навигация внедряется сайтами по-различному. Кто-то применяют её, другие нет.

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

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

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

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

  • Из-за чего несложный интерфейс ведет к нехорошему юзабилити?

Советы

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

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

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

Мобильные устройства. Тут нет единого правила. Но вот главные ориентиры:

  • В случае если у лендинга имеется 4 (либо меньше) главные навигационные ссылки, отображайте их как видимые.
  • В случае если у лендинга больше 4 ссылок, единственным разумным ответом будет запрятать кое-какие из них. Было найдено, что отрицательные стороны скрытой навигации имеют собственный проявление и на телефонах, но в меньшей степени, чем на персональных компьютерах. Рекомендуется прийти к какому-то компромиссу в дизайне, потому, что юзабилити выпадающего меню навигации намного лучше вторых альтернатив.
  • Предоставьте встроенные ссылки на ответственную данные прямо на странице либо применяйте другие способы помощи гамбургер- или других видов скрытого меню.

Запомните: принцип «Прежде всего — мобильные» не должен стать концептом «Лишь мобильные». Помните направляться вторым ответственным руководствам создания дизайна меню.

Высоких вам конверсий!

По данным nngroup.comimage source Julie Berger

Случайные статьи:

Уроки по Bootstrap 3 | #4 Адаптивная навигация


Подборка похожих статей:

riasevastopol

More Posts