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

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

Всем привет!

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

Итак, что же такое информационная архитектура? Определение, которое нравится мне больше всего, гласит:

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

Если отбросить все лишние подробности, остается два главных аспекта:

- Организация информации;
- Обеспечение навигации по ней.

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

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

Пример: за деревьями леса не видно

В качестве примера я хочу привести сайт БГУИР bsuir.by (да-да, его только ленивый не ругал).

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

Для чего большинство студентов заходит на сайт университета? Как правило, за следующим:

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

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

Если знать, где искать, все эти люди находятся за 4 клика. А если не знать, их просто не существует на сайте.

UPD : Как оказалось, недавно на сайте bsuir.by появился поиск по преподавателю . Его еще предстоит серьезно дорабатывать, но в целом тенденция не может не радовать.

Что касается документов… В том или ином виде ссылки на документы «размазаны» по разным частям меню. И ни одна из ссылок не подсказывает студенту, что он на правильном пути. Документы сгруппированы по типу (приказы, планирование (!), положения и т.п.), а не по целевой аудитории. Ну и, разумеется, поиск результатов не дает.

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

А как надо?

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

1. Оцениваем навигацию

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

На что следует обращать внимание:

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

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

Расположение меню не должно изменяться при переходе от одной странице к другой.

Располагайте наиболее часто используемые пункты ближе к началу.

Навигационное меню должно быть визуально отделено от всего остального.

Выделяйте выбранный пункт меню.

Для тех, кто хочет узнать немного больше, советую почитать гайдлайны http://usability.gov/guidelines/index.html (раздел Navigation ).

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

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

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

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

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

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

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

Из этого пункта закономерно вытекает следующий:

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

6) Главная страница (Landing Page) требует особого внимания . Главная страница – это та самая одежка, по которой встречают. Прежде всего, она должна давать пользователю информацию о том, куда он попал, что может здесь делать и куда отправиться. Если с первого взгляда на страницу пользователь не может ответить на вопрос «куда я попал» (или как вариант «оно мне надо?»), он для вас потерян. Другие полезные советы по домашним страницам можно почерпнуть и .

7) Ссылки должны быть заметными, понятными и предсказуемыми . Это означает, что пользователь должен с первого взгляда понимать, что перед ним: кликабельная ссылка или статический текст. В этом смысле лучше старых добрых синих ссылок ничего не придумано. Разумеется, можно использовать и другие цвета. Главное, чтобы ссылки можно было отличить от текста, а посещенные ссылки – от непосещенных.
Для понятности стоит добавить всплывающую подсказку. Что касается предсказуемости: если ссылка делает что-то отличное от перевода пользователя на другую страницу (например, инициирует скачивание файла), обязательно предупредите пользователя об этом.

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

2. Информационная архитектура

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

Итак, на что следует обращать внимание:

1) Формулировка текста . Здесь я руководствуюсь одним принципом. Представьте, что проектируете не программу, а поведение другого человека, и ваш пользователь будет взаимодействовать с ним. Как бы выражался «нормальный» человек? Едва ли он говорил бы фразочки в духе: «Отправка данных на сервер инициализирована ». Эффект, которого нужно добиться — вежливый собеседник, консультант, но никак не ментор или «умник».

Этот совет пересекается со следующим:

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

3) Избегайте огромных полотен текста . Как советовал Стив Круг: «Избавьтесь от половины слов на каждой странице, затем уберите еще половину из того, что осталось ». У пользователей нет лишнего времени, чтобы заниматься чтением многострочной маркетинговой информации, выискивая для себя полезные сведения. Делайте текст сканируемым: разделяйте его на части, выделяйте ключевые моменты, используйте списки.

4) Избегайте неопределенных названий кнопок . «ОК» — это один из самых неудачных вариантов. Кнопка, как и любой другой элемент, инициирующий какое-либо действие системы, должна однозначно называть это действие. Это может быть, например, «Удалить», или «Отправить».

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

6) Единообразие . Этот принцип работает и здесь. Все подписи к полям, всплывающие подсказки, инструкции, сообщения об ошибках должны быть написаны в едином стиле и появляться в одинаковых местах.

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

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

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

Избегайте использования слишком большого количества мелких элементов в иконках.

Иконка должна визуально выделяться на фоне всего остального.

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

9) Группируйте по смыслу поля на формах . Особенно, если формы длинные. Это в разы облегчит заполнение.

Информационный дизайн

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

1) Расположение подписей к полям . Согласно исследованию сайта UXMatters , наиболее удачный вариант расположение названия поля – непосредственно над ним. Следующий за этим вариант – слева от поля с выравниванием по правому краю.

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

5) Уменьшайте визуальный шум. Просматривая макет графического интерфейса, не поленитесь в сотый раз подумать: «Действительно ли здесь нужен этот элемент, или можно обойтись и без него?» и смело отсекайте все лишнее.

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

7. Онлайн-инструмент для проведения карточной сортировки: http://websort.net/

10. Подборка статей о кнопках http://uxmovement.com/category/buttons/

Предыдущие статьи

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

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

Начнем с очевидностей.
Очевидность #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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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