Упаковка

9 логичных подсказок и примеров для создания сайтов с легкой навигацией

Время чтения: 6 минут
Поделитесь ссылкой в социальных сетях, чтобы не потерять:

В сказке Гензель и Гретель дети бросали хлебные крошки (англ. breadcrumb), чтобы найти дорогу домой через лес.

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

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

Что собой представляет навигационная цепочка?

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

Якоб Нильсен – один из основателей Nielsen Norman Group настоятельно рекомендует использование навигационной цепочки с 1995 года: «Все, что предлагает дублирующее меню – облегчение навигации по сайту для пользователя, в случае если его содержание и общая структура в целом имеют смысл. Этого вполне достаточно для такой незначительной детали, занимающей только одну строку во всем дизайне».

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

Примеры и советы по навигационным цепочкам

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

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

2. Не делайте ваше дублирующее меню слишком громоздким

Ваша навигационная цепочка – это вспомогательный инструмент для вашей главной навигационной панели, поэтому она не должна быть слишком большой и выделяющейся на странице. Например, на сайте DHL основная навигационная панель сделана яркой и заметной, включающей колонки «Express», «Parcel & eCommerce», «Logistics» и т.п. Вторичная навигация занимает намного меньше пространства и показывает следующую цепочку: «DHL Global | > Logistics | > Freight Transportation». Мы же не хотим, чтобы наши пользователи перепутали навигационную цепочку с навигационной панелью?

3. Включите весь путь навигации в дублирующее меню

Мы дали запрос в Google «Elon University Non-Degree Students» (Студенты университета Elon), чтобы добраться до лендинга, представленного ниже. Однако Elon оказался умнее, включив в свою навигационную цепочку все этапы, не забыв про разделы «Home» («Главную страницу») и «Admissions» («Поступающим»). Опустив один из уровней, вы можете запутать пользователей, а дублирующее меню может стать потерять в своей пользе. Даже если посетители начинают просмотр сайта не с Главной страницы, вам следует оставить для них возможность легко исследовать сайт от самого начала.

4. Прогресс от более высоких уровней к более низким

Важно помнить, что навигационная цепочка читается слева направо таким образом, что крайняя слева ссылка приведет пользователя на Главную страницу, а крайняя справа окажется настоящим местонахождением посетителя. Согласно данным  Nielsen Norman Group большинство пользователей проводят 80% времени просматривая левую часть страницы и лишь 20% — правую, что подтверждает необходимость использования дизайна, ориентированного слева направо. Более того, крайняя слева ссылка появится в начале цепочки, четко показывая, что вы хотите сделать ее самой приоритетной, отметив самым высоким уровнем в навигации.

5. Называйте уровни в навигационной цепочке в соответствии с заголовками страниц

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

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

6. Оставайтесь креативными в дизайне

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

Например, Target использует дублирующее меню на страницах своих продуктов (кто не потеряется в виртуальном обувном разделе?), при этом обращаясь к символу «/» и двум типам цветов текста: черному и серому. В данном случае небольшие изменения в дизайне имеют смысл с точки зрения эстетики сайта.

7. Не загрязняйте дублирующее меню

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

Eionet, например, могли бы обойтись без текста «You are here» («Вы находитесь здесь»). Хотя задумывалось, что этот текст поможет посетителям – он несколько загромождает страницу. Используя грамотный дизайн, вы создадите ровно необходимую заметность навигационной цепочки без лишних представлений.

8. Рассчитайте какой тип дублирующего меню более всего подойдет для вашего сайта

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

Bed Bath & Beyond использовали цепочку, ориентированную на свойства, чтобы показать, к какой из категорий относится просматриваемый продукт. Таким образом, пользователи могут кликнуть на один из уровней и снова оказаться в разделе «Kitchen” или «Small Appliances», чтобы просмотреть похожие товары. Такой тип навигации более всего эффективен для клиентов этой компании. Когда вы создаете свою навигационную цепочку, принимайте во внимание, что окажется более полезным для посетителей вашего сайта.

9. Изучите свою аудиторию

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

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

Оригинальная статья: https://blog.hubspot.com/marketing/navigation-breadcrumbs

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

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

Подпишитесь на ежемесячную рассылку блога increase

Получайте уведомления с анонсами свежих материалов блога!

  • уже подписались: 0