Информационная архитектура — основа любого веб-сайта

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

Информационная архитектура (IA) широко распространена в интранете и при разработке систем баз данных, также этот термин часто встречается в связи с дизайном микросхем. Первое упоминание термина «архитектура» применительно к информационным технологиям относится к 1959 году. Фредерик П. Брукс и Лайл Джонсон объяснили структуру суперкомпьютера stretch, используя термин thieterm. Затем Ричард Сол Вурман ввел термин «информационный архитектор» в 1976 году в лекции, которую он прочитал в Американском институте архитекторов в Вашингтоне, округ Колумбия. Однако фактическое происхождение этой области лежит в библиотечном деле: категоризация и архивирование информации, а также ее доступность являются основными структурными элементами библиотечной системы и также используются в ИА.

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

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

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

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

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

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

Информационная архитектура представлена на приведенном выше примере двух интернет-магазинов. Если сайт Master Gardener (MG) решил искать ключевые слова по трем основным категориям, то сайт Master Baker (MB) имеет пять разнородных тематических групп. Поскольку у MG меньше основных категорий, они более обширны. Путь от основной категории до страницы продукта проходит через несколько этапов, которые сокращают тематическую область. Чтобы перейти от домена к продукту, необходимо сделать всего четыре клика. Поисковые системы больше не просматривают все подкатегории сайта, поскольку это отнимает слишком много времени. Поэтому страницы товаров, на которых представлены основные предложения сайта, редко учитываются при ранжировании. 

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

При этом также учитывается, что пользователи могут обращаться к информации по разным причинам. Путь: Master baker à Ingredients à Candy melts предполагает, что может быть сделана более крупная покупка, включающая ароматизаторы и другие ингредиенты в дополнение к сахарному продукту. Путь Мастер-пекарь à Глазурь и айсинг à Candy melts, с другой стороны, фокусируется на поиске различных продуктов, которые окружают выпечку.

Благодаря информационной архитектуре сайта MB, навигация для поиска нужного продукта может осуществляться двумя способами. Это означает, что страница с информацией о Candy melts может быть найдена интуитивно для пользователей с разными подходами. Третий способ — через функцию поиска, встроенную в сайт. Этим способом пользуются в основном те посетители, которые уже имеют в виду конкретный продукт и хотят перейти непосредственно на страницу продукта. Еще один способ — прямой переход на страницу Candy melts, поскольку она отображается в поисковых системах как результат поиска, когда пользователи ищут именно этот продукт.

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

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

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

Категория «Выпечка» получает идентификатор страницы 1.0. Идентификаторы подкатегорий «формы для кексов», «формы для тортов» и т.д. имеют обозначения 1.n. Подкатегория «формы для кексов» выделена, поскольку в примере показана соответствующая страница категории. Поля изображений справа относятся к страницам отдельных продуктов с идентификаторами страниц 1.1.1 — 1.1.12. Нумерация отражает иерархию внутри категорий, которая делает проволочный каркас практически невидимым. Макет переходит от основных категорий слева к подкатегориям в середине и к отдельным продуктам справа.

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

Маркировка ссылок позволяет фиксировать назначение каждой подстраницы. URL должен быть наглядным, поэтому старайтесь использовать главное ключевое слово каждой страницы. Начните с доменного имени, которое должно быть как можно более коротким и запоминающимся. Как представителю бренда, лучше всего выбрать имя, связанное с темой, в идеале — с главным ключевым словом. В нашем примере «Формы для кексов» домен («мастер-пекарь»), основная категория («формы для выпечки») и подкатегория («формы для кексов») образуют прочную структуру для маркетинговой ссылки https.www.masterbaker.com/bakingmoulds/muffinmoulds. Такой статический URL не меняется по мере обновления контента, в отличие от динамического URL.

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

Бывает трудно найти свежий, новый домен, который еще не занят, особенно для сайта, посвященного теме, имеющей высокий объем поиска. Существуют различные способы приобретения домена. Если доменное имя, которое вы ищете, уже занято, вы можете предложить купить его у нынешнего владельца. Больше советов о доменах вы найдете в «Цифровом руководстве IONOS».

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

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

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

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

                Пример: masterbaker.com/Glazing-Icing/Candy-Melts/.

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