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

Всем привет!

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

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

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

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

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

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

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

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

В качестве примера я хочу привести сайт БГУИР 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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

C чего начать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UX против IA

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

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

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

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

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

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

Инструменты

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

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

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

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

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