Маркетинг-Код, Сенсив-Код

Информационная архитектура сайта в диаграммах. Чертежи сайта

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

Как выглядит информационная архитектура сайта. Чертежи сайта

Этот материал опубликован в Маркетинг-Код, Сенсив-Код и тегирован , , , , , , , , , . Bookmark the permalink.

Один отзыв на Информационная архитектура сайта в диаграммах. Чертежи сайта

  1. Слава говорит:

    Хорошее предложения

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>