Секреты юзабилити: разница между информационной архитектурой и навигацией сайта

Posted on by riasevastopol

Краткое резюме: информационная архитектура сайта (Information Architecture, IA) — это информационная база любого многоуровневого сайта.

Навигация веб сайтов (navigation) — комплект элементов интерфейса пользователя (UI, user interface), разрешающий визитёру отыскать и взять конкретную данные на веб-ресурсе, вступить в маркетинговую интеракцию, совершить конверсионное воздействие.

Данный пост продолжает серию статей о юзабилити в блоге SaaS-платформы LPgenerator.

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

Структура навигации сайта зависит от IA — это непременно, но «информационная архитектура» — значительно более глобальное понятие, выходящее за рамки легко навигации сайта.

Натаниэль Дэвис (Nathaniel Davis), эксперт по оптимизации пользовательского опыта (UX) и проектированию пользовательских интерфейсов, еще в далеком 2011 году выложил в блоге UXmatters концептуальную статью «Базы применения на практике информационной архитектуры» (Framing the Practice of Information Architecture), в которой внес предложение относиться к веб-навигации как видимой надводной части условного айсберга, имя которому — Information Architecture.Секреты юзабилити: разница между информационной архитектурой и навигацией сайта

Содержание

Что такое информационная архитектура сайта?
описание и Определение навигации сайта
Связь между навигацией и информационной архитектурой
Определитесь с IA, перед тем как проектировать навигацию

Что такое информационная архитектура сайта?

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 иерархических уровня.
  • Как повысить конверсию, либо 5 способов преодолеть эффект трения

Определитесь с IA, перед тем как проектировать навигацию

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

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

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

Высоких вам конверсий!

По данным nngroup.com, image source nos.twnsnd.co

Случайные статьи:

Правильная архитектура сайтов (Алексей Довжиков)


Подборка похожих статей:

riasevastopol

More Posts