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

alexxlab

Содержание

что это такое, из каких видов элементов состоит

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

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

Подпишись на рассылку и получи книгу в подарок!

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

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

Перечислим критерии качественной навигации:

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

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

Основные виды навигации сайта

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

  • Языковая – используется на сайтах, потенциальная аудитория которых мультиязычна. Пользователю предлагается выбрать наиболее удобный язык, на котором будет отображаться информация. В большинстве своем такой тип навигации внедряется на сайтах различных международных организаций. Использование языковой навигации позволяет избежать необходимости создания нескольких одинаковых сайтов с контентным наполнением на различных языках.
  • Основная – ссылки на наиболее важные разделы сайта, размещаются обычно в меню. Большинство ресурсов ограничиваются только ей, поскольку она подходит для небольших проектов в несколько десятков страниц.
  • Глобальная – это те ссылки, которые должны быть видны с любой страницы сайта, к примеру ссылки на главную страницу.
  • Рекламная навигация – к ней относятся ссылки, расположенные для привлечения клиентов на другие ресурсы или страницы с предложением услуг или продукции. Такая навигация может быть, как текстовой, так и графической, в зависимости от замысла дизайнера.
  • Тематическая – к такому типу навигации относятся ссылки на близкие по тематике разделы. К примеру, похожие публикации на новостных сайтах. Также это могут быть ссылки под одной статьей с возможностью перехода к следующей или к предыдущей. Наглядно демонстрирует пример тематической навигации фотогалереи, в большинстве из которых под каждым фото будут ссылки, по которым можно просмотреть предыдущее или следующее по порядку фото.
  • Навигация в контенте – в основном используется для внутренней перелинковки страниц сайта с целью лучшей поисковой оптимизации. Выглядит как ссылка в тексте страницы, направляющая на другой ресурс или другой раздел.
  • Указательная – показывает пользователю, в какой части сайта он находится на данный момент. Удобна для крупных порталов и сайтов с множеством разделов. Такой вид навигации позволяет пользователю легко ориентироваться в большом объеме информации.
  • Географическая – применяется в основном для крупных сайтов или туристических порталов, которым требуется наглядно указать страну, город или регион, к которому относится раздел, в котором пользователь находится. Такой вид навигации обычно компонуется со ссылками на полезные материалы о стране или туристической достопримечательности.
  • Поисковая навигация – в этом случае можно ввести интересующую информацию в поисковую строку (слово или фразу), и система найдет на сайте материалы, где встречается это буквосочетание. Некоторые порталы не ограничиваются поиском только по своей площадке, а попутно выдают пользователя информацию из поисковых систем по интересующему вопросу.

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

По типу реализации всю навигацию можно разделить на 4 вида:

  • Текстовая – ссылки на разделы сайта или на внешние ресурсы оформлены просто в виде текста.
  • Графическая – позволяет представить навигацию в более привлекательном формате. Для создания используются прорисованные элементы меню и кнопки.
  • HTML –при помощи разнообразных форм можно спрятать громоздкое меню так, чтобы оно показывалось только при наведении курсора на корневую папку. Применение такой навигации, позволяет существенно сэкономить место на странице.
  • Java и Flash технологии – такой тип меню можно сделать более интерактивным и запрограммировать определенные эффекты при наведении курсора или нажатии на ссылку. Это наиболее сложный в реализации вид, но вместе с тем наиболее эффектно выглядящий.

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

Удобная навигация сайта – одно из условий высокой конверсии

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

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

Как правильно выстроить систему навигации сайта с пользой для SEO

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

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

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

Навигация состоит из разных видов гиперссылок. Каждый вид отвечает за разные действия:

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

Какие бывают виды?

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

С точки зрения дизайнерской разработки навигация сайта бывает:

  • горизонтальной — вверху страницы, как на нашем сайте seo.ru:

  • вертикальной — расположенной на боковой колонке сайта, обычно слева:

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

Основные элементы навигационной системы — это:

  • URL;
  • хэдер;
  • основное меню;
  • форма поиска;
  • шкала прогресса, кнопка «Наверх»;
  • ссылки внутри текстов;
  • футер.

Как реализуется?

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

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

Как навигация влияет на SEO?

  1. Формирует поведение посетителя.

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

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

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

  2. Влияет на индексацию в поисковиках.

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

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

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

  3. Делает сниппет более привлекательным.

    Корректная структура позволяет отображать в поиске сразу несколько дополнительных ссылок:

Читайте по теме: Что такое сниппет и как настроить сниппет в Яндекс и Google

Как правильно выстроить навигацию по сайту: 9 (+1) рекомендация

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

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

  2. Отслеживайте уровень вложенности приоритетных страниц. Это количество кликов, которое совершает посетитель при переходе от главной до нужной ему страницы. Так, у главной — 1 уровень, у ссылок с нее — 2 уровень, и так далее. Чем ближе страница к главной, тем больше ссылочного веса она получает. С точки зрения SEO размещать важный контент на страницах 4 и последующего уровней — не лучшая идея. Краулеры уделяют мало внимания таким страницам. Поэтому все то, что пользователи и/или поисковые боты должны увидеть, нужно размещать не дальше, чем на 3 уровне.

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

  4. Избегайте сложной, слишком разветвленной структуры.

  5. Внедряйте «хлебные крошки». Они помогают ориентироваться, особенно если пользователь отвлечется:

  6. Используйте ЧПУ. Это вид URL позволяет пользователю понять, какой контент расположен на странице еще до того, как она открылась.

  7. Создавайте и сортируйте категории, исходя из их популярности и актуальности для пользователей.

  8. Адаптируйте новые элементы навигации для мобильных устройств.

  9. Делайте элементы навигации контрастными, но при этом гармоничными по отношению к фону и основному контенту.

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

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

Удобная навигация по сайту — что это и как сделать: 10 советов

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

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

Получайте до 18% от расходов на контекстную и таргетированную рекламу!

Рекомендуем: Click.ru – маркетплейс рекламных платформ:

  • Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
  • Подключиться можно самому за 1 день.
  • Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
  • Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
  • У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.
Начать зарабатывать >> Реклама

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

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

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

Читайте также: Как создать структуру сайта

Основные элементы и приёмы навигации

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

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

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

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

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

Второй «классический» элемент – это верхнее меню.

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

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

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

Это интересно: 8 продающих блоков Landing Page

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

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

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

Линки внутри статей на другие страницы сайта – это тоже навигационные элементы. Например вот такие:

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

Ссылки в footer-е (нижнем колонтитуле, подвале) – это еще один навигационный элемент. Обычно в футер выносят ссылку на контакты, пользовательское соглашение, правила использования сайта и т.п. А иногда можно увидеть и много ссылок на разные страницы сайта, сгруппированные по категориям:

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

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

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

Это интересно: Как сделать прототип сайта

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

Такая кнопка позволяет быстро вернуться к началу страницы.

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

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

Как же использовать все эти элементы с толком и пользой?

Читайте также: Дизайн страницы благодарности

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

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

1. Расположите логотип с возвратом на главную в правом верхнем углу.

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

2. Продумайте первичные и вторичные элементы.

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

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

Вынесите в основное меню самые главные разделы сайта.

3. Подумайте, какие страницы можно сгруппировать.

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

Почта Mail.ru таким образом «спрятала» проекты компании:

4. Найдите хорошее место для информационных ссылок.

Информационные ссылки – это такие как «Контакты», «Публичная оферта» и им подобные. Найти эти ссылки пользователь должен на всех страницах сайта. Потому самое подходящее место для них – это футер (нижний колонтитул).

Вот яркий пример подобного размещения информационных ссылок:

5. Не забывайте о дизайне.

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

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

6. Не открывайте страницы в новых окнах.

Это сбивает пользователей с толку.

7. Дополнительные элементы.

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

8. Подсказки.

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

9. Оставьте меню на видном месте.

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

10. Не прячьте далеко свои контакты.

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

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

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

Выберите хостинг для сайта: ТОП-10 лучших хостингов

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

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

Удачи вам в разработке собственного интернет-ресурса!

Навигация в веб-дизайне: элементы навигации, эффективные примеры

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

Задачи дизайнера по созданию навигации

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

Задача 1. Понимание местонахождения

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

Задача 2. Облегчение входа в «личное пространство»

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

Задача 3. Облегчение поиска информации

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

Задача 4. Обеспечение доступа к актуальной информации

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

Задача 5. Помощь в оформлении заказа

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

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

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

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

Меню

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

1. Горизонтальное меню

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

2. Вертикальное меню

В левой или правой части экрана располагается список основных разделов сайта, каталог товаров и прочее.

3. Меню-гамбургер

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

При создании дизайна меню некоторые разработчики допускают несколько ошибок:

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

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

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

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

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

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

Иконки

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

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

Текстовые ссылки

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

Как правильно оформлять гиперссылки:

  • все ссылки должны выделяться среди остального текста. Стандартный прием — выделение ссылки цветом и подчеркиванием;
  • цвет ссылок в активном состоянии, при наведении и нажатии должен различаться;
  • если ссылка предназначена для неожиданного для клиента действия (переход на другой сайт, скачивание файла и прочее), он должен быть предупрежден;
  • лучше оформлять ссылку не как прямой URL, а скрывать ее в понятном для клиента тексте (как в нашем примере, ссылка https://idbi.ru/blogs/blog/tipografika-v-veb-dizayne скрывается за текстом «читайте здесь»).

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

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

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

Главная > Уютный блог о дизайне > Навигация в дизайне сайта: основные правила и примеры использования

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

Футер

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

Кнопка для возврата

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

Призывы к действию

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

Страница 404

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

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

Несколько советов для улучшения навигации на сайте:

  • скрывайте часть контента. Просматривать одинаковые элементы (карточки товаров, фотографии, примеры работ) для клиента может быть утомительно. Чтобы сделать контент более разнообразным, скройте часть таких элементов за кнопкой «показать еще»;
  • зафиксируйте меню. Для улучшения навигации меню делают фиксированным при прокручивании пользователем страницы, чтобы клиенту всегда был доступен переход с одного раздела на другой;
  • акцентируйте внимание клиента на важных элементах и разделах сайта. Например, призывах к действию или баннерах с важной информацией. Клиенту проще ориентироваться на сайте, если есть «направляющие». Акценты можно сделать с помощью цвета, размеров, увеличения белого пространства между значимыми блоками;
  • помещайте в конец страницы призыв к действию или ссылку на другой раздел сайта. Так пользователь, дошедший до самого конца, совершит целевое действие или просто не покинет сайт.

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

Примеры нестандартной навигации на сайте

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

Горизонтальный скроллинг

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

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

Элементы навигации на главном экране

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

3D карта

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

Навигация 360 градусов

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

Видеофильм

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

Интерактивные истории

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

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

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

Система навигации по сайту и ее виды

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

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

Что представляет собой дружественная к пользователю система навигации?

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

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

  1. На какой сейчас странице находится посетитель?
  2. Какие страницы он уже посетил?
  3. Какие еще страницы ему доступны?

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

Многих интересует вопрос: а сколько же ссылок должно быть на сайте?  Здесь однозначно ответить нельзя, так как это во многом зависит от количества страниц сайта. А нужное количество определяется лишь опытным путем.  Главное правило: их должно быть столько, сколько будет удобно для пользователя.  В то же время система навигации не должна занимать слишком много пространства сайта.  В среднем ее площадь это 5-15% всего пространства ресурса.

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

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

О видах навигации

Виды навигации можно выделять исходя из двух критериев: функционального и визуального.

По своим функциям система навигации делится на следующие виды:

  • Языковая – навигация, отвечающая за языковой интерфейс и отображение контента на выбранном пользователем языке.
  • Основная – это наиболее важные разделы сайта, как правило меню.
  • Глобальная – это те ссылки, которые должны быть видны с любой страницы сайта, например ссылка на главную.
  • Рекламная – ссылки для привлечения посетителей на рекламные страницы сайта с расположением товаров и услуг.
  • Тематическая – навигация по страницам сайта одной определенной тематики (рубрики).
  • Текстовая – гиперссылки из текста на странице. С точки зрения юзабилити, они нужны для направления пользователя к упомянутому в тексте материалу. С точки зрения оптимизации – это грамотная перелинковка сайта.
  • Указательная – по-другому, справочная. Гиперссылка указывает, в какой области сайта сейчас находится посетитель.
  • Географическая – используется на сайтах, где имеются разделы, посвященные разным странам.

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

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

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

Вернуться назад

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

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

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

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

Критерии удобной и качественной навигации современного сайта

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

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

Виды навигации сайта

  • Языковая, идеально подходит для мультиязычных сайтов, когда пользователю предлагают выбрать «родной» понятный для него язык для отображения информации. Языковая навигация подходит для ресурсов различных международных организаций. При таком подходе нет необходимости создавать несколько одинаковых сайтов на разных языках.
  • Основная навигация, при которой ссылки ведут на наиболее важные, основные разделы сайта. Такие ссылки размещают в меню. Это удобно и понятно, поэтому чаще всего веб-мастера ограничиваются основной навигацией.
  • Глобальная навигация подразумевает использование ссылок, которые видны с любой страницы сайта. Например, когда с любой страницы вы можете попасть на главную по ссылке.
  • Рекламная навигация включает ссылки для привлечения клиентов, ведущие на другие ресурсы или страницы. Так проще продавать услуги, продукцию или товары. Рекламная навигация может быть текстовой, графической или комбинированной. Все зависит от дизайна сайта.
  • Тематическая навигация — ссылки на близкие по тематике разделы сайта или на тематические ресурсы. Ссылки могут размещаться под одной статьей с переходом на другую, а также переводить пользователя на другой интернет-ресурс. Например, тематические навигации по фотогалерее, когда ссылки будут вести на следующие страницы с характеристикой.
  • Навигация в контенте отлично подходит для внутренней перелинковки страниц сайта, используется для лучшей поисковой оптимизации. Это стандартная ссылка в тексте страницы, перенаправляющая пользователя на другой ресурс или другой раздел этого же сайта.
  • Указательная навигация ориентирует пользователя по сайту, показывая, в какой части он находится сейчас. Очень важна и полезна для крупных интернет-ресурсов, где много разделов или категорий. Позволит легко сориентироваться в большом объеме информации.
  • Географическая навигация подойдет для туристических порталов, интернет-магазинов или там, где надо показать наглядно страну, город, улицу, регион и пр. Однако такую навигацию лучше всего комбинировать со ссылками, которые ведут на более полезную информацию. К примеру, указав местоположение страны, можно дать ссылку на страницу с туристической информацией о ней и ее достопримечательностях.
  • Поисковая навигация считается стандартной для интернет-магазинов и торговых площадок. Пользователь вводит в поисковую строку слово или фразу из того, что ищет, а система найдет на сайте все необходимые по теме материалы. Есть порталы, которые выдают пользователю информацию не только по своему сайту, а из поисковых систем.

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

Существует деление навигации по типу реализации.

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

прорисованные элементы меню, кнопки и иконки.

  1. HTML-навигация создается при помощи разнообразных форм, за которые прячут громоздкое меню, которое будет демонстрироваться только при наведении на него курсором. Такой подход экономит место на странице, но более сложен в техническом плане.
  2. Навигация, созданная на базе Java и Flash технологий. Организует более интерактивное и понятное меню с оригинальными эффектами, которые можео просмотреть при наведении курсора. Более дорогой и сложный в реализации вид навигации, но привлекает Клиентов эффектностью.

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

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

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

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

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

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

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

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

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

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

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

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

Советы, примеры и передовой опыт

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

Если посетители не могут понять, где найти то, что им нужно, они уходят.

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

Почему на веб-сайте важна навигация?

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

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

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

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

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

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

Многие аспекты веб-дизайна и разработки влияют на пользовательский опыт:

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

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

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

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

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

Однако существуют и другие типы навигации по сайту.

Боковые панели — обычное дополнение ко многим веб-сайтам. Они располагаются слева или справа от основного содержания. Некоторые веб-сайты даже имеют двойные боковые панели.

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

Толстый нижний колонтитул Zappos — хороший пример:

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

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

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

Меню гамбургера раскрывается при нажатии на него.

Большинство этих меню отображается только на мобильных устройствах.

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

3 отличных примера навигации по веб-сайту

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

1. WE3

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

  1. Это основная тема сайта. Щелкните эту ссылку, чтобы сразу найти друзей в вашем городе.
  2. Ссылка для скачивания особенная. Это можно сказать по кнопке.
  3. Поиск чрезвычайно важен для навигации по сайту. Вы хотите, чтобы посетители могли найти то, что они хотят, с помощью простого поиска на вашем сайте.
  4. Затем у нас есть значки социальных сетей. Это чрезвычайно социально ориентированный бренд, поэтому выделение этих ссылок в навигации по заголовку имеет смысл.

2. Ensurem

Вот основная навигация для веб-сайта Ensurem. Это очень просто, но при этом очень интуитивно понятно.

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

3. Greenstreet Coffee

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

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

Рекомендации и советы по навигации по веб-сайту

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

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

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

1. Сделайте гипертекст очевидным

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

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

2. Оптимизируйте панель навигации

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

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

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

3. Держите боковые панели отдельно

Боковая панель не должна выглядеть, как остальное содержимое на странице. Он должен выделяться.

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

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

4. Ставьте навигацию на стандартное место

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

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

5. Сделайте все понятным и простым для пользователя

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

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

6. Не забудьте нижний колонтитул

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

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

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

7. Свяжите навигацию с приоритетами бизнеса

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

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

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

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

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

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

9. Оставьте кнопки для призывов к действию

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

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

Узнайте, как ваша аудитория перемещается по вашему веб-сайту

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

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

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

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

Пошаговое руководство по началу работы с инструментами Crazy Egg.

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

Войдите в свою учетную запись Crazy Egg и загрузите расширение Chrome. Решите, хотите ли вы создать один или несколько снимков.

Введите URL-адреса, из которых вы хотите создавать снимки, и назовите каждый из них. Затем вы можете установить код отслеживания Crazy Egg на свой веб-сайт и начать получать вознаграждение.

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

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

Заключение

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

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

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

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

Рекомендации по навигации по веб-сайту — 7 советов и предупреждений по дизайну навигации по веб-сайту

Мелочи имеют большое значение. Навигация по вашему сайту — отличный пример. Структура и метки вашей навигации могут иметь огромное влияние на результаты.Вот почему:

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

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

1.Будьте описательны

«Что мы делаем» на самом деле не говорит о том, что вы делаете. Ни «Продукты», «Услуги», ни «Решения». Описательная навигация с использованием ключевых фраз лучше по двум причинам. Здесь на помощь приходят SEO и конверсии.

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

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

Внимание! Избегайте таких ярлыков, как «услуги» и «решения».

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

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

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

Для получения дополнительной информации прочтите, как сделать карту сайта.

2. Избегайте навигации на основе форматов

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

Ярлыки, обозначающие формат, не являются описательными и поэтому не очень полезны для посетителей. Вот почему Аврора Бедфорд из Nielsen Norman Group не рекомендует использовать форматную навигацию.

« Пользователей, интересующихся определенной темой, обычно не волнует, в каком формате им будет доставлена ​​информация; они сосредоточены исключительно на поиске ответов на поставленный ими вопрос. »- Аврора Бедфорд, специалист по пользовательскому опыту, Nielsen Norman Group

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

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

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

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

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

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

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

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

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

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

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

    Дополнительные сведения см. В разделе «Рекомендации по внутренним ссылкам».

Пример: Если ваша домашняя страница имеет авторитет 38 в соответствии с Open Site Explorer, то она имеет как раз этот объем полномочий для передачи на внутренние страницы.

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

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

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

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

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

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

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

Внимание! Избегайте длинных списков.

Разбейте навигацию на группы по пять-семь элементов.

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

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

5. Порядок навигации по вашему сайту важен

Количество элементов имеет значение, но не менее важен их порядок.

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

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

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

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

Сначала дайте посетителям то, что они хотят, а затем они могут дать вам то, что вы хотите.

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

6. Как оптимизировать навигацию по сайту

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

Есть два отчета, которые покажут вам, какие элементы навигации больше всего используются вашими посетителями.Одним из них является «сводка навигации» или «представление на странице» в отчете о поведении. Остальные — отчеты Behavior Flow / User Flow.

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

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

Еще одно представление о том, что люди нажимают, можно найти в отчете Behavior> Behavior Flow . Этот отчет идентичен отчету Аудитория> Поток пользователей . Эти отчеты идентичны, если вы не отслеживаете события. Отслеживание событий добавляется к данным отчета «Поток поведения».

В любом случае отчет будет выглядеть примерно так:

Совет! Чтобы узнать больше о том, как использовать отчет User Flow, ознакомьтесь с основными путями на вашем веб-сайте.

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

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

  • Удалите элементов, на которые редко нажимают, если они не критичны
  • Переименуйте или измените метку, на которую редко нажимают, если они важны
  • Переместить элементов, которые часто нажимаются, в начало

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

7. Навигация по сайту на мобильных устройствах

Адаптивный веб-дизайн принес с собой лучшие практики и стандарты мобильной навигации. Его можно описать двумя словами: «икона гамбургера».

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

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

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

ProTip! Для мобильных посетителей: убедитесь, что номер телефона превращается в кнопку, которая набирает номер при нажатии. Просто добавьте tel: в код href для номера телефона мобильной версии вашего сайта.Код должен выглядеть примерно так:

Составление (и изменение) вашего курса

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

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

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

Есть другие идеи или вопросы? А как насчет кнопки «домой»? Это необходимо? Вы помещаете свой номер телефона в шапку? Добавьте свой комментарий ниже.

Основное руководство по навигации по веб-сайтам [Типы и популярные примеры]

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

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

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

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

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

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

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

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

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

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

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

Источник изображения

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

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

Источник изображения

Что такое суб-навигация на веб-сайте?

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

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

Источник изображения

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

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

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

Горизонтальная панель навигации

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

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

Источник изображения

Раскрывающееся меню навигации

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

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

Источник изображения

Меню навигации по гамбургеру

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

Посмотрите гамбургер-меню на мобильном сайте Nettle Studio.

Источник изображения

Меню навигации вертикальной боковой панели

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

Взгляните на вертикальную боковую панель ресторана Arbor ниже.

Источник изображения

Меню навигации нижнего колонтитула

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

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

Источник изображения

Дизайн панели навигации веб-сайта

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

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

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

Что должно быть включено в панель навигации вашего сайта?

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

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

Сортировка карт

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

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

Источник изображения

Отчеты об атрибуции

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

Источник изображения

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

Поток пользователей

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

Как следует заказывать элементы навигации?

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

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

Как сформулировать параметры навигации?

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

Объектно-ориентированный

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

Источник изображения

Обратите внимание, что навигационные ссылки справа больше ориентированы на действия, чем на объекты.Давайте определим это ниже.

На основе действий

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

Источник изображения

На основе аудитории

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

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

Источник изображения

Оптимизировано для поисковых систем

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

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

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

Propa Beauty

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

Источник изображения

NWP

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

Источник изображения

Тени

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

Источник изображения

Патагония

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

Источник изображения

Briogeo

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

Источник изображения

Твиттер

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

Источник изображения

Оливье Жиллизо

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

Источник изображения

Пипкорн

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

Источник изображения

Рекомендации по навигации по веб-сайту

  1. Будьте последовательны.
  2. Дизайн для экрана любого размера.
  3. Сделайте самую важную информацию доступной.
  4. Добавьте панировочные сухари.

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

1. Будьте последовательны.

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

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

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

Источник изображения

2. Дизайн для любого размера экрана.

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

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

3. Сделайте самую важную информацию доступной.

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

Хотя эта идея глубоко укоренилась в мире веб-дизайна, она была в значительной степени дискредитирована. Фактически, одно исследование показало, что вероятность того, что пользователи бросят задачу после трех кликов, не выше, чем после 12 кликов. На диаграмме ниже показано, что некоторые пользователи продолжали пытаться найти желаемый контент после 25 кликов.

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

4. Добавьте панировочные сухари.

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

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

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

Источник изображения

Создание навигации для вашего веб-сайта

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

Примечание редактора: этот пост был первоначально опубликован в октябре 2020 года и был обновлен для полноты.

Как улучшить навигацию по веб-сайту (примеры и почему вы должны это делать)

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

Где найти ответы на конкретные вопросы

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

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

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

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

Приступим!

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

Навигация по веб-сайтам — это процесс навигации по страницам, приложениям и веб-сайтам в Интернете. Технология, лежащая в основе этого, называется гипертекстом или гипермедиа.

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

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

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

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

Что такое меню навигации веб-сайта?

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

Меню заголовка Kinsta

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

В меню, конечно же, могут быть ссылки на другие страницы.

Какова структура навигации на веб-сайте?

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

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

Структура навигации веб-сайта

В этом примере страницы О , Планы , Контакты и Блог связаны из главного меню. Чтобы получить доступ к страницам Mission и Team , вам необходимо сначала посетить страницу About .

Почему на веб-сайте важна навигация?

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

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

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

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

Существует три основных типа навигации по сайту.Их:

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

1. Глобальная навигация по веб-сайту

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

Меню глобального заголовка Kinsta

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

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

Хотите узнать, как выглядит MyKinsta? Создайте демо-счет на 100% бесплатно и начните экспериментировать с ним.

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

Меню нижнего колонтитула

Глобальные меню являются стандартными для большинства решений CMS из коробки.

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

2. Иерархическая навигация по веб-сайту

Иерархическая навигация означает, что меню меняются в зависимости от контекста каждой страницы.

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

Пример иерархической навигации из NYT

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

Пример иерархической навигации

На странице Science New York Times вы вообще не видите меню верхнего уровня. Вместо этого вы видите ссылки на различные подразделы научных исследований и статей.

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

3. Навигация по локальному веб-сайту

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

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

Пример связанного контента, на который есть ссылка на странице

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

Пример локальной навигации в электронной торговле

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

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

Вместо того, чтобы болтать о теории, давайте углубимся в некоторые примеры. Я расскажу о новостном веб-сайте и теме Twenty Twenty WordPress.

Новостной веб-сайт: New York Times

Меню домашней страницы NYT

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

Но это еще не все. NYT использует все типы навигации по сотням страниц категорий и миллионам статей.

Используемые типы навигации:

  • Иерархический.
  • Global.
  • Местный.

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

Домашняя страница

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

Домашняя страница NYT — меню заголовков

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

Он не размывает / не использует оверлей, чтобы скрыть какой-либо контент на веб-сайте.

Домашняя страница (мобильный)

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

Домашняя страница NYT — мобильный

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

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

Расширенное меню — домашняя страница NYT (мобильный)

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

Категория Страница

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

Научная страница NYT — главное меню

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

Страница категории (мобильная)

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

Научная страница NYT — главное меню (мобильное устройство)

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

Одинарный артикул

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

статья NYT — меню заголовка

Отдельная статья (мобильная)

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

Статья NYT — меню заголовка (мобильное)

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

Меню нижнего колонтитула NYT одинаково для домашней страницы, страниц категорий и отдельных статей.

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

Статья NYT — нижний колонтитул

Нижний колонтитул (мобильный)

Статья NYT — нижний колонтитул (мобильное)

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

Например, если вы щелкните раздел Arts , вы сможете просмотреть следующие подразделы:

Статья NYT — расширенное нижнее меню (мобильное)

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

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

Макет содержимого

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

Домашняя страница NYT

Все выделенные элементы являются интерактивными и ведут на разные внутренние страницы веб-сайта New York Times.

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

Тема WordPress «Двадцать двадцать»

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

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

Меню заголовка

Как и любая стандартная тема WordPress, в новом официальном выпуске есть меню без излишеств в разделе заголовка.Вы можете выбрать разные места отображения, и вот как выглядит вариант Desktop Horizontal Menu :

Пример меню заголовка в теме Twenty Twenty

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

Пример расширенного меню заголовка в теме Twenty Twenty

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

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

Пример нижнего колонтитула в теме Twenty Twenty

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

Что делает навигацию по сайту хорошей?

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

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

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

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

В следующем разделе я расскажу об основах создания хорошей навигации для вашего сайта.

8 принципов улучшенной навигации по веб-сайту

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

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

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

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

Пример хорошего инструмента для работы с картами сайта — GlooMaps.

GlooMaps

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

GlooMaps — не единственный инструмент, который вы можете использовать, есть еще много других, таких как Octopus, VisualSitemaps, Creately, и это лишь некоторые из них.

2. Следуйте установленным стандартам

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

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

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

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

3. Используйте свой пользовательский словарь

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

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

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

4. Используйте адаптивные меню

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

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

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

Хорошая новость заключается в том, что все лучшие темы WordPress по умолчанию имеют адаптивный дизайн и адаптивные меню.Если вы не создаете свой сайт WordPress с нуля, WordPress поможет вам.

5. Воспользуйтесь преимуществами нижнего колонтитула

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

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

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

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

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

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

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

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

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

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

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

8. Сгладьте структуру

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

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

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

Плоская структура сайта

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

Тенденции меню навигации веб-сайта 2021 г.

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

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

Расширяемые категории в полноэкранном мобильном меню

Uber — мобильное меню

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

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

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

Меню с плавающим заголовком

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

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

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

Наложение раскрывающихся меню на рабочем столе

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

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

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

Эти факторы объединились, чтобы превратить это в растущую тенденцию в 2019 году. Фактически, многие инновационные веб-сайты и шаблоны включают в себя выпадающие меню на рабочем столе.

Более высокий показатель отказов, более низкий коэффициент конверсии, меньше времени на сайте … Навигация по сайту является важной частью UX 💻 Узнайте, как улучшить свой, с помощью этого руководства ⚡️ Нажмите, чтобы твитнуть

Сводка

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

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

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

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

Экономьте время, деньги и повышайте производительность сайта с помощью:

  • Мгновенная помощь от экспертов по хостингу WordPress, 24/7.
  • Интеграция Cloudflare Enterprise.
  • Глобальный охват аудитории с 28 центрами обработки данных по всему миру.
  • Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

10 шагов для лучшей навигации по сайту

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

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

1. Планирование навигации

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

Документ Google или электронная таблица Excel:

Стиль диаграммы:

Список документов Word:

2. Удобный язык

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

Распашонка

3. Не изобретайте велосипед заново (используйте веб-соглашения)

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

Плоский или не

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

Сборка Амстердам

4. Основная навигация

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

Zeis Excelsa

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

Лос-Анджелес Таймс

Интересная навигация слева с полосой прокрутки и вторым уровнем, который выдвигается вправо.

Cadbury Сборщик средств

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

Auberge Handfield Country Inn

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

Город Мельбурн

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

The Gify’s

Прочный левый дизайн навигации, который хорошо выделяется на черном фоне (контент на этом сайте также очень интересный, так что наслаждайтесь гифками!).

5.Ссылка логотипа на главную страницу

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

6. Адаптивная навигация

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

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

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

Blue Cross мобильный

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

Дети родителей с психическими заболеваниями

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

7. Толстые колонтитулы

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

YMCA NSW

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

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

Огромный

9. Укажите где вы находитесь

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

Торговый центр Мельбурна

Artspace

Чифли

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

IWSML

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

Блюкросс

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

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

10.Когда использовать мегаменю

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

Заключение

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

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

Источники и источники вдохновения для блогов

http: // blog.htc.ca/2013/09/03/web-design-conventions/
http://designbit.co.uk/2009/02/27/design-with-web-conventions/
http: //www.bkmediagroup. com / blog / item / 116-web-Conventions-Creating-a-user-friendly-navigation
http://netaccountant.net/website-design-for-accountants/web-design-conventions/
http: // blog .teamtreehouse.com / popular-web-design-Trends-for-responsive-navigation
http://bradfrostweb.com/blog/web/responsive-nav-patterns/#top
http://frankchimero.com/talks/ what-screen-want / transcript /
http: // www.smashingmagazine.com/web-design-navigation-showcases/

4. Типы навигации — Разработка веб-навигации [Книга]

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

Также называется: глобальная навигация, основная навигация, главная навигация.

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

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

  • Основная навигация предоставляет обзор и отвечает на важные вопросы, которые могут возникнуть у пользователей при первом посещении сайта, например, «есть ли на этом сайте то, что я ищу? »

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

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

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

  • Основная навигация придает форму сайту.Во многом основная навигация определяет границы самого сайта.

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

Рассмотрим глобальную зону навигации Университета Валенсии (www.uv.es, рисунок 4-2), например. Шесть основных вариантов навигации находятся слева под логотипом. Некоторые служебные ссылки включены справа, например, карта сайта и ссылка на поиск по сайту. Также типично включать элемент дизайна, например изображение или графику, чтобы помочь создать имидж бренда.

Рисунок 4-2. Область глобальной навигации на домашней странице Университета Валенсии

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

Размер сайта

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

Поведение пользователей и потребности

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

Цели заинтересованных сторон

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

Рабочие процессы, которые невозможно прервать

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

Сравните Рисунок 4-3, на котором показана домашняя страница туристического сайта Opodo (www.opodo.co.uk) на рис. 4-4, на котором показан первый этап процесса оформления заказа на сайте. При оформлении заказа основные вкладки навигации были удалены, чтобы обеспечить фокусировку во время процесса и избежать ошибок.

Рисунок 4-3. Домашняя страница Opodo с выделенными основными вкладками навигации

Рисунок 4-4. Проверка на Opodo, без основной навигации

Также называется: суб-навигация, навигация на уровне страниц.

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

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

Общие схемы местной навигации и основной навигации включают:

перевернутый-L

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

По горизонтали

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

Встроенный вертикальный

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

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

Рисунок 4-5. Три общих механизма основной и локальной навигации

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

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

Голландская версия веб-сайта Philips (www.philips.nl) представляет собой локальную навигацию с динамическими меню, которые сохраняют площадь экрана и обеспечивают быстрый доступ к параметрам. На рис. 4-6 динамическое меню выходит за пределы основной навигации и отображает параметры Over Philips. Щелчок по одному из этих элементов локальной навигации приводит к странице, где меню повторяется слева (рис. 4-7). Страницы, расположенные на один уровень ниже, также открываются между серыми полосами на изображении.В целом, это эффективная стратегия навигации, которая эффективно использует пространство экрана.

Рисунок 4-6. Динамические меню для локальной навигации с домашней страницы Philips

Рисунок 4-7. Встроенная вертикальная локальная навигация на Philips.nl

Доступность

Пропустить навигацию

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

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

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

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

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

Также называется: ассоциативные ссылки, ссылки по теме.

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

Как правило, контекстная навигация располагается рядом с содержимым страницы. Это создает прочную связь между смыслом текста и связанными связанными страницами.Существует два типичных варианта контекстной навигации на странице (рис. 4-8):

Встроенная навигация

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

Ссылки по теме

Контекстная навигация может отображаться в конце или сбоку от содержимого.

Рисунок 4-8. Два типа контекстной навигации: встроенные ссылки и связанные ссылки

Если навигация встроена в текст, может быть явное указание, чтобы подготовить пользователей к более разрозненному взаимодействию, например, ссылки на другой формат контента или другой сайт. Например, встроенной ссылке может предшествовать или следовать текст, указывающий, что связанный материал находится на другом сайте или в другом формате. На рис. 4-9 показана страница «Образование» на веб-сайте Института информационной архитектуры (www.iainstitute.org). Ссылки в тексте ведут на другие страницы сайта на разных уровнях структуры. Первая ссылка в последнем абзаце открывает PDF-документ, как указано в тексте. Вторая ссылка ведет на Amazon.com.

Рисунок 4-9. Встроенная контекстная навигация на веб-сайте института IA

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

Специальные возможности

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

Связанные ссылки также эффективно используются на новостных сайтах. Из одной статьи читатели могут перейти к другим связанным статьям. Например, каждая история на веб-сайте The Washington Post (www.washingtonpost.com) заканчивается соответствующими ссылками (рис. 4-10). Есть две основные части:

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

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

Рисунок 4-10. Компонент «Ссылки по теме» для статьи из The Washington Post

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

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

Адаптивная навигация наиболее широко использовалась для составления рекомендаций на сайтах электронной коммерции. Классическим примером этого является функция «Покупатели, купившие этот товар, также купили…» на Amazon.com. На рис. 4-11 показан пример этой функции с использованием книги Джеффри Зельдмана «Проектирование с использованием веб-стандартов ». []

Это пример пассивной совместной фильтрации: сайт автоматически собирает данные о поведении пользователей для создания списка. При активной фильтрации участники сайта должны явно оценивать продукт, человека или услугу.Возможно, вы видели это в веб-журналах и на других сайтах, где есть список статей с самым высоким рейтингом или аналогичный. Boxes and Arrows (www.boxesandarrows.com), например, позволяет читателям оценивать каждую статью внизу текста (рис. 4-12). На основании всех оценок для всех статей посетители могут просматривать самые рейтинговые истории сайта в навигации.

Рисунок 4-12. Рейтинговые статьи о прямоугольниках и стрелках

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

На Digg.com есть список самых популярных статей по каждой из основных категорий.Поскольку невозможно учесть длину заголовка статьи, дизайн должен учитывать сочетание длины (рис. 4-13).

Рисунок 4-13. Десять лучших статей в категории «Технологии» на Digg.com

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

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

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

На веб-сайте Принстонского университета (www.princeton.edu, рис. 4-14) быстрые ссылки выделяют ключевые области, которые не представлены параметрами навигации верхнего уровня. Однако на показанной здесь домашней странице было бы лучше отображать эти ссылки прямо на странице, возможно, в виде карты сайта. Скрытие их в меню снижает возможность быстрого сканирования параметров.

Рисунок 4-14. Быстрые ссылки в раскрывающемся меню на главной странице Принстонского университета

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

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

Но навигация по нижнему колонтитулу не обязательно должна быть незначительной. Например, может быть включена часть или вся карта сайта, как упомянуто в главе 3. Также могут быть включены связанные ссылки и логические следующие шаги. eBay.com предлагает варианты на основе задач в конце страниц товаров (рис. 4-15). Они ведут к различным областям сайта по иерархии страниц. Amazon.com даже показывает историю посетителей для данного сеанса внизу страниц продуктов. Другие элементы, которые могут отображаться в области нижнего колонтитула, включают, среди прочего, функцию «Распечатать эту страницу», ссылку «Отправить другу», справку по сайту, возможность комментировать страницу и функции оценки страницы.

Рисунок 4-15. Следующие логические шаги в навигации по нижнему колонтитулу на eBay

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

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

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

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

На рис. 4-16 показана довольно распространенная группа служебной навигации, которую можно найти на Vitaminshoppe.com прямо над основной панелью навигации.Он включает в себя поле ввода для поиска, ссылку на корзину, справку и контактную информацию.

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

Существует множество типов служебной навигации, в том числе:

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

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

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

На Рис. 4-16 показана дополнительная навигация по сайту, которая находится в верхнем левом углу многих сайтов Google.com, поэтому пользователи могут легко переходить от продукта к продукту. Щелкнув ссылку на рис. 4-17, вы легко перейдете из Google Mail в Google Calendar и обратно. Затем в конце списка есть ссылка для просмотра дополнительных сервисов Google.

Рисунок 4-17. Взаимные дополнительные навигационные ссылки от Google Mail к Google Calendar и наоборот

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

На рис. 4-18 показан компонент навигации панели инструментов с веб-сайта Toyota UK (www.toyota.co.uk). Эта группа ссылок тематически не связана; вместо этого они сгруппированы вместе, потому что каждая ссылка указывает на важную функцию или инструмент сайта.

Рисунок 4-18. Набор инструментов, который можно найти на большинстве страниц веб-сайта Toyota UK

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

Поскольку параметр «Домой» часто включается в глобальную навигацию, на некоторых сайтах они объединены: логотип включен в навигацию. Apple.com был одним из первых, кто это сделал (рис. 4-19). Amazon.com также включает логотип в главную вкладку навигации, как и Toyota.com. Это эффективный способ сэкономить место и предложить постоянный визуальный брендинг по всему сайту.

Рисунок 4-19. Логотип, интегрированный в основную навигацию на Apple.com

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

Интернационализация

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

Вам также необходимо учитывать, на каком языке отображаются выбранные элементы. Отображаются ли они на языке веб-сайта, который вы в настоящее время просматриваете, или на их исходных языках? Это повлияет на порядок опций. В качестве примера возьмем английскую версию многоязычного сайта. Если посетители из Франции ищут французский язык, они могут увидеть и понять близлежащий вариант французского языка.Но найдет ли кто-нибудь из Финляндии английский лейбл Finnish при поиске Suomi? Или кто-то из Испании найдет испанский язык при поиске español? Как правило, лучше отображать выбранные фрагменты на языке оригинала. Не забудьте включить диакритические знаки (диакритические знаки, умляуты и другие специальные символы), если вы выбрали этот вариант.

Специальные возможности

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

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

ВЫБОР СТРАНЫ И РЕГИОНОВ

В некоторых случаях содержимое может отличаться в зависимости от страны или рынка. Селектор страны позволяет посетителям выбрать свой рыночный регион.Обратите внимание, что выбор языка и выбор страны — разные виды деятельности. Например, все сайты eBay в США, Великобритании и Австралии отображаются на английском языке, но в каждой версии сайта доступны разные продукты. Здесь также могут быть юридические требования.

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

Селектор страны на сайте Coca-Cola (www.cocacola.com, рис. 4-20) использует двоякий подход: на карту можно щелкнуть по региону, но есть также навигация для выбора страны из алфавитного списка. список справа.

Рисунок 4-20. Выбор страны на веб-сайте Coca-Cola

Интернационализация

Многие страны говорят на нескольких языках. Если у вас многоязычный сайт, подумайте о том, чтобы разбить выбор региона по языку.На рис. 4-21 показано меню выбора страны в нижней части Новостей Google (http://news.google.com). Ярлыки появляются на языке страны. Если в стране два языка, название страны отображается на обоих. Сравните België с Belgique, а Canada English с Canada Français. Также обратите внимание на испанскую версию для США (Estados Unidos). Наконец, страны с небалфавитными языками перечислены в конце с оригинальными символами, такими как китайский и арабский. В скобках дизайнеры включают перевод на английский язык.

Рисунок 4-21. Выбор стран в Google News

Также называется: якорные ссылки, ссылки перехода.

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

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

Технические спецификации Консорциума World Wide Web (W3C, www.w3c.org) часто очень длинные, как оглавление CSS 2.1 показана спецификация (Рисунок 4-22). Эти внутренние ссылки переходят по странице без перезагрузки.

Рисунок 4-22. Внутренние ссылки на страницы для спецификации CSS 2.1 на сайте W3C

Вот некоторые общие проблемы с внутренними ссылками:

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

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

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

  • Внутренние ссылки вверху страниц занимают ценное пространство на экране.

  • Иногда по всему сайту принимается решение включить ссылки «Вернуться к началу» на всех страницах.Эти ссылки могут появиться на страницах, которые не прокручиваются.

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

1. Введение в веб-навигацию — Разработка веб-навигации [Книга]

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

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

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

На рис. 1-1 показана новостная статья из международной версии веб-сайта BBC (www.bbc.co.uk). Это страница, с которой все мы регулярно сталкиваемся в Интернете.В навигации нет ничего особенно интересного. Он здесь, когда вам это нужно, и в стороне, когда вам это не нужно. Но эта страница иллюстрирует некоторые типичные навигационные функции.

Рисунок 1-1. Статья из BBC news

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

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

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

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

В целом, различные элементы объединяются, чтобы создать систему навигации. Хотя посетители могут воспринимать эту систему как единое целое, мы можем проанализировать ее отдельные компоненты. Например, вкладки вверху по центру страницы (начиная с Home) называются основной навигацией .Эта страница находится в разделе новостей. В разделе «Новости» местная навигация представлена ​​вертикальным меню слева, которое указывает, где вы находитесь (выделено «Наука / Природа») и куда еще вы можете перейти, например, к статьям об Африке или в разделе деловых новостей.

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

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

Веб-навигация определяется тремя способами:

  1. Теория и практика того, как люди переходят со страницы на страницу в Интернете.

  2. Процесс целенаправленного поиска и поиска информации по гиперссылкам; просмотр веб-страниц.

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

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

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

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

Затем он предлагает другую парадигму для Интернета:

«Квалифицированные веб-разработчики, использующие современные браузеры и инструменты для создания сайтов, такие как ActiveX и JavaScript, могут упростить использование одноэкранных взаимодействий, которые не требуют прыжков со страницы. на страницу. Тем не менее, многие веб-дизайнеры продолжают делить и снова делить свои сайты на множество раздробленных страниц.Такое иерархическое расположение экранов вынуждает их возлагать на пользователей бремя навигации ». []

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

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

Рассмотрим каждый из этих пунктов более подробно.

НАВИГАЦИЯ ОБЕСПЕЧИВАЕТ ДОСТУП К ИНФОРМАЦИИ

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

Модель только с ссылками на контент

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

Рисунок 1-2. Модель только со ссылками на контент

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

Модель «жидкая информация»

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

Рисунок 1-3. Модель «жидкой информации»

Центр взаимодействия Лондонского университетского колледжа (UCLIC, www.uclic.ucl.ac.uk) проводит исследовательский проект, который исследует возможность сделать весь онлайн-текст интерактивным — вплоть до отдельных слов. [] Вместо гипертекста исследователи называют это гиперсловами.Основная идея заключается в том, что при нажатии на слово появляется меню параметров (как показано на рисунке 1-4). Затем вы можете выполнить поиск, создать ссылку на связанные документы, определить термин, перевести его и т. Д. По их словам, цель — положить конец тирании ссылок. Это также означало бы конец дизайну навигации.

Рисунок 1-4. Параметры навигации с помощью меню Hyperwords

Модель фильтра

Представьте себе доступ ко всему содержимому веб-сайта через одну страницу.Эта страница содержит элементы управления для фильтрации и сортировки для одновременного представления различных фрагментов материала. Конечно, это было бы очень интерактивно. Список документов в коллекции сжимается и расширяется при каждом взаимодействии. Щелчок по отдельному элементу в списке откроет его полный текст и изображения. Рисунок 1-5 показывает эту концепцию. Один элемент управления на данной странице ведет к новому контенту, но этот контент представлен на той же странице. Таким образом, движение является круговым: вы никогда не покидаете страницу, а просто постоянно обновляете ее содержимое.

Рисунок 1-5. Модель фильтра

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

Рабочий пример этой модели можно найти в экспериментальном интерфейсе, разработанном исследователями IBM для просмотра работ американского композитора Филипа Гласса (www.philipglass.com/html/pages/glass-engine.html). Как показано на рис. 1-6, Glass Engine фильтрует произведения Филипа Гласса по различным аспектам на одной странице: синие полосы — это ползунки, которые можно перемещать влево и вправо для поиска музыкальных произведений. Название и краткое описание каждой работы отображаются в центре страницы, в данном случае для Einstein on the Beach .

Рисунок 1-6. IBM Glass Engine фильтрует произведения американского композитора Филипа Гласса

Поисковая модель

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

Рисунок 1-7. Модель поиска

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

Структурно-обзорная модель

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

Рисунок 1-8. Модель структурного обзора

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

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

Рисунок 1-9. Веб-навигация: несколько форм доступа к информации

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

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

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

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

Но если пользователи использовали ссылки категорий, чтобы найти свою цель, 62% продолжали просматривать сайт. Пользователи, начавшие со ссылок на категории, в конечном итоге просмотрели почти в 10 раз больше страниц с нецелевым содержанием, чем те, кто начал с поиска [] «

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

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

НАВИГАЦИЯ ПОКАЗЫВАЕТ МЕСТО

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

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

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

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

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

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

Например, на Рисунке 1-10 показана страница финансовой поддержки студентов в Европе на веб-сайте Открытого университета (www.open.ac.uk). Чтобы попасть на эту страницу, вам нужно сделать несколько кликов: Стать студентом> Финансовая поддержка> Студенты, проживающие в континентальной Европе. Относительно глубокое расположение этой страницы указывает на то, что на сайте больше нет информации по этой теме, и для получения дополнительной информации вам придется позвонить по номеру телефона или написать на указанный адрес электронной почты.Кроме того, само по себе «Студенты-резиденты континентальной Европы» могут относиться ко многим вещам. Знание того, что это относится к категории «Финансовая поддержка», придает этому четкое значение.

Рисунок 1-10. Информация о местоположении в навигации по веб-сайту Открытого университета

НАВИГАЦИЯ ПОКАЗЫВАЕТ «О САЙТЕ»

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

Представьте, что вы хотите купить новый стереоресивер от Sony. Вы можете посетить веб-сайт Sony Style (рис. 1-11, www.sonystyle.com), чтобы узнать об их продукции. Попав туда, вы найдете категории для всех видов электронного оборудования: компьютеры, фотоаппараты, телевизоры и многое другое.

Рисунок 1-11. Стереоресиверы на сайте Sony Style в разделах «ТВ и домашние развлечения» и «Компоненты домашнего аудио»

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

Теперь сравните сайт Sony с сайтом Harman / Kardon (рис. 1-12, www.harmankardon.com).

Рисунок 1-12. Ресиверы в разделе «Товары для дома» на веб-сайте Harman / Kardon

Harman / Kardon производит избранный ассортимент высококачественной аудиопродукции.Навигация здесь сильно отличается от навигации на сайте Sony, показанном на рис. 1-11. Опыт просмотра на сайте Harman / Kardon гораздо более сфокусирован. Эта широта отражена в навигации по сайту. Также обратите внимание, что Harman / Kardon уделяет особое внимание автомобильной продукции, чего вы не найдете на сайте Sony. Эти два сайта отражают разную глубину и широту по схожей теме, и эти различия отражаются в навигации.

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

НАВИГАЦИЯ ОТЗЫВАЕТ БРЕНД

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

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

Сравните основные области навигации производителей часов Swatch (Рисунок 1-13; www.swatch.com) и Rolex (Рисунок 1-14; www.rolex.com).

Рисунок 1-13. Домашняя страница Swatch.com с вращающейся навигацией

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

  • Основные возможности в игровой форме представлены в кружке.

  • Помимо опции для основных коллекций, есть ссылки на такие вещи, как The Club и Beach Volley, которые являются специальными программами и мероприятиями, спонсируемыми компанией.

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

Рисунок 1-14. Домашняя страница Rolex

В отличие от этого, навигация на Rolex.com более мрачная и соответствует марке Rolex. Компания ценит традиции и качество и, как правило, обслуживает гораздо более высококлассных клиентов. Это отображается в навигации по сайту:

  • Коллекции — первая опция в верхнем левом углу.Компания Rolex явно ценит свою традиционную линию качественных часов. Вместо сезонной коллекции, как в случае с Swatch, есть давно существующие линейки продуктов, такие как The Oyster Professional.

  • Категория Спорт и культура содержит информацию об опере, гольфе и яхтинге. На сайте Rolex нигде нет пляжного волейбола.

  • Вместо клуба, как и в случае с Swatch, находится Институт Rolex. А в Институте Rolex посетители могут получить награды для предприятий, а также наставников и подопечных Rolex.

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

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

На рис. 1-15 показана верхняя часть домашней страницы Bose Ireland (www.bose.ie). Первый вариант, New from Bose, сообщает, что компания продвигается вперед с новыми продуктами и исследованиями. Справа от него есть два варианта — это ссылка «Инновации». Сообщение: Bose находится на переднем крае звуковых систем и сопутствующих товаров.

Рисунок 1-15. Ценности бренда подкрепляются навигацией на веб-сайте Bose в Ирландии (www.bose.ie)

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

НАВИГАЦИЯ ВЛИЯЕТ НА НАДЕЖНОСТЬ САЙТА

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

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

Б.Дж. Фогг, директор Лаборатории убедительных технологий Стэнфордского университета (http://captology.stanford.edu), проделал самую обширную на сегодняшний день работу по пониманию достоверности Интернета. [] Настоятельно рекомендуется его книга Убедительная технология: использование компьютеров для изменения того, что мы думаем и делаем (Morgan Koffmann; 2002).

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

Рассмотрим в качестве примера веб-сайт национальной телерадиовещательной компании Индии Doordarshan (www.ddindia.gov.in) (рис. 1-16). Проблемы с навигацией по сайту:

Широкие, нечеткие категории

Например, вы найдете такие категории, как «Бизнес», «Информация» и даже «Разное».

Сокращения

Некоторые посетители могут не знать, что означают рейтинги PB (BCI) и TAM.

Плохая организация пунктов меню

На рис. 1-16 показаны законы и руководящие принципы, отделенные от Закона 2005 года о праве на информацию несвязанными вариантами.

Плохая группировка категорий

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

Неожиданное поведение при навигации

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

Опции навигации с ошибками

Архив вместо архива.

Рисунок 1-16.Плохая навигация снижает доверие к сайту

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

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

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

Клиенты не могут купить то, что не могут найти

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

Сотрудники теряют продуктивность из-за неэффективной навигации

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

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

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

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

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

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

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

Зачем вы строите сайт?

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

Кто будет пользоваться сайтом?

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

К чему навигация предоставляет доступ?

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

Как организовано содержание сайта?

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

Как пользователи будут переходить к нужному им контенту?

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

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

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

Дизайн, ориентированный на пользователя

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

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

Дизайн, ориентированный на дизайнера

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

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

Дизайн, ориентированный на предприятие

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

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

Контент-ориентированный дизайн

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

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

Дизайн, ориентированный на технологии

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

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

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

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

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

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

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

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

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

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