Навигация на сайте как правильно

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

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

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 Задача пользователя: Понять «где я?», «Как сюда можно попасть еще раз»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

Футер

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

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

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

Страница 404

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

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

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

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

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

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

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

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

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

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

3D карта

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

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

Видеофильм

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

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

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

Источник

Навигация по сайту: правила построения и влияние на SEO

17.07.2020 Время прочтения: 7 минут

Дата обновления: 10.11.2021

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник