Навигация: лучшие практики

Навигация — один из ключевых элементов удобного веб-дизайна.

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

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

Виды навигации

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

Различные виды меню могут применяться в интерфейсах по-разному в зависимости от их дизайна и расположения.

1. Стандартная горизонтальная панель навигации

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

В примере ниже мы видим шесть пунктов меню, включая логотип "Hurry", кликнув по которому посетители могут вернуться на главную страницу с внутренних страниц.

Горизонтальные меню часто бывают “липкими” — они фиксируются в верхней части страницы по мере прокрутки. Этот подход особенно полезен, когда основные CTA — такие как "войти в систему" или "связаться с нами" — расположены непосредственно в панели навигации, поскольку независимо от того, где находится пользователь, у него перед глазами остается кнопка, на которую можно нажать для выполнения целевого действия.

2. Гамбургер-меню

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

3. Мегаменю

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

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

‍

4. Выпадающее меню, которое открывается по наведению курсора

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

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

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

5. Меню по скроллу (якорные ссылки)

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

Такой тип навигации делает опыт взаимодействия с одностраничным сайтом более захватывающим и организованным. 

6. Вертикальная боковая панель

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

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

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

7. Футер

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

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

Лучшие практики в дизайне навигации

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

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

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

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

Вот несколько лучших практик, которые соответствуют этим критериям.

1. Добавьте хлебные крошки

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

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

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

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

2. Используйте знакомый язык и интуитивно понятную навигацию

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

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

Как утверждает Nielsen Norman Group, наша цель состоит в том, чтобы люди "полагались на распознавание, а не на запоминание", то есть меню должны быть короткими и удобными для сканирования, но при этом максимально понятными. Этого можно добиться, ограничив количество уровней навигации максимум тремя-четырьмя. Чем больше уровней, тем легче пользователям заблудиться в лабиринте страниц. У Nielsen Norman Group есть отличная библиотека ресурсов, посвященных теме навигации.

3. Организуйте навигацию стратегически

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

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

4. Поддерживайте единообразие структуры и стиля

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

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

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

5. Позаботьтесь об отзывчивости

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

6. Следите за цветовым контрастом 

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

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

7. Проверьте выпадающие меню на доступность

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

8. Обеспечьте читабельность и функциональность меню на разных устройствах

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

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

Начните применять эти лучшие практики прямо сейчас

Мы понимаем, что наши советы могут сперва показаться вам слишком сложными. 

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