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

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

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

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

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

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

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

Аналогия с архитектурой

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

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

Конечно, каждый из таких домов отличается: у них разная отделка, они стоят на разных участках, в них живут разные люди, которые по-разному их используют.

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

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

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

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

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

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

Что информационный архитектор делает весь день?

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

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

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

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

Принципы информационной архитектуры

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

1. Принцип объектов. Принцип предписывает рассматривать контент как развивающуюся сущность, которая имеет собственный жизненный цикл. Разный контент будет иметь разные атрибуты и поведение, и это нужно учесть при проектировании дизайна.
2. Принцип выбора. Принцип означает, что вы должны предлагать вашим пользователям осмысленный выбор. Тем не менее, вы должны убедиться, что выбор будет сосредоточен на чем-то конкретном: слишком много вариантов может дезориентировать пользователя. Информацию тоже стоит подавать в виде иерархии, категорий и суб-категорий, вместо того, чтобы приводить ее просто длинным списком.
3. Принцип раскрытия. Важно дать пользователю необходимую ему информацию Однако стоит убедиться, что это действительно то, что ему нужно, а не то, что вам захотелось дать. Принцип говорит также о том, что нужно сразу давать пользователю информацию, необходимую для понимания: что он сможет найти на других страницах сайта, а что нет. Информацию нужно подавать постепенно, от страницы к странице, а не пытаться вывалить все и сразу.
4. Принцип примеров. Использование принципа существенно улучшает пользовательский опыт. Например, когда вы заходите в определенную категорию товаров на Amazon, на сайте выводятся примеры товаров, которые попадают в эту категорию. Это помогает пользователю быстрее сориентироваться, особенно, если он не до конца понимает, что значит название категории.
5. Принцип парадного входа. Половина посетителей попадают на ваш сайт не через главную страницу. Это значит, что любая страница должна содержать необходимый минимум текстовой информации - чтобы пользователи поняли, где они находятся. Также это лишний раз подтверждает пункт 3, не нужно пытаться уместить всю информацию на домашней странице сайта.
6. Принцип множественной классификации. Этот принцип говорит о том, что разные пользователи используют ваш сайт по-разному, у них могут быть разные методы для нахождения одной и той же информации. Например, одни будут пользоваться поиском , другие предпочтут поблуждать по сайту. Контент нужно адаптировать к различным сценариям пользовательского поведения .
7. Принцип целенаправленной навигации. Не так важно, где находится меню, важно то, что на нем написано. Постарайтесь, чтобы ваше меню и панель навигации показывали, где находится пользователь сейчас и куда он может попасть с текущей страницы.
8. Принцип роста. На подавляющем большинстве сайтов контент - текучая, изменчивая сущность. Количество контента у вас на сайте сегодня может быть лишь малой долей того, чтобы там может быть завтра. Организуйте контент таким образом, чтобы позволять ему расти в будущем. Причем не только в плане расширения какого-то блока с текстом: контент может добавляться совершенно разных типов.

Все эти принципы в большей или меньшей степени будут применимы к тому или иному проекту. Как начать работу над информационной архитектурой?

C чего начать

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

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

Выяснили эти два момента - можно планировать контент-стратегию детально.

Как пользователи находят контент

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

Известная цель

В этом случае пользователь точно знает, что он ищет, знает, как это описать, и даже может знать, где начать это искать. Это мечта IA-профессионала.

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

Исследование

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

Неизвестность

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

Повторный поиск

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

Модели для организации контента

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

1. Одна страница. Подходит для сайтов с очень ограниченным содержимым, узкой целью. Подходит для продуктовых сайтов, суб-сайтов больших компаний или персональных страничек.
2. Плоская структура. Плоская структура чаще всего применяется на сайтах менее, чем на 10 страниц. Цепочка навигации сквозная, не имеет ответвлений. Такую структуру часто можно видеть в портфолио агентств, на простых бизнес-сайтах или маленьких площадках e-commercre.
3. Индекс. Структура, похожая на плоскую. Однако на главой странице есть список всех страниц. Примеры аналогичны предыдущей структуре.
4. Ромашка. Такая структура чаще всего встречается в веб-приложениях, на образовательных сайтах. После выполнения целевых действий на определенной странице пользователю предлагают перейти на главную. Например, в приложении «список дел» после создания, редактирования или завершения задачи пользователь возвращается к списку.
5. Строгая иерархия. В строгой иерархии переход на следующую страницу можно сделать только со страницы-родителя. Это отличная структура для сайтов, авторы которых не хотят, чтобы пользователи пропускали страницы. Например, если на сайте выложен последовательный учебный курс.
6. Многомерные иерархии. Одна из наиболее распространенных структур, во многом из-за простоты реализации в плане IA. В такой структуре наибольшее количество элементов навигации, каждая страница доступна отовсюду.

«Конвенция о маркировке»

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

Аналогично - страница «о компании» или «команда» лучше воспринимается, когда названа примерно так.

Большой сайт против маленького сайта

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

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

UX против IA

Многие дизайнеры и разработчики думают, что IA является лишь частью работы UX-дизайнера. Да, эти области неразрывно связаны, но это не одно и то же.

Хорошая информационная архитектура является ключом к позитивному пользовательскому опыту.

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

IA против вашей CMS

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

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

Инструменты

Многие инструменты для IA являются аналоговыми, несмотря на цифровое происхождение самой науки.

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

Цифровые инструменты

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

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

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

Для нетерпеливых или тех, у кого мало времени: итоги вкратце и интересные ссылки в конце текста.

Начнем с очевидностей.
Очевидность #1: Информация нужна людям, чтобы принимать решения.
Очевидность #2: Информация может быть:

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

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

• Что такое информационная архитектура как явление, ее место в общем процессе проектирования взаимодействия;
• Какова специфика работы над информационной архитектурой для ecommerce;
• Как мы принимаем решения. Немного психологии;
• Как спроектировать информационную архитектуру на практике.

Что ж, приступим.

Зачем работать над информационной архитектурой?

Что случилось с Иваном Владимировичем

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

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

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

Он минут с 15 полистал предлагаемые продукты. К его разочарованию, рома в списке товаров не было. А предлагаемые подарки были далеки и от его нужд и от финансовых возможностей.

Уже сильно хотелось спать, но Иван Владимирович предпринял еще одну попытку, перейдя в другой пункт меню – «Для друзей». Среди многочисленного пива, водки и ликеров он наконец заметил и одинокий ром, притаившийся в конце списка. Бутыль Demo Anejo возможно была и неплохим выбором, но его смущало отсутствие выбора. Да и врял ли его шеф – руководитель департамента одного из ведущих банков страны - оценит подарок ценою всего лишь 13 долларов США.

Иван Владимирович вышел на балкон перекурить. Потом вернулся, сел за ноут и предпринял третью и последнюю попытку: выбрал пункт меню «Для застолья». И тут свершилось долгожданное чудо: он узрел впечатляющий список разнообразнейшего рома любой ценовой категории. Поразмышляв над списком пару минут, он добавил в корзину пятнадцатилетний ром Gran Demo Blender и с легкостью прошел процедуру заказа. Иван Владимирович был доволен собой но предчувствие колоссального недосыпа существенно отравляло настроение.

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

А теперь в цифрах

В вышеуказанной истории налицо проблема с ИА, пусть и утрированная. У Eliteboose.com мы видим нечетко очерченные и наименованные категории, неочевидную классификацию товаров по категориям.

Можем констатировать факт, что с Иваном Владимировичем магазину Eliteboose.com весьма повезло. Наш герой был а) достаточно упрям, чтобы не забить на идею купить ром в интернет-магазине, б) достаточно принципиален, чтобы не отказаться от покупки подарка в целом и в) достаточно инертным для того, чтобы уйти в конкурирующий интернет-магазин.

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

Адаптируем подход Джареда Спула (Jared Spool) , который он использовал для расчета стоимости фрустрации пассажиров от проблем с юзабилити для транспортной компании Amtrak:

1. Вычисляем идеальный потенциальный доход – Iideal=a*b , где а и b – средний чек и кол-во потенциальных покупателей (лидов) в день
2. Получаем совокупный недополученный доход – Iforgone= Iideal -(Iideal *x/100) , где x – доля отказов от покупки в целом
3. Узнаем стоимость ошибки в ИА – IAcost= Iforgone *y/100, $3500*20/100 , где y – доля отказов по вине ИА.

1. Средний чек заказа – $100 ;
2. кол-во потенциальных покупателей (лидов) в день – 50 ;
3. доля отказов от покупки – 70% ;
4. из них, по вине ИА – 20% .

• Идеальный доход – $100*50=$5000 в день
• Совокупный недополученный доход –$5000-($5000*70/100)=$3500 в день
• Стоимость ошибки в ИА – $3500*20/100 = $700 в день

В случае с корпоративным ПО, потери в потраченном времени сотрудников будут ничуть не менее существенными.

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

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

• «Это то, как организована информация? Где и что находится?»;
• «Что-то из юзабилити, для удобства пользования сайтом?»;
• «Точно, карта сайта! Да, конечно это полезно… Я, правда, ею не пользуюсь»;
• «Навигация, вроде… Ну, как по сайту перемещаться»;

Ричард Сол Вурмен

Отец информационной архитектуры, Ричард Сол Вурмен (Richard Saul Wurman) , дает следующие определения информационной архитектуре:

• «Нахождение и организация паттернов, присущих данным. Для того, чтобы делать сложное – простым»;
• «Создание структуры или карты информации, чтобы позволить пользователям найти свой личный путь к знаниям»;
• «Возникающая в XXIом веке профессия, фокусирующаяся на ясности, понимании человека и науке организации информации».

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

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

Предлагаю следующее (которое не противоречило бы вышеуказанным подходам к пониманию ИА):
«ИА – это схема организации информации сайта»

Лаконично и весьма абстрактно. Измеряемые показатели качества ИА должны быть вполне конкретными:

1. Скорость нахождения информации (KPI: кол-во шагов для нахождения информации или затраченное время);
2. Качество найденной информации (KPI: качественный показатель соответствия информации ожиданиям пользователя, от 1 до 10).

Отсюда вопрос номер два:
Если она так важна, каким образом интегрировать работу над ИА в общий процесс проектирования взаимодействия?

Как работать над информационной архитектурой?

A. Ориентированный на пользователя (User-centered)

Идея: Пользователю виднее

Фокус: Цели и нужды пользователя

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

Где используется: крупные продуктовые компании, стартапы и digital-агентства.

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

Место ИА: Ввиду специфики подхода - основного акцента на исследованиях - можно спокойно пустить в ход львиную долю инструментов ИА (детальнее про инструментарий напишу отдельно) без потери времени и бюджета. Самая затратная часть – набор исследуемых пользователей – оплачивается в любом случае т.к. они уже и так принимают участие в UX-исследованиях и тестированиях. Проектирование ИА будет идти по классической схеме сверху вниз.

Подпроцесс создания ИА


Заметка: метод исследования «Карточная сортировка» - далеко не единственный. Отличный сравнительный обзор методов исследования ИА описан Джимом Россом .

B. Ориентированный на деятельность (Activity-centered)

Идея: Отталкиваемся от задач пользователя.

Фокус: Деятельность пользователя.

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

Где используется: Как стартапы, так и аутсорсинговые компании.

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

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

Подпроцесс создания ИА

C. Дизайн системы (Systems design)

Идея: Пользователь – часть окружающей его системы.

Фокус: Окружение пользователя.

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

Где используется: Digital-агентства, крупные продуктовые компании.

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

Место ИА: непосредственное исследование и проектирование ИА здесь заменяется работой над архитектурой системы, с иным инструментарием и подходами.

D. «Гениальный» дизайн (Genius design)

Идея: Дизайнер – всему голова.

Фокус: Собственное понимание дизайна, эвристики дизайна (примеры можно посмотреть у

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

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

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

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

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

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

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

Несмотря на отсутствие полностью устоявшегося определения ИА и её предмета, можно выделить основные подходы к их определению.

Введение термина датируется 1976 г. и приписывается Ричарду Вурману (Richard S. Wurman), определявшему задачу информационной архитектуры в организации эффективного визуального представления больших массивов данных.

В настоящее время информационная архитектура считается в меньшей степени приближенной к дизайну, а в большей степени --- к организации и структурированию информации. Так, по определению The Information Architecture Institute, информационная архитектура - искусство и наука организации и предметизации веб-сайтов, интранет-сетей, онлайн-сообществ и программного обеспечения, преследующая целью обеспечение удобства использования (usability).

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

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

• дизайн интерфейсов (веб-дизайн), определяющий графический облик решений, заложенных информационной архитектурой;
• маркетинг, так как информационная архитектура ставит целью удовлетворение нужд потребителей информации;
• разработка ИС, так как реализация информационной архитектуры ИС сопряжена с применением соответствующих технологий и моделей данных;
• управление знаниями (knowledge management), так как оно базируется на обеспечении лёгкости коллективного использования информации, одним из шагов в достижении которого является применение методов информационной архитектуры.

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

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

Несмотря на то, подходы в классификации (таксономия, предполагающая иерархическую классификацию, а также фолксономия, предполагающая задание неиерархических меток пользователями ИС) конкурируют в рамках ИА, и число сторонников фолксономии нарастало в связи с развитием концепции Web 2.0, информационная архитектура не предполагает наличия однозначно правильных во всех случаях подходов, рассматривая достоинства и недостатки, а также границы применимости каждого из них. Компромиссным подходом к классификации можно считать фасетный (многоаспектный) подход, предполагающий несколько оснований классификации с метками в рамках каждого из них, возможно --- иерархически организованными. Такой подход позволяет обеспечить индивидуальный подход к пользователю, которому не навязывается единого основания классификации и пути поиска информации и обеспечивается многоаспектный взгляд на контент, при этом наличие внутренней структуры в классификации предполагает прослеживаемость ее логики, в пику фолксономии, часто утрачивающей ценность в качестве основания навигации при росте объемов информации.

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

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

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

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

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