Wiki · Веб-разработка

Информационная архитектура

5 мин чтенияАвтор: Дарья СухихСоавторы: Евгений Баев

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

Простой пример. Магазин стройматериалов кладёт смесители в раздел «Инженерная сантехника», потому что так они записаны в учётной системе. Покупатель ищет их в разделе «Ванная» или вбивает в поиск «смеситель для кухни». Если ни меню, ни поиск его туда не приведут, он решит, что смесителей нет. Товар на складе есть, а на сайте его фактически нет.

Из чего состоит

В книге «Information Architecture for the World Wide Web» Луиса Розенфельда и Питера Морвилла, вышедшей в 1998 году, архитектуру разложили на четыре системы. Это деление используют до сих пор:

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

Четыре системы информационной архитектуры сайта: организация контента, названия разделов, навигация и поиск по сайту — Четыре системы информационной архитектуры

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

Сколько кликов допустимо

Часто вспоминают «правило трёх кликов»: любая страница должна быть доступна за три нажатия. Nielsen Norman Group пишет, что ни одно опубликованное исследование это правило не подтвердило. Человек спокойно сделает и больше кликов, если на каждом шаге уверен, что идёт правильно. Уверенность дают понятные названия разделов без размытых и фирменных слов, хлебные крошки, которые показывают, где он находится, и разделы, которые с каждым уровнем становятся конкретнее: «Сантехника», затем «Смесители», затем «Смесители для кухни». Считать клики бесполезно, полезно проверять, не сомневается ли человек на каждом шаге. Исключение одно: самое ходовое не прячут, и чем чаще товар ищут, тем ближе к меню он стоит.

Как связаны архитектура и SEO

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

Как проектируют архитектуру

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

Пять шагов проектирования информационной архитектуры: опись контента, язык клиентов, дерево разделов, проверка дерева и прототипы — Как проектируют архитектуру сайта

Для второго и четвёртого шагов есть два разных метода, и их часто путают. Сортировка карточек (card sorting) помогает найти группы: участники раскладывают карточки с названиями по стопкам, как им кажется логичным. В открытом варианте они сами придумывают названия групп, в закрытом раскладывают по готовым. Тестирование дерева (tree testing) проверяет уже готовую структуру: человеку показывают голое дерево разделов без дизайна и просят найти, где лежит нужное. Nielsen Norman Group называет первый метод генеративным, а второй оценочным. Подробнее о проверке на людях в статье Юзабилити-тестирование.

Что меняли в мобильном магазине стройматериалов и в кабинете на три роли

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

В личных кабинетах архитектура зависит ещё и от роли. В проекте кабинета на три роли администратор со стороны компании входит только в интерфейс администратора, а у администратора клиента и рядовых пользователей свои разделы и данные.

Как понять, что архитектура плохая

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

Сравнение информационной архитектуры сайта, удобной компании и удобной клиенту: разделы, названия, глубина и поиск — Структура для компании и для клиента

Архитектуру сайта проектируем в услуге UI/UX-проектирование, проверяем на прототипах и перестраиваем при редизайне сайта.

Кто проектирует структуру, как её проверить и когда перестраивать

Чем информационная архитектура отличается от карты сайта?

Карта сайта перечисляет страницы, а архитектура задаёт правила: как эти страницы сгруппированы, как подписаны и как между ними ходить. Карта, включая sitemap.xml для роботов, получается уже из готовой архитектуры.

Кто в команде проектирует информационную архитектуру?

UX-проектировщик или информационный архитектор, но вместе с маркетологом и SEO-специалистом: первый знает, как клиенты называют товары, второй сверяет разделы со спросом.

Чем сортировка карточек отличается от тестирования дерева?

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

Сколько уровней вложенности делать в каталоге?

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

Когда пора пересматривать структуру сайта?

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

Какие модели информационной архитектуры встречаются на сайтах?

Чаще всего три. Иерархическая вкладывает разделы друг в друга деревом. Линейная ведёт по шагам в заданном порядке, как оформление заказа. Фасетная позволяет отбирать нужное фильтрами по нескольким признакам сразу. На крупных сайтах их сочетают: каталог устроен деревом, корзина идёт линейно, а подбор товара работает через фильтры.

По каким признакам видно, что структура работающего сайта мешает покупателям?

Загляните в поиск по сайту: если там часто вводят то, что уже есть в меню, разделы подписаны или сгруппированы непонятно. Ещё два сигнала: на карте кликов нажатия размазаны по всем пунктам меню, а отдел продаж по телефону подсказывает, в каком разделе искать товар.

Почему «правило трёх кликов» считают мифом?

Его не подтвердило ни одно опубликованное исследование, на это указывает Nielsen Norman Group. Люди не бросают сайт на четвёртом нажатии, если каждый шаг подтверждает, что они идут верно. Поэтому вместо подсчёта кликов смотрят, на каком шаге посетитель начинает сомневаться.

При чём здесь семантическое ядро, если архитектура про удобство?

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

Как назвать разделы меню, чтобы их понимали с первого раза?

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

Источники

См. также: Семантическое ядро, Хлебные крошки, Перелинковка, Этапы разработки сайта.