4347

Информационная архитектура лекционные материалы по курсу Интернет-технологии

Конспект

Информатика, кибернетика и программирование

Введение Разрабатывая Web-сайты, каждый из нас не первый год старается идти по кратчайшему пути. Это особенно характерно для работы над проектами с небольшим бюджетом. И из всех кратчайших путей самым дорогим оказывается тот, когда мы пропускаем эта...

Русский

2012-11-16

1.02 MB

22 чел.

Введение

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

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

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

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

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

  1.  Типичные проблемы при поиске информации на сайте

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

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

  1.  Опыт публичных библиотек и редизайн

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

Библиотеки, использующие картотеки, могут показаться архаичными, но на самом деле они современны. Давно прошли те времена частных книжных собраний, в которых книги регистрировались по правилам, придуманным самим владельцем. Чаще всего при регистрации записывались имя автора, название, тема или даже литературный жанр (пьеса, роман и т.п.). Посетитель такой библиотеки едва ли нашёл бы интересующую его книгу без помощи составителя этой самой библиотеки. Но современные библиотеки быстро приспособили под свои нужды систему, названную Десятичной системой Дьюи (Dewey Decimal System - DDS) по имени создавшего её в 1876 году библиотекаря Мелвила Дьюи (Melvil Dewey). Его идея сортировать книги по десяти категориям совершила революцию в библиотечном деле. Система DDS стала первым шагом на пути создания высокоорганизованной и гибкой схемы информационной архитектуры для книг.

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

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

Такая продуманность и гибкость, то, что нужно, когда речь заходит о разработке ИА для веб-сайта. Представьте, во что бы превратились библиотеки, если бы система DDS не смогла вместить в себя все новые темы и подтемы, появившиеся на свет за прошедшие 125 лет. Сколько времени библиотекарям пришлось бы всякий раз тратить на реорганизацию их каталогов и перестановку их карточек? Может показаться глупым, но… сколько раз веб-архитекторы ломали голову над тем, как поменять положение материалов на сайте или как втиснуть дополнительный пункт в уже готовое меню навигации?

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

  1.  Аргументы в пользу ИА

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

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

Web-разработчикам следует помнить, что ИА - это скелет сайта, "движок" (базы данных, javascript, cgi и т.п.) - мускулы, и HTML код - кожа. В качестве другой аналогии можно взять постройку дома. В этом случае ИА - это план- чертеж дома, с которого начинается любая стройка. База данных - это фундамент, запросы к ней - каркас, и HTML - штукатурка и краска. Без архитекторского плана хороший дом не построить /3/.

Почему же тогда многие разработчики начинают с разработки внешнего вида? Это тот вопрос, на который нужно ответить самим разработчикам, и который нужно разъяснить клиентам. Многие полагают, что пара страниц сайта, нарисованных дизайнером в Photoshop, это и есть информационная архитектура. Но это не так, на самом деле это визуальная архитектура (presentation architecture), т.е. то, как информация, взятая из ИА, будет показана. Это - почти эквивалент юзабилити. Возвращаясь к примеру с библиотеками, визуальная архитектура - это всего-навсего вопросы того, как выглядят карточки каталога. Но, прежде всего надо позаботиться о том, чтобы информацию на карточках (Web-страницах) можно было легко найти и легко прочитать.

Когда речь заходит о средствах и времени (коэффициент окупаемости инвестиций - ROI), необходимых для исследований, документирование, и разработку ИА, менеджеры и сами информационные архитекторы все время говорят в общих словах, описывая общую картину. И совсем редко упоминают выгоды и экономию от ИА. Так как ИА рассматривается лишь как пустая трата денег, а все силы и средства отдаются созданию красивого интерфейса, неудивительно, что часто ИА отодвигают на задний план, а то и вовсе вычёркивают из плана работ по проекту. Чтобы легче было отстаивать свою позицию по ИА в этом непростом мире, приведем несколько аргументов в пользу ИА /1/:

Положение в рейтинге поисковиков

Положение в рейтинге поисковиков - разбивая Web-сайт на правильные разделы (с логически обоснованными заголовками), ИА помогает выставить на первый план те ключевые элементы, которые используются поисковыми серверами при вычислении релевантности страниц (сюда входят названия страниц, ключевые слова, названия каталогов и файлов). Разве плохо для компании, если ссылка на её Web-сайт окажется в числе первых 10-20 результатов поиска?

Улучшение юзабилити

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

Размещение файлов

Размещение файлов - те, кому приходилось обслуживать большой веб-сайт, знают, как много времени уходит на поиск файла, который надо обновить. Чем лучше ИА, тем быстрее вы отыщете этот файл. Хорошая ИА определяет категории, по которым можно разбить информацию. Как веб-разработчик, вы должны просто следовать этим категориям, создавая структуру каталогов и присваивая имена файлам. Тогда, для внесения изменений вам не придётся идти на сайт, и искать нужную страницу только для того, чтобы по её URL-у определить имя файла. Теперь вы можете вызывать любой файл сайта из своего редактора, даже не зная пути к нему. Помните, что структура именования каталогов и файлов, построенная на ИА также использована поисковыми серверами для ранжирования страниц. Разве это не снизит расходы на разработку в будущем? Трудно сказать точно, на сколько именно, но примерно это может составить экономию от 1 до 5 %, в зависимости от частоты и природы вносимых изменений.

Нет нужды в редизайне

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

Сокращение времени разработки

Сокращение времени разработки - выделив заранее время на разработку продуманной ИА Web-сайта, общее время разработки сайта можно сократить на 10-25 %.

  1.  Организация материала на сайте

Так как же добиться построения эффективной информационной архитектуры? Кристина Уодтке, один из лидеров в области ИА, считает, что нужно ответить на следующие три вопроса /3/:

1. В нужном ли я месте?

Во время поиска хорошо бы знать, в том ли месте ищем информаию.

Главное правило демонстрации организационной схемы: показывать весь диапазон ваших предложений.

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

  •  ориентировать людей. «Это веб-сайт для X»;
  •  говорить им, куда идти. «Вот страницы, на которые вы можете попробовать зайти».

2. Есть ли здесь то, что я ищу?

В сети нужно помнить о четырех ключевых элементах указателей пути.

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

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

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

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

3. Есть ли здесь что-то учше?

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

Навигация с цепочными ссылками

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

Дополнительный выбор «Смотри также»

Ссылка типа «Смотри также» - это полезный способ сократить пользователям переход к родственным предметам (по сравнению с переходом к родственным категориям).

Навигационное средство «Смотри также» наиболее эффективно, если в нем есть короткий переход в область родственных предметов и короткий переход в родственные категории.

  1.  Метод сортировки карточек

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

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

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

Метод сортировки карточек помогает ответить на подобные вопросы и таким образом подготовить вас к следующим этапам дизайна /4/.

  1.  Определение

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

Согласно книге "Информационная архитектура для WWW" (Information Architecture for the World Wide Web) сортировка карточек "позволяет понять модель мышления пользователей, бросить свет на то, как они неявно группируют, сортируют и обозначают различные задачи и материалы в своей голове".

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

  1.  Метод

Существует два основных метода сортировки карточек:

Открытая сортировка карточек

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

Закрытая сортировка карточек

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

  1.  Достоинства и недостатки

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

Достоинства

Прост - как для организаторов, так и для участников.

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

Быстр в выполнении - вы можете провести несколько сеансов за короткий промежуток времени и получить огромный объем результатов.

Проверен - этим методом пользуются многие дизайнеры уже свыше 10 лет.

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

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

Недостатки

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

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

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

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

  1.  Когда применять метод

Сортировка карточек это формирующий метод, требующий привлечения пользователей, следовательно, его следует применять для:

  •  создания нового сайта;
  •  создания нового раздела на сайте;
  •  редизайна сайта.

Метод сортировки не является методом оценки, он не скажет вам, что не так с вашим сайтом.

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

  •  у вас уже есть на руках данные о том, что пользователи будут требовать от сайта;
  •  проведена инвентаризация/учет всех материалов (у существующего сайта) или список требуемых материалов (для будущего сайта). В случае с уже существующим сайтом переучет следует провести особенно тщательно, чтобы на сайте остались только те материалы, которые нужны пользователям.

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

Простой анализ результатов

Сложный анализ результатов

Размеры сайта

Малый

Большой

Тип материалов

однородный (напр., каталог товаров, список услуг, каталог веб-сайтов)

разнородный (напр., интранет-сайт, веб-сайт правительства)

Сложность материалов

Участники разбираются в содержании большинства материалов

Материалы требуют специфических или специальных знаний

Таблица 1. – Звисимость сложности анализа результатов от сложности сайта.

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

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

  1.  Подготовка

Подготовка к сортировке карточек включает следующее:

  •  подбор материала;
  •  подбор участников;
  •  подготовка карточек.
    1.  Подбор материалов

На первом этапе в проведении сортировки карточек необходимо определить список тем. Этот список составляется на основе различных источников:

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

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

Отбор материалов

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

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

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

  1.  Подбор участников

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

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

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

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

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

  1.  Подготовка карточек

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

Количество карточек

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

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

  1.  Анализ результатов и дальнейшие шаги

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

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

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

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

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

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

  1.  Проблемы и варианты

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

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

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

  1.  Заключение

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

  1.  Резюме

Метод сортировки карточек (card sorting) используется для нахождения скрытой структуры в не рассортированном списке предметов, понятий или идей. Исследователь пишет каждое понятие или предложение на маленькой карточке и затем просит каждого из шестерых или более пользователей разложить эти карточки по группам или по кучкам. Результаты каждой сортировки затем комбинируются и, если необходимо, анализируются статистически.

  1.  Плюсы

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

  1.  Метод

Планирование

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

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

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

Проведение

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

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

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

По окончании раскладки запишите по номерам, какие карточки были сложены вместе. Если вы не создавали заранее категории, попросите пользователей самим присвоить каждой группе названия (ответив на вопрос "как бы вы описали эту кучку карточек?").

Анализ

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

Самым распространенным способом анализа сложных данных, полученных в результате сортировки карточек, является статистический метод под названием "кластерный анализ" (cluster analysis). Об этом можно почитать в соответствующей литературе, здесь же на этом не будем останавливаться.

  1.  Метаданные

Метаданные – это информация об информации. Они являются основой всех организационных систем, от простой системы поиска до иерархических систем типа «Yahoo!». Это основные элементы для ИА.

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

Метаданные включают в себя всю информацию о каждом объекте. В настоящее время для информационных систем используются три основных типа метаданных /3/:

  •  описательные - метаданные о природе объекта, наиболее важные для наших целей и чаще всего применяются в Сети. «Это - статья? По какой теме? Каковы родственные темы?»
  •  собственные - метаданные о построении объекта. «Является ли он текстовым документом, имеет ли он формат JPEG, равен ли его объем 20 КВ, является ли он архивом?»
  •  административные - метаданные о способах обращения с объектом. «Временный ли это объект или его нужно заархивировать? Кто его создавал? Допущен ли он к публикации?»

  1.  Словарь

Другим способом повышения эффективности поиска является создание так называемого управляемого словаря (controlled vocabulary) /3/. Дело в том, что один и тот же термин может обозначаться разными словами. Да и бывает иногда, что люди при вводе слова для поиска совершают грамматические ошибки.

  1.  Управляемый словарь

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

Существует много типов управляемых словарей, от простого словаря, построенного на отношениях эквивалентности (список эквивалентных терминов), до сложных тезаурусов (вводится  полное определение).

Отношения эквивалентности

Простейший тип управляемого словаря состоит из списка отношений эквивалентности: «жидкокристаллический монитор» и «LCD-монитор», «ЖК-монитор» являются одним и тем же для цели поиска. В таблице 2 приведен пример.

Предпочтительный термин

Варианты

Жидкокристаллический монитор

ЖК-монитор, LCD-монитор, LCD-Monitor, монитор на жидких кристаллах

Таблица 2. - Пример отношения эквивалентности

Такое отношение может быть между двумя названиями одной и той же вещи: кошка и котенок. Это - синонимы.

Оно также может быть между разными вариантами написания названия одной и той же вещи или между названием и его акронимом. Есть два варианта написания слова «лев»: «lion» и «lyon». Это варианты.

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

Отношения иерархии

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

Предпочтительный термин

Варианты

Родительский (широкий термин)

Дочерний (узкий термин)

Жидкокристаллический монитор

ЖК-монитор, LCD-монитор, LCD-Monitor, монитор на жидких кристаллах

Монитор, средство отображения информации, экран

Тряпочка для протирки экрана монитора, DVI-кабель для монитора

Таблица 3. - Пример отношений иерархии

Ассоциативные отношения

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

Предпочтительный термин

 

Варианты

Родственные термины

Ассоциированные термины

 

Родительские

Термины - сестры

Дочерние

Жидкокристаллический монитор

ЖК-монитор, LCD-монитор, LCD-Monitor, монитор на жидких кристаллах

Монитор, средство отображения информации, экран

ЭЛТ-монитор, монитор с электро-лучевой трубкой

Тряпочка для протирки экрана монитора, DVI-кабель для монитора

Компьютерная техника, компьютер, вычислительная техника, периферийные устройства, мышь, клавиатура, модем, модуль памяти

Таблица 4. - Первый набросок тезауруса

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

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

7.1.1. Создание управляемого словаря

1. Сбор контента

Как же точно представить то, что надо упорядочить? Для этого лучше всего подходит инвентарная опись контента /3/.

Инвентарная опись контента — это список учетных данных всего, что есть на сайте, и всего, что вы будете добавлять на сайт.

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

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

2. Сбор терминов из максимального количества источников

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

3. Определение предпочтительных терминов

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

4. Связь синонимов и слов, близких по смыслу

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

5. Группировка предпочтительных терминов по темам

Проведите «сортировку карт». Выделите предпочтительные термины и сгруппируйте их по сходству.

6. Определение терминов с широким и узким смыслом

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

7. Создание ассоциативных ссылок

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

  •  ЖК-монитор ведет к средствам очистки экрана;
  •  компакт-диск с музыкальными записями может привести к билетам на концерт;
  •  молоток - к гвоздям;
  •  загрузка драйвера - к документации по его использованию.

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

8. Запись варианта и причины, по которой тот был выбран

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

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

  1.  Рисование как метод мышления и проектирования

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

  1.  Тематическая схема

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

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

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

1. В центре пишем название ключевой темы – кухня (рис. 1а).

2. Затем, по мере обдумывания основных разделов, записываем и их (рис. 1б).

3. Потом к каждому разделу добавляем как можно больше того, что приходит в голову (рис. 1в).

4. Когда будет решено, что идей достаточно, можно использовать схему в неизменном виде в качестве возможной иерархии для структуры контента. Можно провести для нее сортировку карт (см. главу 5).

8.2. Интерактивная раскадровка

После наведения порядка в идеях и контенте настает время показа материалов людям. Конечно, блок-схемы призваны отражать все ясно, но они могут быть непонятны людям, которые видят проект впервые /3/.

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

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

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

Пример показан на рисунке 2.

8.3. Функциональные спецификации

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

Графическая нотация для документирования информационной архитектуры и взаимодействий пользователя с веб-сайтом (схема сайта и пути)

  1.  Резюме

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

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

  1.  Предисловие

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

Эти описания (диаграммы) разрабатываются для пяти основных аудиторий:

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

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

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

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

  1.  Широкоформатность: нотация должна быть достаточно простой для того, чтобы можно было набросать основные символы то руки. Элементы диаграммы должны размещаться таким образом, чтобы позднее можно было добавить элементы без излишнего «утяжеления» внешнего вида и без ущерба для понимания диаграммы.
  2.  Независимость от использования конкретных инструментов: нотация должна быть независима от использования конкретных программных инструментов для создания диаграмм, так же, как не должна ориентироваться на какой-либо конкретный инструмент. Архитектура нотации должна предполагать конвертирование графических символов нотации в формат предпочитаемой архитектором программы.
  3.  Малый размер и самодостаточность: поскольку диаграммы ориентированы на очень широкий спектр аудиторий с разным уровнем знаний (или заинтересованности) систем диаграммирования, используемых в других областях моделирования, диаграммы, создаваемые с помощью данной нотации, должны быть понятными без специальных знаний. Общее количество элементов на диаграмме должно быть минимальным для верного понимания связи между элементами концепции и графическим символом для его представления. Концепция, представленная на диаграмме, может быть сколь угодно сложной (комплексной), диаграмма, представляющая концепцию, должна быть простой и понятной.

  1.  Моделирование статичной информационной системы

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

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

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

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

Эта нотация основана на простой концептуальной модели, представляющей информационную архитектуру и способы взаимодействия пользователя с сайтом (системой) вместе:

  •  пользователь взаимодействует с системой посредством путей (paths);
  •  пользователь перемещается по путям при помощи действий (actions);
  •  эти действия могут заставить систему сгенерировать события (результаты) (results).

Простые элементы: страницы, файлы и наборы страниц и файлов

Основная структурная единица любого веб-сайта — это, конечно, страница (page). На диаграмме страница изображается простым прямоугольником. Заметим, что страница на диаграмме - это единица представления, а не реализации. Например, одна страница на диаграмме может представлять в действительности несколько HTML файлов (например, страница содержит набор фреймов) или несколько разрозненных фрагментов кода (когда используются включения на стороне сервера (SSI) или базы данных).

Кроме страниц, существуют файлы (files) - единицы организационной структуры сайта, не имеющие навигационных свойств. Пользователь работает с файлами вне браузера (аудио и видео файлы, отдельные документы, такие, как PDF, или исполняемые файлы (программы)). Файлы изображаются на диаграмме хорошо известным значком — прямоугольник с загнутым внутрь верхним правым уголком.

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

Используйте ярлыки (labels) чтобы идентифицировать страницы и файлы. Ярлыки должны быть уникальными для каждой страницы или файла на диаграмме и не должны представлять реальные имена файлов или значения тегов <title>, например. Уникальные числовые идентификаторы и префиксы типа файла могут быть успешно использованы в качестве ярлыков на диаграмме.

Отношения: связи и стрелки

Отношения между элементами на диаграмме изображаются в виде простой линии, или связи (connector). Связи обязательно будут трансформированы в навигационные отношения, но не все навигационные отношения могут быть отражены на диаграмме.

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

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

Заметим, что стрелки на диаграмме взаимодействий не имеют семантического значения «движение только в этом направлении». Стрелки, как правило, представляют наиболее вероятное направление движения пользователя.

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

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

Параллельный набор

Символ параллельного набора (concurrent set) на диаграмме изображается полукругом, используется в тех случаях, когда действие пользователя генерирует несколько одновременных событий (например, запуск нового окна одновременно с загрузкой документа в основное окно, или отображение страницы одновременно с диалогом загрузки файла). Как и стрелки, символ параллельного набора имеет направление. Элементы диаграммы, расположенные выше по пути соединяются с дугой символа, ниже — с плоской частью (основанием) символа.

Точки входа и выхода

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

Для того, чтобы можно было разбить диаграмму на несколько листов, используют точки входа и выхода (continuation points), которые изображаются при помощи квадратных скобок и являются «мостами» между листами диаграмм.

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

Общности: области и повторяющиеся (итеративные) области

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

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

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

Многократно используемые компоненты: потоковые области и ссылки на потоковые области

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

Подобная последовательность шагов называется поток (flow) и изображается на диаграмме при помощи двух символов: потоковой области (flow area), которая моделирует собственно процедуру  и ссылки на потоковую область (flow reference), которая представляет поток в разных контекстах на диаграмме. Оба элемента имеют одинаковую основную форму — прямоугольник с обрезанными углами (или, если хотите, вытянутый восьмиугольник).

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

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

  1.  Моделирование динамичной информационной системы

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

  •  система следит за состоянием своих атрибутов (attribute). Эти атрибуты могут иметь отношение к:
    •  пользователю (например, тип пользователя);
    •  сессии (например, статус пользователя в системе);
    •  типу содержания, к которому получен доступ;
    •  реальному миру (например, время и дата);
  •  атрибуты имеют значения (values) («3 Р.М.» одно из возможных значений атрибута «дата и время»);
  •  ассоциация атрибута с определенным значением называется условием (condition);
  •  система отслеживает (evaluates) изменения условий.

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

Чтобы диаграмма оставалась «чистой» условия, как правило, описываются либо в приложении, либо в легенде.

Точки принятия решений

Когда действие пользователя может сгенерировать несколько результатов, система должна решить, какой результат представить в ответ на действие (самый обычный пример такой логики — процедура обработки ошибок при работе пользователя с формой). На диаграмме такой момент изображается точкой принятия решения (decision point) в форме ромба. Заметим, что стрелки должны использоваться вместе с точками принятия решений, иначе будет непонятно, расположены ли следующие элементы диаграммы выше или ниже точки.

Условные связи и стрелки

Условная связь (conditional connector) изображается пунктирной линией, используется в случае, когда путь может быть либо представлен пользователю, либо нет, в зависимости от определенных условий.

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

Выбор «один из многих»: условные ветви

Когда система должна выбрать один путь из нескольких взаимно исключающих, используется символ условной ветви (conditional branch), на диаграмме изображается треугольником. Элементы диаграммы выше ветви соединяются с вершиной треугольника, элементы ниже — с основанием.

Пример на рисунке 14 на первый взгляд похож на пример, изображенный на рисунке 12, но поведение системы, моделируемое на рисунке 14, сильно отличается от поведения на рисунке 12. В точке принятия решения только один путь (или навигационный элемент) будет представлен пользователю; место, в которое пользователь будет перемещен в этом случае, определяется конкретным условием. На рисунке 14 система принимает похожее решение, но происходит это до того, как пользователь предпринял какие-либо действия. Условная ветвь показывает, что система принимает решение о том, какой путь представлять пользователю. Пути со страницы А на страницы B, C и D взаимно исключают друг друга, т.е. если существует путь B, то пути C и D нет.

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

Выбор «один или много»: условные селекторы

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

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

Одно решение, много путей: кластеры

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

Структура, изображенная на рисунке 16 функционирует как обычная условная ветвь, но для одного из условий мы представляем больше одного пути. То есть если значением атрибута станет «X» пользователь увидит путь на страницу B, а если значением будет «Y», то пользователь увидит пути на страницу C и D.

Ограничения: условные области

Когда одно или несколько условий применяется к группе страниц, эта группа изображается на диаграмме как условная область (conditional area) (прямоугольник с закругленными углами пунктирной линией).

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

  1.  Пример

Диаграмма (Рис. 18, 19, 20) для сайта «MetaFilter» (http://www.metafilter.com) является конкретным примером диаграммы информационной архитектуры и способов взаимодействия пользователя с веб-сайтом.



8.5. Схема сайта

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

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

Схему сайта можно нарисовать в одной из следующих форм:

  •  древовидная схема
    незаменима для показа иерархии (рис. 21). Тем не менее, быстро возникает нехватка горизонтального пространства. Для устранения этого, можно воспользоваться гребешковой схемой (см. следующий пункт).
  •  гребешковая схема
    полезна для протяженных рабочих областей (с большинством электронных документов лучше работать, если они растут в длину, а не в ширину) со структурной схемой скорее глубокой, чем широкой (рис. 22).
  •  звездообразная схема
    полезна, когда иерархия не является строгой, а структурная схема скорее широкая, чем глубокая. При глубокой структуре такую схему трудно строить, и она становится немного запутанной. Здесь важно вычерчивать ее очень тщательно, придавая элементам разных уровней различный вид (обычно это делается изменением размеров элементов) для передачи их иерархии, так как такая схема не так легко читается, как древовидная (рис. 23).
  •  схема с вкладками
    хорошо применима для схем с нечеткой иерархией и возможностью группировки элементов по их сходству. Она позволяет архитектору указывать наличие таких групп, не чувствуя, что он обязан создавать для каждой главную (обзорную) страницу. В древовидной схеме видна необходимость выделения для каждого уровня иерархии своей страницы, а в схеме с вкладками сходные элементы группируются без указания «главной» страницы (рис 24).

8.6. Логическая схема страницы

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

Как делается логическая схема

  1.  Вначале нарисуйте рамку в центре листа бумаги.
    1.  Добавьте глобальные элементы.
      1.  Добавьте в страницу уникальные элементы. Обозначайте следующее:
  •  степень их важности;
  •  какие из них динамические (если такие есть);
  •  являются ли они текстом или элементом графического интерфейса.
    1.  И, наконец, как можно больше примечаний. Представьте себе, что вы не будете стоять за спинами людей, просматривающих ваш документ. Представьте себе, что через 10 минут вы забыли о том, как смогли принять такие решения. Очевидное со временем становится неопределенным.


 

А также другие работы, которые могут Вас заинтересовать

26318. Абсолютизм в Западной Европе (на примере Англии, Франции, Испании) 64.42 KB
  В XIV в. Но все же парламент сыграл прогрессивную роль в политическом развитии Англии XIV – XVвв. Фронда Людовик XIII лишь несколькими месяцами пережил своего министра и престол перешёл к его сыну Людовику XIV 1643 1715 годы во время малолетства которого управляли мать его Анна Австрийская и кардинал Мазарини продолжатель политики Ришельё. Людовик XIV Дело кончилось победой кардинала Мазарини но молодой король вынес из этой борьбы крайне печальные воспоминания.
26319. Социально – экономичское и политическое развитие Нидерландов в п.п. XVI в. 29.97 KB
  XVI в. был создан тот трамплин отталкиваясь от которого Нидерланды осуществили поразивший современников динамичный прыжок в XVI столетие. На рынках Эклоо Гента Куртре к середине XVI в. В XVI в.
26320. Усиление феодально – католической реакции при Филиппе II. Назревание революционной ситуации 16.7 KB
  Усиление испанского гнета во второй половине XVI в. Филипп II c самого начала решил установить в Нидерландах бюрократическую систему испанского абсолютизма с целью полного экономического политического и религиозного подчинения страны. Для достижения этой цели испанское правительство наметило следующие мероприятия: увеличение количества испанских войск в стране; сосредоточение фактической власти в руках узкого состава государственного совета консульты членами которого были верные слуги испанского правительства придание епископам...
26321. Основные этапы Нидерландской буржуазной революции и их характерные особенности 25.61 KB
  В рамках усилий по созданию стабильного и надёжного правительства Нидерландов Филипп назначил Маргариту Пармскую штатгальтером Нидерландов. Он продолжил политику своего отца при назначении членов высшего дворянства Нидерландов в Государственный совет руководящий орган семнадцати провинций. Тем не менее уже в 1558 году штаты провинций и генеральный штат Нидерландов стали противоречить пожеланиям Филиппа возражая против его налоговой политики и требуя вывода испанских войск с юга Нидерландов. Несмотря на это к 1570 году испанцы в целом...
26322. Образование Республики Соединённых провинций 15.94 KB
  Образование Республики Соединённых провинций. Здесь Утрехтская уния заложила основы республики. военный перевес Республики Соединенных провинций и ее союзников над Испанией побудил последнюю начать мирные переговоры которые завершились в 1609 г. знаменовало победоносное завершение революции на севере страны и возникновение там первой в истории Европы и всего мира буржуазной республики.
26323. Англия в XVI в. Причины и последствия огораживаний 44.57 KB
  Англия в XVI в: Для Англии XVI век был временем капиталистической мануфактуры аграрного переворота и основания первых английских колоний. суконное производство в Англии являлось основной отраслью промышленности не только в городах но и в деревнях и небольших местечках. Создавались местные промышленные центры в различных графствах Англии. Широкие и тонкие сукна производились на югозападе и в центре Англии Уилтшир Сомерсетшир Глостершир и Оксфордшир.
26324. Экономические и социальные предпосылки английской революции 32.48 KB
  К середине XVII в. Уже в начале XVII в. Обработка шерсти в начале XVII в. Номенклатура только главных видов шерстяных изделий насчитывала в первой половине XVII в.
26325. олитическая борьба в Англии при первых Стюартах 32.82 KB
  Политическая борьба в Англии при первых Стюартах. Большая европейская война в которой принимали участие прямо или косвенно почти все государства Европы была выгодна для Англии. При этом особенно большие выгоды приносила Англии торговля с Испанией. Томас Уентворт был возведен в пэры Англии получил титул графа Страффорда и был назначен председателем Совета по управлению Севером а в 1633 г.
26326. Созыв Долгого парламента и начало Английской революции. Конституционный этап революции 15.19 KB
  Созыв Долгого парламента и начало Английской революции. Короткий парламент Годы беспарламентского правления 16291640 гг. Военные неудачи и недостаток средств вынудили Карла I созвать парламент. Этот парламент работавший с 13 апреля по 5 мая 1640г.