Разработка информационной архитектуры (UX-архитектуры) сайта – пошаговая инструкция

Как правильно структурировать элементы меню? Какими должны быть пункты меню первого уровня? Одно или два меню? Как должны называться ссылки меню? Всё о создании информационной архитектуры проекта.

Обновлено: 16 июня 2023 • Автор: Денис Борисов • время чтения – 16 мин • просмотров – 1K

Как правильно структурировать элементы меню? Какими должны быть пункты меню первого уровня? Одно или два меню? Как должны называться ссылки меню? В этой статье вы найдете ответы на эти и другие вопросы.

Вы читаете перевод статьи «Website Information Architecture: How to Optimize for UX» от Пипа Лайа — основателя компании CXL и института CXL. Пип признанный чемпион по оптимизации конверсии, был номинирован как самый влиятельный эксперт по CRO в мире.

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

Информационная архитектура сайта — очень важная вещь, однако подавляющее большинство компаний структурируют свой сайт по методу «Я – художник, я так вижу». Даже если у вас небольшой сайт (например, 5 страниц), не стоит пренебрегать информационной архитектурой.

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

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

Информационная архитектура (UX-архитектура) — это совокупность процессов создания, наименования и организации структуры информации, которая помогает пользователю легко ориентироваться на сайте.

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

Гуру информационной архитектуры Луис Розенфельд и Питер Морвиль (вы должны прочитать их книгу) определили «три круга информационной архитектуры»‎: контент (содержание), пользователи и контекст использования.

Три круга информационной архитектуры

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

Когда пользователи приходят на сайт, у них возникает четыре основных вопроса:

  1. Нахожусь ли я в нужном месте?
  2. Есть ли у них то, что я ищу?
  3. Есть ли у них что-нибудь получше (если это не то, что мне нужно)?
  4. Что мне делать дальше?

Одна из ваших главных задач — эффективно ответить на эти вопросы. Для этого вам необходимо:

  • Убедить посетителей, что они находятся в нужном месте (четко указывайте, где они находятся).
  • Чтобы посетители легко находили то, что они ищут (понятная навигация, поиск и т. д.).
  • Предоставить посетителям другие варианты («смотрите также»‎ или «похожие товары»‎).
  • Дать посетителям возможность предпринять различные действия (четкие призывы к действию).

Показатели результативности информационной архитектуры

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

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

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

Инструкция по созданию информационной архитектуры

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

Вот как создать информационную архитектуру web-сайта по шагам:

  1. Сбор данных о пользователях и ответы на главные вопросы.
  2. Создание портрета клиента и написание пользовательских историй.
  3. Добавление страниц, пользовательских сценариев и метаданных архитектуры сайта.
  4. Сопоставление карты пути пользователя вместе с user flow*.
  5. Посоветуйтесь с командой: карты сайта, каркасные схемы.

User flow* — путь, пройденный пользователем на сайте или в приложении для достижения цели.

Подробно рассмотрим каждый шаг.

Шаг 1. Сбор данных о пользователях и ответы на главные вопросы

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

  • Какую проблему мы решаем?
  • Кому это нужно?
  • Для чего нужен этот сайт?

Чем раньше будут определены (и записаны!) цель и задачи, тем легче выявить и решить проблемы; тем легче оставаться сосредоточенными; тем лучше конечный результат.

Поговорите со своими пользователями. Лучше всего провести интервью (лично или по телефону), но онлайн-опросы тоже подойдут.

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

Шаг 2. Создание портрета клиента и написание пользовательских историй

Помните, что ваш сайт создан для определенной аудитории. Именно здесь на помощь приходит портрет клиента.

Портрет клиента — это основанный на фактах (результаты исследований), но вымышленный образ вашего клиента. Он представляет цели, мотивы, характеристики и поведение пользователей вашего сайта.

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

Пример портрета клиента

Портрет клиента — неотъемлемая часть создания информационной архитектуры. Вы не поймете как ее создать, пока не узнаете, для кого она

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

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

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

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

Шаг 3. Добавление страниц, сценариев использования и метаданных архитектуры сайта

Как только вы поймете пользователей вашего сайта (интент, причины и способы достижения цели), вы сможете поразмыслить над контентом – каким именно образом его представить, чтобы пользователям было интересно.

Ниже я расскажу, как это сделать.

Метаданные

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

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

Для этого необходимо определить, что волнует людей. Люди ищут кофемолки по размеру ножей? Цвету? Бренду? Знание параметров и переменных, которые будут размещены на вашем сайте, имеет решающее значения для получения корректных результатов поиска.

Метаданными для книги могут быть ее название, описание, автор, дата выхода, ISBN (International Standard Book Number), комментарии, изображение обложки и т.д.

Метаданные книги «Работа над ошибкой»

Метаданные книги «Работа над ошибкой»

Сценарии использования

Чтобы создать позитивный пользовательский опыт, подумайте о сценарии использования. Сценарий — это история о том, как пользователь вашего сайта выполняет определенные действия и достигает целей (например, бронирование авиабилета или покупка штанов для йоги).

Сценарии работают с персонами (пользователями). Они рассказывают о том, почему конкретный пользователь пришел на ваш сайт.

  • Чего пользователь хочет достичь на сайте?
  • Как сайт поможет ему выполнить поставленную задачу?
  • Что может вызвать затруднения?

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

Добавление страниц и контента

Прежде чем заниматься дизайном, подготовьте контент.

«Контент предшествует дизайну. Дизайн без контента — не дизайн, а украшение»‎.

Джеффри Зельдман

Определите количество необходимых страниц и их контент. Каждая страница выполняет две задачи:

  • Помогает пользователю выполнить конкретное действие.
  • Делает следующий шаг легкодоступным.

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

В целом, на вашем сайте будет три типа страниц:

  1. Навигационные страницы. Они помогают пользователям определить, где найти то, что им нужно, и предоставляют к этому доступ. Их цель — отправить пользователей «куда-нибудь еще»‎‎. Обычно это домашняя страница или страницы результатов поиска.
  2. Страницы потребления. Это страницы, на которые вы обычно переходите с навигационных страницы (статьи, видео, информация о ценах и так далее).
  3. Страницы взаимодействия. Эти страницы позволяют пользователям вводить данные и управлять ими (страницы поиска и форма регистрации).

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

Когда вы составляете карту сайта или сравниваете user flows, обратите внимание на то, является ли страница странницей навигации, страницей потребления или страницей взаимодействия.

Ненавязчивая помощь пользователю в нужный момент

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

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

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

Р. Стивен Грейси

Шаг 4. Составление карты пути пользователя вместе с user flow

Определив, какие страницы нужны на сайте, составляем оптимальную схему user flow.

При разработке user flow вам необходимо знать четыре способа поиска информации. Донна Спенсер написала отличную статью на эту тему. По ее словам, существует четыре способа:

  1. Поиск по известному предмету. Часто, когда люди точно знают, что они ищут и как это называется, они в основном используют поиск. Но некоторые предпочитают навигацию, поэтому она должна работать вместе с поиском и направлять людей туда, куда они хотят попасть.
  2. Исследовательский поиск. Иногда у пользователей есть потребность, но они не уверены, с помощью чего ее удовлетворить. Возможно, они ищут решение для ремаркетинга или новый ноутбук. Люди находят решение, но не знают, насколько оно им подходит (т. е. ищут варианты получше).
  3. Не знаю, что мне нужно знать. Иногда люди не знают того, что им нужно знать. Тот, кто хочет купить украшение с драгоценным камнем, должен разобраться в драгоценных металлах (обработка, чистота, твердость и другое). Они ищут что-то одно, но обнаруживают, что на самом деле им нужно знать о чем-то другом.
  4. Повторный поиск. Люди могут захотеть вернуться к тому, что они уже ранее находили. Если им понравилось что-то во время предыдущего посещения, сделайте так, чтобы это было легко найти снова (измените цвет посещенной ссылки; используйте корзину, которая сохраняет добавленные товары, даже если пользователь покинул сайт и т. д).

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

Шаг 5. Посоветуйтесь с командой: карты сайта, каркасные схемы

Вам нужно посмотреть на ситуацию под другим углом. Может быть, вы что-то упустили или недооценили важность чего-то. Вот почему вам необходимо проанализировать все это с коллегами по команде (или другими коллегами).

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

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

Создание оптимальной структуры меню сайта

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

Карточная сортировка

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

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

Пример карточной сортировки

Пример карточной сортировки

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

Последовательность проведения тестирования:

  1. Возьмите набор карточек (или стикеров) и на каждой из них напишите термин (название страницы, содержание). Каждая карточка представляет собой страницу (категорию) вашего сайта. Если вы занимаетесь торговлей электроники аудио- и видеопродукцией, вы можете написать «цифровые зеркальные фотоаппараты», «объективы Canon» или «DVD-плееры».
  2. Участники тестирования (ваши «идеальные» клиенты, которых вы выбрали), получают набор карточек с терминами.
  3. Первый испытуемый раскладывает карточки на логические группы и придумывает название категории для каждой их них.
  4. Действия повторяются с каждым участником.
  5. После того как упражнение проделано со всеми участниками тестирования, вы анализируете их результаты и ищете закономерности.

Существует три основных вида карточной сортировки:

  • «Открытая» карточная сортировка. Участники сами придумывает названия для созданных категорий и определяют, по какому признаку и как группировать. Это дает представление о том, как ваши клиенты мыслят и классифицируют предметы.
  • «Закрытая» карточная сортировка. Участникам предоставляется заранее определенный набор названий категорий. Их задача – распределить карточки по этим фиксированным категориям.
  • «Модифицированный метод Дельфи». Этот метод отличается от остальных. Участники сортируют карточки друг за другом, совершенствуя одну модель. Первый испытуемый выполняет традиционную сортировку открытых карточек. Последующие участники начинают с того, на чем остановился предыдущий. Они могут изменить организацию карточек (переименовать или реструктурировать) или начать все сначала. Вы повторяете процесс до тех пор, пока участники не перестанут вносить существенные изменения.
    Но есть риск: поскольку любой участник может начать все сначала, один из испытуемых может поставить под угрозу все исследование.
Модифицированный метод Дельфи

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

«Обратная» карточная сортировка

При данном методе тестирования вы создаете структуру меню (либо самостоятельно, либо на основе других результатов сортировки карточек), а затем предлагаете людям найти пункты в меню. Цель тестирования — доказать, что структура вашего сайта будет работать до того, как вы приступите к разработке пользовательского интерфейса.

Такая сортировка проводится на упрощенной версии структуры вашего сайта (без влияния средств навигации и визуального дизайна).

Пример «обратной» карточной сортировки

Пример «обратной» карточной сортировки: найти раздел с чехлами для смартфонов

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

Пример «обратной» карточной сортировки

Пример «обратной» карточной сортировки: чехлы для смартфонов находятся в разделе «аксессуары»

«Обратная» карточная сортировка подтверждает ваши предположения о структуре меню (или предлагает обратную связь для изменения структуры).

Карточная сортировка в онлайн-формате

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

Во время тестирования вы можете общаться с участниками через любой мессенджер (WhatsAppSkypeGoogle MeetZoom и др.). Обязательное условие — предварительная подготовка участников теста.

Инструменты, которые вы можете использовать для проведения тестирования:

Также эти инструменты помогут проанализировать результаты — вам не придется делать это вручную.

Анализ результатов карточной сортировки

На этом этапе часто возникают два вопроса.

Вопрос: Что если половина пользователей хочет найти страницу X в категории Y, а другая половина в категории Z?

Ответ: вполне нормально иметь одну и ту же ссылку в двух категориях, если это помогает людям найти нужную информацию.

Вопрос: Можно ли использовать полученные данные в качестве основы для структуры сайта?

Ответ: Лишь частично. Вы должны использовать результаты карточной сортировки в качестве руководства по организации и маркировке. Не стоит слепо использовать полученные данные в качестве фактической структуры сайта. Результаты карточной сортировки могут (и должны) быть дополнены дополнительными исследованиями пользователей и анализом задач.

Разрабатывая систему навигации, спросите себя:

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

О количестве участников

Туллис и Вуд (авторы известного исследования 2004 года) рекомендуют тестировать 20-30 пользователей для проведения тестирования. Однако Якоб Нильсен, основываясь на своих исследованиях, рекомендует тестировать только 15 пользователей (а в крупных проектах с большим финансированием — 30).

Тестирование с большим количеством людей дает большее понимание, но отдача от него снижается. При тестировании более 15 пользователей затраты часто оказываются неоправданными.

Основные принципы UX-дизайна навигации

Карточная сортировка поможет понять, как структурировать меню. Но что касается дизайна?

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

Они имеют четкие обозрачения, которые дают представление о том, что находится под ними.

Непонятные ссылки меню вызывают страх перед нажатием:

Кнопки навигационного меню

Кнопки навигационного меню

Кнопки меню «узнать больше» и «заказать сейчас» — довольно неудачные варианты. О чем я узнаю больше? Что я закажу?

Обеспечьте последовательную, надежную, понятную навигацию

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

На какую бы страницу вы не перешли на сайте HighTime Agency (агентство зарубежного SEO-продвижения), верхнее меню остается неизменным:

Верхнее меню на сайте HighTime Agency

Верхнее меню на сайте HighTime Agency

Расположение меню

Где расположить меню? Главное меню должно быть вертикальным или горизонтальным?

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

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

Установите четкую иерархию для глобальной и локальной навигации

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

Кроме того, существует локальная навигация (подменю), она располагается ниже глобальной. Это логично: глобальная навигация — главная категория, а локальная навигация — ее подкатегория.

Пример локальной и глобальной навигации

Пример локальной и глобальной навигации

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

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

Уровни навигации

Сколько должно быть уровней навигации? Столько, сколько вам нужно. Но постарайтесь сильно не перегружать навигационное меню. Некоторые сайты с большим количеством контента, например rendez-vous.ru имеют 4 уровня навигации:

Уровни навигации на сайте renvez-vous.ru

На сайте renvez-vous.ru представлено 4 уровня навигации

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

  • Microsoft Visio. Многие предпочитают его для составления диаграмм и планирования архитектуры сайта.
  • Lucidchart. Предлагает широкий набор функций: интеграция с другими приложениями, библиотека с поиском, возможность совместной работы над проектом.
  • Diagrams. net. Бесплатное приложение для построения диаграмм, моделей и схем. Программа позволяет хранить результаты работы в облаке, что обеспечивает возможность доступа к ним с любого устройства.
  • OmniGraffle. Инструмент, который выбирают многие UX-специалисты: диаграммы, схемы процессов, макеты страниц и сайтов. Доступно только для iOS и Mac.
  • Balsamiq Mockups. Отличный инструмент для быстрого создания схем. Практически не нужно ни в чем разбираться, чтобы начать работу, и мне нравится, что он фокусируется на общей картине, а не на мелких элементах дизайна.

Заключение

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

Я встречал утверждение, что «до 50% продаж» теряется из-за плохой навигации, но я не нашел исследования, подтверждающего это. Тем не менее хорошая навигация крайне важна.

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

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

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

Хотите продвинуть ваш B2B/SaaS проект? Забронируйте 1:1 SEO-strategy call 🚀

HighTime Agency — любим амбициозные SEO-проекты c большой аналитической проработкой. Продвигаем сайты на рынках России, США, Европы, Латама и APAC.

Читать еще 3 статьи про продвижение SaaS-продуктов 👇

Продажи — 16 Мин читать

Прайсинг в SaaS: модели ценообразования для Tech-продуктов

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

Продукт — 38 Мин читать

Как создать SaaS продукт с доходом в $100М+: 4 пошаговых фреймворка стратегии роста [+примеры]

Почему “просто создать классный продукт” — это не стратегия на 100 миллионов долларов? Что, кроме product-market fit, можно и нужно просчитать, чтобы выйти на $100M+ ARR? 4 практических фреймворка роста от основателя и CEO Reforge Брайана Бальфура.

Инвестиции — 14 Мин читать

Как привлечь посевные (seed) инвестиции в стартап: руководство от Y Combinator 

Экс-президент венчурного фонда Y Combinator Джефф Ралстон рассказывает, сколько денег можно поднять в первом раунде, во что охотно вкладываются инвесторы, как заинтересовать их проектом и не потратить на это годы жизни.