Как составить путеводитель по сайту

Идеальная навигация держится на трех китах. Это: 

• Дизайн

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

• Удобство 

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

• Структура

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

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

1. Главное меню

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

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

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

2. Боковое меню

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

Пример неперенасыщенного меню с подразрелами слева

3. Иконки

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

Работа студии. Удобное меню слева представлено иконками и при наведении дублируется текстом

4. Карта сайта

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

Карта сайта на главной странице. Отличный пример удобного размещения разделов

5. Поиск

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

Светлый поиск является продолжением главного меню

6. Фильтрация и сортировка

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

Расширенная сортировка и фильтрация облегчают пользователям поиск

7. Раздел «О компании»

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

Работа студии. Раздел «О компании» размещен в футере

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

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

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

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

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

Ozon активно использует «хлебные крошки»

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

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

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

11. Кнопка возврата

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

Кнопка возврата крупно показана справа

12. URL-адрес страницы

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

13. Визуальные эффекты 

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

Кнопки с дополнительной анимацией привлекают внимание и увеличивают кликабельность.

Работа студии. Кнопка «Записаться» меняет цвет при наведении курсора. На сайте реализованы различные анимационные эффекты 

14. Футер

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

Работа студии. Футер включает все необходимые разделы

Важные правила удобной навигации

1. Не утруждайте пользователя новыми вкладками

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

Удобно сделана странца параметров. Не нужно переходить в новые разделы — достаточно навести курсор на часть объекта 

2. Располагайте контакты на видном месте

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

Работа студии. Удобное расположение контактной информации. Пользователь видит номер и может связаться сам или «Заказать звонок»

3. Не прячьте меню

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

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

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

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

Подсказки закреплены в главном меню

5. Добавляйте стимулирующие разделы

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

Работа студии. Возможность прочитать о компании в СМИ

6. Помните про информационные ссылки

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

Работа студии. Информативные ссылки для больших объемов информации

7. Не забывайте про правило логотипа

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

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

8. Группируйте страницы

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

Работа студии. При такой группировке в один блок помещается больший объем информации

9. Расставляйте приоритеты

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

Работа студии. Правильно расставленные акценты на главной странице

10. Используйте дизайн

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

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

Работа студии

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

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

Как достичь максимума

1. Возьмите за основу краткость: не путайте пользователя и избегайте лишнего в навигационной панели.
2. Помните, что пользователь обращает больше внимания на первый и последний пункты панели навигации и просматривает меню слева направо. Значит, в центральной части меню можно располагать наименее значимые ссылки.
3. Продумайте «план отступления» — дайте пользователю возможность вернуться к предыдущему разделу несколькими способами, а не только путем нажатия кнопки «Назад» в браузере.
4. Обязательно проверьте адаптацию навигации под мобильные устройства: располагаются ли все кнопки на месте, не выходят ли за рамки экрана, удобно ли на них нажимать.
5. Обращайте внимание на то, как долго люди задерживаются на вашем сайте. Если пользователь может быстро найти у вас то, что ему нужно, с большой вероятностью он станет вашим клиентом.

---

Фото на обложке: Shutterstock / William Potter

Навигация по сайту: задачи и инструменты

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

1 Задача пользователя: Попасть на сайт

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

Инструменты:

— переход из поисковой системы;
— имя сайта;
— ссылка на внутреннюю страницу;
— QR code.

Вы уверены, что имя вашего сайта подобрано хорошо? Попробуйте своему другу / коллеге / родственнику продиктовать его по телефону.
— Алло, сынок, а где я могу почитать твою статью про железки?
— Мама, на хабре, я же говорил!
— Где-где?
— Хабрахабрточкару.
— …

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

Если ссылку присылает друг или коллега, и по ней хотя бы примерно можно понять, что ожидает пользователя на странице – это очень и очень хорошо. Потому что по ссылке
http://habrahabr.ru/events/coming/event345, полученной в Skype, я могу определить, что это какое-то описание предстоящего события, и решить, посмотреть мне ее сейчас или позже. А когда мне присылают нечто вида
http://lite-mobile.ru/index.php?page=shop.product_details&flypage=shop.flypage&product_id=748&category_id=11&manufacturer_id=0&option=com_virtuemart&Itemid=137 — даже страшно туда заглядывать.

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

Помимо этого у QR code есть интересная особенность – по его виду непонятно, что за ним кроется. И многие, у кого установлен QR scanner, считывают код просто из любопытства. Чем не дополнительная реклама?

---

2 Задача пользователя: Понять «где я?», «Как сюда можно попасть еще раз»

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

Инструменты:

— логотип (по совместительству быстрый переход «домой»);
— заголовок страницы;
— выделение текущего пункта меню (каталога);
— хлебные крошки.

Совершенно не обязательно использовать их все сразу.
Если структура вашего сайта позволяет без труда установить, как попасть к данной странице либо путь нельзя описать однозначно, то нужды в хлебных крошках нет. Напротив, если существуют различия, в зависимости от того, как пользователь попал на, казалось бы, одну и туже страницу – хлебные крошки или иные явные указатели пути необходимы:
• ХБЗ Дарница -> Свежий хлебушек -> Хлебец Весенний 300г
• ХБЗ Дарница -> Просрочка -> Хлебец Весенний 300г

За то, как будет выглядеть ваш сайт среди соседей по вкладкам (или закладкам) браузера, ответственны Favicon вместе с Title.

3 Задача пользователя: Попасть в личное пространство

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

Инструменты:
— форма авторизации;
— изменение вида сайта (целиком, либо частично) в зависимости от того, авторизован пользователь или нет;
— ссылка на корзину/личный кабинет.

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

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

4 Задача пользователя: Получить актуальную информацию

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

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

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

Инструменты:

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

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

5 Задача пользователя: Найти что-то конкретное

Это одна из самых важных навигационных задач. Казалось бы – нет ничего проще, чем спросить у пользователя, чего он хочет и дать то, что нужно. В идеале нужен вышколенный консультант:
— Чем я могу вам помочь?
— Мне бы семеновский ржаной с отрубями.
— Минуточку, милейший!

на практике чаще всего имеем следующие Инструменты:
— поиск;
— рубрикатор.

Пользователь может либо пройти по логично выстроенному каталогу, либо воспользоваться «телепортацией» в виде поиска.
Телепорт начинает изрядно барахлить если:
— поиск нужно искать через Ctrl+F;
— есть подобные подсказки: Для поиска словосочетания «заключите его в кавычки».

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

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

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

— последовательность уточнений во всех рубриках должна быть идентичной.
Если есть последовательность «Сковороды -> С антипригарным покрытием -> Диаметр 30см -> Сковорода ЖарПтица», то не должно быть последовательности «Кастрюли -> 3 литра -> Из алюминия -> Кастрюля Тая»

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

6 Задача пользователя: Ознакомиться с содержанием, выбрать из предложенного, переключиться на что-то другое

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

Инструменты:
— анонсы категорий (дашборды);
— меню (табы);
— галереи, списки, иные способы представления информации.

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

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

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

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

7 Задача пользователя: «Найти вас в реальном мире»

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

Инструменты:
— контакты, адреса;
— карты и ссылки на них.

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

Помните, что «Барочная 4a» это не более чем юридический адрес, который может быть известен всем водителям маршрутки не иначе как «У столба с аистами остановите пожалуйста». Лучше всего дать описание человеку, который ни разу у вас не был – пусть он попробует по нему добраться, а потом расскажет, с какими трудностями столкнулся.
Попробуйте открыть свой сайт с мобильного телефона и найти там адреса/телефоны, возможно это вообще единственная по-настоящему важная информация, которую стоит показывать в мобильной версии.
Контакты стоит размещать даже на страницах «Сайт находится в стадии разработки», «Проводятся технические работы» и т.п. Ведь, столкнувшись с такого рода «стеной», пользователь может либо уйти к конкурентам, либо, если вы монополист, и вовсе остаться без хлебушка.

Пожалуйста, не оставляйте людей без присмотра!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Панель навигации

Или более привычное на слух меню должно быть на каждом ресурсе. Оно может быть любым в дизайнерском исполнении, но главное требование – оно должно быть понятно пользователю и предоставлять информацию по категориям. Избыточность здесь будет вредить. Меня, например, всегда ставила в тупик логика меню в ранних телефонах Нокиа. В итоге так я их полностью и не полюбила. Так же дело обстоит с сайтами и продуктами. Логика меню должна быть понятна пользователю. Именно это требование важно в первую очередь. Есть правило: нужная страница должна быть достигнута в 3 клика. И логичное меню этому способствует. Следует избегать большого количества вложенных пунктов. Меню более чем в 3 уровня уже затрудняет навигацию сайта.

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

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

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

Логотип

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

Заголовки страниц

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

Форма входа

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

Favicon

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

Поиск

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

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

Навигация в физическом мире

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

• Должен присутствовать функционал по выбору города/региона, если представительства есть в разных населенных пунктах,
• Время работы организации или время доступности заказа товаров и услуг.
• Перечень способов связи: телефон, e-mail, форма обратной связи, skype, заказ обратного звонка и т.п. Не стоит ограничиваться только телефоном, поскольку тарифы на звонки совершенно разные, и кто-то не захочет тратить деньги на звонок. Набирают популярность формы «Он-лайн-консультант» и «Заказать обратный звонок». Но если эти формы не слишком навязчивы.
• Карта проезда с указанием точного адреса, маршрута на авто, на общественном транспорте и пешеходным маршрутом. Признаком хорошего тона является активная встроенная карта от одного из сервисов, отметка места на «народной карте», координаты для навигатора, релевантный адрес или гео-координаты (чтобы не искать), возможность проложить и распечатать маршрут.

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

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

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

Веб-сайты для людей: профессия «Веб-разработчик».