Что такое навигация в информатике

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

О навигации на сайтах

Решил рассмотреть понятие навигации применительно к информационной архитектуре сайта.

И вот, что получилось

Сначала об определениях. Под информационной архитектурой понимается следующее:

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

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

Но даже эти определения не окончательные. В книге Information Architecture for the World Wide Web первая глава полностью посвящена проблеме определения понятия ИА.

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

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

Под навигацией понимается следующее:

Навигация (лат. navigatio, от лат. navigo — плыву на судне):
1. Мореплавание, судоходство
2. Период времени в году, когда по местным климатическим условиям возможно судоходство
3. Основной раздел судовождения, в котором разрабатываются теоретические обоснования и практические приёмы вождения судов

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

Вот, что пока нашел

Есть встроенная навигация на сайте, она бывает трех типов

— глобальная навигация
— локальная навигация
— контекстная навигация

Глобальная навигация — всегда поможет ответить на вопрос «Где я?».

Локальная навигация — подскажет «Что есть еще рядом?».

Контекстная навигация — поможет найти «Что еще можно узнать имеющее отношении к информации на странице?».

Рисунок иллюстрирует, где находятся эти зоны навигации (проект для обсуждения)

Также прочитал статью Кондратия Ермолина (компания Анима) в журнале «Рекламный штурман»
В статье приводится следующая классификация

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

Типы внутренней навигации
— иерархическая
— поисковая навигация
— фасетная навигация

Рубрикаторы
— страничный
— алфавитный рубрикатор
— типовой или классовый рубрикатор
— параметрический рубрикатор
— тэговый рубрикатор

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

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

Источник

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

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

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

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

Источник

Эффективное упрощение навигации, часть 2: Навигационные системы

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

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

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

Традиционные навигационные меню

Существует 5 традиционных типов навигационных меню или виджетов, которые можно отсортировать от наиболее простых до наиболее сложных:
1. Строка меню
2. Обычное выпадающее меню
3. Мега-меню
4. Отдельная страница
5. Динамические фильтры

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

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

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

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

Строка меню (Menu bar)

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

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

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

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

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

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

Несколько рядов навигации затрудняет доступ к содержимому.

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

Вертикальная навигация может помешать презентации контента на широких экранах.

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

Обычное выпадающее меню (Regular Drop-Down Menu)

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

Элементы в выпадающем меню вертикально укладываются в один столбец.

Рекомендация
Если элементы лучше всего объясняются словами и меню не слишком длинное, тогда обычное выпадающее меню – самое простое и эффективное решение.

Пояснение
В сравнении с мега-меню, обычное выпадающее меню имеет следующие преимущества:

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

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

Если места на экране мало, то подстройка меню под ориентацию экрана – хорошее решение.

Мега-меню (Mega-Menu)

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

Мега-меню больше и сложнее обычного выпадающего меню.

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

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

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

Отдельная страница (Separate Page)

Четвёртый способ отображения элементов или категорий – расположить их на отдельной странице.

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

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

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

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

Динамические фильтры (Dynamic Filters)

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

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

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

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

Динамические фильтры часто добавляются к традиционной навигации.

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

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

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

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

Альтернативная навигация

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

Ниже представлены четыре наиболее распространённых типа альтернативной навигации:
1. Поиск
2. Карта сайта
3. Указатель от А до Я
4. Тэги

Поиск (Search)

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

Поиск – это прямой путь к желаемому контенту в сложной многоуровневой системе навигации.

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

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

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

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

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

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

Как бы то ни было, даже если поиск более эффективен в нахождении определённых товаров, он не столь популярен среди пользователей. Пользователи предпочитают традиционную навигацию поиску, даже при поиске определённого продукта. Одна из проблем поиска заключается в том, что со всеми специфическими и часто региональными различиями в названиях продуктов, воспроизвести точное название не всегда просто («Было ли это GS-50 или G-150?»). С помощью динамических фильтров, пользователи могут точно указать характеристики товара, который они ищут, вместо того, чтобы вспоминать модель, тип или номер версии.

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

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

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

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

Указатель от А до Я (A – Z Index)

Указатель от А до Я полностью или почти полностью перечисляет элементы доступные на сайте в алфавитном порядке:

Указатель от А до Я сортирует весь контент на сайте в алфавитном порядке.

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

Пояснение
А-Я указатель легко использовать, потому что все знают, как ориентироваться в алфавитном перечне. Однако, алфавитному списку присущи три проблемы.

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

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

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

Карта сайта (Site Map)

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

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

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

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

Тэги (Tag)

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

Тэги с пометкой «Больше о».

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

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

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

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

В традиционной навигации пользователь будет идти через категории, которые содержат и согласовываются с ключевыми словами, в которых он заинтересован, например, Новости → Политика → США → Внутренняя политика → Здравоохранение. В таком случае пользователь будет заинтересован в данной статье, потому что она обсуждает здравоохранение США, не обязательно потому что в ней упоминается Барак Обама, Демократы, Республиканцы или прекращение работы. Чтобы увидеть связанные статьи пользователям достаточно будет перейти на родительскую категорию.

Традиционное основанное на уровнях меню – наиболее точный метод навигации.

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

Заключение

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

Более сложный вопрос – стоит ли и как реализовать альтернативные навигационные модели в дополнение к традиционным.

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

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

Рекомендации в этой статье кратко изложены ниже.

Выбор традиционной навигации

Выбор альтернативной навигации

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

Источник