Информационная архитектура и информационный дизайн. Принципы информационной архитектуры

Краткое резюме: информационная архитектура сайта (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 и «неглубокой» структурой при отсутствии глобальной навигации, все выше упомянутые проблемы грамотной иерархической организации контента просто не возникнут.

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

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

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

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

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

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

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

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

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

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

Принцип выбора

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

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

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

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

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

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

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

Принцип образцов

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

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

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

Принцип главного входа

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

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

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

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

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

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

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

Принцип сфокусированной навигации

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

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

Принцип роста

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

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

Вывод

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

Мы выстраиваем наше здание, а потом наше здание выстраивает нас.

Уинстон Черчилль

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

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

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

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

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

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

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

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

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

Определение

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

ин·фор·ма·ци·он·ная ар·хи·тек·ту·ра сущ.

1. Сочетание схем организации, предметизации и навигации, реали зованных в информационной системе.

2. Структурное проектирование информационного пространства, спо собствующее выполнению задач и интуитивному доступу к содер жимому.

3. Искусство и наука структурирования и классификации веб сайтов и интрасетей с целью облегчения пользователям поиска информа ции и управления ею.

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

Вы рассчитывали, что определение будет одно? Что нибудь коротень кое и невинное? Несколько слов, в которых кратко схвачены суть и границы области информационной архитектуры? Размечтались!

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

Сойдем с нашей философской трибуны и обратимся к основам вещей. Раскроем шире наши определения и исследуем некоторые базовые понятия информационной архитектуры.

Информация

Термин «информация» употребляется нами для различения инфор мационной структуры и управления данными и знаниями. Данные (data) – это факты и цифры. Реляционные базы данных обладают высокой степенью организации и генерируют конкретные ответы на конкретные вопросы. Знания (knowledge) – это то, что находится

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

1 Юмористический взгляд на коварства английского языка можно найти

в книге Билла Брайсона (Bill Bryson) «The Mother Tongue: English & How It Got That Way».

Структурирование (structuring), организация (organizing) и предме+ тизация (labeling)

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

Поиск и управление

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

Искусство и наука

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

Глиняные таблички, свитки, книги и библиотеки

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

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

В 1873 году Мелвил Дьюи (Melvil Dewey) придумал «десятичную сис тему Дьюи» для организации и упрощения доступа к неуклонно расту щему количеству книг.

В наше время большинство людей знакомы с основами организации ин формации по опыту работы с книгами и библиотеками. В табл. 1.1 по казано применение понятий информационной архитектуры (ИА) к ми ру печатного слова и к World Wide Web.

Таблица 1.1. Различия между книгами и веб+сайтами

Понятие ИА			Веб сайты
Элементы	Обложка, заглавие,		Главная страница, панель нави
	главы, разделы, страницы,
	номера страниц, оглавление,		жимого, карта сайта, предмет
	предметный указатель.		ный указатель, поиск по сайту.
Измерения	Двумерные страницы, пред		Многомерное	информационное
	ставленные в последователь		пространство	с гипертекстовой
	ном линейном порядке.		навигацией.
	Осязаемые и конечные, с чет		Слабо осязаемые, нечеткие, че
	кими началом и окончанием.		рез которые информация «про
			сачивается» на другие сайты.

Если перейти от единичных книг к книжным собраниям, то сравнение становится еще интереснее. Представим себе книжный магазин, в ко тором нет никакой организационной структуры. Тысячи книг просто свалены в огромные стопки на столах. Такие магазины действительно существуют, например Gould’s Book Arcade в Ньютоне, Австралия. Он показан на рис. 1.1.

Рис. 1.1. Книжный магазин Gould’s Book Arcade (фотография любезно предоставлена Сетом Гордоном)

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

Сравните хаос этого магазина с порядком, царящим в библиотеке (рис. 1.2). Даже на первый взгляд контраст разителен. Присмотревшись же, вы обнаружите, что библиотека – это не просто склад для книг, жур налов и музыкальных записей. В ней есть сложные системы и хорошо обученные профессионалы, которые действуют незаметно и отбирают, оценивают, помечают, описывают, структурируют и организуют кол лекции, чтобы читатели библиотеки могли найти требуемое для них. Несмотря на то, что информационная среда библиотеки строго органи зована, предметно ориентированный подход, характерный для десятич ной системы Дьюи и схемы классификации Библиотеки Конгресса, до пускает также исследовательский просмотр и случайные открытия.

Рис. 1.2. Просмотр книг в библиотеке (фотография любезно предоставлена http://intergate.sdmesa.sdccd.cc.ca.us/lrc/stacks.jpg)

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

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

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

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

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

Пример

Возьмем, для примера, Spotify. Можно разобрать UI, и посмотреть на лежащую в его основе информационную архитектуру.

Почему информационная архитектура так важна?

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

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

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

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

• Песни
• Папки
• Пользователи
• Фотографии
• Рестораны
• Деньги
• Друзья

С другой стороны, глаголы – это действия, которые пользователь может провести над существительными. Вот пера примеров:

То есть, в приложении, мы можем следовать определенному шаблону действий. Большая часть экранного пространства (почти 80%) посвящена «существительным», а меньшая его часть посвящена «глаголам».

Хорошая информационная архитектура универсальна

Со временем мы заметим, что хорошая информационная архитектура универсальна. Определенные принципы и паттерны всегда преобладают. Самое очевидное – элементы основной навигации вашего приложения должны состоять из самых важных действий. В случае со Spotify, это “Home”, “Browse”, “Search”, “Radio”, и “Your Library”. А какие действия важны в вашем приложении? Постарайтесь сократить их до 3-5 элементов.

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

Несмотря на то, что UI приложения изменился, его информационная архитектура осталась прежней

Образующиеся шаблоны

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

Музыка…
такая же, как и фотографии…
которые ничем не отличаются от остального

Всё одно и то же!

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

Советы по созданию хорошей, чистой информационной архитектуры

1. Внимательно относитесь к тому, что важно (и к тому, что нет)

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

2. Думайте об информации, как об «информационных пакетах»

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

3. Не бойтесь пересматривать и менять что-то в своей информационной архитектуре

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

Перевод статьи Джейкоба Руиза