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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очевидность #3: В любом из вышеперечисленных случаев вся работа над красотой, элегантностью и функциональностью интерфейсов представления информации теряют смысл. К примеру, при ложной информации идеальный интерфейс позволит пользователю быстро принять ложное решение.
Очевидность #4: Информация организована в некую структуру, которая имеет архитектуру.
Очевидность #5, итоговая: Если пользователь не находит нужную информацию или не воспринимает ее, заказчик или компания теряют прибыль.
В ходе работы UX-дизайнером в сфере ecommerce, я столкнулся с многообразием представлений об информационной архитектуре. Большей частью, ее воспринимают как один из несущественных аспектов проектирования взаимодействия. Как следствие, работе над информационной архитектурой не выделяется ни ресурсов, ни времени. В конечном итоге страдают пользователи, а компании теряют значительную долю доходов.

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

• Что такое информационная архитектура как явление, ее место в общем процессе проектирования взаимодействия;
• Какова специфика работы над информационной архитектурой для 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 в день

Делаем вывод:
Стоимость погрешностей в ИА - $700 в день, $21.000 в месяц или $252.000 дохода в год.

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

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

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

Возьмем среднестатистического сотрудника IT-предприятия и зададим вопрос: что такое информационная архитектура, и зачем она нужна? Среди ответов, которые мы получим, с вариациями могут быть следующие:

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

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

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

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

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

Питер Морвиль и Луи Розенфельд в классической работе по ИА «Информационная архитектура в интернете» приводят целых четыре определения:

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

К Морвилю и Розенфельду присоединяется и Донна Спенсер , которая опирается на их определения в своей работе «Practical Guide to Information Architecture».

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

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

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

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

Следует отметить, что ИА присутствует всегда, в любом приложении. Вопрос только в ее соответствии пониманию и потребностям пользователя.

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

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

Мне близка точка зрения Дэна Саффера (Dan Saffer) , который в своей работе «Designing for Interaction» рассматривает четыре практических подхода к проектированию взаимодействия, которые я привожу ниже. Как целесообразно работать над ИА в рамках каждого из подходов?

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интервью с Луи Розенфельдом (Louis Rosenfeld), основателем и президентом Argus Associates. Луи также является соавтором популярнейшей книги Information Architecture for the World Wide Web.

Интервью основано на переписке по электронной почте, которую вел Джон Роудс (John S. Rhodes) 24 мая 99 года

Что такое информационная архитектура? В общих чертах, о самом важном?

Эта сфера знаний пока относительно нова, и находится в стадии развития; следовательно определение информационной архитектуры зависит о того, кто его дает. Вот определение, которое нравится нам:

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

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

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

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

Какова связь между информационной архитектурой и юзабилити?

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

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

Так что, я представляю себе юзабилити, как дисциплину с чрезвычайно широкой сферой применения, но к сожалению недостаточной при применении к специфическим областям. В своей компании Argus мы как раз экспериментируем с этой проблемой; недавно мы наняли Кейт Инстоун (Keith Instone), а также еще одного специалиста по взаимодействию человек-компьютер. Так что теперь в нашей компании есть свои собственные лучшие специалисты по юзабилити. Потом мы посмотрим, какого рода услуг от нас потребует рынок, и если потребуется, мы будем смешивать наш опыт в информационной архитектуре с опытом в юзабилити. Так что год-два спустя мой ответ может быть совсем другим.

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

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

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

• информационных потребностей посетителей сайта
• материалов сайта
• целей и бюджетных ограничений

В компании Argus мы очень сильно полагаемся на правило "80/20", которое гласит: если мы можем использовать несколько основных методов организации информации, которые удовлетворят 80% посетителей, тогда мы можем с уверенностью сказать, что пользователи не заблудятся на нашем сайте. Их не запутает обилие "информационных коридоров", многие из которых лишь изредка будут использоваться, но зато потребуют значительных затрат в поддержке. И так же, мы часто замечаем, что примерно 20% информации, которую нам представляет компания-клиент, удовлетворяет все запросы посетителей сайта. Благодаря этому правилу мы можем создавать некрупные, более точные массивы информации, с которыми проще работать. Не пытаясь объять необъятное и удовлетворить все нужды и требования посетителей, владельцы и менеджеры сайтов будут тратить меньше средств и усилий на поддержку сайтов при этом получая от него наибольшую отдачу.

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

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

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

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

Пожалуйста, опишите вкратце ключевые идеи вашей популярнейшей книги Information Architecture for World Wide Web. Так же, не могли бы вы объяснить успех этой книги?

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

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

Каково будущее информационной архитектуры? Что будет дальше?

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

До этого момента мы с вами концентрировались на том, как понять и спланировать UX-дизайн. А с сегодняшнего дня мы приступаем к практике. Проектирование реального решения всегда начинается с разбора структуры объекта проектирования. Начнем со введения в тему:

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

Если вы раньше не сталкивались с понятием “структура информации”, то начните с этой презентации: Understanding Information Architecture .

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

Информационная архитектура невидима. Чтобы с ней работать, нужно нарисовать карту сайта. Вот простой пример:

В этом примере показан вебсайт из 6 страниц: домашняя страница, 2 секции главного меню и 3 подсекции. Линии показывают, как страницы соединены между собой посредством навигации (меню и кнопки).

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

Такая организация страниц - в виде семейного древа - называется “иерархической” или “древовидной”. Большинство сайтов и приложений структурированы подобным способом (но он далеко не единственный).

В рисовании карты сайта нет никаких “правил”, но вот вам несколько ценных указаний:

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

Горизонтальная или вертикальная, а не обе сразу.

Вообще-то говоря, карта вашего сайта будет либо “плоской” (flat) - тогда будет больше секций в меню, зато понадобится меньше кликов, чтобы добраться до самого низа - либо “глубокой” (deep), что означает более простое меню, но требует больше кликов на пути к цели.

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

Сайтам, на которых много продуктов, например Wal-Mart, чаще всего подходит “глубокая” архитектура, иначе размеры меню будут выходить за все рамки. Сайты вроде YouTube, где все строится вокруг пользователей и видео-роликов, обычно “плоские”.

Если ваш сайт и глубокий , и плоский одновременно , это плохо. Вам не помешает . Ну или пусть в основе сайта лежит хороший механизм поиска.

Распространенный миф: Возможно вы слышали от кого-то, что до любого интересующего объекта “всегда должно быть три клика”. Этот кто-то скорее всего изучал UX в 90-е и больше не возвращался к этой теме. А вам нужно концентрироваться на пользователе, а не на дурацких “правилах”. Главное, чтобы люди всегда понимали, где они находятся и что могут сделать. Если ваша навигация простая и четкая, то количество кликов значения не имеет.

Если вам понравилась статья и перевод, дайте нам знать - нажмите зеленую кнопку Recommend

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только - скиньте нам ссылку, и мы будем рады над ней поработать.

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