{"id":3891,"title":"\u041c\u044b \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c 100 \u0442\u044b\u0441\u044f\u0447 \u0440\u0443\u0431\u043b\u0435\u0439 \u0432 \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u0441\u043a\u0430\u0436\u0435\u0442\u0435","url":"\/redirect?component=advertising&id=3891&url=https:\/\/vc.ru\/special\/invest&hash=f04745aa4d132660bed9e2b800f7a11b186e865b37e0eafded251e584854a386","isPaidAndBannersEnabled":false}
Дизайн
Igor Botvinyev

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

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

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

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

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

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

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

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

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

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

Пример 1

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

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

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

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

Пример 2

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

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

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

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

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

Пример 3

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

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

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

Пример 4

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

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

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

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

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

Вывод

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

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

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

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

#ux

{ "author_name": "Igor Botvinyev", "author_type": "self", "tags": ["ux"], "comments": 23, "likes": 71, "favorites": 167, "is_advertisement": false, "subsite_label": "design", "id": 223623, "is_wide": false, "is_ugc": true, "date": "Mon, 22 Mar 2021 15:39:29 +0300", "is_special": false }
0
23 комментария
Популярные
По порядку
Написать комментарий...
6

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

Ответить
6

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

Ответить
3

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

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

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

Ответить
2

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

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

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

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

Ответить
2

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

Ответить
5

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

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

Ответить
1

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

Ответить
4

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

Ответить
0

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

Ответить
2

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

Ответить
1

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
3

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

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить

Блоги компаний

Комментарии
null