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

Что такое навигация сайта: как её правильно сделать

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

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

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

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

Третий вид – Java и Flash инструменты, с их помощью создаются различные эффекты при наведении курсора или нажатии на какую-либо ссылку. Реализовать качественную навигацию, при помощи таких технологий довольно сложно, но результат того стоит. Четвёртый вид – это навигация HTML, она служит для создания компактного меню.

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

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

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

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

Источник

Навигация сайта

7 октября 2017 Опубликовано в разделах: Азбука терминов. 32932

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

Как сделать современную и удобную навигацию на сайте: основные требования

Перечислим критерии качественной навигации:

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

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

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

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

По типу реализации всю навигацию можно разделить на 4 вида:

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

Удобная навигация сайта – одно из условий высокой конверсии

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

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

Источник

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

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

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

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

Источник

Навигация интернет-магазина: разработка структуры, типичные ошибки и удачные примеры

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

Что такое навигация и какие функции она выполняет

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

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

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

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

Необходимое количество ссылок определяется задачами площадки, объемом текстового, графического контента. Грамотная структура вмещает столько элементов, сколько требуется для удобного и оперативного перемещения по сайту. Однако нельзя и перебарщивать, чрезмерно загромождая пространство. Оптимальный объем – не более 5-15% от общей площади ресурса.

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

Типы и виды навигации

Исходя из конкретно выполняемых функций, навигация подразделяется на следующие разновидности:

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

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

Ключевые навигационные элементы для интернет-магазина

Главное меню

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

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

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

Дополнительное боковое меню

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

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

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

Футер

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

В пространстве подвала размещают следующие полезные компоненты:

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

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

Системные иконки-пиктограммы

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

URL-адрес

URL, выносимый в адресную строку, также является важным навигационным элементом ресурса. Он должен быть простым, понятным обычному пользователю, отражать не искаженную суть конкретной веб-страницы. Желательно прописывать адреса на латинице: https://site.ua/internet-magazin/glavnaya/.

Карта сайта

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

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

Типичные ошибки в навигации

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

Как оптимизировать навигацию

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

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

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

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

Rozetka

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

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

Whistles

Что такое навигация на сайте. Смотреть фото Что такое навигация на сайте. Смотреть картинку Что такое навигация на сайте. Картинка про Что такое навигация на сайте. Фото Что такое навигация на сайте

Английский онлайн-магазин современной одежды – отличный пример минималистичной навигационной системы. Все разделы, включая поиск, вынесены в главное верхнее меню. Бокового меню нет. Площадка не загромождена лишними ссылками, все просто и понятно.

Выводы

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

Источник

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

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