блог Userx
Тепловые карты: зачем нужны в мобильных приложениях и примеры использования
Что такое тепловая карта и зачем она нужна
Если говорить совсем просто — тепловая карта отображает касания пользователей на каждом экране приложения. Красный цвет — касаний много, синий — мало. Аналитика свайпов, долгих нажатий, попыток приблизить, многочисленных нажатий (в порыве закрыть блок с рекламой) и вообще, любое прикосновение к экрану — в комплекте.
Но зачем это нужно при таком многообразии количественных инструментов аналитики?
Анализировать информацию, представленную в виде тепловой карты гораздо проще, чем массив числовых данных. Помимо этого, всегда можно понять с чем пользователь взаимодействует активнее, а на что совсем не обращает внимания.
Тепловые карты помогают решить следующие задачи, стоящие перед командой мобильного приложения:
Примеры использования тепловых карт
Перейдем к самому интересному — рассмотрим реальные примеры правильного использования и анализа тепловых карт.
Пример 1
В приложении интернет-магазина одежды необходимо увеличить конверсию в покупку. Просмотров карточек товара много, активность пользователей высокая. Но покупок (или хотя бы добавления в корзину) от этого больше не становится. При анализе экрана карточки товара видим следующую картину:
Если говорить совсем просто — тепловая карта отображает касания пользователей на каждом экране приложения. Красный цвет — касаний много, синий — мало. Аналитика свайпов, долгих нажатий, попыток приблизить, многочисленных нажатий (в порыве закрыть блок с рекламой) и вообще, любое прикосновение к экрану — в комплекте.
Но зачем это нужно при таком многообразии количественных инструментов аналитики?
Анализировать информацию, представленную в виде тепловой карты гораздо проще, чем массив числовых данных. Помимо этого, всегда можно понять с чем пользователь взаимодействует активнее, а на что совсем не обращает внимания.
Тепловые карты помогают решить следующие задачи, стоящие перед командой мобильного приложения:
- увеличить конверсии;
- улучшить UX;
- выявить (и устранить) ошибки.
Примеры использования тепловых карт
Перейдем к самому интересному — рассмотрим реальные примеры правильного использования и анализа тепловых карт.
Пример 1
В приложении интернет-магазина одежды необходимо увеличить конверсию в покупку. Просмотров карточек товара много, активность пользователей высокая. Но покупок (или хотя бы добавления в корзину) от этого больше не становится. При анализе экрана карточки товара видим следующую картину:
На тепловой карте применен фильтр первого касания (first tap), показывающий первое действие пользователей на экране.
Можно заметить, что пользователи изо всех сил пытались рассмотреть товар перед покупкой. Первое, что они делали — «тапали» по фотографии, чтобы увеличить ее. Но довольствовались лишь несколькими небольшими фото.
Решение искать не пришлось — его уже подсказали сами пользователи. Добавление возможности открыть и детально рассмотреть каждую фотографию товара перед покупкой благотворно сказалось на поведении пользователей: товары стали чаще добавлять в корзину, вместе с тем, выросла конверсия в покупку.
Пример 2
Синусоида удобства финансовых приложений, как правило, колеблется между «отлично» и «отвратительно». Причем, сколько людей — столько и мнений. Но есть похожие ситуации, которые часто встречаются в подобных приложениях. Рассмотрим яркий пример экрана пополнения баланса/ карты.
Решение искать не пришлось — его уже подсказали сами пользователи. Добавление возможности открыть и детально рассмотреть каждую фотографию товара перед покупкой благотворно сказалось на поведении пользователей: товары стали чаще добавлять в корзину, вместе с тем, выросла конверсия в покупку.
Пример 2
Синусоида удобства финансовых приложений, как правило, колеблется между «отлично» и «отвратительно». Причем, сколько людей — столько и мнений. Но есть похожие ситуации, которые часто встречаются в подобных приложениях. Рассмотрим яркий пример экрана пополнения баланса/ карты.
Персональные/финансовые данные не попадают на скриншоты (обезличиваются до передачи на сервер)
Поле для ввода платежа — обозначено маленькими серыми буквам, цифры (а именно их человек ищет взглядом) — крупные и четкие. После применения фильтра "rage taps", становится понятно, что многие пользователи пытаются многократно нажать на поле с цифрами, ожидая, что здесь они введут сумму. Но ничего не происходит (сумму пополнения вводится в другом поле).
Конечно, в итоге они догадаются, что надо нажать в другое место. И маловероятно, что кто-то «отвалится» из приложения из-за такой мелочи. Но именно из таких мелочей складывается общее впечатление об удобстве. И в следующий раз, при прочих равных, пользователь выберет более удобное приложение.
Решение в данном примере простое, даже очень — активировать ввод нажатием на сумму или более явно выделить поле ввода.
Пример 3
Помимо прочего, тепловая карта может помочь при тестировании приложений.
Вот пример: команда проекта замечает резкое падение регистраций (на 5%) на Андроид устройствах, после последнего обновления. Тестировщик рапортует, что всё в порядке. С помощью аналитики выявляют — регистрации упали на определенном виде устройств (у тестировщиков такого устройства, естественно, не оказывается).
Неожиданно помогает тепловая карта. С помощью нее обнаруживают, что возникла проблема с версткой, и на некоторых устройствах кнопка регистрации просто отсутствует.
При чем тут тепловые карты? Всё очень просто: в рамках этого инструмента можно посмотреть, как приложение отображается на любом реальном устройстве.
Конечно, в итоге они догадаются, что надо нажать в другое место. И маловероятно, что кто-то «отвалится» из приложения из-за такой мелочи. Но именно из таких мелочей складывается общее впечатление об удобстве. И в следующий раз, при прочих равных, пользователь выберет более удобное приложение.
Решение в данном примере простое, даже очень — активировать ввод нажатием на сумму или более явно выделить поле ввода.
Пример 3
Помимо прочего, тепловая карта может помочь при тестировании приложений.
Вот пример: команда проекта замечает резкое падение регистраций (на 5%) на Андроид устройствах, после последнего обновления. Тестировщик рапортует, что всё в порядке. С помощью аналитики выявляют — регистрации упали на определенном виде устройств (у тестировщиков такого устройства, естественно, не оказывается).
Неожиданно помогает тепловая карта. С помощью нее обнаруживают, что возникла проблема с версткой, и на некоторых устройствах кнопка регистрации просто отсутствует.
При чем тут тепловые карты? Всё очень просто: в рамках этого инструмента можно посмотреть, как приложение отображается на любом реальном устройстве.
Кнопка "зарегистрироваться" стала недоступна из-за проблем с версткой на ряде устройств.
Пример 4
Если вы когда-нибудь локализовывали приложение на другие языки, то наверняка заметили, что длина слов/фраз на разных языках может сильно отличаться. Далеко за примерами ходить не надо: простое «sign up» быстро превращается в громоздкое «зарегистрироваться». И таких примеров много.
Согласитесь, не всегда удается проверить, что весь интерфейс отображается корректно после перевода. Но всегда можно воспользоваться тепловой картой, которая покажет все возможные варианты отображения интерфейса у реальных пользователей. И если есть проблемы, вы сразу их увидите и сможете исправить.
Если вы когда-нибудь локализовывали приложение на другие языки, то наверняка заметили, что длина слов/фраз на разных языках может сильно отличаться. Далеко за примерами ходить не надо: простое «sign up» быстро превращается в громоздкое «зарегистрироваться». И таких примеров много.
Согласитесь, не всегда удается проверить, что весь интерфейс отображается корректно после перевода. Но всегда можно воспользоваться тепловой картой, которая покажет все возможные варианты отображения интерфейса у реальных пользователей. И если есть проблемы, вы сразу их увидите и сможете исправить.
После перевода "Sign up" надпись стала вылазить за пределы кнопки.
Вывод
Кто-то скажет, что во всех примерах можно было обойтись и без использования тепловых карт. И он будет прав.
Вопрос в том, сколько времени придется потратить (денег потерять) при этом? Несколько недель на поиски или один час на работу с тепловыми картами?
Каждый сам делает выбор, исходя из различных факторов. Но не стоит пренебрегать инструментами, которые могут сильно облегчить работу.
Вы можете самостоятельно зарегистрироваться в сервисе UserX и получить доступ ко всем функциям с 14-дневным пробным периодом, куда входят тепловые карты, видеозаписи сессий пользователей, конверсионные воронки и др. инструменты.
Кто-то скажет, что во всех примерах можно было обойтись и без использования тепловых карт. И он будет прав.
Вопрос в том, сколько времени придется потратить (денег потерять) при этом? Несколько недель на поиски или один час на работу с тепловыми картами?
Каждый сам делает выбор, исходя из различных факторов. Но не стоит пренебрегать инструментами, которые могут сильно облегчить работу.
Вы можете самостоятельно зарегистрироваться в сервисе UserX и получить доступ ко всем функциям с 14-дневным пробным периодом, куда входят тепловые карты, видеозаписи сессий пользователей, конверсионные воронки и др. инструменты.