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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Большинство обывателей, заказчиков и даже некоторые из начинающих веб-разработчиков уверены, что любой сайт начинается с веб-дизайна. На самом деле, это не совсем так. Равно тому, как в основе любого здания, от лачуги до небоскрёба, лежит архитектура (даже если строитель её не разрабатывал), в основе любого сайта, начиная от самого простого, — в 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):

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Информационная технология - Информационные технологии (ИТ, от англ. information technology, IT) широкий класс дисциплин и областей деятельности, относящихся к технологиям управления и обработки данных, в том числе, с применением вычислительной техники. В последнее время под … Википедия

архитектура - (architecture): Набор элементов конструкции или описательных представлений, необходимый для такого описания объекта, чтобы он мог быть создан в соответствии с требованиями (с нужным качеством), а также обслуживаться в течение всего срока его… …

Архитектура программного обеспечения - (англ. software architecture) это структура программы или вычислительной системы, которая включает программные компоненты, видимые снаружи свойства этих компонентов, а также отношения между ними. Этот термин также относится к… … Википедия

Архитектура Балашихи - своими самыми ранними сохранившимися памятниками восходит к XVIII веку. К ним относятся православные храмы с некрополями и усадебные комплексы, находящиеся в настоящее время на территории города Балашиха, а также его городского округа (Московская … Википедия

Архитектура и достопримечательности Перми - Архитектура и достопримечательности Перми. Содержание 1 Планировка и благоустройство 1.1 Первые планы города … Википедия

Информационная модель - (изделия) – совокупность данных и отношений между ними, описывающая различные свойства реального изделия, интересующие разработчика модели и потенциального или реального пользователя. [ГОСТ 2.053 2006] Рубрика термина: Технологии Рубрики… … Энциклопедия терминов, определений и пояснений строительных материалов

Информационная безопасность (учебная программа) - У этого термина существуют и другие значения, см. Информационная безопасность (значения). Информационная безопасность это дисциплина, изучающая защиту целостности, доступности и конфиденциальности информации. «Информационная безопасность»… … Википедия

Системная архитектура - Эта статья или раздел нуждается в переработке. Пожалуйста, улучшите статью в соответствии с правилами написания статей. В стандарте AN … Википедия

Корпоративная информационная система - (КИС) управленческая идеология, объединяющая бизнес стратегию и информационные технологии. Корпоративная информационная система это масштабируемая система, предназначенная для комплексной автоматизации всех видов хозяйственной… … Википедия

ГОСТ Р ИСО/МЭК 27033-1-2011: Информационная технология. Методы и средства обеспечения безопасности. Безопасность сетей. Часть 1. Обзор и концепции - Терминология ГОСТ Р ИСО/МЭК 27033 1 2011: Информационная технология. Методы и средства обеспечения безопасности. Безопасность сетей. Часть 1. Обзор и концепции оригинал документа: 3.2 архитектура (architecture): Базовая организация системы,… … Словарь-справочник терминов нормативно-технической документации

Книги

• , Питер Морвиль, Луис Розенфельд. Третье издание знаменитой книги Питера Морвиля и Луиса Розенфельда "Информационная архитектура в Интернете" станет незаменимым источником информации для всех, чья деятельность связана с… Купить за 989 руб
• Информационная архитектура в Интернете , Розенфельд Л.. Третье издание знаменитой книги Питера Морвиля и Луиса Розенфельда "Информационная архитектура в Интернете" станет незаменимым источником информации для всех, чья деятельность связана с…