5 примеров эффективной информационной архитектуры
Информационная архитектура (ИА) является неотъемлемой частью процесса разработки веб-сайта и цифрового продукта. Это близкие родственники дизайна пользовательского опыта (UX), поскольку обе области тесно взаимодействуют друг с другом, создавая основу для цифрового (и физического) взаимодействия.
IA информирует о дизайне интерфейсов, определяя структуру и номенклатуру сайта. На ранних этапах IA и UX отличаются друг от друга в результатах. Там, где UX может предоставлять каркасы и макеты, IA приводит к электронным таблицам с документированным контентом, и они вместе создают блок-схемы для отображения контента и окружающего опыта.
Здесь мы рассмотрим несколько примеров эффективной информационной архитектуры и рассмотрим, какие типы результатов могут помочь сформировать информационную систему, стоящую за веб-сайтом или продуктом.
Карта сайта
Важной частью разработки эффективной информационной архитектуры является дизайн карты сайта. В этом примере от Nielsen Norman Group контент их веб-сайтов отображается в иерархическом порядке, чтобы продемонстрировать родительские / дочерние отношения контента.
Используя цвет (синий для 1-го уровня, зеленый для 2-го, желтый для 3-го), они могут создать визуальную иерархию страниц, которая будет информировать навигацию и структуру URL. Информационная архитектура, отображаемая в этой карте сайта, не имеет прямого отношения к навигации по веб-сайту, но будет информировать ее с пониманием иерархии страниц.
Инвентаризация и аудит контента
Если вы работаете с существующим веб-сайтом или переходите с него на новый ресурс, полезно провести аудит контента. Со временем контент будет накапливаться, и если он не будет напрямую доступен в поиске или навигации, он может потеряться в беспорядке. Аудит вашего существующего контента поможет вам понять, что связано, что существует и что привлекает больше всего трафика. Составление схемы URL-адресов вашего контента и сканирование веб-сайта могут предоставить вам полезную информацию, которая послужит основой для вашей новой карты сайта и информационной архитектуры.
Аудит контента может быть задокументирован с помощью любого удобного для вас инструмента, будь то электронная таблица, как в примере выше. Если вы планируете проводить более сложный анализ и отслеживание, загрузка вашего контента в более динамичный инструмент, такой как Airtable, может помочь вам создать связи между контентом, источником и автором.
Схема информационной архитектуры
Составление схемы вашей информационной архитектуры — важная часть визуализации и понимания всего, что с ней связано. Во многом в том же формате, что и карты сайта, мы можем создавать визуализации нашей информационной архитектуры и отображать то, что будет видно пользователю, и какие действия должны быть доступны на серверной части. Тогда мы сможем увидеть целостную картину нашего веб-сайта или продукта.
В этом визуальном сопоставлении для продукта промышленной аналитики Егор включает представления приложений, всплывающие окна и предупреждения, а также объясняет, какие данные или информация потребуются для заполнения представлений.
Примеры информационной архитектуры, подобные этому, демонстрируют ценность отображения или диаграммы для согласования заинтересованных сторон во многих командах. Этот документ создает диалог между разработчиками, занимающимися дизайном, проектированием, управлением продуктом и копирайтингом, и это лишь некоторые из них.
Простая древовидная структура для клиентов
В этом примере информационной архитектуры Богомолова построила поверх базового сопоставления сайта и добавила как дочерние страницы, так и действия. Добавление числовых значений обозначает приоритет страниц в информационной иерархии, а не цветовое решение.
Как видите, страница или функция «Добавить новую» имеет дочерний раздел, но не являются конкретными страницами, а представляют собой группу возможных действий, которые могут быть выполнены из этого узла. Таким же образом в разделе «Профиль» функция «Редактировать» содержит список доступных действий для редактирования.
Как и в приведенном выше промышленном примере, вызов этих важных фрагментов информации может прояснить потребности и требования к проектированию и дизайну, чтобы они понимали, что необходимо учитывать в этих конкретных разделах страницы.
Визуальное представление действий
Если все сделано правильно, ваша информационная архитектура и карты пути пользователя будут иметь общие черты. Оба они информируют друг друга по-разному, а предполагаемый путь пользователя помогает сформировать то, как вы структурируете и организуете информацию на своем веб-сайте.
В этом примере информационной архитектуры Педро разместил свои страницы в формате, аналогичном приведенному выше. Ключевое отличие состоит в том, что есть визуальные характеристики, которые отделяют страницы от действий.
Поля, в которой происходят действия, имеют пунктирную границу, чтобы обозначить некоторый уровень взаимодействия, а не статическую страницу. Он идет дальше и в некоторых действиях, таких как «Сведения о открытке», он включает другие возможные действия, которые, возможно, необходимо выполнить, в данном случае действие «Отправить повторно», когда сведения не были получены или их необходимо обновить.
В зависимости от стадии вашего развития, независимо от того, есть ли у вас существующий контент для работы или вы начинаете с нуля, ваши потребности в информационной архитектуре будут меняться. Надеюсь, эти примеры послужат вдохновением для того, как вы можете структурировать свой собственный IA и визуализировать содержимое вашего веб-сайта.
Что нужно учитывать
Помните следующее при создании схем информационной архитектуры, инвентаризации контента или сопоставления сайтов.
- Поймите свою аудиторию. Разработка информационной архитектуры вслепую, без участия или понимания целевой аудитории может привести вас к созданию структуры и организации, которые не имеют смысла для этой группы.
- Используйте для согласования команд: если вы работаете кросс-функционально, помните о таких вещах, как требования к данным, действиях и шаблонах страниц, и включите их в свою архитектуру, чтобы стимулировать дискуссии в вашей организации.
Сделайте то, что вам нужно: может быть много пересечений и путаницы между картами сайта, маршрутами пользователей и диаграммами информационной архитектуры. Все они по-разному связаны, и если вы не уверены, что именно вам нужно, создайте это так, чтобы оно соответствовало потребностям вашей команды. Как мы видели, все эти диаграммы были разными, но подходили для той цели, для которой они были предназначены.
Original article by: Matt Rae
