Ольга Шишкова
2 996

Информационная архитектура продукта: как сделать понятную карту сайта

Перевод материала соучредителя дизайн-студии пользовательского опыта EightShapes Дэна Брауна.

Поделиться

В избранное

В избранном

Дэн Браун

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

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

Можно ставить и более фундаментальные вопросы: насколько заголовок соответствует содержанию, отражает ли ожидания пользователя; как описание или пример помогают прояснить заголовок.

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

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

Обучающая призма

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

Каждая призма сопровождается вопросами:

  • Как структура обучает пользователя тому, что находится внутри неё?
  • Какой подход использует структура, чтобы обучать людей?
  • Как она устанавливает базовую основу и второстепенное?
  • Какие концепты наиболее важны для понимания пользователем?

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

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

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

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

Соответствие концепту

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

Основополагающий концепт в мире финансов — деньги

Вопросы

  • Есть ли у команды общее понимание концепта, независимо от заголовка?
  • Соответствует ли заголовок концепту?
  • Не перебивает ли уже существующее значение заголовка сам концепт?
  • Как можно протестировать эффективность различных заголовков?

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

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

Из «Чемпионов Мидгарда». В этой игре чудовища слева — монстры, но тролли и драугры — нет. Разве тут нет проблем с информационной архитектурой?

Прецедентная призма

Принимая структурные решения, вы устанавливаете правила. Присваивая контенту некую категорию, вы не просто присваиваете её этому конкретному контенту: вы устанавливаете правило для этого и другого схожего с ним контента.

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

Вопросы

  • Какой прецедент устанавливает решение?
  • Ожидаете ли вы, что решение будет исключением?
  • Каковы естественные последствия этого решения?
  • Как люди могут нарушить правила, которые вы устанавливаете?

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

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

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

Призма отвлечения

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

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

Вопросы

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

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

Применение призм

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

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

#дизайн

{ "author_name": "Ольга Шишкова", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 4, "likes": 12, "favorites": 28, "is_advertisement": false, "section_name": "default", "id": "31624", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } } ]