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

  • 07.08.2020

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

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

Недавнее исследование, проведенное в Университет штата Калифорния в Сан-Хосе, немного прояснило то, какой лейаут является наиболее быстрым для навигации.

Навигационные лейауты можно разделить на:

  • верхний-верхний-верхний,
  • верхний-левый-левый,
  • верхний-верхний-левый,
  • верхний-левый-верхний,
  • левый-левый-левый,
  • левый-верхний-верхний,
  • левый-левый-верхний,
  • левый-верхний-левый.

Обозначения уровней упорядочены по приоритету и иерархии (то есть, [1] – первичный, [2] – вторичный и [3] – третичный ). Критерии оценки скорости включают в себя:

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Время навигации

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Нерешительность пользователя

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Движение курсора

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

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

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Ошибки выбора

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

Значительное количество ошибок выбора произошло, когда первичный и вторичный уровни были на верхней плоскости. Верхний-верхний-верхний и верхний-верхний-левый показали худшее результаты. Меньше ошибок выбора произошло, когда вторичный и третичный уровни находились на отдельной плоскости от первичного. Левый-верхний-левый и левый-левый-левый показали лучшие результаты.

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Предпочтения пользователя

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Лучшие расположения по всем критериям vs худшие

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

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

Рекомендации от автора

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

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

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

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

Левый-верхний-верхний лейаут упрощает сканирование основных категорий. Он отличает вторичные и третичные категории от первичных и размещает их на разных вертикальных уровнях. Потому что при горизонтальном сканировании больше шансов перепутать вторичные и третичные элементы.

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

Читайте также:  Что и кого смотреть, чтобы стать крутым веб-дизайнером

Выводы

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

1: Главное меню должно быть слева, а не сверху. (~ 17 секунд сохранено)

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

2: Первичное меню должно быть на другой плоскости, чем вторичное и третичное меню. (~ 23 секунды сохранено)

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

3: Вторичные и третичные меню должны быть в одной плоскости. (~ 9 секунд сохранено)

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

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

Подробный гайд: как оптимизировать скорость навигации в многоуровневом меню – Сей-Хай

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

Превью: Joseph Barrientos

По материалам: say-hi.me

GeekBrains

Добавить комментарий

Your email address will not be published. Please mark all required fields.