Тепловые карты: зачем нужны в мобильных приложениях и примеры использования

Меня зовут Игорь. Развиваю сервис UX-аналитики UserX. Расскажу о практических кейсах применения тепловых карт мобильных приложений.

Что такое тепловая карта и зачем она нужна

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

Но зачем это нужно при таком многообразии количественных инструментов аналитики?

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

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

  • увеличить конверсии;
  • улучшить UX;
  • выявить (и устранить) ошибки.

Примеры использования тепловых карт

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

Пример 1

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

На тепловой карте применен фильтр первого касания (first tap), показывающий первое действие пользователей на экране.

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

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

Пример 2

Синусоида удобства финансовых приложений, как правило, колеблется между «отлично» и «отвратительно». Причем, сколько людей — столько и мнений. Но есть похожие ситуации, которые часто встречаются в подобных приложениях. Рассмотрим яркий пример экрана пополнения баланса/ карты.

Персональные/финансовые данные не попадают на скриншоты (обезличиваются до передачи на сервер)

Поле для ввода платежа — обозначено маленькими серыми буквам, цифры (а именно их человек ищет взглядом) — крупные и четкие. После применения фильтра “rage taps”, становится понятно, что многие пользователи пытаются многократно нажать на поле с цифрами, ожидая, что здесь они введут сумму. Но ничего не происходит (сумму пополнения вводится в другом поле).

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

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

Пример 3

Если вы когда-нибудь локализовывали приложение на другие языки, то наверняка заметили, что длина слов/фраз на разных языках может сильно отличаться. Далеко за примерами ходить не надо: простое «sign up» быстро превращается в громоздкое «зарегистрироваться». И таких примеров много.

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

После перевода “Sign up” надпись стала вылазить за пределы кнопки.

Пример 4

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

Вот пример: команда проекта замечает резкое падение регистраций (на 5%) на андроид устройствах, после последнего обновления. Тестировщик рапортует, что всё в порядке. С помощью аналитики выявляют — регистрации упали на определенном виде устройств (у тестировщиков такого устройства, естественно, не оказывается).

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

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

Кнопка “зарегистрироваться” стала недоступна из-за проблем с версткой на ряде устройств.

Вывод

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

Вопрос в том, сколько времени придется потратить (денег потерять) при этом? Несколько недель на поиски или один час на работу с тепловыми картами?

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

Добавляйтесь в друзья в Facebook. Задавайте вопросы про UX-аналитику мобилок с помощью UserX.

#ux

0
24 комментария
Написать комментарий...
Дмитрий Андреевич Ткаченко

Подскажите, пожалуйста, есть много статей и обсуждений на тему того, что Apple крайне против подобных сервисов вплоть до бана приложений их использующих. Как у вас обстоят дела с этой точки зрения? Есть какая-то договоренность с Apple про соблюдение Privacy и помощь адоптерам Вашего решения в корректировке их Privacy Policy?
Спасибо.

Ответить
Развернуть ветку
Alex Maximov

Абсолютно правильный вопрос! В последней версии iOS необходимо явно указать какие данные пользователя собираются. Если записываются экран и действия, то пользователь должен явно быть уведомлен об этом в текущий момент. Очевидно, сразу же приложение будет удалено пользователем
Как решили эту проблему?

Ответить
Развернуть ветку
Antsiforov Stanislav

Не увидел примеров в которых именно тепловые карты бы помогли.

Пример 1 и 2 настолько очевидны, что product owner просто облажался выпустив это в релиз.

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

Ответить
Развернуть ветку
Igor Botvinyev
Автор

Станислав, соглашусь с вами, что описанные примеры (1-2) очевидны. Особенно, когда мы обсуждаем единственный экран мобильного приложения. Но product manager'у зачастую приходится работать сразу над несколькими разделами / задачами. В связи с этим, им свойственно иногда что-то упускать (как и нам всем).

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

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

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

Ответить
Развернуть ветку
Даниил Аветисов

А как вообще тепловая карта у вас применима к последнему кейсу? Информация о тапах нам никак не свидетельствует о проблемах с версткой.

Ответить
Развернуть ветку
Igor Botvinyev
Автор

Действительно, в данном кейсе тапы нет прямого примера использования тепловой карты .

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

Ответить
Развернуть ветку
Игорь

У меня почему-то отторжение сразу какое-то к эти тепловым "узорам".

Ответить
Развернуть ветку
Igor Botvinyev
Автор

Так бывает, пока не применят тепловую карту на практике и найдут точки роста, у себя в приложении.

Ответить
Развернуть ветку
Ruslan Gafurov

Привет! Посмотри пожалуйста сообщения в фейсбуке

Ответить
Развернуть ветку
Nikolay Vavilov

Почему UX UI дизайнеры не могут решить проблему:
большой палец не дотягивается до верхнего "бара"/полосы, при больших диагоналях телефона? 

Ответить
Развернуть ветку
Igor Botvinyev
Автор

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

Ответить
Развернуть ветку
Vasya Pupkin

Пользователи айфонов все так же тянутся в дальний от большого пальца угол чтобы закрыть экран?

Ответить
Развернуть ветку
Igor Botvinyev
Автор

Чаше закрывают экран "смахиванием" слева направо) Но как один из способ - тянутся в дальний угол.

Ответить
Развернуть ветку
Vasya Pupkin

А ваша аналитика не отображает такие свайпы?

Ответить
Развернуть ветку
Igor Botvinyev
Автор

В статье приведены примеры только для тапов. 

Но свайпы мы также показываем (а также жесты zoom-in, zoom-out), просто выводятся они отдельно.

Ответить
Развернуть ветку
Гигант мысли

В примере 3 скриншот какой-то безумный, что по цветам, что по содержанию)

Ответить
Развернуть ветку
Igor Botvinyev
Автор

Зато он привлек  ваше внимание)

Ответить
Развернуть ветку
Andrey Korobkin

Здравствуйте, спасибо за статью.
Скажите, пожалуйста, что такое rage taps и как это работает?

Ответить
Развернуть ветку
Igor Botvinyev
Автор

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

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

Ответить
Развернуть ветку
dvm

Очень полезная функция. На предыдущей работе как раз анализировали поведение клиентов через тепловые карты. Быстро скорректировали расположение элементов и увидели увеличившуюся конверсию)
В общем, полезная статья.

Ответить
Развернуть ветку
Герман Манвелов

А с Ionic работает?

Ответить
Развернуть ветку
Вячеслав Тарабушкин

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

Ответить
Развернуть ветку
Женя Гагарин

десктопов - Hotjar

Ответить
Развернуть ветку
ViktorVa

Полезный сервис, есть ли такой для браузера?

Ответить
Развернуть ветку
21 комментарий
Раскрывать всегда