что такое тепловая карта
Тепловые карты: что это, и зачем они нужны
Поделиться этим постом
Наверняка каждому владельцу сайта любопытно узнать, как посетители ведут себя на сайте, почему нажимают на те или иные кнопки, какие материалы просматривают. Именно для отслеживаний взаимодействий пользователей с сайтом используются тепловые карты. В этом посте я подробнее расскажу о том, что это, зачем они нужны, и как их создать.
1. Что такое тепловая карта
Тепловая карта — это графическое представление набора данных для аналитики сайта, где значения данных отображаются в цветах. За счёт этого легко отследить поведение посетителей: уровень взаимодействия определяется разными цветами и их оттенками, например, чем больше активности в той или иной области страницы, тем темнее цвета и наоборот, чем меньше активности, тем цвета холоднее.
Под активностью подразумеваются клики, прокрутки, наведения курсором мыши, выделение элементов сайта мышей.
Пример тепловой карты:
1. Типы тепловых карт
Существует несколько различных типов тепловых карт, каждый тип помогает исследовать разные аспекты производительности сайта. Рассмотрим основные типы.
2.1. Скролл-карты
Карты прокрутки показывают процент посетителей, которые прокручивают вниз до любой точки страницы. Эти карты могут показать, на какой части страницы пользователи останавливаются, а затем покидают сайт. Тёмным цветом обозначаются цвета, где пользователи проводили больше времени, светлые показывают контент, который в основном игнорировался.
2.2. Карты с отслеживанием мыши
Эти карты показывают области, на которые люди наводили курсором мыши. Карты основываются на том факте, что пользователи читают там, куда наводят курсор. Однако точность отслеживания курсора мыши сомнительна, ведь необязательно курсор находится там, куда смотрят читатели.
2.3. Карты кликов
Тепловые карты, состоящие из данных о кликах посетителей. Карты имеют цветовую кодировку, чтобы отображать элементы, на которые кликали чаще всего (красный, оранжевый, желтый) и меньше всего (голубой, синий).
2.4. Тепловые карты для компьютеров и мобильных устройств
Помогают сравнивать взаимодействие пользователей с сайтом на разных устройствах. Разные элементы могут располагаться на десктопных и мобильных устройствах по-разному, и важно видеть, заметны ли они для посетителей, и как они с ними взаимодействуют.
3. Когда и зачем использовать тепловые карты
Тепловые карты благодаря своей универсальности можно использовать в самых разных ситуациях — например, когда нужно:
С их помощью можно быстро определять области интересов пользователей. Далее перечислю другие плюсы использования тепловых карт.
3.1. Преимущества тепловых карт
4. Инструменты для создания тепловых карт
4.1. Mouseflow
С помощью инструмента можно отслеживать щелчки, перемещения мыши, прокрутки и многое другое. Показывает анонимную запись активности каждого посетителя на сайте. Одно из больших преимуществ этого инструмента — функция аналитики форм, которая позволяет понять, как посетители взаимодействуют с формами.
Есть бесплатный тариф. Стартовый план — €24 / месяц, Pro-план составляет и €299 / месяц.
4.2. Hotjar
Один из лучших бесплатных программных обеспечений для тепловых карт. Hotjar сочетает в себе инструменты анализа и обратной связи для улучшения пользовательского опыта и повышения конверсий. Инструмент делает карты для различных устройств, которые можно скачивать и отправлять.
Базовый тариф бесплатный, далее цены начинаются от €39 в месяц. Самый дорогой тариф — бизнес — €389 / мес.
4.3. Crazyegg
Инструмент помогает анализировать взаимодействие пользователей с различными страницами сайта и предоставляет карты кликов, прокрутки и другие, позволяет отслеживать, откуда приходят посетители, с каких устройств и прочее.
4.4. Clicktale
Инструмент подходит для десктопных и мобильных устройств. Отслеживает движения мыши и щелчки, показывает полную аналитику того, насколько хорошо работают ссылки. Подходит крупному бизнесу.
4.5. Lucky Orange
Программа для тепловых карт, которая позволяет увидеть количество людей на сайте в реальном времени, глубину прокрутки, сравнивать статистику, узнать, какие ключевые слова привлекают пользователей на сайт, и многое другое. Легко интегрируется с сайтами.
Подводим итоги
Тепловые карты — это ценный инструмент для владельцев сайта, маркетологов, оптимизаторов и других специалистов, который играет важную роль в улучшении производительности сайта.
Информация, которую предоставляют тепловые карты, легче воспринимается, чем статистические данные. Анализируя данные тепловых карт, вы можете узнать, как пользователи взаимодействуют с сайтом и предпринять меры по улучшению юзабилити.
Но стоит помнить, что тепловые карты более эффективны в сочетании с другими инструментами аналитики, иначе данные будут ограничены и могут спровоцировать неправильные выводы.
Тепловые карты: зачем нужны в мобильных приложениях и примеры использования
Меня зовут Игорь. Развиваю сервис UX-аналитики UserX. Расскажу о практических кейсах применения тепловых карт мобильных приложений.
Если говорить совсем просто — тепловая карта отображает касания пользователей на каждом экране приложения. Красный цвет — касаний много, синий — мало. Аналитика свайпов, долгих нажатий, попыток приблизить, многочисленных нажатий (в порыве закрыть блок с рекламой) и вообще, любое прикосновение к экрану — в комплекте.
Но зачем это нужно при таком многообразии количественных инструментов аналитики?
Анализировать информацию, представленную в виде тепловой карты гораздо проще, чем массив числовых данных. Помимо этого, всегда можно понять с чем пользователь взаимодействует активнее, а на что совсем не обращает внимания.
Тепловые карты помогают решить следующие задачи, стоящие перед командой мобильного приложения:
Перейдем к самому интересному — рассмотрим реальные примеры правильного использования и анализа тепловых карт.
В приложении интернет-магазина одежды необходимо увеличить конверсию в покупку. Просмотров карточек товара много, активность пользователей высокая. Но покупок (или хотя бы добавления в корзину) от этого больше не становится. При анализе экрана карточки товара видим следующую картину:
Можно заметить, что пользователи изо всех сил пытались рассмотреть товар перед покупкой. Первое, что они делали — «тапали» по фотографии, чтобы увеличить ее. Но довольствовались лишь несколькими небольшими фото.
Решение искать не пришлось — его уже подсказали сами пользователи. Добавление возможности открыть и детально рассмотреть каждую фотографию товара перед покупкой благотворно сказалось на поведении пользователей: товары стали чаще добавлять в корзину, вместе с тем, выросла конверсия в покупку.
Синусоида удобства финансовых приложений, как правило, колеблется между «отлично» и «отвратительно». Причем, сколько людей — столько и мнений. Но есть похожие ситуации, которые часто встречаются в подобных приложениях. Рассмотрим яркий пример экрана пополнения баланса/ карты.
Поле для ввода платежа — обозначено маленькими серыми буквам, цифры (а именно их человек ищет взглядом) — крупные и четкие. После применения фильтра “rage taps”, становится понятно, что многие пользователи пытаются многократно нажать на поле с цифрами, ожидая, что здесь они введут сумму. Но ничего не происходит (сумму пополнения вводится в другом поле).
Конечно, в итоге они догадаются, что надо нажать в другое место. И маловероятно, что кто-то «отвалится» из приложения из-за такой мелочи. Но именно из таких мелочей складывается общее впечатление об удобстве. И в следующий раз, при прочих равных, пользователь выберет более удобное приложение.
Решение в данном примере простое, даже очень — активировать ввод нажатием на сумму или более явно выделить поле ввода.
Если вы когда-нибудь локализовывали приложение на другие языки, то наверняка заметили, что длина слов/фраз на разных языках может сильно отличаться. Далеко за примерами ходить не надо: простое «sign up» быстро превращается в громоздкое «зарегистрироваться». И таких примеров много.
Согласитесь, не всегда удается проверить, что весь интерфейс отображается корректно после перевода. Но всегда можно воспользоваться тепловой картой, которая покажет все возможные варианты отображения интерфейса у реальных пользователей. И если есть проблемы, вы сразу их увидите и сможете исправить.
Помимо прочего, тепловая карта может помочь при тестировании приложений.
Вот пример: команда проекта замечает резкое падение регистраций (на 5%) на андроид устройствах, после последнего обновления. Тестировщик рапортует, что всё в порядке. С помощью аналитики выявляют — регистрации упали на определенном виде устройств (у тестировщиков такого устройства, естественно, не оказывается).
Неожиданно помогает тепловая карта. С помощью нее обнаруживают, что возникла проблема с версткой, и на некоторых устройствах кнопка регистрации просто отсутствует.
При чем тут тепловые карты? Всё очень просто: в рамках этого инструмента можно посмотреть, как приложение отображается на любом реальном устройстве.
Кто-то скажет, что во всех примерах можно было обойтись и без использования тепловых карт. И он будет прав.
Вопрос в том, сколько времени придется потратить (денег потерять) при этом? Несколько недель на поиски или один час на работу с тепловыми картами?
Каждый сам делает выбор, исходя из различных факторов. Но не стоит пренебрегать инструментами, которые могут сильно облегчить работу.
Добавляйтесь в друзья в Facebook. Задавайте вопросы про UX-аналитику мобилок с помощью UserX.
Подскажите, пожалуйста, есть много статей и обсуждений на тему того, что Apple крайне против подобных сервисов вплоть до бана приложений их использующих. Как у вас обстоят дела с этой точки зрения? Есть какая-то договоренность с Apple про соблюдение Privacy и помощь адоптерам Вашего решения в корректировке их Privacy Policy?
Спасибо.
Абсолютно правильный вопрос! В последней версии iOS необходимо явно указать какие данные пользователя собираются. Если записываются экран и действия, то пользователь должен явно быть уведомлен об этом в текущий момент. Очевидно, сразу же приложение будет удалено пользователем
Как решили эту проблему?
Не увидел примеров в которых именно тепловые карты бы помогли.
Пример 1 и 2 настолько очевидны, что product owner просто облажался выпустив это в релиз.
Пример 3 и 4 просто показывают «как классно снимать скриншоты экранов пользователей, особенно, когда они заполняют личные данные», это можно и без тепловых карт решить, честно говоря.
Станислав, соглашусь с вами, что описанные примеры (1-2) очевидны. Особенно, когда мы обсуждаем единственный экран мобильного приложения. Но product manager’у зачастую приходится работать сразу над несколькими разделами / задачами. В связи с этим, им свойственно иногда что-то упускать (как и нам всем).
Тем не менее, это реальные кейсы (один из них еще существует в продакшене) и они достаточно ярко показывают, как тепловая карта позволяет выявлять подобные недостатки (даже если «product owner просто облажался» =)).
Также соглашусь с вами по поводу примеров 3 и 4. роль тепловых карт здесь вспомогательная. Но тем не менее, существующие возможности тепловых карт позволяют удобно работать с такими кейсами.
И действительно, данные вопросы можно решить и без тепловых карт, не пытаюсь доказать обратное) Вопрос в скорости работы и удобстве.
А как вообще тепловая карта у вас применима к последнему кейсу? Информация о тапах нам никак не свидетельствует о проблемах с версткой.
Но при выводе тепловой карты, в любом случае, выводится и скриншот (как приложение отображается на устройстве). И как следствие, именно с помощью инструмента тепловых карт эту проблему удалось быстро обнаружить.
У меня почему-то отторжение сразу какое-то к эти тепловым «узорам».
Так бывает, пока не применят тепловую карту на практике и найдут точки роста, у себя в приложении.
Привет! Посмотри пожалуйста сообщения в фейсбуке
Тепловая карта сайта: что это, зачем нужна и как её использовать
Приветствуем читателей на блоге SpySerp! Знаете ли вы, что такое тепловая карта сайта?
Сегодня мы расскажем, зачем нужно использовать тепловую карту сайта, а также расскажем, какие инструменты можно использовать для ее создания.
Что такое тепловая карта сайта?
Что показывает тепловая карта?
Данная тепловая карта показывает, насколько глубоко пользователь просматривает страницу, используя прокрутку:
Эта тепловая карта показывает, какие элементы страницы привлекают больше всего внимания посетителей:
Как работает тепловая карта?
Программное обеспечение работает на основании данных, получаемых с веб-страницы.
Приведем пример работы на одном из западных инструментов.
В первую очередь, при изучении веб-страницы сервис делает статистический срез URL-страницы, которую вы хотите проверить. Когда HTML страницы загрузится, загруженная версия передается на сервер веб-сервиса, благодаря участку JavaScript на вашем сайте:
После этого сервис создает карту всех элементов на вашей странице, с которыми может взаимодействовать пользователь.
После этого сервис начинает собирать информацию об активности пользователей. Каждый раз, когда посетитель взаимодействует со страницей, информация передается на тепловую карту.
Виды тепловых карт сайта
Существует несколько разновидностей тепловых карт, в зависимости от функционала сервиса, который предоставляет данные. Рассмотрим наиболее распространенные из них.
Тепловая карта
Классический вариант. С помощью теплового градиента показывает участки страницы, которые привлекают больше всего внимания.
Скролл-карта
Какая длина у вашего контента? Читают ли пользователи всё, что вы пишете? Где лучше всего разместить СТА-кнопку? Стоит ли использовать лонгриды? Использовать ли бесконечную прокрутку или добавить пагинацию? На все эти вопросы можно получить ответ с помощью скролл-карты.
Конфетти
Довольно специфическая версия классической тепловой карты. На карте отображаются участки с кликами пользователей, которые варьируются в зависимости от цвета, типа действия и т.д.
Тепловые карты: когда их использовать?
Если вы занимаетесь маркетингом, контент-маркетингом или вас интересует информация о действиях пользователей на сайте, мы рекомендуем использовать тепловую карту. Вот несколько сценариев, когда она может быть полезной:
ТОП-5 сервисов для создания тепловых карт
Мы рекомендуем использовать следующие 5 сервисов для составления тепловых карт для своего сайта:
Напоследок отметим, что существуют и другие сервисы для создания тепловых карт сайта. Используете ли вы их? Пиши в комментариях, мы будем рады принять участие в обсуждении!
На Яндекс.Картах теперь можно создавать тепловые карты
У Яндекс.Карт давно просили сделать средство для визуализации данных с помощью тепловых карт — и мы наконец его сделали. Если вы — один из тех, кому это было очень нужно, можете переходить сразу к чтению документации на гитхабе. Если же вы ещё не знаете, нужно ли это вам, — можете потратить немного времени, чтобы почитать статью про то, что такое тепловые карты, как они генерируются на клиенте, и как мы совместили генерацию тепловой карты с картой географической.
Отображение географических точек из Википедии
Что такое тепловые карты, и зачем они нужны
Итак, обо всем по порядку. Для начала давайте определимся, что такое тепловые карты и с чем их едят? Как подсказывает мне капитан очевидность википедия, тепловые карты (они же теплокарты, они же heatmap) — это графическое представление данных, где дополнительные переменные отображаются при помощи цвета. Такой вид отображения бывает очень удобным. Например, им часто пользуются веб-аналитики, чтобы увидеть наиболее активные части страниц сайта.
Вот такие карты кликов позволяет строить Яндекс.Метрика:
Иногда бывает полезным нанесение каких-то количественных показателей на географическую карту, как в случае отображения зон покрытия мобильной связи/интернета у МТС:
Именно такие кейсы и призван решать модуль тепловых карт, который мы создали. Перед тем как я перейду к описанию самого процесса создания модуля, я хотел бы сказать еще пару слов о том, что из себя представляет наша модульная система, и как вы можете ей воспользоваться.
Модульная система
В версии 2.1 мы открыли доступ пользователям к нашей модульной системе, которая написана на основе YModules, разработанной нашим коллегой dfilatov. Эта модульная система имеет много разных приятных фич, таких как асинхронный resolve зависимостей, переопределение модулей, etc. Она была уже достаточно подробно описана автором на Хабре, так что если интересно, можете почитать.
Поскольку написать свои тепловые карты не было самоцелью данной затеи (главной задачей было сделать готовое решения для API Яндекс.Карт), перед тем как начать писать код и думать над алгоритмом работы, естественно, я полез на github искать какие-то готовые решения. Вполне ожидаемо было то, что разных реализаций тепловых карт было там чуть больше, чем достаточно (почти две с половиной сотни).
Алгоритм отрисовки тепловых карт
Пообщавшись с коллегами, я понял, что все видели тепловые карты, все знают, зачем и что это. Но почти никто не знал, как они отрисовываются. Именно поэтому я постараюсь описать эту часть более детально.
API Яндекс.Карт предоставляет возможность для отображения собственной подложки для карты, реализуется это с помощью специального класса Layer. На вход ему необходимо передать функцию, которая по номеру тайла и уровню масштабирования вернет url для загрузки тайла. Кто еще не знаком с тайлами и тайловой графикой можете немного почитать о них в википедии и у нас в документации.
Написание функции генератора url’ов для получения тайлов — это фактически и есть вся задача создания тепловой карты для нашего API.
Для удобства работы пользователей мы решили, что будем поддерживать все самые популярные форматы входных данных, которые используются в API (Number[][], IGeoObject, IGeoObject[], ICollection, ICollection[], GeoQueryResult, JSON), из-за этого нам пришлось наложить не сильно приятное ограничение на программный интерфейс теплокарт. Теплокарте можно задавать только набор данных и нельзя удалять или добавлять точки из этого набора. Таким образом, для работы с данными мы предоставляем всего лишь два метода: getData() и setData().
После того, как мы получили данные, мы приводим их к единому формату и переводим в глобальные пиксельные координаты. С такими данными уже относительно просто работать, поскольку для каждого тайла можно легко сказать, какие точки в него попадают, а какие нет.
После того, как данные были предподготовлены можно начать их отрисовывать. Как отрисовывать вопроса, вроде, не стоит (Canvas — наше все, тем более, у него есть замечательная функциональность getDataURL, особенно необходимый в нашем случае, поскольку именно url тайла мы должны предоставить API).
Для отрисовки каждой отдельной точки будем использовать кисть (рисунок слева), которая представляет из себя черно-белый градиент и рисуется на canvas’е весьма просто:
Вес точки будет определять, с какой прозрачностью кисть будет «рисовать» точку на тайле. После того, как мы отрисуем все точки тайла, у нас получится такой себе негатив нашего тайла тепловой карты.
После чего тайл будет раскрашен установлением цвета каждому пикселю из градиента (options.gradient) в соответствии со значением его прозрачности. Прозрачность же каждого пикселя тайла будет равна общей прозрачности тепловой карты (options.opacity).
Вроде как и все, но нет. Всегда найдутся какие-то исключительные ситуации, которые придется обработать дополнительно. И в нашем случае возможность задания неограниченного сверху веса точки может привести к тому, что одна точка «погасит» все остальные. Так, например, если добавить на карту несколько сотен точек с весом один и одну точку с весом тысяча, то видна будет только последняя (рисунок слева).
Поэтому во избежание таких ситуаций мы ввели дополнительную опцию intensityOfMidpoint — это параметр, который задает, какая прозрачность (фактически определяет какой цвет) должна быть у медианной по весу точки. Таким образом, нам удастся сгладить экстремумы для обычных пользователей (рисунок справа), а остальные смогут подстроить опцию до нужных значений.
Как этим пользоваться
Подробная инструкция по загрузке модуля есть в документации на github’e. После чего для использования достаточно просто подключить его через модульную систему.
Также мы подготовили небольшое демо, которое позволит наглядно увидеть работу большинства опций.
Тепловая карта — недооцененный инструмент внутренней оптимизации сайта
Как посетители ведут себя на сайте? Какие элементы юзабилити удобны, а какие нет? В какой момент большинство пользователей покидает сайт? Получив ответ на эти вопросы, можно качественно улучшить любой ресурс: увеличить продажи, оптимизировать поведенческие, добиться высоких позиций в выдаче. Стандартные отчеты Яндекс.Метрики и Google Analytics, бесспорно, важны и без них невозможна полноценная веб-аналитика. Но данные о визитах, глубине просмотров, отказах, конверсиях и т.д. — это лишь отдельные показатели, которые упускают из виду то, как пользователи взаимодействуют с сайтом.
Лучше понять поведение посетителей помогают специальные сервисы. Пожалуй, самый недооцененный из них — тепловая карта. Несмотря на то, что в той же Яндекс.Метрике есть несколько разновидностей этого инструмента, его возможностям уделяют незаслуженно мало внимания. Хотя именно тепловые карты лучше других анализаторов способны выявлять уязвимые места в юзабилити и оценивать качество внутренней оптимизации.
Что такое тепловая карта?
Это инструмент, который показывает, в каких зонах сайта сосредотачивается наибольшее внимание посетителей и их основная активность. Данные визуализируются при помощи цветового градиента: теплые тона показывают места, к которым пользователи проявляют наибольший интерес, холодные цвета — места, с наименьшим сосредоточением внимания. Все максимально наглядно и просто. Это отличная возможность посмотреть на сайт глазами пользователей и оценить слабые места в оптимизации. 
Тепловая карта наглядно демонстрирует, какие зоны сайта, разделы и формы представляют наибольший интерес для пользователей.
Данные, полученные с помощью тепловых карт — ключ к улучшению продающей способности сайта, снижению количества отказов, увеличению длительности пользовательских сессий. Другими словами, такая аналитика способствует точечной оптимизации поведенческих, которые не только прямо влияют на эффективность сайта, но и остаются ключевым фактором ранжирования в SEO.
Разновидности тепловых карт и их возможности
Существует несколько видов тепловых карт. Несмотря на схожую логику работы, каждый тип инструмента имеет свои особенности. Проводя технический аудит сайта, такие карты используют в комплексе: каждую для решения своего круга задач.
Классическая тепловая карта
В общих чертах принцип ее работы мы рассмотрели выше. С помощью цветовой градации сервис отображает, в каких зонах страницы сосредоточено больше внимания и пользовательской активности, а в каких меньше.
Какие сведения дает тепловая карта
Инструмент определяет общую модель поведения посетителей на сайте. Благодаря наглядной визуализации легко выявить недочеты в юзабилити и исправить имеющиеся ошибки. Например, можно обнаружить, что важные формы, разделы и другие элементы сайта расположены в неподходящих местах с низким уровнем пользовательского внимания. Тепловые карты помогают улучшить рекламные активности на сайте. С их помощью делают важные выводы о том, насколько удачно размещен баннер, где он будет собирать больше кликов, а где просто мешать пользователям.
Представленный инструмент — незаменимый помощник во время редизайна сайта. Отслеживание поведения аудитории на каждом из этапов изменений помогает сделать важные выводы о качестве нового дизайна и «на ходу» улучшить его удобство. Это позволяет не только рационализировать финансовые затраты, но и избежать разочарований, когда новый сайт оказывается хуже старого.
Возможности тепловых карт высоко ценят в eCommerce. Отследив поведение покупателей на каждом из этапов воронки продаж, можно выявить недочеты, которые мешают интернет-магазину продавать более эффективно. Например, с помощью карты легко увидеть, как пользователи взаимодействуют с формами, удачно ли размещены СТА-кнопки, насколько эффективны интерфейсы корзины и каковы истинные причины незавершенных покупок.
Карта скроллинга
Инструмент, который при помощи все того же цветового градиента показывает, в каких зонах прокрутки страницы концентрируется внимание большинства посетителей. 
Что можно понять с помощью скролл-карты
На первый взгляд назначение этого сервиса вызывает вопросы, поскольку очевидно, что основной процент пользовательского внимания сосредоточен на первой полосе прокрутки. Все самые важные элементы страницы — от СТА-кнопки до призыва к действию — размещают на первом экране. Это прописная истина UX-дизайна.
На все эти вопросы, от которых напрямую зависят поведенческие факторы, дает ответы карта скроллинга.
Вам также может быть интересно: UX и UI — в чем разница?
Карта кликов
Инструмент отображает активность кликов: на что и как часто нажимают люди на страницах сайта. Это может быть как простая карта кликов, так и более сложная визуализация с цветовой градацией в зависимости от интенсивности кликов, целевых действий, источников переходов и т.д.
Чем может быть полезна карта кликов
Карта ссылок
Инструмент, отображающий интенсивность переходов по ссылкам на сайте. Линки, собирающие больше кликов, подсвечиваются красным, менее популярные визуализируются холодными цветами: желтым, зеленым, синим.
Чем может быть полезна карта ссылок
Карта ссылок — хороший помощник при создании перелинковки. О том, почему важно связывать страницы сайта внутренними ссылками и как это делать — мы рассказывали здесь. Если предельно кратко, то логика грамотной перелинковки заключается в том, чтобы связать страницы-доноры (с большим весом) и страницы-акцепторы (с меньшим весом). Карта ссылок существенно упрощает этот процесс, поскольку наглядно отображает авторитетность каждой ссылки: красным подсвечиваются потенциальные доноры, зеленым и синим — потенциальные акцепторы. 
Также карту кликов можно использовать для точечного улучшения кликабельности. Например, зная какие ссылки больше всего интересуют пользователей, вы можете сделать их еще лучше: увеличить заметность гиперссылки, переместить ее в более выгодное место, улучшить анкорный текст и т.д.
Создание тепловых карт. Обзор сервисов и их функций
Существует немало инструментов для создания тепловых карт. Они отличаются различным функционалом и предназначены для решения определенного круга задач. Далее мы кратко остановимся на наиболее интересных вариантах.
Карты «Яндекс.Метрики»
Самый популярный инструмент для создания тепловых карт. Причин, по которым он стал абсолютным фаворитом — немало. Во-первых — это сервис на русском языке, во-вторых — полностью бесплатный, в-третьих — здесь сразу несколько инструментов для аналитики. 
Карта кликов. Может отображать данные одной страницы или агрегировать статистику по группам страниц, например по разделам. Доступно несколько режимов визуализации.
Карта ссылок. Помимо простого подсвечивания популярных и непопулярных гиперссылок система предоставляет данные о количестве кликов по каждому линку и сравнивает долю переходов. Статистика формируется в виде графиков.
Скролл-карта. Алгоритм рассчитывает среднее время и число просмотров определенной зоны прокрутки. Доступна статистика для групп страниц. Есть несколько режимов визуализации.
Аналитика форм — инструмент»Яндекс.Метрики», позволяющий оценить, как пользователи взаимодействуют с формами заказа, блоками обратной связи, полями поиска и пр.
Crazyegg
Популярный англоязычный сервис для создания нескольких видов тепловых карт. Его алгоритм отличается большой точностью, за что высоко ценится разработчиками. Помимо обычной визуализации кликов и скролл-карты в Crazyegg есть уникальный инструмент Confetti. Он позволяет сегментировать клики по различным параметрам. 
Инструмент Confetti показывает, как ведут себя пользователи, попавшие на сайт из разных мест: поисковой выдачи, социальных сетей, перешедшие по рекламе и т.д.
Сервис платный. Бесплатно доступен 30-дневный тестовый период. Crazyegg пользуются такие компании как Yahoo и Dell, что красноречиво свидетельствует об авторитетности продукта.
Heat-map.co
Принципиальное отличие этого сервиса — его не нужно подключать к сайту на уровне скриптов. Вы просто вводите адрес интересующей страницы и получаете ее тепловую карту. Это позволяет эффективно использовать инструмент не только для оптимизации собственных проектов, но и для анализа сайтов конкурентов. Доступ к возможностям сервиса — платный.
Zarget
Многофункциональный сервис для оптимизации сайта. С его помощью можно создавать тепловые и скролл-карты, а также генерировать визуализацию кликов за определенный период. Отдельно предусмотрен функционал для А/В тестирования юзабилити. В отличие от большинства аналогов алгоритм Zarget способен отслеживать веб-активность посетителей даже на динамических элементах сайта. Еще одна особенность сервиса — наличие расширения для быстрого проведения аудита прямо из браузера. Установка скрипта и браузерное расширение — платные.
Feng-GUI
Это инструмент не похож на все вышеописанные программы, тем не менее, он хорошо вписывается в логику нашего разговора. Feng-GUI — сервис для улучшения визуальной производительности. Вы загружаете изображение, макет сайта или просто указываете ссылку на страницу, и программный алгоритм анализирует контент на предмет его визуальной эффективности. Искусственный интеллект оценивает, насколько выгодно расположены конверсионные элементы сайта, как грамотно использованы области, привлекающие больше всего внимания и т.д. В отчете графически представлены сильные и слабые стороны вашего дизайна и даны рекомендации по его улучшению.