Эффективное упрощение навигации: информационная архитектура

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

Четыре шага к идеальной навигации   

Чтобы создать полезную навигационную систему, дизайнер сайта должен ответить на четыре вопроса в данном конкретном порядке:
1. Как лучше структурировать контент?
2. Как лучше объяснить навигационные возможности?
3. Какие типы навигационного меню лучше всего подходят для размещения этих возможностей?
4. Как наилучшим образом создать навигационное меню?

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

sitemap.jpg

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

Структурирование контента 

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

Как пользователь ищет информацию

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

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

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

Метаданные как основа навигационной системы

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

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

Три типа категориальных метаданных

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

Ключевые категории

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

Определение ключевой категории

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

courses.jpg

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

cuisine1.jpg

Организация ключевых категорий

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

Возьмем одежду. Одной из важнейших категорий может быть тип одежды («рубашки», «брюки», «обувь»). Другими важными и взаимоисключающими категориями будут женский и мужской пол. Третьей ключевой категорией может быть повод, например, "работа" и "вечер". И даже этот список можно было бы продолжить.

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

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

information.jpg

Слева направо: «мужское», «женское», «детям», «обувь», «на свежем воздухе», «охота и рыбалка», «для дома».

При наведении курсора на пункты с одеждой – мужское и женское – выпадает еще один уровень навигации с подвидами одежды.

clothes.jpg

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

clothes.jpg

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

Дополнительные категории

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

Определение приоритетов

Здесь имеется правило: дополнительные категории должны быть представлены после того, как пользователи прошли ключевые категории. Хотя сайты, продающие одежду, могут составлять исключение – представлять категоризацию по брендам (дополнительную) наравне с категоризацией по типам одежды (ключевой).

brands.jpg

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

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

optional_categories.jpg

Динамические фильтры

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

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

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

crucial.jpg

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

filters.jpg

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

Взаимоисключающие категории

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

На скриншоте ниже Daily Express сначала просит у пользователей выбрать широкую новостную тему, например, "финансы", "развлечения" или "образ жизни", а затем, на втором уровне, - более узкую («кино», «театр» и т.д.)

news145.jpg

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

Ненужные категории

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

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

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

figures.jpg

Объясняя навигационные возможности

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

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


Дизайнеры могут выбрать один из трех способов объяснить возможности навигации:
1. названия;
2. названия и картинки;
3. названия, картинки и описания.

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

Названия

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

labels_only2.jpg

И все же помните, что краткость не должна быть достигнута за счет ясности. Сокращения и жаргонизмы вроде UX (user experience) и BMI (body mass index) только если они действительно понятны всем вашим посетителям.

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

filters_statistics.jpg

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

statistics1.jpg

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

labels_with_icons.jpg

Названия и картинки

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

labels_and_pictures1.jpg

Тем не менее кто-то не знает, что такое "Tribeca" или «Legacy", поэтому использовать визуальный ряд может быть более уместно.

pictures1.jpg

Когда использовать изображения, а когда иконки - это интересный вопрос. Очевидно, объяснить очень специфический продукт, например "13-дюймовый MacBook Pro" или "Samsung Galaxy Note 3" можно только реальной картинкой продукта. Объяснить категорию продуктов не так просто. В некоторых меню категории объясняются с иконками.

icons156.jpg

В других меню те же категории объясняются фотографиями реальных продуктов в этих категориях.

pictures156.jpg

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

Названия, картинки и описания

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

labels_pictures_and_descriptions1.jpg

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

Специально для SEOpro.ru по материалам Uxdesign перевод подготовила Дарья Мутовкина


ОБСУДИТЬ:

Комментарии


Rambler's Top100