Лучшие практики создания навигации с точки зрения UX
Навигация это решающий аспект пользовательского опыта на сайте. Это то, как пользователи будут искать, куда им нужно попасть. Разочаровывающая или неудобная навигация приведет к раздражению пользователей, высоким показателям ненужных просмотров и незаверш нным потокам пользователей.
Как и в отношении любой другой составляющей пользовательского опыта, контекст и аудитория действительно определяют, как ваши дизайнерские решения могут оптимальным образом удовлетворять потребности ваших пользователей. К тому же, существует несколько ключевых практик, которые стоит помнить, работая над дизайном навигации.
Хорошая навигация полагается на наличие очень четкой информационной архитектуры (ИА). ИА это структура или способ организации сайта. Частью отличной ИА является сортировка типов контента по корзинам , соответствующим моделям мышления пользователя в отношении того, как должен работать сайт. Подумайте о том, что ваши пользователи могут ожидать увидеть, переходя на ваш сайт. Поисковая аналитика поможет вам определить, какие слова они используют.
Чем проще, тем лучше. Чем более сложная и перегруженная навигация, тем сложнее будет пользователям найти то, что им нужно. Навигация со слишком большим количеством уровней становится непригодной. Чтобы получить хорошо структурированную информационную архитектуру, вам придется выкинуть из навигации немало пользовательского опыта.
Навигация сайта Boots.com является примером чрезмерного количества вариантов со сложной ИА, использующей несколько различных парадигм категории, отделы, рекомендации и пр.
Маркировка должна быть понятной. Используйте сортировку по открытым картам, в которой пользователи сортируют информацию, а потом присваивают ей определенные ярлыки, или поисковую аналитику, чтобы понять, какую терминологию ожидает увидеть ваша аудитория. По тем же причинам, будьте осторожны, если решите сделать навигацию только по иконкам это может помочь сэкономить место, но может оказаться абсолютно неэффективным, если пользователи не знают, что эти иконки значат.
Эффективное использование четких ярлыков и простой навигации на сайте airbnb.ca прямолинейная качественная навигация всего лишь с одним уровнем.
Убедитесь, что оформление навигации соответствующее оно должно быть достаточно контрастным, чтобы выделяться на фоне остальной страницы. Табличная навигация была популярным вариантом для сайтов web 1.0, так как в ней было понятно, где находится пользователь, а где - навигация. Сегодня стили навигации развиваются, но все равно важно предоставлять пользователям максимум подсказок и сокращать когнитивную нагрузку. Навигация должна быть очевидной еще в момент перехода на страницу.
Более высокий контраст черного фона сайта Forever 21 помогает создать более четкую навигацию по сравнению с черным текстом на белом фоне на сайте American Apparel.
Оформление навигации также включает продумывание индикаторов местоположения, или как пользователи поймут, где они находятся. Это почти то же самое, что и указатель вы здесь на физических картах. Пользователям нужно быстро ориентироваться, чтобы понять, где они находятся, и куда им нужно перейти впоследствии.
Где я? На сайте BBC.com используется белое подчеркивание, отображающее раздел, в котором находится пользователь. А заголовок страницы усиливает это сообщение.
Кроме того, пользователи привыкли видеть навигацию в определенных местах. Как правило, навигация располагается горизонтально вдоль верхней границы и вдоль левого края. На некоторых мобильных и отзывчивых сайтах используется фиксированная панель навигации, которая остается перед глазами пользователя, пока он прокручивает страницу. Левый и правый верхние углы сегодня зачастую используются для размещения кнопок меню.
На сайте Slack фиксированная панель навигации, которая остается перед глазами, пока вы прокручиваете страницу на небольших экранах. Она расположена вверху экрана и занимает всю ширину экрана, что является привычным местом расположения навигационной панели.
Также учитывайте масштабируемость есть ли вероятность того, что навигацию придется расширять, чтобы вместить больше пунктов? Горизонтальная табличная навигация это пример не особо масштабируемого варианта, так как есть предел горизонтального размещения на экране, особенно на мобильных дисплеях.
Немного о кнопках-гамбургерах
Отзывчивый дизайн привел к появлению большого количества шаблонов и способов создания навигации, которая должна быть достаточно гибкой, чтобы работать как на маленьких, так и на больших экранах. Бред Фрост подробно описал большинство таких шаблонов, а также их преимущества и недостатки.
Одним из наиболее популярных вариантов является использование значка гамбургера для обозначения того, что если на него нажать, появится меню или панель навигации. Несмотря на то, что на сегодняшний день такой значок довольно часто используется на отзывчивых сайтах (например, cnn.com, airbnb.com), есть немало вопросов касательно его удобства. В одном из A/B тестирований было обнаружено, что словесное меню более эффективно, чем кнопка-гамбургер.
На сайте LinkedIn значок гамбургера используется для обозначения меню.
Использование этого значка будет и дальше развиваться, и вскоре он начнет появляться и в десктопных интерфейсах. Со временем люди привыкнут к нему, а пока тестирования с пользователями и отслеживание аналитики помогут вам убедиться, что используемая вами навигация соответствует вашему конкретному контексту.
Ведите своих пользователей туда, куда они хотят попасть
Кроме прочего, навигация это основной способ, используемый людьми для поиска пути на вашем сайте. Очень важно, чтобы она работала хорошо. Пользователи должны иметь возможность быстро разбираться, где они находятся, и находить, как попасть туда, куда они хотят. Если им придется искать путь наугад или методом проб и ошибок, это будет их раздражать, и они вернутся в Google, чтобы получить то, что им нужно. Если вы будете помнить эти лучшие практики навигации, это повысит ваши шансы на создание хорошего опыта для ваших пользователей. Как правило, навигация не место для инноваций. Используйте то, что работает!