Меню
ГлавнаяWindows 7

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

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

Каждая цитата в какой-то мере помогает вникнуть в суть профессии информационного архитектора. Но всё-таки после проведения собственного исследования я пришёл к выводу, что ни одно из этих высказываний не даёт полного представления об интересующей профессии. Информационный архитектор занимает нишу между графическим дизайнером , веб-дизайнером , проектировщиком опыта взаимодействия , разработчиком главной страницы и экспертом по юзабилити (я написал отдельные статьи о перечисленных профессиях). Фактически, работа всех этих людей связана с общей тематикой - ориентированным на пользователя дизайном (см. pdf Джесси Джеймса Гарретта об элементах опыта взаимодействия). Со временем круг обязанностей каждого из этих специалистов стал вполне конкретным. В отличие от графического/веб-дизайнера, который подбирает цветовую гамму, оформление, текстуру и т. д. для передачи определённого сообщения, информационный архитектор смотрит на архитектуру сайта с более практической стороны. Он может задаться вопросами: «Сколько посетителей приходит на Ваш сайт?», «Как ПО помогает пользователю систематизировать информацию?», «Каким образом пользователь узнаёт об этом ПО?», «Помогает ли эта информация потребителю (т.е. как она стимулирует его к принятию решения)?».

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

Эволюция информационной архитектуры

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

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

Реализация ваших идей по дизайну

Чтобы понять, как информационный архитектор управляет проектом, можно представить себе, что обычному архитектору предлагают поработать над зданием после того, как оно уже построено. Хотя такое предложение кажется смешным, сегодня оно зачастую актуально. Даже после того, как самые хорошо спроектированные здания построены, они всё ещё могут подвергаться изменениям. Стюарт Бренд освещает этот удивительный феномен в своей книге «Как учатся здания: что происходит после того, как они построены» (How Buildings Learn: What Happens After They’re Built). И снова, как бы абсурдно это ни звучало, мы обычно ставим информационных архитекторов в похожее положение - предлагаем им поработать над веб-сайтом после того, как другие самопровозглашённые информационные архитекторы уже его спроектировали. Это происходит потому, что большинство людей не знают о существовании альтернативы. Чем скорее Вы доверите свою идею дизайна проекта профессионалу, тем быстрее он претворит её в жизнь.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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

Большинство обывателей, заказчиков и даже некоторые из начинающих веб-разработчиков уверены, что любой сайт начинается с веб-дизайна. На самом деле, это не совсем так. Равно тому, как в основе любого здания, от лачуги до небоскрёба, лежит архитектура (даже если строитель её не разрабатывал), в основе любого сайта, начиная от самого простого, — в 3-4 странички, — и заканчивая внушительными веб-площадками, лежит информационная архитектура. Ни одно серьёзное здание не строится без проекта, поэтому правильно исходить из того, что хорошо продуманная информационная архитектура сайта должна моделироваться с самого начала.

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

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

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

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

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

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

В то же время, приравнивать архитектуру сайта единственно к юзабилити не совсем правильно. Существует мнение (и я склонна его придерживаться), что «специалисты юзабилити не всегда достаточно хорошо понимают, как часто меняются требования пользователя к одной и той же информации, а также то, как эти различные требования влияют на скорость поиска» (Луи Розенфельд, (Louis Rosenfeld), соавтор высоко оценённого труда Information Architecture for the World Wide Web; цитата взята из интервью). Тут следует уточнить, что под поиском информации и скоростью этого поиска, Луи Розенфельд (по крайней мере, я это так понимаю) подразумевает не столько «поиск по сайту» с использованием одноимённого сервиса сайта, сколько названия пунктов меню, страниц и пр., которые должны соответствовать ожиданиям и требованиям посетителя. Наравне с принципами юзабилити, информационная архитектура должна включать маркетинговые цели, с выделением более значимых и «выгодных» областей сайта. Роль информационной архитектуры неотрывно связана с постановкой бизнес-задач.

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

Информационная архитектура. Создаём чертежи сайта

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

В диаграммах информационной архитектуры принято использовать ряд графических символов. Ниже представлен перечень таких условных обозначений (графических символов), с помощью которых осуществляется создание диаграмм сайта. Подробнее об их значении и употреблении можно прочитать на websam.com, статья Графическая нотация для документирования информационной архитектуры и взаимодействий пользователя с веб-сайтом . Веб-дизайнерам/веб-разработчикам — для дополнительного изучения рекомендую также ознакомиться с книгой Кристины Кристина Уодтке (Christina Wodtke), одной из ведущих информационных архитекторов в мире, «Информационная архитектура: чертежи сайта» (создание диаграмм в конце книги).

Основные графические символы для моделирования информационных систем:

Ниже представлен фрагмент информационной архитектуры сайта Столичной Судоходной компании (CCK=SHIP.RU):

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