Понятие мобильной поднавигации

Понятие мобильной поднавигации

Оригинал статьи

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

https://www.nngroup.com/articles/mobile-subnavigation/

 

Автор – Ралука Будиу (Raluca Budiu)

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

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

Cisco.com: Для десктопа применяют горизонтальную панель навигации, включающую главные категории. Если навести курсор мышки, появляется мега-меню с подкатегориями второго и третьего уровня. Они раскрывают все главные категории. Мега-меню делится на три столбика, а внизу содержит список вкладок.

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

 

Дизайнерские цели

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

Приступая к разработке поднавигаций ставьте перед собой такие дизайнерские цели:

  1. Наименьшая стоимость взаимодействия: необходимо, чтобы пользователи могли добраться до элемента, который их интересует, прилагая минимум усилий. То есть, немного нажать, прокрутить, и не ждать загрузки страниц.
  2. Поддержка стандартного пути пользователя: если за одно посещение сайта пользователю приходится перемещаться с одной страницы определенного раздела в совсем противоположную часть, целью поднавигации будет – облегчить эту задачу. В ином случае, когда большая часть посетителей будет “жить” в одном разделе сайта (например, в спортивном разделе газеты), поднавигацию нужно фокусировать на поддержание этого шаблона.
  3. Возможность нахождения: пользователи не должны тратить много времени на то, чтобы найти элементы поднавигации. При этом они не должны повторять вид основного меню, чтобы посетители их не путали.

 

Виды мобильной навигации

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

  • Меню аккордеон (или “подменю”) в рамках главного меню (Accordions)
  • Меню секций или разделов (Sequential menus)
  • Последовательное меню (Section menus)
  • Категориальные посадочные или целевые страницы (Category landing pages)

 

Меню аккордеон

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

Tide.com отображает поднавигацию с помощью аккордеонов

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

SBNation.com расширяет основные навигационные категории с помощью аккордеон-меню. Но подкатегории, к сожалению, занимают более трёх полных экранов и затрудняют человеку поиск  одного интересующего объекта. (Однако то, что меню включает имена команд в алфавитном порядке, немного сглаживает эту проблему, поскольку пользователям не нужно читать все ярлыки и искать нужную команду.)

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

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

Seventhgeneration.com: Цвет показывает отличие между главными и нижнеуровневыми категориями

 

Последовательное меню

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

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

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

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

Hiv.gov: Если на Android-устройстве нажать на значок “Назад” для перехода вверх по меню, вы переместитесь на ранее открытую в браузере страницу. Чтобы совершить переход в меню высшего уровня, нужно использовать аналогичную кнопку, которая находится внутри меню.

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

Есть сайты, которые вместо кнопки “Назад” намеренно используют другой знак для переходов по меню верхнего уровня. Например, в меню сайта Macy отображается специальная цепочка навигации (“тропа хлебных крошек” –  trail of breadcrumbss), позволяющая пользователям подниматься по IA сайта.

Macys.com: Данное последовательное меню использует цепочку навигации, поэтому пользователи вряд ли будут сбиты с толку или случайно нажмут на кнопку “Назад”, когда совершат переход вверх по основной иерархии. (Но примите во внимание то, что подобная цепочка навигации выглядит довольно нестандартно, из-за чего может быть принята посетителями в качестве набора основных категорий, которые есть на сайте).

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

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

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

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

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

 

Меню секций или разделов

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

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

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

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

Приведенный выше пример Би-би-си хорошо подходит к названным выше критериям.

Breastcancer.org: Основное меню (слева) и меню раздела (справа) отображены с помощью одинакового элемента (значок “Меню”). Посетители могут не понять, что разные функции одной кнопки зависят от расположения, поэтому они не станут нажимать на “Меню” для перехода к подкатегории текущей категории.

Mayoclinic: Меню раздела и главное меню в достаточной мере отличаются по внешнему виду, так что у людей не будет проблем со спутыванием одного с другим

 

Категориальные целевые страницы

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

 

Stanford.edu: Для осуществления поднавигации используются категориальные целевые страницы. Например, у целевой страницы “Admission” больше шести информационных экранов и ссылок к разнообразным подкатегориям.

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

 

Вывод

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

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

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

 

 

Ссылки:

Гарри Хохейзер, Бен Шнейдерман (Harry Hochheiser, Ben Shneiderman). Преимущества использования одновременных над последовательными меню в качестве сложности задачи. Международный журнал взаимодействия человека с компьютером, 2009.

Мари Кармен Пуэрта Мелгизо, Ути Видья и Герре ван Остендорп (Mari Carmen Puerta Melguizo, Uti Vidya, and Herre van Oostendorp). Поиск информации в Интернете: влияние типа меню, сложность пути навигации и пространственные возможности при сборе информации. Поведение и информационные технологии, 2012