Навигация является одним из ключевых аспектов работы любого сайта. А ошибки в ней могут сделать его бесполезным для посетителей. Люди простой уйдут на сайты конкурентов, как только осознают, что не могут найти здесь необходимую информацию. Поэтому очень важно создать для каждого сайта удобную в использовании навигацию.
Автор статьи: Камерон Чапмен (Cameron Chapman)
Следует понимать, что не существует универсального способа решения этой задачи. То, что хорошо работает на новостных сайтах, может стать причиной провала персонального блога. А что-то невероятно удобное для посетителей блога может сыграть злую шутку с интернет-магазином.
В этой статье приведен анализ особенностей поведения пользователей на сайтах десяти наиболее распространенных типов, и показано, какие подходы должны использовать дизайнеры при разработке системы навигации для каждого из них. Также приведены примеры, которые помогут лучше понять ключевые идеи автора.
Любой сайт
Есть несколько принципов построения системы навигации, которые следует использовать практически на каждом сайте. Вместо того чтобы повторять эти принципы в каждом разделе, будет лучше, если мы разберем их отдельно.
Первый момент - навигация с помощью вкладок. Вкладки очень удобны для навигации. Их внешний вид напоминает людям бумажные каталоги, или вкладки в записных и адресных книгах, где они могут легко найти нужный раздел. В ряде случаев кнопки или текстовые элементы навигации не работают настолько эффективно. Почти без исключения, вкладки являются лучшим стилем организации главного меню сайта, но, естественно, они лучше работают при умеренном количестве пунктов.
Второй момент - навигация в шапке или рядом с ней. Если ваш сайт имеет шапку (чаще всего это именно так), то размещение элементов навигации в ней или сразу под ней является отличной идеей. Посетители привыкли искать навигационные ссылки в области шапки сайта. Эта особенность их поведения облегчает задачу дизайнера по созданию удобного для пользователей интерфейса. Нет ничего сложного в том, чтобы поместить в шапке или рядом с ней важные элементы навигации.
И еще один момент, применимый практически к каждому сайту - элементы навигации в подвале. Многие пользователи (если не все) время от времени обращают особое внимание на подвал сайта. Если они не находят ссылки на необходимую им информацию на других элементах страницы, то подвал остается "последней надеждой". На многих сайтах в подвале располагаются ссылки на основные разделы и такие страницы, как "О нас", "Контактная информация" и "Карта сайта".
1. Блоги
Как правило, блоги имеют значительное количество контента, размещенного в обратном хронологическом порядке. Часто на блогах имеется логическая навигационная структура, и некоторые другие уникальные решения, в зависимости от их типа.
Большинство блогов сочетают разбиение на страницы (пагинацию) или возможность непрерывной прокрутки, страницу архива, навигацию по категориям и/или тегам в боковой панели и, возможно, навигационные элементы в шапке и подвале. Важно подумать о том, как именно пользователям будет удобно находить нужный контент в блоге.
Например, персональный блог может обойтись без категорий или тегов. Часто владельцы блогов хотят, чтобы посетители просматривали контент в обратном хронологическом порядке, а не прыгали по своей прихоти от одной записи к другой. С другой стороны, тематический блог должен иметь навигацию по категориям и тегам, так как посетители подобных ресурсов ищут определенную информацию, относящуюся к теме блога.
Как минимум, блоги должны иметь элементы навигации, для "перемещения во времени" (разбиение на страницы, ссылки дальше/назад или непрерывная прокрутка), и ссылки из шапки и подвала на определенные страницы, не попадающие в общую хронологию.
Тематический (иногда и корпоративный) блог должен также включать навигационные элементы, для перемещения между категориями и тегам, а также ссылки в подвале и шапке. Если же размер блога достаточно большой, то ему не обойтись без функции поиска. Она поможет пользователям быстро найти то, что им нужно. Но следует убедиться в том, что поиск работает так, как положено, и помогает найти релевантные материалы.
Ecoki имеет ссылки на основные категории в шапке и ссылки на наиболее важные страницы во второстепенной панели, расположенной ниже. Это эффективный шаблон, позволяющий сосредоточить внимание посетителя на часто используемых ссылках.
2. Новостные сайты
Новостные сайты похожи на блоги тем, что они преимущественно размещают контент в обратном хронологическом порядке. Часто новостные сайты имеют большое количество категорий и самую сложную архитектуру информации среди всех других типов сайтов. Поведение пользователей на них предсказать труднее всего.
Главное, не сделать навигацию более сложной, чем это необходимо. Выпадающие и выплывающие меню являются хорошим способом организации сложной структуры без загромождения страниц. Если вы проанализируете большие новостные ресурсы (например, Google News), то увидите, что они разделяют новости по категориям с широким охватом: Политика, Местные новости, Мировые новости, Спорт, Развлечения и т.д. Состав категорий будет зависеть от того, зашли мы на тематический или сайт общей тематики.
Теги могут существенно облегчить навигацию по новостному сайту. Если каждая история помечена своим тегом, то пользователи с легкостью могут найти связанные материалы, не блуждая в лабиринтах категорий. Хорошо, если на каждой странице будут размещаться связанные с ней теги, и отдельно будет расположен список или облако наиболее популярных тегов (если сайт имеет сотни тегов, то не стоит показывать пользователю все их одновременно).
Ссылки, расположенные в текстовой части материалов значительно улучшают опыт взаимодействия. Многие крупные новостные сайты активно используют ссылки из контента, позволяя пользователям быстро перейти на другие статьи по данной теме. Это очень похоже на теги, но вместо большого списка сверху или снизу статьи, пользователь сможет воспользоваться ссылками, ведущими непосредственно со смысловых элементов.
3. Интернет-магазины
Интернет магазины часто очень сложны по своей структуре, имеют сотни (или тысячи) отдельных страниц, посвященных продуктам или другой информации. Поэтому удобная навигация важна и для пользователей, и для выполнения сайтом своей основной функции. Если навигационная структура интернет-магазина будет запутанной, то посетители не найдут нужный им товар, а это повышает вероятность того, что, разочаровавшись, они уйдут на ресурсы конкурентов.
Главным навигационным элементом интернет-магазина, имеющего в своем ассортименте более чем несколько десятков продуктов, является хорошая система поиска. Важно наличие расширенного поиска, и возможность найти продукт не только по ключевым словам, но и сузить выбор на основании цены, размера и других параметров (в зависимости от типа товара).
Кроме того, важно наличие навигации по категориям. Ее будут использовать те пользователи, которые окончательно не определились с выбором. Если имеется слишком большое количество категорий, то необходимо создать иерархическую навигационную структуру (для того чтобы улучшить юзабилити создавайте два или три уровня иерархии).
Дайте пользователям возможность найти продукт различными способами. Так вы сможете увеличить продажи. Только убедитесь в том, что каждый из способов позволяет найти релевантные продукты. Если, обратившись к поиску, пользователь найдет один набор продуктов, а к меню - другой, это может ввести его в ступор.
Blik является хорошим примером использования боковой панели с многочисленными фильтрами, уточняющими критерии поиска. Это можно назвать функцией расширенного поиска, без привычной поисковой строки.
4. Информационные и справочные сайт
Все справочные сайты объединяет одна характерная особенность: огромный объем информации на тысячах страниц. Слишком жестоко оставить посетителя подобного сайта наедине со стандартным меню. Категории могут быть полезными для поиска информации на сайте, но если вы пытаетесь найти одну из тысяч (а, может быть, миллионов, как в случае Wikipedia) страниц, то эффективность подобной системы приближается к нулю. Кроме того, чаще всего люди обращаются к справочным сайтам для поиска ответа на специфический вопрос, а не ознакомления со всем их содержимым, а категории для этого едва ли подходят.
Поэтому очень важно, чтобы справочные сайты обладали идеальной системой поиска. Расширенный поиск, похожий на тот, который был рекомендован интернет-магазину, будет полезен и в этом случае, особенно, если сочетать его с хорошей системой тегов и категорий.
Очевидно, что на Reference.com пользователи захотят в первую очередь воспользоваться поиском, поэтому он расположен на одном из самых заметных мест вверху страницы.
Кроме того, в тексте материалов справочных сайтов должны быть ссылки на связанные с ними страницы. Это помогает пользователям быстро найти всю информацию, которая необходима для понимания того, о чем они читают, без необходимости многократного обращения к поиску. Острая необходимость в ссылках из текстов статей стала причиной возникновения специального синтаксиса для их создания на wiki-платформах. С его помощью создатели контента практически не тратят свое время на оформление соответствующих ссылок.
5. Корпоративные сайты
Корпоративные сайты сильно различаются по своей структуре и размерам. Некоторые из них существуют просто для привлечения новых клиентов. Другие призваны предоставлять актуальную информацию существующим клиентам. Есть и такие сайты, которые выполняют несколько функции одновременно: служат приманкой для новых клиентов, размещают новости для уже знакомых с компанией пользователей, а также служат интерфейсом корпоративного интранета.
Вне зависимости от основных целей корпоративного сайта, он обязан иметь ясную навигационную структуру. Вы ведь не хотите, что бы посетитель тратил свое время на поиск нужного пункта меню или бесконечно блуждал по сайту в поисках ссылки на страницу, объясняющую как проехать в офис? Убедитесь в том, что ссылки упорядочены в соответствии с общепринятой логикой, что все они имеют понятные каждому обозначения, и помещены в тех местах, где пользователи ожидают их найти (шапка и боковая панель являются тут лучшими друзьями).
Приведенные ниже примеры сайтов показывают, что размещение меню в традиционном месте, еще не означает, что дизайн сайта лишен креативности. Стараясь создать что-то уникальное, убедитесь в том, что пользоваться сайтом легко и можно без проблем найти всю имеющуюся на нем информацию.
Если сайт содержит больше дюжины страниц, то неплохо было бы добавить функцию поиска. Также не помешает карта сайта, которая поможет тем пользователям, которые не смогли разобраться в меню и других элементах навигации.
6. Сайты сообществ или социальных сетей
В больших социальных сетях функция поиска является основным средством навигации. Это единственно верное решение для сайта, имеющего миллионы (или даже миллиарды) страниц. Для организации такого объема информации бессмысленно использовать традиционное меню.
Поэтому поиск должен быть основным навигационным элементом сайта. Но остаются еще личные страницы членов сообщества. Здесь важно соблюдать определенную степень единообразия в пределах всего сайта. Вне зависимости от того, какую степень свободы мы предоставляем членам сообщества при настройке их профилей, важно чтобы на всех личных страницах ссылки располагались на одном и том же месте.
Возьмем для примера Facebook: профиль каждого члена сообщества и любая другая страница в левой панели имеют ссылки, ведущие на такие элементы, как мероприятия, фотографии и т.п. Уведомления, сообщения и запросы на добавление в друзья всегда находятся в левом верхнем углу, а справа вверху расположено меню со ссылками на страницу настройки аккаунта или выхода. Стандартная верхняя панель навигации со ссылками на основные блоки информации об аккаунте пользователя, такая, например, как в Facebook, стала основой для социальных сетей с хорошим опытом взаимодействия.
Тут же уместны и ссылки из контента. Например, ссылка с имени пользователя должна вести на его профиль, вне зависимости от того, где именно появилось его имя. Следует вначале продумать вопрос о том, какая информация должна быть связана с тем или иным элементом, и затем создать ссылки на соответствующие страницы. Ссылки с элементов должны оставаться неизменными, в каком бы контексте они не появлялись.
7. Сайты мероприятий
Обычно это простые сайты, имеющие лишь несколько страниц. Но важно подумать о тех целях, с которыми люди приходят на подобные сайты. Вероятно, они имеют одно из следующих намерений: зарегистрироваться для участия в этом мероприятии; посмотреть, кто будет в нем участвовать или выступать; получить информацию о том, как добраться до места проведения мероприятия (включая приблизительные расходы на дорогу, краткую справку о городе и местных гостиницах); просмотреть расписание мероприятия.
Регистрация участников мероприятия, даже если она бесплатная, должна быть похожа на осуществление транзакции в интернет-магазине. Поэтому важно наличие кнопки для начала регистрации, несущей призыв к действию.
Стандартное меню под шапкой или в боковой панели является лучшим способом организации навигации по такому сайту. Если предполагается создавать отдельные страницы для секций, семинаров или выступающих, то понадобятся дополнительные элементы навигации в разделах. Если число таких подразделов небольшое, то лучше всего воспользоваться выпадающим или выезжающим меню. В противном случае, можно создать элементы навигации непосредственно на страницах соответствующих разделов.
Hull Digital Live 10 имеет простое и понятное меню под шапкой, с помощью которого посетители могут найти всю необходимую им информацию.
Подсказка: Если сайт мероприятия должен включать информацию об участниках, возьмите на вооружение рекомендации по организации навигации в социальных сетях.
8. Сайты обзоров
Обычно сайты обзоров служат двум основным целям. Во-первых, пользователи, интересующиеся тем или иным продуктом, могут получить подробную информацию о нем. В этом случае, лучшим вариантом организации навигации по сайту является функция поиска. Она позволяет быстро найти необходимый обзор.
Во-вторых, пользователь может захотеть ознакомиться с продуктами определенного типа. Для этой цели поиск также остается достаточно ценным способом навигации. Но крайне желательно, чтобы имелась функция расширенного поиска. Пользователь должен иметь возможность перейти в категорию интересующих его продуктов, в субкатегории, а затем сузить круг поиска до продуктов, обладающих необходимыми характеристиками. Наличие таких фильтров, как цена, бренд и т.д. значительно улучшает опыт пользовательского взаимодействия с сайтом.
Blippr имеет навигацию по категориям (в выпадающем меню открывается доступ к подкатегориям) и хорошо заметную строку поиска.
9. Персональные сайты
Персональные сайты являются настоящими дикими картами в мире веб-дизайна. Тут могут встречаться самые разнообразные варианты навигации. Ее оплотом являются меню под шапкой и в боковой панели. Данный подход используется чаще всего. Но не будет ничего плохого, если дизайнер попытается сделать что-нибудь совершенно уникальное.
Персональные сайты должны быть отражением личность своего владельца. И если вы желаете вписать в страницы своего сайта что-то уникальное, характеризующее вас, то для этого хороши любые средства. Однако при этом не забудьте оставить где-нибудь ссылку на карту сайта. Если вы используете нестандартный подход, то дайте недогадливым посетителям возможность найти здесь то, зачем они пришли.
Портфолио Daniel Mall один из самых оригинальных вариантов организации навигации по сайту во всем интернете. Хотя это и не похоже ни на что другое, как правило, пользователь не испытывает затруднений при поиске нужной ему информации.
10. Галереи
Галереи изображений и сайты-портфолио должны сочетать стандартное меню под шапкой или в боковой панели с тегами и категориями. Пользователь должен иметь возможность сузить число вариантов с помощью тегов или категорий. Это особенно важно для улучшения опыта взаимодействия с ресурсами, располагающими огромным объемом графических материалов.
Также тут важна разумная разбивка на страницы. Непрерывная прокрутка кажется неплохой идеей, но в силу значительного объема мультимедийных данных, подобный способ навигации может привести к исчерпанию ресурсов на компьютере пользователя. Поэтому такой подход можно рекомендовать только в том случае, если непрерывность прокрутки подразумевает несколько десятков изображений или отображение их уменьшенных копий.
Minimal Exhibit использует категории, поиск и разбивку на страницы.
Заключение
Существует ли единая концепция навигации, которая подходит к любому сайту, вне зависимости от той категории, к которой его можно отнести? Безусловно, существует. Это последовательность!
Вы можете уйти далеко в сторону от привычных способов навигации, пока строго сохраняете последовательность в дизайне каждой страницы сайта. Нельзя допускать, чтобы на половине страниц сайта присутствовало меню под шапкой, а на другой половине – в боковой панели. Если конечно у вас нет строго аргументированной логичной причины поступить таким образом. Если ссылка на главную страницу сайта располагается в верхнем левом углу, то убедитесь в том, что на каждой странице она находится именно тут. Это относится к каждому элементу навигации, а важность подобного подхода экспоненциально увеличивается, по мере разрастания интернет-ресурса.
Кроме последовательности, при разработке дизайна навигации по сайту, важно понять, с какими намерениями посетители приходят на него. Нам никуда не уйти от A/B или мультивариантного тестирования, если хотим узнать, работают ли созданные шаблоны навигации так, как мы того хотим.
Вне зависимости от того, насколько крутую или инновационную систему навигации мы используем, если она не справляется со своей основной функцией - перемещение посетителей с одного места на сайте в другое, которое ему необходимо - ее следует менять.
Источник: Webdesigner Depot
Перевод: Александр Никитин.
