Тепловые карты: зачем нужны в мобильных приложениях и примеры использования
Меня зовут Игорь. Развиваю сервис UX-аналитики UserX. Расскажу о практических кейсах применения тепловых карт мобильных приложений.
Что такое тепловая карта и зачем она нужна
Если говорить совсем просто — тепловая карта отображает касания пользователей на каждом экране приложения. Красный цвет — касаний много, синий — мало. Аналитика свайпов, долгих нажатий, попыток приблизить, многочисленных нажатий (в порыве закрыть блок с рекламой) и вообще, любое прикосновение к экрану — в комплекте.
Но зачем это нужно при таком многообразии количественных инструментов аналитики?
Анализировать информацию, представленную в виде тепловой карты гораздо проще, чем массив числовых данных. Помимо этого, всегда можно понять с чем пользователь взаимодействует активнее, а на что совсем не обращает внимания.
Тепловые карты помогают решить следующие задачи, стоящие перед командой мобильного приложения:
- увеличить конверсии;
- улучшить UX;
- выявить (и устранить) ошибки.
Примеры использования тепловых карт
Перейдем к самому интересному — рассмотрим реальные примеры правильного использования и анализа тепловых карт.
Пример 1
В приложении интернет-магазина одежды необходимо увеличить конверсию в покупку. Просмотров карточек товара много, активность пользователей высокая. Но покупок (или хотя бы добавления в корзину) от этого больше не становится. При анализе экрана карточки товара видим следующую картину:
Можно заметить, что пользователи изо всех сил пытались рассмотреть товар перед покупкой. Первое, что они делали — «тапали» по фотографии, чтобы увеличить ее. Но довольствовались лишь несколькими небольшими фото.
Решение искать не пришлось — его уже подсказали сами пользователи. Добавление возможности открыть и детально рассмотреть каждую фотографию товара перед покупкой благотворно сказалось на поведении пользователей: товары стали чаще добавлять в корзину, вместе с тем, выросла конверсия в покупку.
Пример 2
Синусоида удобства финансовых приложений, как правило, колеблется между «отлично» и «отвратительно». Причем, сколько людей — столько и мнений. Но есть похожие ситуации, которые часто встречаются в подобных приложениях. Рассмотрим яркий пример экрана пополнения баланса/ карты.
Поле для ввода платежа — обозначено маленькими серыми буквам, цифры (а именно их человек ищет взглядом) — крупные и четкие. После применения фильтра “rage taps”, становится понятно, что многие пользователи пытаются многократно нажать на поле с цифрами, ожидая, что здесь они введут сумму. Но ничего не происходит (сумму пополнения вводится в другом поле).
Конечно, в итоге они догадаются, что надо нажать в другое место. И маловероятно, что кто-то «отвалится» из приложения из-за такой мелочи. Но именно из таких мелочей складывается общее впечатление об удобстве. И в следующий раз, при прочих равных, пользователь выберет более удобное приложение.
Решение в данном примере простое, даже очень — активировать ввод нажатием на сумму или более явно выделить поле ввода.
Пример 3
Если вы когда-нибудь локализовывали приложение на другие языки, то наверняка заметили, что длина слов/фраз на разных языках может сильно отличаться. Далеко за примерами ходить не надо: простое «sign up» быстро превращается в громоздкое «зарегистрироваться». И таких примеров много.
Согласитесь, не всегда удается проверить, что весь интерфейс отображается корректно после перевода. Но всегда можно воспользоваться тепловой картой, которая покажет все возможные варианты отображения интерфейса у реальных пользователей. И если есть проблемы, вы сразу их увидите и сможете исправить.
Пример 4
Помимо прочего, тепловая карта может помочь при тестировании приложений.
Вот пример: команда проекта замечает резкое падение регистраций (на 5%) на андроид устройствах, после последнего обновления. Тестировщик рапортует, что всё в порядке. С помощью аналитики выявляют — регистрации упали на определенном виде устройств (у тестировщиков такого устройства, естественно, не оказывается).
Неожиданно помогает тепловая карта. С помощью нее обнаруживают, что возникла проблема с версткой, и на некоторых устройствах кнопка регистрации просто отсутствует.
При чем тут тепловые карты? Всё очень просто: в рамках этого инструмента можно посмотреть, как приложение отображается на любом реальном устройстве.
Вывод
Кто-то скажет, что во всех примерах можно было обойтись и без использования тепловых карт. И он будет прав.
Вопрос в том, сколько времени придется потратить (денег потерять) при этом? Несколько недель на поиски или один час на работу с тепловыми картами?
Каждый сам делает выбор, исходя из различных факторов. Но не стоит пренебрегать инструментами, которые могут сильно облегчить работу.
Подскажите, пожалуйста, есть много статей и обсуждений на тему того, что Apple крайне против подобных сервисов вплоть до бана приложений их использующих. Как у вас обстоят дела с этой точки зрения? Есть какая-то договоренность с Apple про соблюдение Privacy и помощь адоптерам Вашего решения в корректировке их Privacy Policy?
Спасибо.
Абсолютно правильный вопрос! В последней версии iOS необходимо явно указать какие данные пользователя собираются. Если записываются экран и действия, то пользователь должен явно быть уведомлен об этом в текущий момент. Очевидно, сразу же приложение будет удалено пользователем
Как решили эту проблему?
Не увидел примеров в которых именно тепловые карты бы помогли.
Пример 1 и 2 настолько очевидны, что product owner просто облажался выпустив это в релиз.
Пример 3 и 4 просто показывают "как классно снимать скриншоты экранов пользователей, особенно, когда они заполняют личные данные", это можно и без тепловых карт решить, честно говоря.
Станислав, соглашусь с вами, что описанные примеры (1-2) очевидны. Особенно, когда мы обсуждаем единственный экран мобильного приложения. Но product manager'у зачастую приходится работать сразу над несколькими разделами / задачами. В связи с этим, им свойственно иногда что-то упускать (как и нам всем).
Тем не менее, это реальные кейсы (один из них еще существует в продакшене) и они достаточно ярко показывают, как тепловая карта позволяет выявлять подобные недостатки (даже если "product owner просто облажался" =)).
Также соглашусь с вами по поводу примеров 3 и 4. роль тепловых карт здесь вспомогательная. Но тем не менее, существующие возможности тепловых карт позволяют удобно работать с такими кейсами.
И действительно, данные вопросы можно решить и без тепловых карт, не пытаюсь доказать обратное) Вопрос в скорости работы и удобстве.
А как вообще тепловая карта у вас применима к последнему кейсу? Информация о тапах нам никак не свидетельствует о проблемах с версткой.
Действительно, в данном кейсе тапы нет прямого примера использования тепловой карты .
Но при выводе тепловой карты, в любом случае, выводится и скриншот (как приложение отображается на устройстве). И как следствие, именно с помощью инструмента тепловых карт эту проблему удалось быстро обнаружить.
У меня почему-то отторжение сразу какое-то к эти тепловым "узорам".
Так бывает, пока не применят тепловую карту на практике и найдут точки роста, у себя в приложении.
Привет! Посмотри пожалуйста сообщения в фейсбуке
Почему UX UI дизайнеры не могут решить проблему:
большой палец не дотягивается до верхнего "бара"/полосы, при больших диагоналях телефона?
Здесь скорее вопрос к платформам (iOS / Android), какие стандартные паттерны поведения предлагаю они. В принципе более-менее вопрос решается возможность вернуться по свайпу вбок. А также сместить экран вниз по двойному касанию кнопки домой, или смахиванию экрана в нижней части экрана.
Пользователи айфонов все так же тянутся в дальний от большого пальца угол чтобы закрыть экран?
Чаше закрывают экран "смахиванием" слева направо) Но как один из способ - тянутся в дальний угол.
А ваша аналитика не отображает такие свайпы?
В статье приведены примеры только для тапов.
Но свайпы мы также показываем (а также жесты zoom-in, zoom-out), просто выводятся они отдельно.
В примере 3 скриншот какой-то безумный, что по цветам, что по содержанию)
Зато он привлек ваше внимание)
Здравствуйте, спасибо за статью.
Скажите, пожалуйста, что такое rage taps и как это работает?
Rage taps - фильтр для тепловых карт, показывающий, когда пользователи несколько раз "яростно" нажимают примерно в одну область экрана.
Наличие таких тапов может свидетельствовать о том, что:
- пользователь неправильно воспринимает интерфейс (как в примере с фотографией товара),
- область кликабельности у кнопки слишком маленькая (пользователь не может сразу попасть по кнопке)
- не работают элементы интерфейса (из-за технических проблем).
Очень полезная функция. На предыдущей работе как раз анализировали поведение клиентов через тепловые карты. Быстро скорректировали расположение элементов и увидели увеличившуюся конверсию)
В общем, полезная статья.
А с Ionic работает?
Кто подскажет, а есть аналогичные бесплатные решения по тепловым картам для мобильных устройств и десктопов?
десктопов - Hotjar
Полезный сервис, есть ли такой для браузера?