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

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

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

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

А теперь,

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

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

Первым делом рассмотрим Основное навигационное меню.

Картинка-ссылка. Этот случай был описан выше. Несмотря на то, что сейчас мало кто отключает просмотр изображений, делать картинку элементом основного навигационного меню я бы вам крайне не советовал. Во-первых, текст ссылки является важным анкором в плане СЕО, и картинка не может оказать такого эффекта. Во-вторых, чем больше картинок на вашем сайте, тем дольше он грузится, а скорость загрузки один из основных фактов ранжирования. В-третьих, при изменении размера окна ваш дизайн может поплыть и кнопки окажутся совсем не на том месте, где они должны быть. В-четвертых, картинки могут не подгрузиться и пользователь не увидит всей вашей красоты, но главное не узнает чего и куда ему жать. А оно вам надо? В-пятых, при помощи обычного CSS можно вытворить с меню такое(!), чего вам никогда не повторить при помощи картинок. Мне продолжать список?

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

удобная навигация сайта

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

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

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

Теперь посмотрим на Хлебные крошки.

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

Не забудем и про обычные ссылки.

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

Ругать – хорошо. Ругать у нас каждый может. А как на счет примеров оформления правильной навигации по сайту? Да не вопрос!

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

И вновь начнем с Основного навигационного меню

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

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

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

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

Немного про Хлебные крошки.

Помимо того, что было сказано выше, хотелось бы отметить, что Хлебные крошки стоит использовать лишь тогда, когда вложенность страниц на ресурсе превышает трех разделов. К примеру такой путь: Главная =>Услуги не нуждается в хлебных крошках. А путь Главная => Услуги => Кузовные работы => Покраска нуждается в подобном элементе навигации.

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

Так же советую почитать:

Внутренняя оптимизация сайта
Доброго всем времени суток! Сегодня мы поговорим о внутренней оптимизации сайта. Что это такое и для...
Файл robots.txt
Привет, друзья, с вами снова я – Денис, автор и ведущий блога Старая Ворона. Вы не поверите, но сего...
Спам в комментариях на сайте
Привет, друзья! В этот прекрасный весенний день, когда температура за окном зашкаливает за 40 градус...
Как бороться со спамом в почте
Всем доброго времени суток. Как вы помните, вот здесь я обещал рассказать о том, как бороться со спа...

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

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