1. Зачем изучать скрытую и видимую навигацию
2. Меры: использование навигации, обнаружение контента, время, сложность задачи
3. Использование навигации: скрытая навигация используется меньше и позже в задаче
4. Скрытая навигация ведет к ухудшению работы пользователей
5. Различия между настольным и мобильным пользовательским интерфейсом
6. Почему скрытая навигация менее эффективна
7. Рекомендации по навигации

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

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

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

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

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

(Очевидно, что здесь есть общий принцип: если метод проектирования предназначен для охвата платформ X и Y, то бескомпромиссный подход X-first сделает Y запоздалой мыслью и нанесет вред пользователям Y. Как объяснено в нашем курсе по Масштабирование пользовательских интерфейсов Чтобы спроектировать для X и Y, вы должны учитывать сильные стороны и потребности обоих и соответственно адаптировать две версии веб-сайта.)

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

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

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

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

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

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

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

Чтобы измерить эффективность этих проектов, мы собрали 5 показателей:

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

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

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

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

Чтобы определить количество использования навигации, мы рассмотрели (1) использование навигации: использовалась ли навигация во время задачи; и (2) время до навигации: время от начала задачи до момента использования навигации. (Мы считали время до навигации, только если навигация была использована.)

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

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

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

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

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

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

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

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

Есть много возможных объяснений этого открытия:

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

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

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

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

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

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

Другие 3 показателя, которые мы собрали, были сфокусированы на качестве пользовательского опыта:

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

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

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

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

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

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

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

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

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

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

Почему скрытая навигация имеет такие эффекты? На протяжении всей статьи мы намекали на несколько ответов:

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

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

Рекомендации по навигации

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

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

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

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

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

Помните: mobile-first не совпадает с mobile-only , Плюс, конечно же, следуйте другим давно установленным UX рекомендации по оформлению меню ,

Другие статьи, связанные с исследованием Эта статья была основана на

Похожие

Комментарии