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

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

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Принцип выбора

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

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

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

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

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

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

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

Принцип образцов

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

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

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

Принцип главного входа

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

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

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

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

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

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

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

Принцип сфокусированной навигации

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

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

Принцип роста

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

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

Вывод

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

Мы выстраиваем наше здание, а потом наше здание выстраивает нас.

Уинстон Черчилль

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

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

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

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

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

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

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

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

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

Определение

Те, кто не знаком с этой областью, вероятно, все еще размышляют: что, собственно, такое информационная архитектура? Этот раздел ад ресован им.

ин·фор·ма·ци·он·ная ар·хи·тек·ту·ра сущ.

1. Сочетание схем организации, предметизации и навигации, реали зованных в информационной системе.

2. Структурное проектирование информационного пространства, спо собствующее выполнению задач и интуитивному доступу к содер жимому.

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

4. Развивающаяся дисциплина и сообщество практиков, ставящее своей задачей распространение принципов проектирования и архи тектуры на цифровых просторах.

Вы рассчитывали, что определение будет одно? Что нибудь коротень кое и невинное? Несколько слов, в которых кратко схвачены суть и границы области информационной архитектуры? Размечтались!

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

Сойдем с нашей философской трибуны и обратимся к основам вещей. Раскроем шире наши определения и исследуем некоторые базовые понятия информационной архитектуры.

Информация

Термин «информация» употребляется нами для различения инфор мационной структуры и управления данными и знаниями. Данные (data) – это факты и цифры. Реляционные базы данных обладают высокой степенью организации и генерируют конкретные ответы на конкретные вопросы. Знания (knowledge) – это то, что находится

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

1 Юмористический взгляд на коварства английского языка можно найти

в книге Билла Брайсона (Bill Bryson) «The Mother Tongue: English & How It Got That Way».

Структурирование (structuring), организация (organizing) и предме+ тизация (labeling)

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

Поиск и управление

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

Искусство и наука

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

Глиняные таблички, свитки, книги и библиотеки

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

1 Уровень детализации (granularity) означает степень обобщения при разби ении информации на фрагменты или их относительный размер. Различные уровни детализации могут быть такими: отдельный номер журнала, ста тья, абзац, предложение.

В 1873 году Мелвил Дьюи (Melvil Dewey) придумал «десятичную сис тему Дьюи» для организации и упрощения доступа к неуклонно расту щему количеству книг.

В наше время большинство людей знакомы с основами организации ин формации по опыту работы с книгами и библиотеками. В табл. 1.1 по казано применение понятий информационной архитектуры (ИА) к ми ру печатного слова и к World Wide Web.

Таблица 1.1. Различия между книгами и веб+сайтами

Если перейти от единичных книг к книжным собраниям, то сравнение становится еще интереснее. Представим себе книжный магазин, в ко тором нет никакой организационной структуры. Тысячи книг просто свалены в огромные стопки на столах. Такие магазины действительно существуют, например Gould’s Book Arcade в Ньютоне, Австралия. Он показан на рис. 1.1.

Рис. 1.1. Книжный магазин Gould’s Book Arcade (фотография любезно предоставлена Сетом Гордоном)

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

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

Рис. 1.2. Просмотр книг в библиотеке (фотография любезно предоставлена http://intergate.sdmesa.sdccd.cc.ca.us/lrc/stacks.jpg)

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

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

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

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

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

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

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

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

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

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

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