Информационная архитектура сайта - как она создается?

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

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

Схемы организации

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

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

• Алфавитные схемы используют для организации контента алфавит. Эта схема довольно проста. Вы упорядочиваете контент в алфавитном порядке. Чтобы это было оптимально, контент должен соответствовать ключевым словам, по которым пользователь производит поиск. Иначе пользователь не сможет найти нужный ему контент. Поэтому алфавитный индекс часто используют в качестве второстепенного способа, дополняющего основные;
• Хронологические схемы - организуют контент по дате. Но определение того, к какому времени принадлежит контента, может быть спорным и субъективным. Чтобы этот тип схемы был оптимальным, нужно выбрать правильный промежуток времени;
• Географические схемы организуют контент по географии. Подобно алфавитным схемам, они часто используются в качестве дополнения к навигации по сайту. Конфликт возникает, если существует спорная ситуация, связанная с географическим местоположением.

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

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

• Тематические схемы - это субъективные схемы организации, которые упорядочивают контент на тематики. Они могут применяться, когда пользователь ищет конкретную тему и знает, какие ключевые слова необходимо ввести для поиска информации. Если при создании архитектуры сайта вы правильно разделяете контент по категориям на основе ключевых слов, его будет легко найти;
• Схемы метафор – контент распределяют, связывая его со знакомыми понятиями и идеями. По сути, контент организуется другим контентом, который логически связан с исходной информацией. Схемы метафор используются в дизайне интерфейсов, в том числе для построения структуры папок, корзины или других элементов. Но когда организация на сайте основана исключительно на схемах метафор, могут возникать проблемы. Этот метод организации больше подходит я в качестве дополнительной схемы;
• Схемы аудитории организуют контент в зависимости от типа аудитории, на которую он ориентирован. Этот тип схем может быть закрытым или открытым, и пользователи могут перемещаться от одной аудитории к другой. Но если тип аудитории идентифицируется не слишком легко, возникают проблемы, путаница, связанная с подбором аудитории для контента из множества подходящих вариантов;
• Целевые организуют контент на основе действий, потребностей, вопросов или процедур, которые пользователи будут учитывать при поиске контента, связанного с конкретными ключевыми словами. Эти схемы подходят для случаев, когда схема точно идентифицирует эти задачи. Можно провести исследование до организации контента, чтобы убедиться, что на сайте максимально точно охвачены вопросы, связанные с контентом.

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

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

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

Структуры организации

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

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

Иерархическая структура

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

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

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

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

Последовательные структуры

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

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

Структура матрицы

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

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

Каталоги контента

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

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

• Какие у вас цели? Для чего предназначен этот каталог? Записывая и разбираясь в значении всех этих беспорядочных элементов, вы четко поймете, что нужно сделать, чтобы достичь своей цели;
• Определитесь с объемом. Это даст представление о том, сколько контента должно быть включено в этот каталог. Рекомендуется начинать с малого объема.

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

• Заголовок;
• Уникальный идентификатор контента;
• URL-адрес на сайте;
• Формат файла: HTML, PDF, DOC или TXT;
• Автор;
• Физическое расположение контента (имеется в виду, где находится система управления контентом);
• Метаописание;
• Ключевые слова;
• Теги;
• Категории контента;
• Даты создания, изменения контента и так далее.

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

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

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

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

Одна из целей каталогизации контента - поддержка навигационной модели сайта. Это дает основу, с которой можно начать полный пересмотр навигации.

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

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

• Оценка общей ситуации на сайте;
• Определение графиков проекта и оценка стоимости проекта;
• Определение закономерностей в структуре контента;
• Определение базового уровня для отслеживания изменений.

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

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

Wireframing

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

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

Подход может быть полезен при разработке сайта по следующим причинам:

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

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

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

• Не используйте яркие цвета. Рекомендуется придерживаться серых тонов, если вы хотите выделить различия между частями контента. Если используете цвета, чтобы показать различие между двумя элементами, то оттенки серого цвета подойдут для этого лучше всего;
• Придерживайтесь одного шрифта. Если планируете использовать Comic Sans, возможно, вам придется пересмотреть свою типографику. Применяйте по возможности простые и распространенные шрифты. Но в самих Wireframes, если хотите подчеркнуть отличие заголовков и подзаголовков от обычного контента, используйте разные размеры одного шрифта;
• Не используйте в Wireframes изображения. Можно вставить их позже;
• При создании архитектуры сайта старайтесь избегать интерактивных функций. Поскольку Wireframes являются двухмерными, они не всегда хорошо обрабатывают интерактивные функции. Например, выпадающие меню, состояния наведения и аккордеоны.

В Wireframe рекомендуется включать следующие элементы:

• Логотип сайта.
• Поле или панель поиска;
• «Хлебные крошки» - эти элементы помогают пользователю определить, в какой части сайта он сейчас находится. Обычно это горизонтальные цепочки ссылок;
• Список сайтов;
• Заголовки, включая заголовок страницы с тегом H1 и подзаголовки с тегами H2-Hx;
• Меню навигации, включая глобальную и локальную навигацию;
• Основной контент;
• Кнопки социальных сетей, включая Facebook, Twitter и т. д.;
• Контактную информацию;
• Карту сайта;
• Футер сайта.

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

• Wireframes с низкой детализацией - разрабатываются быстрее и служат для оптимизации коммуникации и взаимодействия между участниками проекта. При низком уровне детализации точность отдельных элементов не играет роли, поэтому сами фреймы являются более абстрактными. Для обозначения доступных областей пространства используются простые изображения. Вы могли встречать подобные Wire frames, когда видели сайты наполнителем lorem ipsum вместо контента. Это говорит о том, что ресурс находится на стадии проектирования, а реальный контент будет добавлен позже;
• Wireframes с высокой детализацией - более подробны. Этот тип подходит для документации. Подобные Wireframes включают информацию о каждом элементе страницы. Например: поведение пользователя, размеры части контента, действия, связанные с любым интерактивным элементом.

Модель базы данных

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

Диаграммы сайтов

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

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

Что должно быть включено в диаграмму сайта:

• Данные об организации и структуры контента;
• Разделы и подразделы контента;
• Структурные отношения;
• Информацию о «глубине клика» или количестве кликов, необходимых для достижения определенной страницы;
• Тип страницы или шаблона: главная страница, страницы меню или внутренние страницы;
• Уровень доступа пользователя к сайту;
• Условия навигации;
• RSS-каналы или приложения;
• Внутренние и внешние ссылки.

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

Диаграммы сайтов могут создаваться с помощью Adobe Illustrator. Но для более специализированных диаграмм могут использоваться такие программы, как OmniGraffle, ConceptDraw или Microsoft Visio.

Создание стабильных структур

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

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

Заключение

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

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

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