Организация сайта с помощью методов информационной архитектуры

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

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

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

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

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

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

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

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

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

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

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

Проблема при данной стратегии может возникнуть, если она не будет реализована должным образом, и посетители начнут путаться при попытке найти содержимое. Если вы не уверены на 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.

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

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

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

Заключение

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

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

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

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