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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#ux