Информационная архитектура
Как спроектировать продукт так, чтобы пользователю было удобно в нем навигироваться и вы получали дополнительный трафик из поисковиков
Содержание:
Что такое информационная архитектура
Информационная архитектура – это своего рода карта для контента и функционала в вашем приложении или на сайте.
Представьте, что у вас есть куча разных разделов, футер с полезными ссылками, поиск, личный кабинет и ещё несколько вкладок.
Всё это нужно разложить так, чтобы человеку было сразу понятно, где что находится и куда нажать.
В практике это выглядит примерно так:
1 Сначала выясняется, какие главные задачи пользователь решает в вашем продукте.
Если это интернет-магазин, то пользователю нужно быстро найти товар, узнать о нём подробности и оформить заказ.
2 Дальше формируются основные разделы или категории и продумываются названия пунктов меню.
Главное – не креативить там, где человек ждёт понятные слова вроде «Каталог» или «Мой профиль».
3 Затем определяются второстепенные, но важные элементы: например, кнопка «Помощь» или «Обратная связь» и место, где их разместить, чтобы они не затерялись.
Идея в том, чтобы человек не путался.
Если всё разбросано по разным уровням меню, придётся делать кучу кликов, и в итоге пользователь может просто бросить это занятие.
Чем проще выстроена логика, тем быстрее люди находят то, что им нужно.
Обычно информационную архитектуру сначала кладут на бумагу или в какую-то схему (даже в обычных диаграммах), показывают команде и в идеале реальным пользователей.
Если тестируют интернет-магазин, то просят участника:
«Попробуйте найти кроссовки вашего размера и добавьте в корзину».
Если человек тратит кучу времени, кликая всё подряд, или говорит «Я не понимаю, где это искать», значит, нужно менять структуру или названия разделов.
Представьте, что у вас есть куча разных разделов, футер с полезными ссылками, поиск, личный кабинет и ещё несколько вкладок.
Всё это нужно разложить так, чтобы человеку было сразу понятно, где что находится и куда нажать.
В практике это выглядит примерно так:
1 Сначала выясняется, какие главные задачи пользователь решает в вашем продукте.
Если это интернет-магазин, то пользователю нужно быстро найти товар, узнать о нём подробности и оформить заказ.
2 Дальше формируются основные разделы или категории и продумываются названия пунктов меню.
Главное – не креативить там, где человек ждёт понятные слова вроде «Каталог» или «Мой профиль».
3 Затем определяются второстепенные, но важные элементы: например, кнопка «Помощь» или «Обратная связь» и место, где их разместить, чтобы они не затерялись.
Идея в том, чтобы человек не путался.
Если всё разбросано по разным уровням меню, придётся делать кучу кликов, и в итоге пользователь может просто бросить это занятие.
Чем проще выстроена логика, тем быстрее люди находят то, что им нужно.
Обычно информационную архитектуру сначала кладут на бумагу или в какую-то схему (даже в обычных диаграммах), показывают команде и в идеале реальным пользователей.
Если тестируют интернет-магазин, то просят участника:
«Попробуйте найти кроссовки вашего размера и добавьте в корзину».
Если человек тратит кучу времени, кликая всё подряд, или говорит «Я не понимаю, где это искать», значит, нужно менять структуру или названия разделов.
Как создать информационную архитектуру
Пример информационной архитектуры (Источник)
Сначала определяются задачи, которые пользователи решают в продукте.
Это помогает понять, какие основные разделы и пункты меню нужны. Затем собираются все материалы: страницы, контент, функции и прочее.
Всё это раскладывается на столе (можно буквально записать на стикерах или использовать электронную доску) и группируется по темам.
Также группировку можно сделать в зависимости от сущности к которой это привязано (пользователь/заявка/заказ/товар и т.д)
Когда основные группы сформированы, делается предварительный набросок структуры: какие разделы будут наверху, какие можно убрать в подменю, что точно стоит вынести на главный экран.
Часто это рисуется в виде схемы или mindmap.
Важно, чтобы каждый раздел был чётко определен и имел логичное название.
Используйте максимально знакомые для пользователя термины - мой профиль (а не например личная карточка), Заказы (а не покупки) и т.д.
После этого набросок показывают нескольким реальным людям или коллегам, которые не были в контексте архитектуры.
Предлагают им выполнить пару сценариев например, найти нужный товар или настроить уведомления.
Если кто-то запутался или сказал: "А где тут раздел для...?" – значит, названия или расположение надо менять.
Так постепенно вносятся правки: где-то переименовывают разделы, что-то упрощают или переносят.
Этот процесс повторяется до тех пор, пока не получается схема, по которой участники теста легко ориентируются.
Когда все согласны, что логика понятна, эту структуру фиксируют и начинают на ее основе проектировать и саму систему и базы данных.
Это помогает понять, какие основные разделы и пункты меню нужны. Затем собираются все материалы: страницы, контент, функции и прочее.
Всё это раскладывается на столе (можно буквально записать на стикерах или использовать электронную доску) и группируется по темам.
Также группировку можно сделать в зависимости от сущности к которой это привязано (пользователь/заявка/заказ/товар и т.д)
Когда основные группы сформированы, делается предварительный набросок структуры: какие разделы будут наверху, какие можно убрать в подменю, что точно стоит вынести на главный экран.
Часто это рисуется в виде схемы или mindmap.
Важно, чтобы каждый раздел был чётко определен и имел логичное название.
Используйте максимально знакомые для пользователя термины - мой профиль (а не например личная карточка), Заказы (а не покупки) и т.д.
После этого набросок показывают нескольким реальным людям или коллегам, которые не были в контексте архитектуры.
Предлагают им выполнить пару сценариев например, найти нужный товар или настроить уведомления.
Если кто-то запутался или сказал: "А где тут раздел для...?" – значит, названия или расположение надо менять.
Так постепенно вносятся правки: где-то переименовывают разделы, что-то упрощают или переносят.
Этот процесс повторяется до тех пор, пока не получается схема, по которой участники теста легко ориентируются.
Когда все согласны, что логика понятна, эту структуру фиксируют и начинают на ее основе проектировать и саму систему и базы данных.
Примеры информационной архитектуры
Netflix
На главной странице сразу видно кнопку «Войти» и поле для регистрации.
После входа пользователь видит ленту с категориями (например, «Популярное», «Комедии», «Сериалы»).
Навигация простая: сверху есть меню «Главная», «Сериалы», «Фильмы», «Новинки».
При выборе категории лента фильмов прокручивается, и можно щёлкнуть на нужный постер.
Каждый фильм или сериал открывается на своей странице.
Там есть описание, список серий (если сериал), кнопка «Смотреть» и похожие рекомендации.
Вся логика:
Главная страница –> Категория –> Карточка фильма –> Просмотр или список похожих.
Всё достаточно просто и линейно.
На главной странице сразу видно кнопку «Войти» и поле для регистрации.
После входа пользователь видит ленту с категориями (например, «Популярное», «Комедии», «Сериалы»).
Навигация простая: сверху есть меню «Главная», «Сериалы», «Фильмы», «Новинки».
При выборе категории лента фильмов прокручивается, и можно щёлкнуть на нужный постер.
Каждый фильм или сериал открывается на своей странице.
Там есть описание, список серий (если сериал), кнопка «Смотреть» и похожие рекомендации.
Вся логика:
Главная страница –> Категория –> Карточка фильма –> Просмотр или список похожих.
Всё достаточно просто и линейно.
Amazon
На главной странице сразу большая поисковая строка, чтобы искать товары.
Рядом с ней кнопки «Аккаунт», «Список желаний» и «Корзина».
Ниже идёт подборка популярных категорий («Одежда», «Электроника», «Книги»).
При клике на категорию открывается страница списка товаров. Там можно фильтровать по бренду, цене или рейтингу.
У каждого товара своя карточка с описанием, фото, отзывами, кнопкой «Добавить в корзину».
После добавления в корзину пользователь видит кнопку "Перейти к оформлению"
Здесь основная цепочка:
«Главная –> Поиск или выбор категории –> Страница товара –> Корзина –> Оформление заказа».
Всё заточено на быструю покупку.
На главной странице сразу большая поисковая строка, чтобы искать товары.
Рядом с ней кнопки «Аккаунт», «Список желаний» и «Корзина».
Ниже идёт подборка популярных категорий («Одежда», «Электроника», «Книги»).
При клике на категорию открывается страница списка товаров. Там можно фильтровать по бренду, цене или рейтингу.
У каждого товара своя карточка с описанием, фото, отзывами, кнопкой «Добавить в корзину».
После добавления в корзину пользователь видит кнопку "Перейти к оформлению"
Здесь основная цепочка:
«Главная –> Поиск или выбор категории –> Страница товара –> Корзина –> Оформление заказа».
Всё заточено на быструю покупку.
Построение информационной архитектуры пошагово
Подробные лекции, где разбирается что такое информационная архитектура и как ее надо можно построить.
Как вам материалы?
Об авторе:
Еще материалы по теме продакт менеджмента: