Расположение меню на сайте: преимущества левосторонней вертикальной навигации

No items found.
Аудио перевод статьи
0:00
0:00
·

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

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

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

  1. Может ли главное меню включать более 7-9 категорий верхнего уровня? (Спойлер: это нормально, просто необходимо соответствующим образом все спланировать).
  2. Мы решили, что меню должно содержать большое количество пунктов, но они не помещаются в горизонтальной панели навигации. Где нам разместить меню?

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

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

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

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

Преимущества вертикальной навигации

Основные преимущества вертикальной навигации обусловлены ее способностью вместить множество категорий верхнего уровня.

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

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

  1. Вертикальная навигация предоставляет пространство для роста.

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

  1. Вертикальная навигация обеспечивает более эффективное сканирование пунктов меню, чем горизонтальная.

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

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

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


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

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

  1. Пользователи знакомы с вертикальной навигацией.

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

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

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

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


  1. Вертикальную навигацию можно легко перенести в мобильную версию сайта

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

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

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

Для вертикальной навигации требуется больше места

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

Новая и старая версии сайта Nua Bikes. Слева: в предыдущей версии использовалась левосторонняя вертикальная навигация, при этом коэффициент соотношения контента и элементов управления составлял примерно 5:1. Справа: при редизайне сайта пункты меню были перенесены в горизонтальную панель навигации, коэффициент составил 12:1 при том же размере экрана. Хотя в новой версии сайта в меню отображается гораздо меньше категорий верхнего уровня, такая навигация оставляет больше пространства для контента.

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

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

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

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

  1. Разместите вертикальную навигацию слева и сделайте ее заметной

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

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

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


  1. Не добавляйте одновременно и вертикальное, и горизонтальное меню.

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

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

  1. Не прячьте навигацию за иконками.

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

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

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

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

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

  1. В длинных меню размещайте наименее важные пункты в самом низу.

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

Резюме

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

Источник:
nngroup.com
·
comments powered by HyperComments