Понимание поведения пользователей — лучший дизайн веб-сайта

Опубликовано: 2020-08-14

Imac Mockup человека, работающего из дома

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

Что вы найдете:

  • Что такое поведение пользователя?
  • Как UX-дизайн влияет на продвижение интернет-магазина или веб-сайта?
  • Что такое аналитика поведения пользователей с помощью инструментов тепловой карты?
  • Почему веб-сайт нажимает на что-то, что вам нужно отслеживать
  • Поведение пользователей посредством анализа кликов и прокрутки веб-сайта
  • Визуальное представление поведения пользователя на живом примере веб-сайта

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

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

Что такое поведение пользователя?

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

Поиск Гугл

Это приводит к вопросу: вы когда-нибудь осознавали, что пользовательский опыт вашего веб-сайта может вызывать негативные эмоции и поведение, из-за которых до 99% потенциальных покупателей уходят? Вот некоторые статистические данные , которые должны убедить вас проверить свой веб-сайт на наличие проблем с UX и немного отслеживать вашу аналитику:

    • 79% клиентов признаются, что будут искать другой веб-сайт, если текущий не соответствует их ожиданиям.
    • 96% пользователей смартфонов сталкивались с веб-сайтами, у которых нет мобильной версии или они не адаптированы для мобильного дисплея.
    • 52% пользователей утверждают, что негативный опыт работы с мобильными устройствами снижает вероятность их взаимодействия с вашей компанией.
    • 63% пользователей просматривают товары или услуги на нескольких типах устройств (смартфонах, планшетах, ноутбуках, ПК и т. д.).

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

Как UX-дизайн влияет на продвижение интернет-магазина или веб-сайта?

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

три круга

Другими словами, веб-сайт с хорошим UX должен быть:

  • Полезный

Контент веб-сайта должен полностью соответствовать потребностям клиентов и вызывать положительное поведение.

  • Полезный

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

  • Желаемый

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

  • Доступный

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

  • Заслуживающий доверия

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

  • найти

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

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

Но не только упомянутая статистика и результаты аналитики доказывают, что UX играет важную роль. Недавно Google опубликовал 108-страничную онлайн-книгу — UX playbook . Он полон проверенных советов о том, как увеличить продажи с помощью UX. Обзор основан на A/B тестах широкого спектра исследований, аналитики и статей. Изучив несколько тысяч розничных сайтов, Google Analytics обнаружил, что существуют определенные универсальные элементы UX.

Пользовательские элементы

Книга включает контрольный список, который помогает анализировать и улучшать UX мобильного веб-сайта в 6 ключевых областях:

  • Главная / целевая страница.
  • Меню и навигация.
  • Поиск.
  • Категория/продукт.
  • Преобразование.
  • Оптимизация формы.

Качественный UX веб-сайта не только улучшает поведение клиентов на вашем сайте, но и повышает ваш поисковый рейтинг. Обратите внимание, что удобство использования мобильных веб-сайтов является одним из 200 наиболее важных факторов ранжирования . Новый подход Google Mobile-First Indexing также уделяет большое внимание UX веб-сайта.

✨ Не пропустите: полное руководство по инклюзивному веб-дизайну + советы о том, как это сделать

Что такое аналитика поведения пользователей с помощью инструментов тепловой карты?

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

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

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

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

Отслеживание поведения пользователей с помощью инструментов анализа тепловых карт

Метрики тепловой карты2

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

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

Показатели тепловой карты1

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

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

Анализ поведения пользователей на основе данных тепловой карты

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

Графика источника трафика

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

Сегментация общего числа кликов по типу устройства

Клики Графика

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

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

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

Анализ наведения мыши перед нажатием

Графика наведения

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

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

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

Распределение кликов в зависимости от глубины прокрутки и типа устройства

На графике ниже показано, как количество кликов зависит от типа устройства и части страницы:

Графика кликов прокрутки

Как видите, пользователи больше всего переходили по первым частям страницы (0-20%). Даже если добавить клики из других частей, все равно меньше.

График также показывает значительное снижение кликов, начиная даже со второй части страницы (20-40%). Это означает, что вам нужно спланировать структуру вашего контента. Наиболее критичную для пользователей информацию всегда следует размещать в первой части, так как она очень важна для формирования положительного поведения.

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

Распределение последовательностей кликов в зависимости от части страницы

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

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

Распределение последовательностей кликов на ПК

Графика последовательности

На графике видно, что большинство пользователей сделали свой первый клик где-то вверху страницы (0-20%). Кроме того, количество первых кликов резко снижается на второй (20-40%) и последующих порциях страниц.

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

Какие выводы мы можем сделать из этого графика?

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

Распределение последовательностей кликов на смартфонах

Мобильная графика последовательности

Аналогичная ситуация среди пользователей мобильных устройств. Но в этом случае разница между количеством кликов по первой (0-20%) и второй (20-40%) частям страницы более существенна.

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

Распределение последовательностей кликов на планшетах

Графика прокрутки планшета

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

Распределение глубины прокрутки в зависимости от части страницы

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

Графика глубины прокрутки

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

Почему веб-сайт нажимает на что-то, что вам нужно отслеживать

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

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

  • Что нравится пользователям на вашем сайте и что мешает им совершить покупку?
  • Почему одна страница веб-сайта имеет более высокий коэффициент конверсии, чем другая?
  • Почему у вашего сайта высокий показатель отказов (или у отдельной страницы высокий показатель выхода)?
  • Есть ли на вашем веб-сайте какие-либо элементы, которые выглядят кликабельными, хотя на самом деле таковыми не являются?
  • Содержание хорошее? Как можно увеличить глубину прокрутки?
  • Где лучше всего размещать внутренние ссылки и интересные предложения?
  • Являются ли всплывающие окна, отображаемые на конкретной странице, подходящими и эффективными? (Если большинство пользователей закроют всплывающее окно, попробуйте его удалить и посмотрите, как они будут себя вести без него).
  • Эффективны ли ваши призывы к действию и другие элементы?

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

Поведение пользователей посредством анализа кликов и прокрутки веб-сайта

Клики по карте кликов

Вы можете просмотреть фрагмент данных тепловых карт кликов и прокрутки Plerdy сразу после установки скрипта отслеживания. Просто нажмите Ctrl-Alt-H, чтобы открыть боковую панель инструмента аналитики для отслеживания поведения пользователей. Статистика отображается на каждой странице отдельно. Информация об отслеживании отображается в режиме реального времени на действующем веб-сайте, а не на скриншотах, которые используются во многих аналогичных аналитических инструментах, таких как Hotjar и другие. Это позволяет отслеживать динамические элементы и не переключаться между страницами и главной панелью.

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

Визуальное представление поведения пользователя на живом примере веб-сайта

Пример тепловой карты

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

Таким образом, можно предположить, что другие пользователи просто нажали Enter и дождались результатов или вообще покинули сайт.

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

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

Поведение пользователя

Отдельный анализ CRT поисковой строки исключительно по прямому трафику показывает, что на этот элемент приходится 12,3% от общего числа кликов по прямому трафику (прямой трафик составляет 47%). Это означает, что хотя панель поиска на этой странице выделена, пользователи также нажимают на другие элементы, которые отвлекают их внимание, и это влияет на их поведение.

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

Контроль

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

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

Щелчки на первом экране

Просмотрев этот скриншот, можно еще раз сделать вывод, что 97,6% всех кликов приходится на первый экран. Таким образом, остальные 4 части страницы менее эффективны и редко нажимаются.

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

Глубина прокрутки

Аналогичная ситуация с глубиной прокрутки. Главная страница сайта Serpstat состоит из восьми экранов прокрутки с разрешением 1920×1080 пикселей. По собранным данным только 5% пользователей просматривали второй экран или, другими словами, прокручивали страницу, поэтому поведение на втором экране было не столь продуктивным.

Низкое количество кликов

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

Последние слова

Это исследование, которое я провел вместе с командой Plerdy. Надеюсь, это поможет вам с анализом UX вашего сайта и пониманием поведения пользователей.