Библиотека маркетолога

Причины отказа пользователей от совершения конверсионного действия

По материалам блога LPgenerator

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

Первый закон eCommerce гласит: «Если пользователь не может найти продукт, пользователь не может его купить». Отсюда следует, что недостатки дизайна наносят вред не только юзабилити веб-ресурса, но и зачастую также порождают большие проблемы с прибыльностью интернет-бизнеса.

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

Навигация (navigation) — набор элементов пользовательского интерфейса (UI, user interface), позволяющий посетителю найти и получить конкретную информацию на веб-ресурсе, вступить в маркетинговую интеракцию, совершить конверсионное действие.

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

IA формирует навигацию веб-ресурса — это безусловно, но «информационная архитектура» — гораздо более глобальное понятие, выходящее далеко за рамки просто навигации сайта.

Натаниэль Дэвис (Nathaniel Davis), специалист по оптимизации пользовательского опыта (UX) и проектированию пользовательских интерфейсов, еще в далеком 2011 году выложил в блоге UXmatters концептуальную статью «Основы практического использования информационной архитектуры» (Framing the Practice of Information Architecture), в которой предложил относиться к веб-навигации как видимой надводной части условного айсберга, имя которому — Information Architecture.

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

Information Architecture любого веб-ресурса включает в себя 2 основных компонента:

  • идентификацию и определение (дефиницию) контента и функциональности;
  • лежащие в основе ресурса иерархию, структуру и номенклатуру, которые определяют взаимоотношения между контентом и функциональностью.

Информационная архитектура (IA) не является частью пользовательского интерфейса, видимого на экране — скорее, IA конфигурирует и обуславливает внешний вид и набор опций user interface.

Information Architecture состоит из электронных документов, таблиц, диаграмм, отнюдь не из макетов или прототипов веб-страниц.

m>Вот блок-схема, наглядно отображающая взаимосвязь между отдельными составляющими контента на ресурсе nngroup.com. Синие узлы представляют информационные объекты 1 уровня, зеленые — второго, желтые — третьего.

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

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

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

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

Для определения архитектуры веб-ресурса проводятся следующие мероприятия:

  • Инвентаризация контента (Content inventory): экспертное исследование сайта, чтобы найти и идентифицировать существующий контент.
  • Аудит контента (Content audit): оценка полезности, точности, тональности подачи и общей эффективности контента.
  • Группировка информации (Information grouping): определение степени клиентоориентированности соотношения «пользователь — контент».
  • Разработка и усовершенствование таксономии контента (Taxonomy development): определение стандартизированной терминологии для классификации и систематизации содержимого веб-ресурса (товарные категории для офферов интернет-магазина, предположим).
  • Создание описательной информации: определение метаданных, которые могут быть использованы для создания ссылок по теме, списков или других компонентов навигации, способствующих обнаружению необходимой информации, служащей активатором конверсионного действия.

Что такое навигация сайта?

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

Навигационные компоненты включают в себя:

  • глобальную навигацию (global navigation),
  • локальную навигацию (local navigation),
  • вспомогательную навигацию (utility navigation),
  • фильтры категорий, ценовых границ и т. п. (filters),
  • ссылки по теме (related links),
  • «толстый» футер (fat footer), дублирующий элементы глобальной, локальной и вспомогательной навигации в собственно «подвале» страницы,
  • и т. д.

Примеры навигационных компонентов: 1 — вспомогательная навигация; 2 — глобальная навигация; 3 — указатель местоположения («хлебные крошки», breadcrumb trail; буквально — «путь, помеченный рассыпанными хлебными крошками»); 4 — локальная навигация; 5 — ссылки по теме (в данном случае на статьи и сообщения в блоге); 6 — «толстый» футер.

Перед имплементацией элемента навигации на веб-страницу следует решить несколько вопросов.

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

Размещение: на каких страницах этот элемент должен располагаться? А где именно на макетной сетке: вверху, внизу, слева, справа?

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

Взаимосвязь между информационной архитектурой и навигацией

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

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

Рассмотрим гипотетическую ситуацию: дизайнер решил использовать широко распространенную навигацию «в стиле перевернутой L» (верхний навигационный бар и левый сайдбар, как его еще называют на сленге, «рельс»).

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

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

Определитесь с IA, прежде чем проектировать навигацию

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

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

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

Проблемы находимости и понятности

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

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

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

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

Вот 2 примера, иллюстрирующих разницу между проблемами, вызываемыми информационной архитектурой (IA) и навигацией/пользовательским интерфейсом (Navigation/UI).

Пример проблемы 1: посетители не посещают 2 важных раздела веб-ресурса

Потенциальные причины возникновения этой проблемы:

IA-причина: пользователи не понимают названия секций; названия секций не привлекают посетителей.

UI-причина: пользователи не замечают ссылки на разделы.

Пример проблемы 2: посетители никогда не используют компонент навигации «Ссылки по теме» (Related Links) на страницах контента

Потенциальные причины возникновения вышеозначенной проблемы:

IA-причина: контент, доступный по ссылкам по теме, нерелевантен запросам пользователей (ошибочная классификация).

UI-причина: посетители не замечают соответствующего компонента навигации, потому что он расположен слишком низко на странице или его ошибочно принимают за рекламный баннер.

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

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

Использование нескольких методов для определения причины, порождающей проблемы

Ключ к выявлению истинной причины той или иной проблемы кроется в объединении нескольких методов тестирования. При запуске отдельных исследований для оценки (а) информационной архитектуры (IA) и (б) пользовательского интерфейса (UI), мы увеличиваем вероятность правильной идентификации причин сбоев сайта.

4 методы, описанные ниже, отвечают на различные вопросы — сфокусированные на IA или UI — и предоставляют либо качественные (qualitative), либо количественные (quantitative) результаты, либо результаты обоих типов.

(*) Юзабилити-тестирование, как правило, предоставляет качественные результаты, но в его ходе могут быть получены и количественные результаты — для этого требуются некоторые дополнительные усилия или применение online-инструментов, таких как Loop11.

1. Древовидное тестирование (Tree Testing)

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

Вопросы, на которые отвечают участники теста:

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

Настройка и тестирование

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

Затем вы создаете конкретные задачи, связанные с поиском определенных направлений (так называемых «конечных узлов») в информационной архитектуре (например, «Найти план медицинского страхования, охватывающий семью из 4 человек по цене ниже $ 500 в месяц»). Участники исследования должны решить задачу, продвигаясь по древовидной структуре до желаемого результата.

Результаты

Результаты теста количественные и включают в себя следующие параметры (но не ограничиваются ими):

  • Коэффициент прямого успеха (Direct success rate): сколько участников нашли правильный ответ, не перемещаясь назад (вверх или вниз) по структуре «дерева»?
  • Коэффициент косвенного успеха (Indirect success rate): сколько участников получили правильный ответ, но им пришлось переходить на нижние или верхние уровни иерархии «дерева», чтобы добиться успеха?
  • Данные по первому клику (First-click data): по какой категории первого уровня пользователи кликают в первую очередь? Первые клики являются хорошим показателем «сильной» (правильной с точки зрения пользователя) категории названий.

Инструменты: Treejack, UserZoom Tree Testing Treejack

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

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

2. Сортировка закрытыми картами (Closed Card Sorting)

Тест с закрытыми картами является IA-ориентированным методом, применяемым для оценки «силы» («прочности») категорий названий.

Вопросы теста:

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

Настройка и тестирование

Для проведения этого вида тестирования вы предоставляете участникам «карты», включающие названия или описания содержимого/функций. Затем они сопоставляют эти карты с вашими категориями (сортировка с закрытыми картами является противоположностью традиционной сортировки с открытыми картами, где пользователи получают тот же набор карт, но сами должны создать категории).

Результаты

Результаты теста — количественные и качественные, включающие в себя:

  • Сходство (Similarity): количество раз, когда одинаковый контент был сгруппирован вместе.
  • Сетка стандартизации (Standardization Grid): количество раз, когда карта была отсортирована в вашу целевую категорию.
  • Логика назначения (Logic of assignment): при проведении сортировки карт рекомендуется модерация части тестов — лично или дистанционно через телеконференцию. Это позволит вам проинтервьюировать участников теста, чтобы понять, почему они сгруппировали вместе определенный контент, почему тестировщики отнесли определенные пункты (товары, услуги) к отдельным категориям, и как участники эксперимента интерпретируют названия категорий.

Инструменты: OptimalSort, UXSort, Usabilitest Card Sorting, UserZoom Card Sorting, UsabilityTools Card Sorting

Интерфейс облачного сервиса OptimalSort при проведении теста с закрытыми картами. «Карты» находятся слева, категории —в «теле» страницы. Участники перемещают «карты» на категории, тем самым осуществляя сортировку.

Еще раз OptimalSort: сетка стандартизации для сортировки закрытыми картами иллюстрирует, как много пользователей ассоциирует карты с определенной категорией. Если большинство пользователей выбирает другую категорию, чем ту, что вы предназначили для данной карты, значит, пришло время пересмотреть структуру IA.

3. Клик-тест

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

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

С помощью теста можно получить ответы на вопросы:

  • Какие компоненты навигации используются?
  • Какие компоненты навигации остаются незамеченными?
  • Какими компонентами навигации участники теста избегают пользоваться?

Настройка и тестирование

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

Результаты

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

Инструменты: Usabilla Visual Survey, Chalkmark, UserZoom Screenshot Click Testing

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

Тепловая карта показывает, где пользователи кликали для решения задания

4. Юзабилити-тестирование

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

Этот вид тестирования отвечает на вопросы:

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

Настройка и тестирование

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

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

Вы можете провести юзабилити-тестирование лично или в удаленном режиме. Дистанционное тестирование может модерироваться «вживую» (с помощью телеконференции) или при помощи различных online-сервисов.

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

Результаты

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

Вместо заключения: определение причины сбоев является ключом к успешному восстановлению работы веб-ресурса

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

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

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

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

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

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

Версия для печати