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

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

Четыре шага к созданию идеальной системы навигации.

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

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

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

Карта сайта позволяет получить краткий обзор навигационной структуры. (Изображение: Web Tuts).

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

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

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

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

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

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

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

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

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

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

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

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

Тщательно продумайте основу для отображения категорий.

Три типа категорий метаданных.

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

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

Важные категории.

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

Определение важных категорий.

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

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

«Процесс приготовления» является одной из важнейших категорий метаданных для рецептов. (Изображение: Our Best Bites).

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

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

Так называемые нишевые веб-сайты содержат множество различных важных категорий метаданных. (Изображение: Recipes by Nation).

Распределение важных категорий.

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

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

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

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

Горизонтальная панель очень часто используется для отображения списка продукции, которую предлагает сайт. (Изображение: VL Bean).

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

Использование важных категорий с меньшим количеством значений для главной навигационной панели позволяет освободить дополнительное пространство. (Изображение: VL Bean).

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

Решающие категории должны быть представлены одна за другой, но не рядом друг с другом. (Изображение: VL Bean).

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

Необязательные категории.

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

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

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

Определение приоритетов важности необязательных категорий.

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

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

Ключевые и дополнительные категории должны быть показаны на отдельных уровнях. (Изображение: Flipkart).

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

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

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

Дополнительные категории должны быть представлены только после того, как пользователи выбрали ключевые категории. (Изображение: Flipkart).

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

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

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

Обратите внимание на скриншот ниже. На Sears основные категории перечислены в виде «хлебных крошек», в то время как дополнительные категории реализованы в качестве динамических фильтров.

Дополнительные категории, которые могут быть объединены, должны реализовываться в виде динамических фильтров. (Изображение: Sears).

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

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

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

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

 

Основные категории не должны быть реализованы в виде динамических фильтров. (Изображение: Nike).

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

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

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

Основные категории лучше всего реализовывать в традиционном меню навигации. (Изображение: Nike).

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

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

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

Взаимоисключающие дополнительные категории лучше всего размещать на отдельном уровне в главном навигационном меню. (Изображение: Daily Express).

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

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

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

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

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

Необязательные категории.

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

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

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

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

Использование фильтра по абсолютному объему статьи может превратить необязательную категорию метаданных в дополнительную. (Изображение: Time).

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

Распределение по категориям корпоративных товаров.

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

Давайте сначала рассмотрим основную категорию метаданных для автомобилей. Вы бы, наверное, выбирали категорию в зависимости от размера или образа жизни, с учетом некоторых отличительных характеристик свойственных для «малолитражных», «универсалов», «спортивных» автомобилей, «седанов», «лимузинов» и так далее. Эта категория имеет решающее значение, поскольку каждый тип автомобиля соответствует образу жизни, что крайне важно для всех автомобилистов. Малолитражный автомобиль, например, небольшой, дешевый, легкий в управлении и на нем легко парковаться в городе. У универсала достаточно много места в багажнике и он хорошо подходит для большой семьи. Спорти� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров