Навигационный макет сайта

The Fastest Navigation Layout for a Three-Level Menu — Самый быстрый навигационный макет для трехуровневого меню

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

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

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

Компоновки навигации включают верх-верх-верх, верхний левый-левый, верхний-верхний левый, верхний левый-верхний, левый-левый-левый, левый-верхний-верхний, левый-левый-верхний и левый-верхний -осталось. Обозначения уровней упорядочены по приоритету и иерархии (т. Е. Первичный [1] -вторичный [2] -третичный [3]). Категории критериев включают время навигации, нерешительность пользователя, перемещение курсора, ошибки выбора и предпочтения пользователя.

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

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

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

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

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

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

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

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

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

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

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

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

Лучший против худших результатов

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

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

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

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

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

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

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

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

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

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

UX Design Последствия

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

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

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

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

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

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

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

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

Источник: uxmovement.com/navigation/the-fastest-navigation-layout-for-a-three-level-menu

#бренд #брендинг #фирменныйстиль #разработкалоготипа #логотип #брендбук #упаковка #дизайн #дизайнинтерьера #дизайнер #дизайнпроект #дизайнквартиры #дизайндома #дизайнстудия #дизайнкухни #дизайнинтерьеров #дизайнеры #дизайннаногтях #дизайнерскиеукрашения #дизайнквартир #дизайнерскаямебель #дизайнспальни #дизайндетской #дизайнгостиной #дизайны #дизайн_интерьера #дизайнерскиевещи #дизайнбюро #дизайнвручную #дизайнкоттеджа #дизайнлоготипа #дизайнинтерьер #дизаин #дизайнофиса #дизайнерыроссии #интерьер #графика #лебедев #вёрстка #оформление #ландшафт #стиль #креатив #архитектура #студия #фирменныйстиль #макет #сайт #ардеко #дизайнер #реклама #мода #веб #арт #одежда #композиция #искусство #типографика #паровоз #разработка #обои #флакон #комната #проект #творчество #эстетика #квартира #канализация #branding #design #logo #graphicdesign #marketing #brand #poland #art #socialmedia #brandidentity #creative #graphic #marketingdigital #illustration #logodesign #logotype #vector #designer #business #adobe #digital #illustrator #graphicdesigner #webdesign #logodesigner #identity #photoshop #facebook

Author avatar
admin

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *