На сайте навигация: Навигация по сайту — примеры как сделать навигацию удобной

Содержание

Элементы навигации сайта — как сделать сайт удобнее для пользователей, советы по дизайну

Евгения Черешкова, автор, редактор, SEO-копирайтер

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

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

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

Содержание

Меню

Меню на одностраничном сайте

Выделенный пункт меню

«Хлебные крошки»

Логотип

Индикатор загрузки страницы

Содержание статьи

Кнопки, призывающие к действию

Кнопка «Наверх»

Ссылки на другие статьи

Перелинковка

Баннеры

Иконки соцсетей

Меню

Лаконичное или развернутое

Есть распространенное мнение, что количество пунктов в главном меню сайта должно быть лаконичным — около 5—7 элементов. Для сайта дизайн-студии это оптимальный вариант. Как правило, сайт-визитка или лендинг содержит стандартный набор пунктов:

  • «О студии»,
  • «Портфолио»,
  • «Цены»,
  • «Услуги»
  • «Контакты»,
  • «Блог».

Лаконичное меню на сайте дизайн-студии Lines

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

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

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

Виды меню

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

Статичное меню вверху страницы

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

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

Пример статичного меню на сайте архитектурного бюро VArchitects

Фиксированное меню

Похоже на статичное, только остается на экране, если пользователь прокручивает страницу вниз.

Фиксированное меню на сайте студии «Технологии дизайна». На скриншоте середина страницы, а пункты остались в поле зрения

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

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

Фиксированное меню в боковой колонке на сайте студии DesignNika

Микс статичного и фиксированного меню

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

Пример можно посмотреть на главной странице интернет-магазина BasicDecor:

Вверху страницы остается статичное меню с переходом на информационные страницы и в каталоге

Прокрутите страницу вниз: пункты исчезнут и останется логотип, строка поиска, кнопки пользовательского меню

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

«Гамбургер»

Замена или дополнение статичному меню. Часто выглядит как три короткие полоски, при клике на которые открывается длинный список пунктов.

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

Меню-«гамбургер» на сайте дизайнера Филиппа Старка

За лаконичными полосками скрывается целая страница с пунктами меню

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

Многоуровневое меню

Более классический способ уместить все и сразу — сделать выпадающее многоуровневое меню. Это статичное меню, где на виду остается лаконичный вариант с 4—7 пунктами, а по клику на пункт раскрывается подменю.

Многоуровневое меню на сайте студии «Мечты сбываются»

Плюс такого вида — можно сгруппировать и уместить множество пунктов. Важно продумать, какие пункты останутся в поле зрения пользователя.

Меню на одностраничном сайте

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

Индикаторы местоположения

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

Пример лендинга с индикаторами навигации на сервисе онлайн-конструкторов Tilda

Выделенный пункт меню

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

Поможет выделенный пункт меню. Если посетитель смотрит фото проектов, выделяется пункт «Портфолио». Если изучает карту проезда до офиса, подсвечивается пункт «Контакты».

Пункты меню подсвечиваются на сайте студии TeseiaDeco

Подсветка пунктов отлично работает на лендингах и сайтах с лаконичным меню.

«Хлебные крошки»

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

«Хлебные крошки» в BasicDecor. На скриншоте страница с каталогом бра для спальни. Пользователь может перейти на страницу с другими бра или на каталог светильников. Ему не нужно лишний раз прокручивать страницу вверх и искать нужные пункты в главном меню

Переход с логотипа на главную страницу

Пункт «Главная» перегружает меню. Пользователи давно выучили, что они могут перейти на главную страницу сайта, кликнув на логотип компании.

Индикатор загрузки страницы (прелоадер)

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

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

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

Варианты прелоадеров

Когда пользователь видит такой знак, он понимает, что-то подгружается. И уйдет, только если фото «тяжелые» и нужно слишком долго ждать загрузку каждой картинки.

Содержание статьи

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

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

Кнопки с важным действием

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

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

Студия Lines поставила наверх главной страницы кнопку с предложением узнать стоимость дизайн-проекта

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

Кнопка «Наверх» («To top»)

На лендингах, на страницах каталогов и портфолио, в длинных статьях пользователь хочет быстро возвращаться вверх страницы. Помогает в этом кнопка «Наверх».

Это элемент, который появляется после того, как пользователь прокрутил 2—3 экрана. Важно, чтобы кнопка «Наверх» в отличие от кнопки с призывом к действию гармонично вливалась в дизайн сайта, не выбивалась.

Кнопка «Наверх» в каталоге товаров BasicDecor

Ссылки на похожие по теме статьи

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

В журнале Dezeen пользователи в конце каждой статьи видят рекомендации: прочитать больше статей и посмотреть видео по теме

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

Переход по ссылкам внутри сайта (перелинковка)

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

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

Еще один вариант перелинковки — установка ссылок на разделы сайта с превью статей:

При наведении на превью открывается дополнительная ссылка, ведущая в раздел «Архитектура»

Баннеры

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

Баннер на сайте Dezeen с призывом о подписке

Иконки с переходом на соцсети или шерингом

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

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

В начале статьи на Dezeen стоят кнопки «расшаривания». Пользователь кликает на иконку, может рассказать о своих впечатлениях о статье, рекомендовать ее друзьям

Превью статьи со ссылкой на сайт появляется в его ленте или сторис в соцсети

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

Когда вы хотите доработать или заказать свой сайт

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

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

Заказывая разработку и доработку сайта, обсудите с графическим дизайнером и программистами следующие элементы сайта:

  1. Какие пункты нужны пользователям в главном меню. Здесь инициатива исходит от владельца сайта. Подумайте, какие пункты нужны вашим клиентам.
  2. Вид меню, которым удобнее пользоваться на вашем портале:
    • статичное,
    • фиксированное,
    • микс статичного и фиксированного,
    • «гамбургер»,
    • многоуровневое.
  3. Подсветка текущего пункта меню. Об этом нужно сказать разработчикам. Графический дизайнер продумывает, как именно должен подсвечиваться пункт.
  4. Индикаторы местоположения на лендинге. Если вы считаете, что они нужны, обсудите с подрядчиками дизайн и функциональность.
  5. Попросите программистов сделать переход с логотипа на главную страницу сайта.
  6. «Хлебные крошки» нужны на многоуровневых сайтах. Например, вы ведете блог со множеством разделов или у вас большое портфолио, работы разделены на рубрики. Помогите пользователю сориентироваться. Попросите разработчиков поставить «хлебные крошки».
  7. Индикаторы загрузки страницы обсуждаются с разработчиками.
  8. Обсудите с программистами возможность автоматической подгрузки содержания статьи. Попросите продумать возможность отключать содержание в статьях, где оно не нужно. С графическим дизайнером обсудите местоположение и внешний вид.
  9. Дизайн и местоположение кнопок с призывом к действию. Ориентируйтесь на вашу целевую аудиторию и собственные цели. Нужен ли вам звонок в студию, заявка на разработку дизайн-проекта, заполненный бриф. Обсудите с дизайнером вид и расположение таких кнопок. Помните, их не должно быть много, они должны выделяться из общего дизайна, но не выглядеть навязчиво.
  10. Кнопка «Наверх» устанавливается разработчиками.
  11. Возможность подгружать превью статей внизу публикации. Это может быть автоматическая подгрузка, например, последних трех—пяти публикаций. Но тогда вы не сможете управлять, какие статьи подтягивать. Другой вариант попросить разработчика, чтобы он сделал возможным выбирать такие статьи.
  12. Возможность перелинковки, расположение групп ссылок — сбоку, напротив соответствующего абзаца и/или под разделом. В дальнейшем вы сами будете устанавливать ссылки в своей статье. С разработчиками нужно обсудить, как это сделать.
  13. Вряд ли вы захотите все время видеть один и тот же баннер на сайте. Попросите разработчиков сделать блок, куда вы сможете подгружать баннеры. Местоположение обсуждается с дизайнером.
  14. Место расположения иконок с переходом на ваши группы в соцсетях продумайте с дизайнером.
  15. Иконки соцсетей с возможностью расшаривания. Они должны автоматически появляться для каждой статьи — попросите это сделать разработчиков.

———————-

Смотрите также по теме:

Как создать и чем наполнить сайт для дизайнера интерьера

Как сделать сайт на Tilda. Подборка обучающих материалов

Тексты на сайте дизайн-студии: как писать, чтобы читали

Архитектура статьи: как сделать текст интереснее с помощью верстки

Как зарегистрировать адрес своего сайта

————————————————————————

Евгения Черешкова,

редактор, автор, SEO-копирайтер

Помогаю сделать контент интереснее и понятнее для читателя.

Сайт textforbusiness.ru

Telegram, WhatsApp: +7(903)000-47-04

Skype, email: [email protected]

как довести пользователя до покупки

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

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

Такое решение открывает возможности в продвижении сайта по низкочастотным запросам, обеспечивая рост трафика и при этом экономит ваш бюджет.

4. Закладывайте навигацию сайта с учетом масштабируемости бизнеса

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

Меню интернет-магазина косметики Mon Amie. В блоке достаточно места для размещения новых категорий при необходимости.

5. Экспериментируйте, но не забывайте про юзабилити

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


Пример графической навигации на сайте интернет-магазина Juliette

6. Правильно расставляйте акценты и выделяйте главный CTA

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

Пример оформления кнопок в интернет-магазине Intertop. Кнопка добавления товара в корзину более акцентная и заметная

7. Используйте полную навигацию на десктопе

Меню интернет-магазина в виде бургера для адаптивной версии сайта — верное решение, но не стоит использовать скрытую навигацию для десктопной версии. Согласно исследованию, скрытым меню на десктопе пользуются только в 27% случаев, а полную или комбинированную навигацию пользователи используют почти в два раза чаще: в 48% и 50% случаев соответственно.

Если у вас гипермаркет или широкий ассортимент товаров, то в таком случае стоит добавить примечание «Каталог товаров» и сделать этот элемент визуально заметным для пользователя.

Реализация каталога на сайте гипермаркета Rozetka


8. Выводите популярные категории товаров в основную навигацию

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

Пример навигации на сайте детского интернет-магазина Antoshka


9. Используйте мега-меню

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


Мега-меню на сайте интернет-магазина электроники Denika

10. Правильно реализуйте акции и распродажи на главной странице

Существуют 2 основных способа реализации:

  1. Вынесите на главную страницу интернет-магазина категорию «Акции/Распродажа», в которой будут собраны акционные товары.
  2. Направьте пользователей на страницу выдачи категории с активным фильтром «Акции/Распродажа», чтобы посетитель, убрав фильтр, мог просмотреть все товары категории.

На сайте Zlato.ua при наведении на пункт меню Sale, пользователь может выбрать интересующую его категорию и подкатегорию с акционными товарами

11. Используйте подкатегории

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


Реализация подкатегорий на сайте Dicentra

12. Выводите популярные фильтры

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


Пример выведения популярных фильтров в главном выпадающем меню интернет-магазина Denika

13. Покажите пользователям их местонахождения

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

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


Пример реализации «хлебных крошек» на сайте Intertop

14. Отображайте блоки с просмотренными товарами

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


Блок с ранее просмотренными товарами в интернет-магазине детской тематики Pampik

15. Предлагайте пользователю похожие товары в карточке

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


Блок с похожими товарами на сайте Pampik

16. Реализуйте меню в футере

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

Футер интернет-магазина Intertop


Итак, какая же должна быть удобная навигация на сайте?

Основные характеристики удобной навигации сайта интернет-магазина:

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

Как навигация влияет на юзабилити сайта

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

Навигация по веб-сайту — это то, что многие создают после страниц и контента. Согласно недавнему опросу, только 50% интернет-пользователей смогли предсказать, где будет располагаться релевантный контент, на основе стандартной структуры навигации веб-сайта.

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

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

Что такое дизайн навигации по сайту?

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

Дизайн-навигацию веб-сайта можно разделить на три большие группы:

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

Плохая навигация может вызвать такие проблемы, как:

  • увеличение показателя отказов,
  • сократить время на сайте,
  • снижение конверсии,
  • потеря дохода.

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

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

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

Перейти к статье

Важные правила, которые сделают навигацию по сайту
удобней и привлекательнее для пользователя:
  • Традиционность: не нужно использовать инновационные и нестандартные дизайнерские решения в навигации сайта, это только оттолкнет среднестатистического пользователя.
  • Очевидность: создавайте элементы навигации описательного характера и сделайте их предсказуемыми для пользователя. Помните, что они выступают еще и в роли SEO-контента.
  • Всего в меру: множество выпадающих меню только создает хаос и отпугивает пользователя, старайтесь создать гармонию между меню и другими элементами навигации.
  • Краткость: сведите к минимуму содержание навигационной панели.
  • Стандарты: в навигационной системе необходимо всегда использовать ссылки. Наличие только лишь изображений без альтернативного текста идет в разрез с привычным для пользователя понятием о стандартной форме текста, что способно отпугнуть его.
  • Последовательность: помните, что наибольшее внимания пользователя привлекают первый и последний пункты панели навигации. А так же то, что просмотр меню происходит слева направо, следовательно, наименее значимые ссылки для привлечения внимания пользователя будут находиться в центре меню.
  • Обратный путь: у пользователя должна быть возможность нескольких вариантов возвращения назад, а не только лишь кнопка назад в браузере.
Воспользуйтесь этими рекомендациями, чтобы улучшить юзабилити вашего сайта

Используем веб-визор для анализа юзабилити навигации

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

В первую очередь нужно понять насколько структура вашего сайта понятна пользователям. 

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

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

Элементы навигации сайта

Логотип компании — располагается на всех страницах сайта
  • Традиционно располагается в левом верхнем углу страницы
  • Является графической ссылкой на главную страницу сайта
Меню сайта — структурирует содержание сайта
  • ГОРИЗОНТАЛЬНОЕ МЕНЮ – располагается в верхней части страницы и часто дублируется над футером.
  • Горизонтальное меню обычно имеет 5-7 пунктов, если их больше, то используется выпадающее меню
  • Помните, что выпадающее меню кроме экономии места, может быть не очень наглядным и иметь низкую эффективность
  • ВЕРТИКАЛЬНОЕ МЕНЮ – чаще всего располагается справа, потому что эта зона на сайте наиболее активна
  • Вертикальное меню – обязательно должно присутствовать на всех страницах
Панель иконок — вспомогательная панель инструментов
  • ПАНЕЛЬ ИКОНОК – располагается в верхней части страницы сайта, чаще всего бывает закреплена.
  • Помогает при помощи привычных графических иконок быстро перейти к важным действиям.
  • Содержит кнопки: «добавить в избранное», «зарегистрироваться», «ваша корзина», «карта сайта», «на главную» и другие.
Строка навигации — «хлебные крошки»
  • Хлебные крошки показывают точное место «где мы сейчас находимся»
  • Визуально подсказывают, как вернуться на некоторое количество шагов назад
Поиск по сайту — необходим каждому сайту
  • Удобно расположить в панели иконок
  • Поиск помогает пользователю быстро найти нужную информацию, при помощи ключевого слова, вводимого в строку поиска
Карта сайта — обязательный элемент навигации
  • Содержит в структурированном виде рубрикатор всех категорий и подкатегорий сайта
  • Существенно экономит усилия и время посетителя для того чтобы сориентироваться
Рекламные баннеры — на странице продажи
  • Акцентируют т внимание посетителя сайта на самых актуальных предложениях
  • Обычно выполняются с элементами анимации, чтобы заставить пользователя обратить внимание на важную информацию
Внутренняя перелинковка связанных страниц
  • Используется, чтобы не усложнять структуру, создавая переходы дальше третьей страницы 
  • Помогает быстро перейти к дополнительной информации «по теме»
  • Для разделов Отзывы или Новости и хорошо использовать ссылки Предыдущая/Следующая

Вам нужен хороший современный сайт и выбираете исполнителя?

Тогда не теряйте время, напишите нам прямо сейчас!

Оставить заявку

Пять статей по юзабилити, которые вам помогут разобраться в теме

Мега-меню и скрытая навигация: рекомендации от экспертов rusability.ru

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

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

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

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

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

21.11.2021

← Поделиться с друзьями !

Оригинальные решения навигации на сайте

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

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

Ideas on ideas.   Меню реализовано в формате плиточек. Каждый линк по сути «говорит» к пользователю,повествуя об информации,  которой располагает.

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

Меню на  сайте Jamesanderson613 при наведении  открывает иллюстрацию и перенаправляет пользователя на необходимую страницу.

 Ok-studios предлагает  одновременно горизонтальное пролистывание страниц сайта  и вертикальное.

Psychnpsych. Каждое слово и каждый блок  на сайте ведет  к определенной рубрике, которая раскрывает смысл слова.

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

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

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

Moodsofnorway — это интересная подсветка меню и по сути фон сайта остается прежним, но передвигается основной контент, зависимо от рубрики.

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

 Enviramedia: меню подсвечивается, а содержание рубрики в формате текстового сообщения появляется непосредственно справа.

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

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

Wearemanic. Навигация на сайте осуществляется сверху-вниз, при этом «путешествие» по сайту осуществляется посредством клика на определенную рубрику.

Macrabbit — отличный пример оригинального меню и перемещения по сайту.

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

Cldesignz.  Активное меню (название рубрики и человечек-герой сайта) подсвечивается. При этом справа присутствует вспомогательное меню — которое позволяет передвигаться между рубриками, а также возвращаться на исходную точку.

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

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

Vanityclaire. Навигация по сайту осуществляется справа-налево и наоборот. При это пользователь всегда видит вспомогательные кнопки — Home, Back, Next.

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

Автор — Дежурка 

Также Вас могут заинтересовать следующие статьи: 

 

 

Планирование и реализация навигации на сайте SharePoint — SharePoint in Microsoft 365

  • Чтение занимает 8 мин
Были ли сведения на этой странице полезными?

Оцените свои впечатления

Да Нет

Хотите оставить дополнительный отзыв?

Отзывы будут отправляться в корпорацию Майкрософт. Нажав кнопку «Отправить», вы разрешаете использовать свой отзыв для улучшения продуктов и служб Майкрософт. Политика конфиденциальности.

Отправить

В этой статье

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

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

В этой статье

Навигация по сайту SharePoint

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

Навигация по информационному сайту

Навигация по сайту группы

Навигация по центральному сайту

«При наблюдении за клиентами, выполняющими задачи на веб-сайтах, мы заметили некоторые общие закономерности. Например, мы обнаружили, что при переходе на определенный сайт пользователи начинают с навигации примерно в 70 % случаев. Когда у пользователей возникают сложности с навигацией, они могут пользоваться поиском по сайту», — Джерри МакГоверн

Почему навигация важна

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

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

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

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

Основы навигации по сайту и странице

При планировании структуры навигации по сайту нужно задуматься о следующем:

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

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

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

Упорядочение

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

  • Службы
  • Продукты
  • Действия
  • Аудитории (если посетители могут ясно определить аудиторию, к которой они принадлежат, например учащийся или преподаватель)
  • Области знаний или функции

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

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

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

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

Меню навигации в SharePoint

Существует два типа стилей меню навигации для сайтов SharePoint: вложенное и мегаменю. Сайты групп поддерживают только вложенное меню, но информационные сайты поддерживают оба типа: мегаменю и вложенные меню. Центральные сайты (как информационные, так и сайты групп) добавляют мегаменю на сайт. Мегаменю недоступны на локальных сайтах. Узнайте, как настроить навигацию на сайте SharePoint.

Вложенное меню

Мегаменю

Ссылки меню

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

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

Интерфейсы меню

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

Символы меню

Все типы ссылок меню поддерживают оформление с использованием эмодзи. Эмодзи можно использовать в начале или конце подписи ссылки, чтобы сделать ссылки более привлекательными.

Выберите эмодзи, относящийся к теме подписи. Эмодзи можно найти на сайте emojipedia.org или использовать клавиши Windows + точка (.). Скопируйте эмодзи и добавьте его в подпись при редактировании структуры навигации.

Ссылки на страницы, а не на отдельные документы

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

  • Можно ли воссоздать содержимое документа в виде страницы, а не документа? Страницы удобнее просматривать в Интернете, и они предоставляют возможности создания расширенных динамичных возможностей для посетителей. Современные страницы удобно просматривать на мобильных устройствах. Документы прекрасно подходят для загрузки или печати, но если нужно лишь прочитать информацию, короткая, хорошо сконструированная страница — это более оптимальный способ представить и поддерживать сведения.
  • Внедрите в страницу документ или ссылку на документ. Когда посетитель щелкает ссылку на страницу, навигация сайта остается видимой. Страница позволяет предоставить контекст для документа и информирует читателя о контексте сайта.

Практика поэтапного представления информации

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

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

  • Где я?
  • Что можно здесь делать?
  • Что делать дальше?

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

Управление ожиданиями от навигации

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

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

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

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

Правильная навигация сайта, какую навигацию делать на сайте?

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

Правильная навигация сайта. Какую навигацию делать на сайте?


Watch this video on YouTube
В этой статье мы выделим такой важный фактор как навигация, о чем часто забывают новички.

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

Какую навигацию делать на сайте?

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

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

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

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

Правила хорошей навигации

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

Чтобы не упустить важные моменты, учтите следующие рекомендации:

  1. Интуитивность. Навигация не должна быть сложной, поэтому как бы вам не хотелось, лучше отказаться от сложных форм и меню, написанных, к примеру, на Flash. Лучше использовать стандартную навигацию с привычным интерфейсом.
  2. Значимость. Нет смысла добавлять новые пункты меню, ссылки и блоки с представлением материалов, которые не важны вашим посетителям. Каждый элемент навигации должен быть полезным, перегружать ресурс не стоит.
  3. Идентичность. Некоторые вебмастера намеренно пытаются проявить свою креативность и создают разную навигацию, для отдельных страниц сайта. Лучше этого не делать, так как посетители могут легко в этом запутаться.
  4. Гармоничность. Все элементы навигации, которые вы устанавливаете на сайте, должны хорошо вписываться в общий дизайн ресурса. Это касается не только меню, но и таких элементов как хлебные крошки или блоки с ссылками.

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

Удобная навигация сайта начинается с главного меню

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

Только не спешите добавлять как можно больше пунктов, чтобы показать, насколько много разной информации на сайте. Многочисленные тестирования показали, посетители воспринимают только 5-7 пунктов меню. Что происходит с остальными? Они просто не попадают во внимание.

Например, если готовится меню для интернет-магазина, оптимальными пунктами главного меню станут: услуги, цены, контакты, каталог, о компании.

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

Постраничная навигация сайта – внутренняя перелинковка

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

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

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

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

Навигация по странице сайта

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

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

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

Как сделать навигацию на сайте: дополнительные меню

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

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

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

Посмотрите, как провести и где заказать SEO аудит сайта. Это поможет оценить навигацию и юзабилити сайта в целом.

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

Вам также будет интересно:
— Советы по внутренней перелинковке
— Ошибки блоггеров
— От чего зависит успех блога

Удобная и понятная навигация на сайте

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

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

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

Расположение основных элементов

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

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

Подписи

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

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

Вложенность

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

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

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

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

Нужен профессиональный сайт с продуманной навигацией? Доверьте выполнение поставленной задачи нашим специалистам.

Статьи по теме

  • Разработка сайта: вредные советы для желающих платить больше и постоянно переделывать Разработка сайта − насущная необходимость для п…

    2021-10-04

  • У вас периодически появляется необходимость написать лендинг, но имеющихся знаний и навыков хватает только для оформления идеи? Если вы…

    2021-08-10

  • Создание веб-сайта − процесс, требующий существенных временных затрат и привлечения специалистов. Над решением поставленной задачи, ка…

    2021-05-07

  • Одной из важных особенностей сферы SEO является её постоянное преображение. Ещё недавно для успешного продвижения важна была ссылочная м…

    2021-04-30

  • DdoS (Distributed Denial of Service, «отказ в обслуживании») − атака, которая направлена на то, чтобы сделать сайт недоступным. Она состоит в отправке на …

    2020-12-29

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

    2020-08-17

  • Одной из важных составляющих успешного продвижения сайта в Google является понимание процесса оценки качества страниц поисковыми роботам…

    2020-08-10

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

    2020-06-04

  • Согласно данным статистики, более 50% пользователей ищут информацию в интернете с помощью мобильных устройств. В силу этого вопрос адапт…

    2020-05-29

  • Продажи в формате B2B − отдельное направление коммерческой деятельности. Его особенность состоит в том, что все сделки заключаются тольк…

    2020-02-05

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

    2020-01-22

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

    2019-10-30

  • Посадочные страницы (лэндинги) − именно то место, куда попадают пользователи из различных источников трафика. На них может вести поиско…

    2019-10-10

  • Ваша интернет-площадка уже проработала некоторое время? Стоит проанализировать, не устарел ли сайт. И речь даже не о дизайне, ведь ресурс…

    2019-09-19

  • Создание высококонверсионного лэндинга − настоящее искусство. Посадочная страница должна быть красивой, привлекать внимание пользова…

    2019-04-25

Рекомендации по проектированию навигации для веб-сайтов и приложений

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

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

Типы веб-навигации

Верхнее меню

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

Верхнее меню навигации на Medium.com. Изображение от Medium.

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

Ted использует семь высокоуровневых параметров навигации и открывает дополнительные параметры при наведении курсора. Изображение Теда.

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

Пример липкой верхней навигации. Изображение от Elementor.

Боковая панель

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

Forbes предоставляет боковую панель с выбором редактора и последними новостями, чтобы помочь посетителям ориентироваться в контенте.

Нижний колонтитул

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

Нижняя панель навигации на Apple.com в нижнем колонтитуле.

Панировочные сухари

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

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

В чем разница между картой сайта и навигацией?

Существует распространенное заблуждение, что карта сайта — это навигация по сайту.Важно понимать роль навигации и карты сайта. Карта сайта показывает, из каких страниц состоит ваш сайт. Основная цель карты сайта — категоризировать контент. Он отвечает на вопрос: «Какие страницы у меня есть на сайте?» С другой стороны, навигация объясняет, как перейти на каждую страницу.

Основные советы по дизайну для создания отличной веб-навигации

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

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

Не скрывайте навигацию

Когда дело доходит до дизайна навигации веб-сайта, дизайнеры всегда должны выделять наиболее важные для посетителей вещи. Это правило работает как для содержимого, так и для параметров навигации.Чтобы сэкономить место, некоторые дизайнеры используют такие шаблоны, как гамбургер-меню, которое по умолчанию скрывает навигацию и делает ее доступной по запросу. Лучше избегать использования гамбургер-меню, потому что некоторые посетители не нажимают / не нажимают на значок гамбургера, чтобы увидеть варианты. Nielsen Norman Group предупреждает нас, что скрытая навигация увеличивает время выполнения задач для посетителей. Вспомните старую поговорку: «С глаз долой, с ума». Он все еще работает сегодня и может быть применен к пользовательскому опыту.

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

Priority + в действии. Количество опций зависит от состояния экрана.
Изображение предоставлено Guardian через Брэда Фроста

Разместите навигацию там, где пользователи ожидают ее увидеть

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

Визуально отделить навигацию от контента

Раздел навигации не должен выглядеть остальной контент на веб-странице.Он должен выделяться. Использовать пробелы (отрицательное пространство) для визуального разделения содержимого и вариантов навигации.

Stripe использует пробелы для отделения навигации от содержимого.

Избегайте стилизации параметров навигации в виде кнопок

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

Dribbble использует дизайн в виде кнопок для опции «Зарегистрироваться».

Пишите описательные этикетки

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

Избегайте общих ярлыков, таких как «Статьи» или «Видео».Такие ярлыки не являются описательными, потому что они сообщают посетителям формат содержания, но не тему. Люди посещают веб-сайты, чтобы получить ответы на свои вопросы, и их редко волнует, в каком формате информация будет им доставлена. Так что лучше использовать фразы, соответствующие целям вашей целевой аудитории. Планировщик ключевых слов Google — очень полезный инструмент для поиска описательных меток в соответствии с доменом сайта.

Ограничьте количество вариантов верхнего уровня семью

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

  • Помогите пользователям лучше понять интерфейс. В исследовании «Магическое число семь, плюс или минус два» Джордж А. Миллер утверждает, что кратковременная память содержит только семь элементов плюс-минус два. Чем больше у вас вариантов навигации, тем сложнее будет запоминать и обрабатывать информацию для ваших посетителей.
  • Помогите поисковым системам проанализировать ваш сайт. Меньшее количество элементов в вашей навигации подходит для поисковых систем.Чем лаконичнее ваша навигация, тем больший «вес» приобретает каждый вариант.

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

Следите за порядком

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

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

Добавьте поиск, чтобы упростить веб-навигацию

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

Избегайте раскрывающихся меню

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

Выпадающий список на Amazon.com. Просмотр списка категорий утомительно и требует много времени.

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

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

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

Проверьте дизайн навигации своего веб-сайта на мобильном устройстве

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

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

  • Навигационные ярлыки должны легко читаться на экране мобильного телефона. Размер шрифта 16 пикселей (CSS-пикселей) — хороший вариант по умолчанию для большинства случаев.
  • Параметры навигации должны быть достаточно большими, чтобы их можно было легко нажимать. Сенсорная мишень с физическим размером около 9 мм подходит для большинства групп пользователей.

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

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

Проверьте представление «Схема поведения» в Google Отчет о поведении Google Analytics. В Google Analytics рядом с каждым из элементы навигации с указанием процента возврата. Этот отчет будет предоставить идеи об общих потоках, которым следуют пользователи, когда они перемещаются по вашему сайту. и что вам нужно сделать, чтобы оптимизировать такие потоки.

Пример отчета о поведении Google Analytics.

Заключение

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

Правила современной навигации

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

В своей статье «Навигация важнее поиска» Джерри Макговерн обсуждает, как его команда «провела обширное тестирование задач с технической аудиторией.70 процентов начали задачу, щелкнув ссылку, 30 процентов использовали поиск ». Макговерн утверждает, что человека в первую очередь полагаются на навигацию, потому что легче и быстрее нажимать ссылки, чем использовать поиск. Он объясняет, что когда слова ссылки соответствуют тому, что люди ищут, с большей вероятностью они нажмут на ссылку.

Однако, если ссылок слишком много, если они плохо организованы или неправильно названы, люди не могут использовать ссылки. Он заканчивает статью словами: «Четкие меню и ссылки — это фундамент, на котором построены все великие веб-сайты.»Хотя это важное правило, которому нужно следовать для разработки эффективной навигации, оно не единственное. И хотя дизайн навигации всегда будет предметом постоянных дискуссий, есть несколько передовых практик, которых каждый дизайнер пользовательского интерфейса в 2017 году должен придерживаться при навигации по веб-сайту.

Итак, каковы правила создания отличной навигации? Давайте рассмотрим эти правила:

  • Приоритет согласованности
  • Дизайн четких взаимодействий
  • Избегайте глубокой навигации
  • Дизайн для быстрой совместимости

Приоритет согласованности

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

Подстраницы и целевые страницы

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

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

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

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

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

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

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

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

Панировочные сухари

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

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

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

Дизайн четких взаимодействий

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

Четкие индикаторы функциональности

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

Использование этикеток с иконами

Иногда значки могут заменять текстовые ссылки.Добавление ярлыка со значком уменьшит двусмысленность. Например, вместо использования спорного значка гамбургера устраните потенциальные проблемы с удобством использования, разместив рядом с ним ярлык «Меню». Это также полезно с другими общими значками, такими как «Контакт» или «Вход».

На веб-сайте teehan + lax (ныне несуществующей UX-фирмы) метка «МЕНЮ» находится рядом со значком гамбургера. Ярлык по-прежнему отображается, когда значок гамбургера меняется на «X» и обеспечивает контекст, в котором значок «X» предназначен для закрытия расширенного меню.

Различия значков ссылок

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

Согласно исследованию NNG, «пользователи примерно на 37% быстрее находят элементы в списке на веб-странице, когда визуальные индикаторы различаются как по цвету, так и по значку, по сравнению с одним текстом». Изменение цвета значков в дополнение к самому дизайну значков поможет людям легче и быстрее понять, что значки служат разным целям.Например, в Твиттере значки, с которыми пользователь не может взаимодействовать, представляют собой цветные квадратные значки с белыми формами, такие как значок «понравилось» и значок «подписался на вас». Значки, с которыми пользователь может взаимодействовать, серые, при наведении курсора они меняют цвета и отображают полезную метку, объясняющую взаимодействие.

В Twitter есть два стиля иконок.

Стремитесь к плоской навигации

Чтобы создать отличную навигацию, информационная архитектура (IA) и иерархия веб-сайта должны поддерживать ее.По мере разработки карты сайта стремитесь к «плоской навигации», при которой пользователь может получить доступ к самой глубокой вложенной странице сайта за один-два клика.

Хотя плоская навигация идеальна, также неверно полагать, что из-за ограниченной кратковременной памяти меню должны быть короткими. Цель меню, как заявляет Nielsen Norman Group, состоит в том, чтобы люди «полагались на распознавание, а не на отзыв», поэтому меню должно быть достаточно коротким для сканирования, но достаточно длинным, чтобы быть четким.

Ограничить количество уровней

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

Плоская иерархия: обратите внимание, что на втором уровне всего 3 вертикальных уровня и больше разделов.

Глубокая иерархия: обратите внимание, что на втором уровне может быть до 5 вертикальных уровней и меньше секций.

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

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

Также подумайте о консолидации или удалении содержимого. Самая «плоская» версия плоской навигации — это популярные в настоящее время конструкции полностраничной навигации, в которых нет подстраниц, а все страницы сайта находятся на одном уровне.

Обратите внимание на то, что на веб-сайте Big Spaceship навигация представляет собой всего лишь полностраничный единый список ссылок. Агентство решило уменьшить акцент на некоторых элементах навигации, используя более темный цвет шрифта. (При этом используется плоская иерархия, но при этом сохраняется некоторая приоритизация!)

Уникальный визуальный дизайн для каждого уровня

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

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

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

Использовать указатели местоположения

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

На веб-сайте Audubon обратите внимание, как «Сохранение» выделяется синим цветом в навигации, когда пользователь находится на странице в этом разделе, например, на странице «Рабочие земли».

Дизайн для адаптивной совместимости

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

Удалить взаимодействия при наведении

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

Различная навигация для мобильных устройств и настольных ПК

В NNG Mobile First НЕ только для мобильных устройств, они рекомендуют оптимизировать навигацию для каждого устройства. Хотя может показаться, что проектирование и разработка отдельных дизайнов устройств для устройств требует дополнительных усилий, NNG объясняет, что это лучший пользовательский опыт, потому что «разные устройства имеют разные возможности взаимодействия и разные размеры экрана».

Например, для настольных компьютеров в дизайне навигации The Japan Times используется более широкая ширина экрана, а категории (второстепенные элементы) выводятся по горизонтали на отдельной панели.На мобильных устройствах в той же навигации используется шаблон дизайна гамбургер-меню, а при расширении используется более длинное вертикальное пространство телефона и перечисляются второстепенные элементы под каждым заголовком раздела, а не разделение основного и дополнительного уровней на две полосы. Дизайн не является прямым переводом — обратите внимание, как синие линии находятся рядом со второстепенными элементами, а не с основными элементами, что на самом деле является более точным представлением дизайна на мобильных устройствах. Тем не менее, между двумя дизайнами существует взаимосвязь при оптимизации для каждого вида.

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

Улучшите навигацию по дизайну

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

5 причин, почему навигация по сайту важна

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

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

1. Увеличение продолжительности посещения и снижение показателя отказов

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

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

Веб-сайт

Maderaw предлагает клиентам четкий маршрут для покупки товаров. Следующие изображения показывают «путь» к покупке продукта на их веб-сайте.

Во-первых, мы можем выбрать «Еда» на панели навигации.

Затем на странице продукта для еды мы выбираем «Really Raw Honey». Это приводит нас к странице продукта, где мы можем выбрать наше количество и добавить товар в корзину.

3. Кратко и по делу

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

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

4. Эффект последовательного позиционирования

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

5. Общий дизайн

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

Хорошая навигация — полезная стратегия для улучшения дизайна веб-сайта и количества посещений страниц. Помните об этих рекомендациях при планировании вашего следующего бизнес-сайта!

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

лучших практик и примеров оптимизации навигации в электронной коммерции

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

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

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

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

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

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

Первичная навигация

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

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

Категории

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

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

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

  1. Многоуровневые меню: Список родительских категорий и отображение подкатегорий только при наведении курсора или нажатии
  2. Мегаменю: Размещает все родительские категории и подкатегории в раскрывающемся списке начального меню

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

Вдохновение для дизайна меню для мегаменю

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

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

Пример пересортированного меню навигации на основе привязанности каждого посетителя

Дополнительные элементы, которые необходимо учитывать

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

Липкая навигация

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

Пример липкого меню электронной коммерции

Стиль дизайна

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

Отображение меню

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

Рекомендуемые продукты в примере меню навигации электронной коммерции

Нижний колонтитул

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

Пример подробного описания нижнего колонтитула

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

Различные типы функций поиска

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

Фасетный поиск

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

Пример фасетного поиска на сайте электронной коммерции

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

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

Семантический поиск

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

Результаты поиска при вводе текста в режиме инкогнито

Результаты поиска при вводе текста при входе в систему

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

Два варианта окна поиска, чтобы побудить целеустремленных покупателей найти то, что они ищут

Переход между страницами категорий

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

«Хлебные крошки» — это линейный навигационный дисплей, обычно видимый в верхней части веб-страницы, который отображает путь пользователя по страницам, чтобы перейти на текущую (т. Е. Женщины> Обувь> Ботинки> Ботильоны> Туфли на каблуке).Каждый элемент в цепочке навигации должен быть интерактивным и возвращать пользователя на эту конкретную страницу.

Пример навигации по веб-сайту: хлебные крошки на целевом веб-сайте

Дополнительные советы по дизайну мобильной навигации

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

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

Вертикальное меню в приложении Nike (слева) и гамбургер-меню Amazon слева (в центре: до щелчка; справа: после щелчка)

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

Пример баннера категории на мобильной странице PDP для возврата пользователей к основной категории

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

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

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

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

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

Начните тестирование вашего пути к успеху навигации по сайту

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

Навигация | Удобство использования и веб-доступность

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

Навигация по всему сайту

Несколько способов

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

Общие способы поддержки навигации включают:

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

Меню навигации

Меню навигации отражают основные структуры веб-сайтов. Передовые методы разработки меню навигации включают:

  • Использование ориентира навигации и метки ARIA.
  • Использование обычных мест для меню, например, вверху страницы или слева.
  • Обеспечивает визуальный заголовок для маркировки меню.
  • Обеспечивает большие размеры для интерактивных областей, обычно не менее 44 на 44 пикселя.
  • Обеспечение четких стилей для состояния наведения и текущего состояния. В меню часто нет стилей для посещенных состояний.
  • Обеспечение того, чтобы меню работало с клавиатуры, а фокус никогда не скрывался от пользователей.
  • Указывает текущую страницу с помощью скрытого диапазона или aria-current.
  • Разработка всплывающих меню для пользователей программ чтения с экрана и клавиатуры.
  • Избегайте role = menu и role = menuitem, если вы не реализуете все аспекты шаблона проектирования меню ARIA.

Более того, W3C Web Accessibility Initiative предлагает исчерпывающее руководство по проектированию и кодированию меню.

Панировочные сухари

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

заголовка документа.

HTML не имеет специальных семантических элементов для хлебных крошек. Но разработчики должны следовать шаблону проектирования хлебных крошек ARIA Authoring Practices.

Навигация по страницам

Заголовки

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

Пропустить ссылки

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

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

Достопримечательности

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

  • основная (каждая страница должна иметь ровно одну главную)
  • баннер (заголовок страницы; на каждой странице должен быть ровно один)
  • contentinfo (нижний колонтитул страницы; каждая страница должна иметь ровно один)
  • навигация (если их несколько, каждая должна иметь уникальную метку)

Авторские практики ARIA 1.1 документ содержит полное руководство по внедрению ориентиров с примерами.

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

Иерархия сайтов и навигация | Удобство использования и веб-доступность

Карты сайта и иерархия сайтов

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

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

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

Меню и навигация

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

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

Лучшие практики, советы и примеры

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

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

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

Вот 11 советов по улучшению навигации по сайту и обеспечению счастливых, возвращающихся посетителей:

  1. Планируйте свою навигацию

  2. Расставьте приоритеты для своих страниц

  3. Придерживайтесь соглашений

  4. Рассмотрите возможность создания липкого меню

  5. Ограничьте количество элементов в вашем меню

  6. Создайте мега раскрывающиеся меню, если необходимо

  7. Добавьте строку поиска

  8. Четко обозначьте свое меню

  9. Верните логотип на главную страницу

  10. Укажите, на какой странице находится пользователь.

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

Типы навигации по веб-сайту

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

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

Меню боковой панели слева или справа от веб-сайта: Это список, расположенный сбоку на вашей странице.Он может быть минимальным, а может занимать центральное место и стать неотъемлемой частью дизайна, как на веб-сайте Wix графического дизайнера Бипла.

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

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

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

01. Планируйте навигацию

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

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

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

02. Расставьте приоритеты для своих страниц

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

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

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

03. Придерживайтесь условностей

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

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

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

04. Рассмотрите возможность создания закрепленного меню

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

Чтобы создать плавающее меню в Wix, вы можете просто нажать «Добавить» в левой части редактора, затем «Меню», чтобы выбрать стиль меню, который вы хотите использовать.Затем щелкните меню правой кнопкой мыши и выберите «Закрепить на экране».

05. Ограничьте количество пунктов в меню

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

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

06. При необходимости создавайте мега раскрывающиеся меню.

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

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

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

07. Добавление панели поиска

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

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

08. Четко обозначьте свое меню

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

Если вы не совсем уверены, какая формулировка будет работать лучше, вы можете попробовать две разные версии и проверить их, выполнив A / B-тесты на своем сайте.

09. Ссылка логотипа обратно на домашнюю страницу

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

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

10. Укажите, на какой странице находится пользователь.

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

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

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

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

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

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

Автор: Дана Меир

Эксперт по дизайну и писатель

.

Добавить комментарий

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