Какие элементы сайта относятся к навигационным
Перейти к содержимому

Какие элементы сайта относятся к навигационным

  • автор:

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

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

Почитать позже

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

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

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

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

Виды навигации по сайту:

  1. Основная — ссылки на главные разделы. Отображает структуру проекта. Обычно располагается в меню. Это может быть навигационное меню в шапке, в подвале, в сайдбаре. А также мобильная версия меню с вертикальными элементами. Вертикальное меню встречается и на десктопе, обычно оно расположено в сайдбаре.
  2. Глобальная. Это навигация на странице сайта, ссылки и элементы, доступные в каждом документе. Навигационная панель инструментов (utility navigation) относится к глобальной навигации. Панель включает ссылку на корзину, главную страницу, личный кабинет, поиск, форму подписки и регистрации, контактную форму, систему фильтрации Простая, логичная структура лучше сложной, запутанной и разветвленной. Сначала продумывают структуру, и только и сортировки товаров. На десктопе обычно используется горизонтальная ориентация панели, на мобильном — вертикальная.
  3. Тематическая. Это линки на похожие страницы. На информационном проекте или в разделе — на страницы близкой тематики. В интернет-магазине — на похожие товары или дополнительные аксессуары.
  4. Текстовая. Это анкорные или безанкорные ссылки, которые ведут из контента одной страницы на другие связанные по смыслу документы. Например, перелинковка может вести со страницы каталога на подробное описание товара.
  5. Поисковая. Нужный запрос вводится в поисковую строку, и система находит релевантные документы.
  6. Языковая. Такая веб-навигация нужна на мультиязычных проектах для переключения на другую языковую версию.
  7. Рекламная. Рекламные вертикальные и горизонтальные медийные или текстовые блоки со ссылкой.

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

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

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

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

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

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

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

Как правильно выстроить навигацию сайта?

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

  • Простая, логичная структура лучше сложной, запутанной и разветвленной. Сначала продумывают структуру, и только потом на ее основе проводится разработка навигации сайта.
  • Обращайте внимание на уровень вложенности страниц. Если от главной до нужной страницы больше 3 кликов, то такая страница будет плохо ранжироваться. В идеале достаточно категорий, подкатегорий и страниц или записей внутри подкатегорий.
  • Хлебные крошки — полезный и важный элемент, они помогают сориентироваться, где находится пользователь, и вернуться на нужный уровень в один клик.
  • ЧПУ (человекопонятные урлы) любят и люди, и поисковые роботы. ЧПУ помогают понять, какой на странице контент, еще до того, как он успеет загрузиться.
  • Если традиционного меню под шапкой недостаточно, используйте дополнительное вертикальное меню в сайдбаре.
  • Используйте привычные виджеты, иконки и другие элементы, при необходимости дополняйте их текстом. Виджеты необычной формы (например, вертикальные кнопки вместо привычных горизонтальных) могут хорошо сработать, если останутся узнаваемыми.
  • Фильтрация — еще один важный элемент. Фильтры помогают быстро найти в магазине нужный товар, это заместитель продавца-консультанта. Они сужают ассортимент, исключая из листинга те товары, которые не подходят пользователю. Например, по цвету, размеру, сезону. Фильтрацию можно использовать не только в магазинах, но и в онлайн-кинотеатрах, на информационных сайтах. Обычно фильтры располагают вертикально в левом или правом сайдбаре.
  • Размещайте инструменты и кликабельные элементы в привычных местах. Например, поле поиска чаще всего находится в шапке справа, под логотипом помещают горизонтальное меню, под ним вертикальной цепочкой выводится выпадающее меню. Слишком оригинальный дизайн запутывает, затрудняет ориентацию. Лучше размещать элементы там, где пользователи ожидают их найти.
  • Иконки, которые ведут на группы или профили в соцсетях, должны визуально отличаться от кнопок «Поделиться».
  • Текстовые гиперссылки должны быть заметными, выделенными цветом. Ссылки в виде анкоров выглядят привлекательнее и воспринимаются лучше, чем URL.
  • Пример удобной навигации можно подсмотреть у успешных конкурентов. Если конкурент находится в ТОП-1 выдачи, то, скорее всего, у него хорошая структура и удобная навигация.

Читайте на askusers

Решение остаться на лендинге или уйти обычно принимается при просмотре первого экрана. Мы составили чек-лист аудита первого экрана лендинга: правильно ли он оформлен и хочется ли читать контент.

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

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

Узнайте, как увеличить конверсию на 41%!

Всего 3 шага и 5 минут вашего времени на пути к росту.

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

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

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

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

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

Советы и инструкции по дизайну удобного меню сайта

sistersbakery.ru

www.linelo.ru

fyrclothes.tilda.ws/story01

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

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

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

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

Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.

Сделать меню на одностраничном сайте

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

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

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

Якоря и ссылки внутри страницы

Зафиксировать меню

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

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

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

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

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

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

Добавить индикаторы (точки) для определения местоположения

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

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

Показать процесс загрузки и прокрутки страницы

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

На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.

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

Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.

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

Выделить кнопку с более важным действием

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

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

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

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

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

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

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

Какие виды навигации на сайте бывают и зачем она нужна интернет-магазину?

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

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

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

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

  • Горизонтальной — вверху страницы;
  • Вертикальной — сайдбар, обычно слева;
  • «Гамбургер» (категории меню раскрываются при наведении на специальный значок в виде 3 горизонтальных полосок)

Любой из видов навигации можно реализовать следующими способами:

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

16 советов по оптимизации навигации на сайте

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

1. Продумайте структуру

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

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

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

2. Располагайте основные элементы навигации в привычных и предсказуемых местах

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

Пример расположения меню в интернет-магазине Rozetka

Пример расположения меню в интернет-магазине Rozetka


Расположение личного кабинета и корзины в интернет-магазине детских товаров Antoshka

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

Пример навигации в интернет-магазине Intertop

Пример навигации в интернет-магазине Intertop

3. Учитывайте поисковые запросы пользователей

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

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

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

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

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

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

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

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

Меню интернет-магазина косметики Mon Amie.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Какие элементы сайта относятся к навигационным

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

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

Неудобная навигация

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

Где я


    Логотип и заголовок — они называют сайт.

Пользователь на странице история .

Пользователь на странице базовое . Эта страница является потомком страницы образование .

Куда я могу пойти

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

Где меню

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

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

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

Если страница длинная, то ссылка вверх полезна после каждого раздела.

Как правильно кодировать ссылку вверх

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

<A href="javascript:void(0)" onclick="scroll(0,0)">вверхA>

Ссылка, расположенная ниже, закодирована именно так:

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

Особая рекомендация относится к записи пунктов меню.

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

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

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