Продвижение SaaS-продуктов
Как правильно структурировать элементы меню? Какими должны быть пункты меню первого уровня? Одно или два меню? Как должны называться ссылки меню? Всё о создании информационной архитектуры проекта.
Содержание
Как правильно структурировать элементы меню? Какими должны быть пункты меню первого уровня? Одно или два меню? Как должны называться ссылки меню? В этой статье вы найдете ответы на эти и другие вопросы.
Вы читаете перевод статьи «Website Information Architecture: How to Optimize for UX» от Пипа Лайа — основателя компании CXL и института CXL. Пип признанный чемпион по оптимизации конверсии, был номинирован как самый влиятельный эксперт по CRO в мире.
Для кого статья: основатели, CMO, менеджеры по маркетингу и менеджеры по развитию проектов, которые хотят повысить конверсию продаж за счёт привлечения органического трафика на сайт и улучшения юзабилити.
Информационная архитектура сайта — очень важная вещь, однако подавляющее большинство компаний структурируют свой сайт по методу «Я – художник, я так вижу». Даже если у вас небольшой сайт (например, 5 страниц), не стоит пренебрегать информационной архитектурой.
Если на вашем сайте уже есть несколько десятков страниц, я рекомендую провести несколько исследований и хорошенько подумать над UX-архитектурой, чтобы люди могли легко ориентироваться в огромном количестве информации на сайте. Интуитивно понятная навигация не возникает случайно.
Содержание
Информационная архитектура (UX-архитектура) — это совокупность процессов создания, наименования и организации структуры информации, которая помогает пользователю легко ориентироваться на сайте.
Она применяется к сайтам, интранетам, ПО, книгам и другим носителям информации. Мы можем упростить ее обозначение до «искусства и науки организации сайта». В этой статье мы поговорим о ней только в контексте сайтов.
Гуру информационной архитектуры Луис Розенфельд и Питер Морвиль (вы должны прочитать их книгу) определили «три круга информационной архитектуры»: контент (содержание), пользователи и контекст использования.
Речь идет об организации контента и посещаемости сайта, основанные на исследовании и планировании. Цель информационных архитекторов — разработать структуру и дизайн, которые сочетают в себе желания пользователей и потребности бизнеса.
Когда пользователи приходят на сайт, у них возникает четыре основных вопроса:
Одна из ваших главных задач — эффективно ответить на эти вопросы. Для этого вам необходимо:
Интересуетесь свежими материалами по продвижению SaaS-продуктов?
Подписывайтесь на канал Secret Growth в Telegram
Цель — разработать информационную структуру веб-сайта. В показатели результативности входят карты сайта, диаграммы действий пользователей, интерактивные каркасы, чтобы показать, как сайт будет работать с практической точки зрения.
Архитектура сайта определяет общую картину, организуя контент для поддержания действий, которые пользователи хотят выполнить. Она должна включать в себя даже такие мелочи, как, например, решение, о том, что товар на странице поиска должен быть упорядочен по цене, а не по названию.
Все это основывается на исследованиях и данных. Существует несколько способов построения правильной информационной архитектуры сайта. Ниже представлен метод, которым я пользуюсь на протяжении многих лет.
Вы достигаете своих бизнес-целей, когда помогаете клиентам достичь их целей. Это возможно только в том случае, если вы полностью понимаете цели, проблемы и стремления ваших пользователей.
Вот как создать информационную архитектуру web-сайта по шагам:
User flow* — путь, пройденный пользователем на сайте или в приложении для достижения цели.
Подробно рассмотрим каждый шаг.
Важно попытаться представить о чем думает пользователь. Прежде чем приступить к работе над UX-архитектурой, необходимо знать ответы на следующие вопросы:
Чем раньше будут определены (и записаны!) цель и задачи, тем легче выявить и решить проблемы; тем легче оставаться сосредоточенными; тем лучше конечный результат.
Поговорите со своими пользователями. Лучше всего провести интервью (лично или по телефону), но онлайн-опросы тоже подойдут.
Цель — понять, чего хотят ваши пользователи и почему они этого хотят. Ожидайте, что у них могут быть разные намерения и сценарии использования.
Помните, что ваш сайт создан для определенной аудитории. Именно здесь на помощь приходит портрет клиента.
Портрет клиента — это основанный на фактах (результаты исследований), но вымышленный образ вашего клиента. Он представляет цели, мотивы, характеристики и поведение пользователей вашего сайта.
Вот пример портрета клиента. Фотография человека помогает нам представить реального клиента, который будет пользоваться нашим сайтом.
Портрет клиента — неотъемлемая часть создания информационной архитектуры. Вы не поймете как ее создать, пока не узнаете, для кого она
Следующее действие — связать сценарии использования с портретом клиента. Сценарии использования — это простой способ определить и описать цель проекта. Они состоят из двух компонентов: пользователи и цели.
Пользователи — это люди, использующие сайт. Цели — это то, чего хочет добиться один, несколько, или группа клиентов. Каждый сценарий использования должен иметь:
Целями могут быть: прочитать статью в блоге, проверить баланс счета, записаться на прием, загрузить ПО, пройти тест и так далее. Сценарии использования определяют цель и назначение: проблему, которую мы пытаемся решить. (Это также первый шаг к повышению пожизненной ценности клиента).
Как только вы поймете пользователей вашего сайта (интент, причины и способы достижения цели), вы сможете поразмыслить над контентом – каким именно образом его представить, чтобы пользователям было интересно.
Ниже я расскажу, как это сделать.
Метаданные — это информация об информации. Это то, что помогает пользователям найти нужный контент.
Допустим, вы собираетесь купить кофемолку и заходите на сайт, который их продает. Если вы просматриваете сайт и не можете найти кофемолку, это признак плохих метаданных. Если вы правильно настроите метаданные, вы преодолеете первое препятствие на пути к эффективному дизайну сайта.
Для этого необходимо определить, что волнует людей. Люди ищут кофемолки по размеру ножей? Цвету? Бренду? Знание параметров и переменных, которые будут размещены на вашем сайте, имеет решающее значения для получения корректных результатов поиска.
Метаданными для книги могут быть ее название, описание, автор, дата выхода, ISBN (International Standard Book Number), комментарии, изображение обложки и т.д.
Метаданные книги «Работа над ошибкой»
Чтобы создать позитивный пользовательский опыт, подумайте о сценарии использования. Сценарий — это история о том, как пользователь вашего сайта выполняет определенные действия и достигает целей (например, бронирование авиабилета или покупка штанов для йоги).
Сценарии работают с персонами (пользователями). Они рассказывают о том, почему конкретный пользователь пришел на ваш сайт.
Сосредоточьтесь на пользователях и их задачах, а не на организации и внутренней структуры сайта. Таким образом, вы поймете, какой контент должен быть на сайте и как он должен быть организован.
Прежде чем заниматься дизайном, подготовьте контент.
«Контент предшествует дизайну. Дизайн без контента — не дизайн, а украшение».
Джеффри Зельдман
Определите количество необходимых страниц и их контент. Каждая страница выполняет две задачи:
Во время разработки сайта необходимо убедиться, что пользователю с легкостью удастся совершить любое действие на сайте. Каждая страница сайта должна помогать пользователю выстраивать цепочку выполненных действий.
В целом, на вашем сайте будет три типа страниц:
Каждый тип страницы оптимизирован под разные задачи пользователя. Понимание того, какой тип страниц вам нужен, поможет вам адаптировать дизайн интерфейса.
Когда вы составляете карту сайта или сравниваете user flows, обратите внимание на то, является ли страница странницей навигации, страницей потребления или страницей взаимодействия.
Некоторые страницы просты в использовании, некоторые требуют некоторого объяснения. Запланируйте текст помощи и микрокопии, чтобы при необходимости помочь пользователю разобраться.
Информация должна предлагаться в контексте. Предоставляйте ответы на вопросы, связанные с бронированием, на странице, где пользователи бронируют. Не желательно размещать отзывы и часто задаваемые вопросы (FAQ) на отдельных страницах, если они отвечают на реальные вопросы и не являются инструментом продаж. Лучше разместите эту информацию там, где она будет актуальна — на странице товара или услуги.
«Хороший раздел с часто задаваемыми вопросами — это как страховка для ваших пользователей: он нужен им, но, надеюсь, никогда не понадобится».
Определив, какие страницы нужны на сайте, составляем оптимальную схему user flow.
При разработке user flow вам необходимо знать четыре способа поиска информации. Донна Спенсер написала отличную статью на эту тему. По ее словам, существует четыре способа:
За качество информации, которую находит пользователь тем или способом, отвечают определенные навигационные инструменты.
Вам нужно посмотреть на ситуацию под другим углом. Может быть, вы что-то упустили или недооценили важность чего-то. Вот почему вам необходимо проанализировать все это с коллегами по команде (или другими коллегами).
Используйте эскизы, диаграммы, карты сайта и каркасные схемы, чтобы поделиться идеями и предложениями.
Соберите замечания, проведите итерации и переходите к планированию структуры сайта.
Интуитивно понятная навигация не возникает случайно. Ниже представлены методы исследования и тестирования, применяемые UX-специалистами для создания удобной информационной архитектуры, рабочих процессов, структуры меню или путей навигации по сайту.
Когда на сайте много страниц, их необходимо разделить на категории. Карточная сортировка — это метод, используемый для разработки UX-архитектуры сайта. Она позволяет сформировать структуру меню или каталога товаров на сайте.
Для проведения карточной сортировки участники получают настоящие карточки, листы бумаги или используют соответствующее онлайн-приложение.
Пример карточной сортировки
Это надежный метод поиска закономерностей в том, как пользователи ожидают найти нужную информацию.
Последовательность проведения тестирования:
Существует три основных вида карточной сортировки:
«Модифицированный метод Дельфи» позволяет участникам переименовать, реструктурировать или начинать заново сортировку карточек. Процесс продолжается до тех пор, пока не будет достигнут консенсус
При данном методе тестирования вы создаете структуру меню (либо самостоятельно, либо на основе других результатов сортировки карточек), а затем предлагаете людям найти пункты в меню. Цель тестирования — доказать, что структура вашего сайта будет работать до того, как вы приступите к разработке пользовательского интерфейса.
Такая сортировка проводится на упрощенной версии структуры вашего сайта (без влияния средств навигации и визуального дизайна).
Пример «обратной» карточной сортировки: найти раздел с чехлами для смартфонов
В этом примере пользователь перемещается по структуре меню, пока не доходит до места, где он ожидает найти чехлы для смартфона:
Пример «обратной» карточной сортировки: чехлы для смартфонов находятся в разделе «аксессуары»
«Обратная» карточная сортировка подтверждает ваши предположения о структуре меню (или предлагает обратную связь для изменения структуры).
Необязательно проводить личную встречу для сортировки карт. Проводить ее онлайн дешевле, она не требует выезда в офис и может быть проведена без географических ограничений.
Во время тестирования вы можете общаться с участниками через любой мессенджер (WhatsApp, Skype, Google Meet, Zoom и др.). Обязательное условие — предварительная подготовка участников теста.
Инструменты, которые вы можете использовать для проведения тестирования:
Также эти инструменты помогут проанализировать результаты — вам не придется делать это вручную.
На этом этапе часто возникают два вопроса.
Вопрос: Что если половина пользователей хочет найти страницу X в категории Y, а другая половина в категории Z?
Ответ: вполне нормально иметь одну и ту же ссылку в двух категориях, если это помогает людям найти нужную информацию.
Вопрос: Можно ли использовать полученные данные в качестве основы для структуры сайта?
Ответ: Лишь частично. Вы должны использовать результаты карточной сортировки в качестве руководства по организации и маркировке. Не стоит слепо использовать полученные данные в качестве фактической структуры сайта. Результаты карточной сортировки могут (и должны) быть дополнены дополнительными исследованиями пользователей и анализом задач.
Разрабатывая систему навигации, спросите себя:
Туллис и Вуд (авторы известного исследования 2004 года) рекомендуют тестировать 20-30 пользователей для проведения тестирования. Однако Якоб Нильсен, основываясь на своих исследованиях, рекомендует тестировать только 15 пользователей (а в крупных проектах с большим финансированием — 30).
Тестирование с большим количеством людей дает большее понимание, но отдача от него снижается. При тестировании более 15 пользователей затраты часто оказываются неоправданными.
Карточная сортировка поможет понять, как структурировать меню. Но что касается дизайна?
Они имеют четкие обозрачения, которые дают представление о том, что находится под ними.
Непонятные ссылки меню вызывают страх перед нажатием:
Кнопки навигационного меню
Кнопки меню «узнать больше» и «заказать сейчас» — довольно неудачные варианты. О чем я узнаю больше? Что я закажу?
Какие бы ссылки вы ни разместили в меню и нижнем колонтитуле, сохраняйте их одинаковыми на всех страницах вашего сайта.
На какую бы страницу вы не перешли на сайте HighTime Agency (агентство зарубежного SEO-продвижения), верхнее меню остается неизменным:
Верхнее меню на сайте HighTime Agency
Где расположить меню? Главное меню должно быть вертикальным или горизонтальным?
Есть веские аргументы против вертикального меню слева, но некоторые исследования утверждают, что оно работает лучше.
Я считаю что при любой возможности следует выбирать горизонтальное меню. Исключением могут быть большие интернет-магазины — они используют вертикальное меню слева. Исследование, проведенное с помощью трекинга глаз, показало, что верхним меню пользоваться легче, но места для ссылок там не так много.
Глобальная навигация — область интерфейса, отведенная под элементы дизайна, позволяющая переходить от одного набора содержимого к другому. Эта область может включать разделы с заголовками, выпадающее меню, кнопки, вкладки, строки поиска и ссылки на главную страницу.
Кроме того, существует локальная навигация (подменю), она располагается ниже глобальной. Это логично: глобальная навигация — главная категория, а локальная навигация — ее подкатегория.
Пример локальной и глобальной навигации
Ссылки локальной навигации должны находиться ближе всего к тому месту, где они нужны пользователю. Содержание — на первом месте, но как только пользователь закончит читать содержание, он потянется к локальной навигации, прежде чем заглянет в глобальную.
Аналогично, если на странице нет нужного контента, пользователь в первую очередь обратится к локальной навигации.
Сколько должно быть уровней навигации? Столько, сколько вам нужно. Но постарайтесь сильно не перегружать навигационное меню. Некоторые сайты с большим количеством контента, например rendez-vous.ru имеют 4 уровня навигации:
На сайте renvez-vous.ru представлено 4 уровня навигации
Интересуетесь свежими материалами по продвижению SaaS-продуктов?
Подписывайтесь на канал Secret Growth в Telegram
Я встречал утверждение, что «до 50% продаж» теряется из-за плохой навигации, но я не нашел исследования, подтверждающего это. Тем не менее хорошая навигация крайне важна.
Информационная архитектура работает рука об руку с юзабилити и конверсией. Если информационная архитектура вашего сайта хорошая, но юзабилити отстойное, посетители найдут то, что ищут, но не завершат процесс покупки.
Если у вас плохая информационная архитектура (даже при хорошем юзабилити), большинство посетителей не найдут то, что ищут, и покинут ваш сайт до того, как попадут в воронку продаж.
Правильная информационная архитектура вашего сайта обеспечивает превосходный пользовательский опыт, что, в свою очередь, ведет к повышению уровня удержания и конверсии.
HighTime.agency — любим амбициозные SEO-проекты c большой аналитической проработкой. Продвигаем сайты на рынках России, США, Европы, Латама и APAC.
Команда — 12 Мин читать, 10 декабря 2024
В этой статье мы разберемся, что такое стратегическая сессия, расскажем, зачем и когда целесообразно проводить стратегические сессии для компании, и дадим фреймворк для проведения стратегической сессии самостоятельно.
Маркетинг — 17 Мин читать, 25 ноября 2024
В этой статье мы рассмотрим самые разные стратегии продвижения продуктов: от простых, но недооцененных тактик — и до нестандартных и оригинальных способов продвижения (спойлер: стратегия №9 описывает свежий подход к модели бесплатного триала продукта).
Маркетинг — 16 Мин читать, 15 ноября 2024
Как выбор стратегии GTM поможет успешно выйти на рынок? Почему компании сталкиваются с трудностями на 3 году T2D3? Как решить проблемы? Ответы на эти вопросы Стейн Хендрикс рассказал в своей статье 👇
