Краткое резюме: Information Architecture (IA) суть информационная основа любого многоуровневого веб-сайта.
Навигация (navigation) — набор элементов пользовательского интерфейса (UI, user interface), позволяющий посетителю найти и получить конкретную информацию на веб-ресурсе, вступить в маркетинговую интеракцию, совершить конверсионное действие.
Этот пост продолжает серию публикаций о юзабилитив блоге SaaS-платформы LPgenerator.
Практикующие веб-дизайнеры и маркетологи иногда совершают ошибку, считая понятия «информационная архитектура» и «навигация» практически синонимами. Нет, это не так — хотя 2 этих термина (точнее сказать, концепции веб-дизайна) тесно связаны меж собой, они, однако, неравнозначны.
IA формирует навигацию веб-ресурса — это безусловно, но «информационная архитектура» — гораздо более глобальное понятие, выходящее далеко за рамки просто навигации сайта.
Натаниэль Дэвис (Nathaniel Davis), специалист по оптимизации пользовательского опыта (UX) и проектированию пользовательских интерфейсов, еще в далеком 2011 году выложил в блоге UXmatters концептуальную статью «Основы практического использования информационной архитектуры» (Framing the Practice of Information Architecture), в которой предложил относиться к веб-навигации как видимой надводной части условного айсберга, имя которому — Information Architecture.
Что такое информационная архитектура сайта?
Information Architecture любого веб-ресурса включает в себя 2 основных компонента:
- идентификацию и определение (дефиницию) контента и функциональности;
- лежащие в основе ресурса иерархию, структуру и номенклатуру, которые определяют взаимоотношения между контентом и функциональностью.
Информационная архитектура (IA) не является частью пользовательского интерфейса, видимого на экране — скорее, IA конфигурирует и обуславливает внешний вид и набор опций user interface.
Information Architecture состоит из электронных документов, таблиц, диаграмм, отнюдь не из макетов или прототипов веб-страниц.
Вот блок-схема, наглядно отображающая взаимосвязь между отдельными составляющими контента на ресурсе nngroup.com. Синие узлы представляют информационные объекты 1 уровня, зеленые — второго, желтые — третьего.
Даже если IA не видна собственно в пользовательском интерфейсе, она определенно влияет на пользовательский опыт. Напомним, что пользовательский опыт есть сумма всех впечатлений, возникающих у посетителя во время интеракции с веб-ресурсом.
А теперь очень важный момент: в отличие от UI, информационная архитектура как основа структуры сайта, не видна пользователю. Однако любой маркетолог и дизайнер надеются, что контент ресурса разделен по категориям и уровням в соответствии с ожиданиями и потребностями представителей целевой аудитории.
Несоответствие контента и функциональности запросам посетителей есть одна из основных причин их ухода как с многостраничных сайтов, так и автономных лендинг пейдж, пусть информационная архитектура последних много проще. Плохая структурная организация контента (в самом широком смысле слова — от статей или постов до диаграмм и электронных таблиц) служит фактором возникновения «трения» на конверсионном пути.
Приведем аналогию: если вы не персонаж комиксов со сверхъестественными способностями (предположим, Супермен) или врач-рентгенолог, вы не увидите скелетов лошади или курицы, просто взглянув на них. Однако костная структура этих живых организмов предопределяет то, что эти животные — очень разные существа. Не пытайтесь оседлать курицу для верховой поездки — ее скелет просто не выдержит ваш вес.
Для определения архитектуры веб-ресурса проводятся следующие мероприятия:
- Инвентаризация контента (Content inventory): экспертное исследование сайта, чтобы найти и идентифицировать существующий контент.
- Аудит контента (Content audit): оценка полезности, точности, тональности подачи и общей эффективности контента.
- Группировка информации (Information grouping): определение степени клиентоориентированности соотношения «пользователь — контент».
- Разработка и усовершенствование таксономии контента (Taxonomy development): определение стандартизированной терминологии для классификации и систематизации содержимого веб-ресурса (товарные категории для офферов интернет-магазина, предположим).
- Создание описательной информации: определение метаданных, которые могут быть использованы для создания ссылок по теме, списков или других компонентов навигации, способствующих обнаружению необходимой информации, служащей активатором конверсионного действия.
Что такое навигация сайта?
Навигация сайта представляет собой набор компонентов пользовательского интерфейса. Основная цель навигации — помочь пользователям найти контент и функциональные элементы ресурса (другими словами, «органы управления» UI), чтобы затем мотивировать к совершению запланированного маркетологом действия.
Навигационные компоненты включают в себя:
- глобальную навигацию (global navigation),
- локальную навигацию (local navigation),
- вспомогательную навигацию (utility navigation),
- фильтры категорий, ценовых границ и т. п. (filters),
- ссылки по теме (related links),
- «толстый» футер (fat footer), дублирующий элементы глобальной, локальной и вспомогательной навигации в собственно «подвале» страницы,
- и т. д.
Примеры навигационных компонентов: 1 — вспомогательная навигация; 2 — глобальная навигация; 3 — указатель местоположения («хлебные крошки», breadcrumb trail; буквально — «путь, помеченный рассыпанными хлебными крошками»); 4 — локальная навигация; 5 — ссылки по теме (в данном случае на статьи и сообщения в блоге); 6 — «толстый» футер.
Перед имплементацией элемента навигации на веб-страницу следует решить несколько вопросов.
Статистические приоритеты: сколько пользователей будут пользоваться этим навигационным элементом. Например, пользователи будут ориентироваться на ресурсе при помощи локальной навигации или предпочтут «привязанные» тематически ссылки?
Размещение: на каких страницах этот элемент должен располагаться? А где именно на макетной сетке: вверху, внизу, слева, справа?
Дизайнерский шаблон: какой из них будет максимально способствовать юзабилити и положительному пользовательскому опыту — табы, выпадающие меню, «мегаменю» и т. д.?
Взаимосвязь между информационной архитектурой и навигацией
При проектировании нового многостраничного веб-ресурса многие дизайнеры и маркетологи игнорируют концепцию IA, обращая внимание только на навигацию как таковую. Такой подход чреват большими неприятностями и финансовыми потерями.
Навигация, не охватывающая весь контент сайта полностью и не раскрывающая весь функционал веб-ресурса, рано или поздно потребует тотального редизайна, а это дорогостоящее занятие.
Рассмотрим гипотетическую ситуацию: дизайнер решил использовать широко распространенную навигацию «в стиле перевернутой L» (верхний навигационный бар и левый сайдбар, как его еще называют на сленге, «рельс»).
Многим пользователям импонирует такое решение, оно довольно функционально. Но есть одно «но»: на перевернутой L можно разместить ссылки на контент, логическая иерархия которого не превышает 4 уровня в глубину.
Если контент раздела будет превышать этот запас — 5 и больше уровней вполне обычная глубина информационной архитектуры для современных ресурсов типа интернет-магазинов, — что выяснится уже в ходе эксплуатации, то остаются 2 выхода:
- с нуля создавать новую навигационную структуру,
- пытаться втиснуть все содержимое в 4 иерархических уровня.
Определитесь с IA, прежде чем проектировать навигацию
Прежде чем приступить к разработке дизайна или редизайну веб-ресурса, следует, как говорится, «заглянуть под капот машины» и начать с определения или переопределения Information Architecture. Не нужно доводить ее до блеска, откладывая создание макета и прототипа ресурса «в долгий ящик», но первый эскиз информационной структуры у вас должен быть задолго до подготовки контента и заполнения им вашего сайта.
Выбор компонентов навигации только на основе их визуальной привлекательности может сослужить вам плохую службу: вы можете разрушить идеальную инфоархитектуру, что не позволит удовлетворить потребности пользователей в вашем контенте. Одним словом — не ждите лидов или продаж!
Отметим, что при применении автономных целевых страниц, отличающихся простотой Information Architecture и «неглубокой» структурой при отсутствии глобальной навигации, все выше упомянутые проблемы грамотной иерархической организации контента маркетолога просто не коснутся.
Высоких вам конверсий!
По материалам nngroup.com, image source nos.twnsnd.co