Содержание

Школа юзабилити: как улучшить навигацию сайта?


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


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


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


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


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


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


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

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


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


Проблемы, обусловленные иерархией контента


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


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


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


Здесь-то и вступают в действие ссылки по горизонтали.


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


Рекомендуемые действия:


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

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


Ссылки между продуктовыми страницами и контент-страницами


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


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


Рекомендуемые действия:


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

Читайте также: Почему навигация неудобна для посетителей вашего сайта?


Навигация по сайту с использованием JavaScript-эффектов


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


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


Ссылки, отображающие и скрывающие контент на странице


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


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


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


Рекомендуемые действия:


  • Для контента небольшого объема удалите тег <a> и замените его обработчиком события onClick JavaScript. С помощью CSS измените курсор мыши со стрелки на руку.

  • В случае контента большого объема, в том числе одностраничных сайтов с параллакс-скроллингом, не весь контент должен быть предварительно загружен. Предварительно загружайте только тот контент, который непосредственно связан с URL. Кроме того, для всех ссылочных тегов должно быть прописано значение href и onclick:


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


-Функция onclick предотвратит загрузку нового URL, но обеспечит загрузку контента из конечного URL.


-Используйте функцию pushState для обновления URL, даже если эта страница не загрузилась.


Использование трекинговых параметров в URL


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


Рекомендуемые действия:


  • Избегайте использования трекинговых параметров в URL. Вместо этого обратитесь к обработчикам событий onClick JavaScript на ссылках, которые будут передавать одни и те же трекинговые параметры. При использовании Google Analytics это можно сделать с помощью отслеживания событий.

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


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


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

В данном примере страница дважды ссылается на один и тот же URL (ссылка Blog и ссылка celebrity news blog). Вторую ссылку Google проигнорирует и будет учитывать только первую.


Несколько вещей, которые стоит упомянуть:


  • В 2014 году Мэтт Каттс (Matt Cutts), бывший глава команды по борьбе с веб-спамом в Google, сказал, что это больше не является проблемой.

  • Когда это было впервые протестировано и обнаружено, использовалась версия HTML 4.1, XHTML 1.1 был на подъеме, а HTML 5 еще не существовало. Сегодня существуют такие теги, как <header>, <article> и <sidebar>. Теперь Google обрабатывает ссылки в тегах хедера, боковой панели и статей.

Читайте также: Как Google индексирует ваши сайты?


Проблемы в SEO, возникающие из-за приоритета первой ссылки


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


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


Рекомендуемые действия:


  • Учитывайте порядок кода. Расположите основной контент перед боковой и верхней панелями навигации.

  • Используйте CSS для контроля направления float слева-направо или справа-налево, чтобы загружать боковую панель навигации после основного контента. Для верхней панели навигации можно использовать абсолютное позиционирование (absolute positioning).


Навигация на больших сайтах


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


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


Вот возможные решения этих проблем:


1. Делегирование задачи разным отделам


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


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


2. Использование инструментов


Автоматизация всегда повышает масштабность ручных процессов.


Инструменты сканирования, такие как Xenu, Screaming Frog, DeepCrawl или Botify, анализируют существующие ссылки, определяют проблемы и описывают архитектуру сайта. Если вы хотите визуализировать архитектуру сайта, вам помогут в этом такие инструменты, как DynoMapper и PowerMapper.


Инструменты анализа ссылок, такие как Open Site Explorer, Ahrefs, Majestic, Sistrix, LRT, и CognitiveSEO, анализируют, какие страницы получают больше всего обратных ссылок извне, а затем добавляют на них перекрестные ссылки, ведущие на более важные страницы сайта.


3. Поэтапный подход


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


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

Читайте также: Как оптимизировать навигацию интернет-магазинов, или 7 раз отмерь


7 ключевых выводов


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

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

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

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

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

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

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


Высоких вам конверсий! 

По материалам: searchenginejournal.com. Источник картинки: Orihuela

02-05-2017

Зачем нужна навигация по сайту?

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

Навигационные элементы

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

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

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

Полезные рекомендации

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

Читайте также:

Loading...Loading…

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

Мы делимся полезными статьями о поисковом продвижении сайтов и интернет-маркетинге.

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

Спасибо за подписку!

Как организовывается навигация сайта

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

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

Навигационное меню

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

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

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

Метки

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

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

HTML карта сайта

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

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

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

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

Форма поиска

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

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

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

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

Создание навигации сайта: основные элементы

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

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

  1. Логотип, который лучше расположить в левом верхнем углу, так как такой вариант привычнее для пользователей.
  2. Название компании и краткое описание деятельности – теглайн (если эта информация не указана в логотипе). Дополнительно можете указать ваше УТП (подробнее о том, что это и как правильно выбрать, читайте здесь).
  3. Регионы работы, доставки товаров. Не нужно перечислять весь список, укажите данную информацию кратко.
  4. Контактная информация. Если у вас несколько офисов или магазинов, то в шапке сайта стоит указать важные сведения только для главного, чтобы не перегружать шапку.
  5. Рядом с номером телефона обязательно добавляем режим работы, чтобы пользователи видели, в какое время можно позвонить в компанию.
  6. Ссылка на страницу корзины, если у вас интернет-магазин.
  7. Форма заказа обратного звонка. Добавляйте только в том случае, если у ваших специалистов есть время оперативно обрабатывать с нее заявки. Нужна для тех пользователей, которые по каким-либо причинам не могут сами позвонить в компанию.

Пример информативной шапки сайта:

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

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

  1. Каталог услуг или товаров (выпадающий пункт меню).
  2. Страница о компании.
  3. Способы оплаты и доставки (для интернет-магазинов).
  4. Гарантии и возврат (для интернет-магазинов).
  5. Портфолио (если есть, что показать).
  6. Акции и скидки.
  7. Отзывы (для сайтов услуг).
  8. Блог (если есть).
  9. Контакты.

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

Также ссылки на дополнительные разделы, например, на вакансии компании, можно показать только в подвале сайта.

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

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

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

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

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

Дополнительные элементы навигации

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

Хлебные крошки или локальная навигация. Показывают путь, пройдённый пользователем, или местонахождение страницы в иерархии сайта. Стоит добавить, если у вас многоуровневый сайт (вложенность более 2 уровней). Рекомендации по оформлению:

  1. Должны находиться на всех страницах сайта, кроме Главной.
  2. Следует расположить хлебные крошки слева под главным меню и в одном месте на всех страницах.
  3. Использовать небольшой размер шрифта.
  4. Все элементы, кроме последнего, должны быть ссылками на соответствующие страницы сайта.
  5. Последний элемент должен совпадать с названием страницы и быть выделенным (лучше жирным начертанием).

Пример понятных хлебных крошек:

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

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

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

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

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

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

Но и это еще не все

Есть еще пара элементов, о которых хотелось бы также сказать в рамках данной темы.

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

Хороший пример: https://site.ru/company/portfolio/

Плохой пример: https://site.ru/site/28787343/

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

Заключение

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

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

Как выглядит хорошая навигация сайта

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

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

Как выглядит хорошая навигация сайтаКак выглядит хорошая навигация сайта

Главное меню

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

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

  • Каталога продуктов либо раздела с портфолио.
  • Акций и скидок, проводимых на сайте.
  • С информацией о компании или авторе.
  • Обратной связи.
  • Описание способа оплаты и условия доставки.
  • Отзывы клиентов.
  • Сведения о предоставлении гарантий.
  • Блог.
  • Карты сайта.

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

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

Форма поиска

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

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

Использование футера

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

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

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

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

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

Основные рекомендации для хлебных крошек:

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

Боковое меню

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

Кнопка возврата наверх

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

Карта сайта

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

Удобная навигация мобильных сайтов: обзор основных элементов

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

Для мобильных важно учитывать:

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

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

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

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

  • Логотип и название компании. Идеально, если ваш логотип и есть название компании. Располагать лучше слева.

  • Бургерное меню (или сэндвич-меню) — «свернутая» версия горизонтального меню. Удобно тем, что представляет собой всего один символ, который легко поместить в шапке сайта. Пример:

  • Форма поиска. Можно разместить как в виде одного символа (знак лупы), так и текстом «Поиск». О том, какой должна быть форма поиска, мы рассказывали здесь.

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

    Пример для Главной страницы:

    И та же форма поиска на внутренней странице:

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

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

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

  • Ссылка на избранное и/или список сравнения. Если у вас есть на сайте такие разделы, то кратко укажите их.

Примеры компактных шапок сайта для вдохновения:

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

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

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

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

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

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

    И еще более лаконичный пример:

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

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

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

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

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

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

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

  • Кнопка «Вверх». Поможет пользователю быстро вернуться в начало страницы.

Примеры подвалов сайта:

Дополнительные элементы навигации

Не менее полезные элементы, но обязательны не для всех сайтов.

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

Например, здесь можно вернуться в общую категорию «Техника для кухни»:

В отличие от десктопной версии можно не использовать, если у сайта небольшая вложенность (1-2 уровня).

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

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

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

Пример размещения данных кнопок:

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

Нижнее меню. Использовать стоит аккуратно, желательно не закреплять шапку сайта. В нем можно разместить популярные функции, например, отправку письма, звонок менеджеру, запись на прием, добавить в корзину и др., но не более 3-4 кнопок. Такое меню позволяет пользователю быстрее совершить целевое действие.

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

Итоги

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

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

P.S. Проверить свой сайт на адаптивность под мобильные можно на этой странице.

Почему хорошая навигация эффективнее функции поиска на сайте?


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


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

Ваши клиенты знают, что искать?


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


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


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


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


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


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

Поиск требует дополнительных усилий


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


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


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


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


В разделе комедий на сайте нелегко выяснить, какой фильм подходит под ваши требования. В этом случае у вас 2 варианта: пересматривать каждую аннотацию или ввести в поисковую строку соответствующие условия. Может быть, «комедия положений PG-13» (статус от 13 лет) или «комедия PG-13 с Джимом Кэрри»? Чудовищно неудобно!


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

Поиск имеет более высокую «стоимость взаимодействия» с пользователем


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


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

Поиск по сайту часто работает некорректно


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


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


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


Если в строке поиска Megogo ввести «jim carey», вы получите не только совершенно нерелевантные результаты, но и, что самое интересное, те же самые рекомендации, которые были получены по предыдущему запросу «комедия для просмотра с подростками». В то же время поисковая система Яндекс выдает корректную информацию об актере независимо от регистра.

Пользователи имеют слабые навыки в поиске


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


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


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


Впрочем, лучше получить хоть какие-то результаты. Бывает и хуже: на запрос «дворники camry» сайт Autozone ответил подозрительным молчанием.

Вместо заключения


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


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


Высоких вам конверсий!

По материалам nngroup.com, image source: C.Koch 

13-02-2015

Основные тенденции веб-навигации | Creative Bloq

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

01. Прикрепленные панели навигации

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

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

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

Как им пользоваться?

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

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

Спрятано за It’s Nice Это гамбургер-меню — это множество вариантов

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

Зачем их использовать?

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

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

03. Универсальная навигация

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

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

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

Зачем это нужно?

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

04. Вертикальная скользящая навигация

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

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

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

Зачем это нужно?

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

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

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

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

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

Зачем их использовать?

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

Выдвижные адаптивные подменю Politico, видимые для мобильных пользователей.

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

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

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

Зачем их использовать?

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

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

07. Карусели главных новостей

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

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

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

Зачем их использовать?

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

08. Оглавление

Блог Ahrefs иногда предлагает пользователям фиксированные «быстрые ссылки» в сообщениях.

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

Зачем их использовать?

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

09.Заглавные буквы в углу

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

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

Эти панели навигации обычно имеют очень похожие стили:

  • Все заглавные буквы
  • Мелкие буквы
  • Шрифты без засечек
  • Дополнительный интервал по горизонтали
  • Белый или очень светлый оттенок

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

Зачем их использовать?

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

10. Одностраничная точечная навигация

Gumtree использует одностраничные точки, но не полагается на фиксированную прокрутку.

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

Зачем это нужно?

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

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

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

.

Подключение дочерних сайтов к основным сайтам

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

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

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

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

Фиолетовая полоса в верхней части страницы Yahoo! Страница Фильмы является примером универсальной навигации. Он появляется на большинстве дочерних сайтов Yahoo.com (например, News , Sports и Answers), и предлагает ссылки на эти дочерние сайты.

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

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

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

Ваш браузер не поддерживает видео тег.

В этом видео из исследования юзабилити пользователь изо всех сил пытался вернуться на главный сайт Unicef ​​UK.

Две основные проблемы вызвали трудности и разочарование пользователя в этой ситуации:

  1. С первого взгляда трудно заметить, что пользователь находится на дочернем сайте основного сайта. Все области заголовков выглядят одинаково, а заголовки разделов ( News & Blogs , Soccer Aid ), размещенные с правой стороны большого баннера, могут быть легко пропущены.(Как четко различать разделы при сохранении единообразия внешнего вида — важная задача для многих дизайнеров.)
  2. Нет четкого и надежного способа перейти на универсальную домашнюю страницу. (На самом деле, на странице News & Blogs действительно есть ссылка Unicef ​​UK Main Site , но пользователи проигнорировали ее из-за ее весьма неожиданного положения в качестве последней категории на панели навигации раздела. Логотипы и домашние ссылки должны быть слева, а не справа.)

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

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

6 Рекомендации по проектированию универсальной навигации

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

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

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

2. Сосредоточьтесь на глобальной навигации дочернего сайта; не отвлекайте внимание на универсальную навигацию.

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

Для людей, посещающих страницу Disney on Ice , красная навигационная панель подсайта выглядит заметной и привлекательной. Универсальная панель навигации в верхней части страницы менее заметна и не отвлекает от навигации по дочернему сайту. На какую панель навигации следует смотреть пользователям, чтобы узнавать об исследовательской деятельности Института исследований энергосистем Кардиффского университета? Навигация по разделам (светло-серая) менее заметна, чем черная универсальная панель навигации в верхней части страницы.

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

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

На веб-сайте IEEE Circuits & Systems Society сохраняется иерархия между заметной зеленой панелью навигации по разделам и более тонкой универсальной панелью навигации над ней.

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

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

У этого подразделения Британского Красного Креста, посвященного вакансиям и набору добровольцев, отсутствует четкое название раздела (участники пользовательского тестирования не смогли определить его), но, по крайней мере, на нем есть ссылка на универсальный дом.К сожалению, ссылка (помеченная Наш основной сайт ) имеет плохой информационный запах и размещена в крайне необычном положении: в сером поле в правом верхнем углу. Поскольку люди смотрят в верхний левый угол, чтобы вернуться домой, размещение там ссылки и маркировка ее доменом (ESPN.com) эффективно выводит людей с этого дочернего сайта на основной сайт .

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

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

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

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

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

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

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

Заключение

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

.

10 сайтов, предлагающих исходную навигацию

Навигатор на сайте в Интернете — это важный вклад в использование опыта. C’est d’ailleurs pour ne pas faire fuir ces derniers que nous vous avons fait part de quelques consils pour réussir la navigation de votre site.

S’il n’est pas toujours judicieux d’être créatif sur cet element de web design, l’originalité peut tout de même Trouver sa place. Pour preuve, 10 веб-сайтов, предлагающих удобную навигацию по всему миру.

Analysons tout cela de plus près.

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

Mais regardez bien le curseur qui se Trouve au среда. C’est cet élément qui apporte de l’originalité à la navigation de ce site web.

Il vous permet de choisir les information que vous souhaitez afficher, une idée creative que l’on adore car il vous permet de personnaliser votre expérience.

Curseur navigation

Curseur navigation

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

Pour mieux comprendre, One Blue Slip propose des residences в Нью-Йорке и prône une vie nautique et luxueuse à quelques minutes de Manhattan.

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

Menu boussole One Blue Slip

Menu boussole One Blue Slip.

Настройте навигацию на своем сайте SharePoint

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

  1. Щелкните Edit внизу левого меню.

    SharePoint Left Nav

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

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

  3. В диалоговом окне Добавить ссылку выберите один из следующих вариантов ссылки:

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

      Add a URL link to the left navigation of a SharePoint team site

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

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

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

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

    Затем нажмите ОК .

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

    Add link to left-hand menu

    Щелкните Добавить в навигацию .

    Add to navigation option from a page listing

  5. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

Примечание. Недавние элементы обрабатываются SharePoint автоматически. Вы не можете добавлять ссылки в меню «Недавние».

  1. Щелкните Edit справа от верхнего меню.

    Communication site top menu

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

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

  3. В диалоговом окне Добавить ссылку выберите один из следующих вариантов ссылки:

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

      Add a URL link to the left navigation of a SharePoint team site

    • Заголовок для добавления ярлыка без гиперссылки.

  4. В диалоговом окне Добавить ссылку в поле Адрес введите URL-адрес ссылки, которую вы хотите добавить при добавлении ссылки.

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

    1. Перейдите на страницу, на которую хотите добавить ссылку.

    2. Скопируйте URL-адрес из адресной строки.

    3. Вставьте URL-адрес в поле Адрес

  5. В поле Отображаемое имя введите отображаемый текст для ссылки или метки.Это текст, который появится в меню.

    Затем нажмите ОК .

  6. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

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

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

  1. Щелкните Edit справа от панели навигации узлового сайта.

    SharePoint hub navigation

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

  2. Наведите курсор на то место в меню, куда вы хотите добавить ссылку, и щелкните + , а затем стрелку вниз.

    Edit SharePoint hub navigation

  3. В диалоговом окне Добавить ссылку в поле Адрес введите URL-адрес ссылки, которую вы хотите добавить.

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

    1. Перейдите на страницу, на которую хотите добавить ссылку.

    2. Скопируйте URL-адрес из адресной строки.

    3. Вставьте URL-адрес в поле Адрес

  4. В поле Отображаемое имя введите отображаемый текст для ссылки.Это текст, который появится в меню.

    Затем нажмите ОК .

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

  5. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

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

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

Add or edit links and labels in a SharePoint communication site footer.

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

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

  2. Щелкните + прямо над кнопками на левой панели навигации.

    Add link or label in a footer on a SharePoint communication site.

  3. В диалоговом окне Добавить ссылку выберите один из следующих вариантов:

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

      Add a URL link to the left navigation of a SharePoint team site

    • Заголовок для добавления ярлыка без гиперссылки.

  4. В диалоговом окне Добавить ссылку в поле Адрес введите URL-адрес ссылки, которую вы хотите добавить, или в поле Отображаемое имя введите имя метки, а затем нажмите ОК .

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

    Edit existing link or label in a footer on a SharePoint communication site.

  6. В меню выберите один из следующих вариантов:

    • Измените , чтобы изменить ссылку или метку

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

    • Удалить , чтобы удалить ссылку или метку из нижнего колонтитула

  7. После внесения изменений нажмите Сохранить

Важно:

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

  • Владелец сайта должен включить таргетинг на аудиторию для навигации по сайту.

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

  • Аудитория определяется группами Microsoft 365 и группами безопасности. При необходимости создайте группу Microsoft 365 для членов вашей аудитории. Или, если вы являетесь администратором, вы можете создать группу безопасности в центре администрирования Microsoft 365. Динамические группы Azure AD в настоящее время не поддерживаются.

  1. Выберите Edit для меню, в которое вы хотите добавить свойства таргетинга аудитории.

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

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

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

Microsoft Teams link in SharePoint team site navigation

3. Выберите многоточие () рядом со ссылкой, которую вы хотите изменить, и выберите Изменить .

Edit a link in the left-hand menu

4. Настройте таргетинг до 10 групп или групп безопасности Microsoft 365 в появившемся поле ввода.

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

Navigational audience targeting dialog box to enter groups

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

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

Navigational audience targeting confirmation

6.По завершении выберите Сохранить или выберите Отмена , чтобы отменить изменения.

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

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

  2. Щелкните многоточие () рядом со ссылкой, которую нужно изменить.

  3. Щелкните Edit .

    Edit a link in the left-hand menu

  4. Когда вы закончите редактировать ссылку, нажмите ОК .

  5. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

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

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

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

  3. Щелкните элемент меню, который вы хотите переместить, перетащите его в новое место и отпустите кнопку мыши.

  4. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

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

Левое меню

Left-hand navigation levels

Главное меню

Top navigation levels

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

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

  2. Щелкните эллипсы () рядом со ссылкой, которую нужно сделать подссылкой.

  3. Щелкните Сделайте подссылку .

    Make a link a sub link in the left-hand menu

  4. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

Перемещает ссылку с отступом из-под другой ссылки.

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

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

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

  3. Щелкните Продвинуть ссылку .

    Promote a sub link to a primary link

  4. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

Некоторые ссылки, такие как Корзина , являются системными и не могут быть удалены.

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

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

  2. Щелкните многоточие () рядом со ссылкой, которую вы хотите удалить.

  3. Щелкните Удалить .

    Примечание: В настоящее время вы не можете удалить ссылку «Корзина».

    Remove a link from the left-hand menu

  4. По завершении настройки навигации щелкните Сохранить или, чтобы отменить изменения, щелкните Отмена .

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

  1. Нажмите Настройки
    Office 365 Settings button
    , а затем щелкните Параметры сайта . Если вы не видите Параметры сайта , щелкните Информация о сайте , а затем щелкните Просмотреть все параметры сайта . На некоторых страницах вам может потребоваться нажать Site Contents , а затем нажать Site Settings в правом верхнем меню.

  2. В разделе Look and Feel на странице Site Settings щелкните Navigation Elements .

    Navigation elements in Site Setting menu

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

    Uncheck Quick Launch menu

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

Редактирование ссылок в SharePoint Server 2016 или SharePoint Server 2013

Чтобы приступить к редактированию ссылок на вашем сайте, щелкните один из вариантов РЕДАКТИРОВАТЬ ССЫЛКИ на странице.

Edit links

1 . Чтобы изменить ссылки на верхней панели ссылок, щелкните РЕДАКТИРОВАТЬ ССЫЛКИ справа от меню.

2 . Чтобы изменить ссылки в левом меню (также известном как панель быстрого запуска), щелкните РЕДАКТИРОВАТЬ ССЫЛКИ под меню.

Примечание. . Если вы не видите РЕДАКТИРОВАТЬ ССЫЛКИ , возможно, у вас нет прав на настройку навигации по сайту. У вас должны быть как минимум разрешения на управление списками. Свяжитесь с владельцем сайта, чтобы получить разрешения на внесение изменений самостоятельно или чтобы изменения были внесены за вас.

.