3 важных правила по навигации для сайта
3 важных правила по навигации для сайта
05 января 2016

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


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

Что такое навигация?

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

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

Сайт 70percentpure демонстрирует простую навигацию, которая одновременно и вертикальная и горизонтальная.

1) Сперва определитесь с архитектурой сайта

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

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

Вот несколько пунктов, которые помогут вам с клиентом сформировать общее понимание концепции и архитектуры:

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

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

2) Делайте ее простой... иногда

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

Простая навигация на сайте Bloomberg с лихвой покрывает комплексность всей информации на нем.

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

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

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

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

3) Выбирайте ориентацию осторожно

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

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

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

Непросто добиться хорошего результата в вертикальной навигации, если у Вас много продуктов. Одним из эталонов решения этой проблемы является сайт компании Jack&Jones

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

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

Правила – меняются

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

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

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Почему я бросил работу своей мечты в веб-дизайне?
Почему я бросил работу своей мечты в веб-дизайне?

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

26.02 0
Тренды веб-дизайна 2017 года
Тренды веб-дизайна 2017 года

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

26.02 0
Специфика работы full-stack designer
Специфика работы full-stack designer

Кто такой full-stack дизайнер и в чём заключается специфика его работы? За что full-stack дизайнер несёт ответственность в проекте.

26.02 0
-->


Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.