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

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

Тепловая карта — Optimizely

Определение предоставлено Fresh Egg

Что такое тепловая карта?

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

Преимущества тепловых карт

Analytics, такие как Google Analytics или Site Catalyst, отлично подходят для предоставления показателей, показывающих, какие страницы посещают пользователи, но им может не хватать деталей, когда дело доходит до понимания того, как пользователи взаимодействуют с этими страницами.Тепловые карты могут дать более полный обзор того, как на самом деле ведут себя пользователи.

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

Хорошие инструменты для тепловых карт, такие как CrazyEgg, позволяют аналитикам сегментировать и фильтровать данные. Это означает, что можно легко увидеть, как разные типы пользователей взаимодействуют с определенной страницей.

Соображения

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

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

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

Это может означать, что пользователи выходят из процесса после заполнения первого поля. Однако тепловые карты не показывают, если пользователи использовали клавиатуру для перехода по полям формы, а не мышь. Для правильного анализа использования форм можно использовать специальные инструменты аналитики форм. Они будут измерять время, проведенное в каждом поле, а не просто клики.

Примеры тепловой карты

Тепловые карты предоставляют хороший способ сразу увидеть, насколько «популярны» элементы на определенной странице.Это особенно полезно для сравнения элементов, которым на странице уделяется одинаковое внимание. На тепловой карте ниже показано, где пользователи переходили на страницу продукта мобильных телефонов:

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

Тепловая карта также может быть полезна для различения ссылок, когда на странице есть более одной ссылки, ведущей на конкретную целевую страницу. Некоторые инструменты аналитики, такие как Google Analytics, обрабатывают ссылки на один и тот же пункт назначения как одну и ту же ссылку. Из-за этого невозможно определить, какая из ссылок получила больше всего кликов.

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

тепловых карт можно использовать для определения кликов по частям страницы, которые на самом деле не являются ссылками. В приведенном ниже примере ссылкой является только текст «узнать больше», однако пользователи ошибочно нажимают на значки, пытаясь получить дополнительную информацию.

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

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

Заключительные мысли

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

Использование тепловых карт на этапе обнаружения вашей CRO-кампании действительно может помочь определить дополнительные области для тестирования. Все примеры, представленные на этой странице, были использованы для информирования A / B-тестов об изменениях макетов страниц и функциональности, чтобы лучше соответствовать намерениям пользователя.

Heatmaps также можно интегрировать с A / B-тестами в Optimizely.Это означает, что вы сможете получить четкое представление о том, как пользователи взаимодействуют с вашими вариантами теста по сравнению с вашим оригиналом.

seaborn.heatmap — документация seaborn 0.11.2

Что такое тепловая карта? Тепловые карты и объяснение тепловых карт

• Нажмите «Тепловая карта»
• Прокрутка тепловой карты
• Внимание Тепловая карта
• Тепловая карта движения
• Географическая тепловая карта

Основная причина использования этой тепловой карты заключается в том, что она точно показывает, как конвертируются ваши индивидуальные призывы к действию (CTA) и интерактивные элементы.

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

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

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

С другой стороны, теперь вы знаете , что нужно изменить, чтобы повысить коэффициент конверсии. Это важный шаг в оптимизации вашей воронки конверсии.

Когда вы используете тепловую карту по кликам?
Мы рекомендуем использовать тепловые карты по кликам, чтобы:

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

• Дизайнеры пользовательского интерфейса могут видеть, ведут ли пользователи себя так, как вы ожидаете.Например, нажимают ли они кнопки или другие вещи на сайте, которые не реагируют?
• Маркетологи могут оптимизировать коэффициент конверсии, просматривая тепловые карты кликов. Могут ли ваши пользователи понять, куда вы хотите, чтобы они пошли дальше? Рассмотрим, например, перемещение кнопок туда, где пользователи пытаются щелкнуть, но терпят неудачу!
• Владельцы / разработчики продукта: Существуют ли проблемы, связанные с удобством использования или кодом, которые можно исправить, чтобы повысить удовлетворенность продуктом?
• Основатели / технический директор: Соответствует ли реальное поведение пользователей тому, как вы представляли себе, как подходит ваш продукт? Следует ли вкладывать больше или меньше ресурсов в UX?

«Тепловая карта» или «карта прокрутки» показывает, насколько далеко вниз прокручивают страницу пользователи в среднем. По сути, , сколько вашего контента на самом деле видят ваши пользователи.

Тепловая карта с прокруткой особенно полезна при попытке определить, где разместить контент на странице — или когда выясняется, какой процент пользователей действительно видит конкретный контент на странице.

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

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

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

Когда вы используете тепловую карту прокрутки
Вы хотите использовать тепловую карту прокрутки, чтобы:

• Измерьте взаимодействие пользователей с вашим контентом
• Определите среднюю линию сгиба и оптимальное размещение для важного содержимого

• UX-дизайнеры могут видеть, скучно ли пользователям или отвлекается во время чтения.Возможно, вам стоит удалить непонятные элементы дизайна… или добавить несколько привлекательных!
• Маркетологи могут определить, где пользователи теряют внимание, и могут захотеть перейти к следующему шагу. Поместите кнопки, интересные ссылки или интерактивный контент там, где упадет вовлеченность.
• Основатели / технические директора: Узнайте, приносит ли ваша стратегия контент-маркетинга свои результаты

Тепловые карты внимания иногда называют тепловыми картами времени. Они получены из тепловых карт прокрутки и выглядят похожими, но показывают время вместо прокрутки. Итак, вы можете увидеть, сколько времени средний пользователь тратит на ваш контент.

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

Когда использовать тепловую карту внимания?
Вы хотите использовать тепловую карту внимания для:

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

Отличительной особенностью тепловых карт внимания является то, что они более подробно показывают, какие элементы привлекают внимание, а не какая горизонтальная часть страницы.Элементы, которым уделяется наибольшее внимание, получат более теплый цвет. Это дает большую дисперсию цветов на тепловой карте внимания.

Прокручиваемая тепловая карта обычно начинает быть красной и становится все холоднее и синей по мере прокрутки тепловой карты. Для каждого веб-сайта всегда будет больше людей, просматривающих верхнюю часть веб-сайта, чем нижнюю.

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

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

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

Когда использовать тепловую карту движения?
Тепловые карты движения отлично подходят для:

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

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

Географическая тепловая карта (или «Географическая тепловая карта») показывает количество пользователей из определенного географического местоположения с точностью до 3-х квартального радиуса (этот процесс полностью соответствует GDPR и CCPA).Чем больше пользователей из определенного места, тем ярче становятся цвета в этой области.

Когда вы используете географическую тепловую карту?
Географические тепловые карты предназначены для:

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

Что такое тепловая карта, как ее создать, примеры и тематические исследования

Тепловые карты — отличный инструмент для визуализации сложных статистических данных.

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

Но что такое тепловая карта? И как вы подойдете к его созданию?

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

Что такое тепловая карта?

Тепловая карта — это программное обеспечение для анализа данных, которое использует цвет так же, как столбчатая диаграмма использует высоту и ширину: в качестве инструмента визуализации данных.

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

Что показывает тепловая карта?

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

Эта тепловая карта, например, показывает, насколько далеко вниз прокручиваются посетители страницы:

С тепловой картой данные для вашей веб-страницы прямо здесь: CTA над сгибом светится ярко-оранжевым светом или нет.

Если это не так, подумайте о том, чтобы переместить его вверх по странице, чтобы он соответствовал тому месту, где посетители обращают наибольшее внимание.

Чтобы узнать о других простых способах увеличения коэффициента конверсии, посмотрите это видео с сайта Crazy Egg:

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

Они также помогут вам ответить на важный вопрос: «Где должно быть самое важное содержание на этой странице?»

Как работает тепловая карта?

работает, собирая данные с веб-страницы и отображая эти данные на самой веб-странице.

Вот как это делает Crazy Egg.

Сначала мы делаем снимок веб-страницы по выбранному вами URL. Когда HTML-код страницы загружается, версии того, что загружено, также отправляются на наши серверы благодаря короткому разделу JavaScript, вставленному в код вашего сайта.

Затем мы создаем карту всех элементов на вашей странице — всего, с чем кто-либо может взаимодействовать. Эти и их теги и их родительские элементы — это то, что мы используем для построения карты активности пользователей на вашей странице.

Далее мы собираем все данные об активности. Каждый раз, когда пользователь что-то делает на вашей веб-странице, мы отмечаем это.

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

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

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

Затем, когда вы просматриваете страницу на панели управления, вы увидите совокупность всего, что каждый уникальный пользователь сделал на странице, которая выглядит примерно так:

Анализ тепловой карты дает вам визуальный обзор того, где посетители нажимают на вашу страницу — чем больше кликов, тем ярче область, создавая то, что мы называем «горячими точками».

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

Другие типы тепловых карт

В дополнение к тепловым картам существует несколько отчетов, которые могут показать вам, откуда были совершены ваши клики, как далеко пролистали посетители и многое другое.

Прокрутка карты

Должен ли у вас быть более длинный или более короткий контент на странице?

Где должен быть этот CTA?

Карта прокрутки позволяет вам увидеть, какая часть ваших посетителей прокручивала где перед тем, как отскочить.

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

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

Внезапные сильные изменения цвета могут указывать на то, что посетители «думают, что все, что следует за ними, больше не связано с тем, что было раньше (так называемое« логическое завершение »)», — говорит Пип Лаха, основатель Conversion XL. «Это резкие точки падения, которые трудно увидеть с помощью только Google Analytics».

Отчет о конфетти

Конфетти — это очень специфическая версия традиционной тепловой карты.Это представление с высоким разрешением, позволяющее видеть отдельные клики, каждый из которых обозначен цветной точкой в ​​отчете.

Зачем?

Отчасти потому, что вы будете удивлены тем странным вещам, на которые люди нажимают, в том числе не кликабельным элементам. Это может дать вам уникальное представление о том, как люди переходят на ваш веб-сайт или не переходят на него.

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

Они хотят перейти по ссылке — они просто не могут понять, как это сделать.

Теперь вы знаете, что нужно изменить, чтобы страница конвертировалась.

Еще одно действительно ценное приложение Confetti Report — это его способность отслеживать настраиваемые параметры — например, посетил ли кто-то ваш веб-сайт из платной рекламной кампании или из-за конкретной рассылки электронной почты.

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

Отчеты по наложению и списку

В отчете «Оверлей» количество кликов на вашем веб-сайте разбито на проценты для каждого элемента. Это позволяет вам точно видеть, какие отдельные элементы вызывают клики.

На миниатюре выше видно, что на странице есть маленькие знаки плюса.

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

Отчет Overlay позволяет визуально увидеть разбивку кликов на вашей странице.

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

Он также позволяет увидеть, какие элементы на странице были нажаты, даже если они фактически ни с чем не связаны.

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

Когда следует использовать тепловую карту?

Все время!

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

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

Редизайн сайта

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

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

Очевидно, что графические дизайнеры в принципе уже все это знают. Но разные аудитории ведут себя по-разному на разных сайтах.

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

A / B тестирование

Ты ведь это делаешь? A / B-тесты обеспечивают решающий скачок конверсии, который может стать разницей между быстрорастущим бизнесом и бизнесом, который пытается выжить.

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

Когда вы тестируете перемещение кнопки CTA, изменение копии или изображения, вы можете увидеть коэффициент конверсии страницы и понять, почему одна страница конвертируется лучше, чем другая.(Надеюсь, тест конвертирует лучше!)

С помощью тепловой карты вы можете точно увидеть, чем отличается поведение конверсии. Может быть, более длинная страница преобразуется лучше, поэтому вы думаете: давайте сделаем все наши страницы длинными. Имеет смысл.

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

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

Контент-маркетинг

Даже сейчас большая часть контента написана. Это слова на странице.

Читают ли посетители вашего сайта и интересуются ли они вашим контентом?

Карты прокрутки показывают, насколько далеко вниз прокручивают страницу пользователи, чтобы вы знали, читают ли они ваш контент. Узнайте, какие призывы к действию привлекают наибольшее внимание. с помощью карты кликов, и вы узнаете больше.

Например: допустим, Майкл пишет фантастический подробный пост в блоге об использовании продукта своей компании DocuLoc для защиты документов.

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

Если он рассылает спам и рекламирует это, никто не будет это читать; но он это знает, поэтому пост в основном посвящен проблемам безопасности, а не продукту.

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

Пока все хорошо.

На следующей неделе он проверяет отчеты о посетителях.

Карта прокрутки показывает, что только один из пятнадцати или двадцати его читателей доходит до конца сообщения. Хм, думает Майкл. Может быть, 7000 слов — это слишком много. Похоже, никто не хочет это читать.

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

Michael не имеет неэффективного контента, от которого люди отскакивают; у него есть машина для генерации лидов, которая дисквалифицирует неподходящих потенциальных клиентов еще до того, как они с ним свяжутся!

Он может узнать все это, потратив всего несколько минут на просмотр данных, что даст ему больше времени для написания своего следующего опуса из 7000 слов.

Тестирование пользовательского интерфейса и удобства использования

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

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

Пришло время провести небольшое тестирование UX, чтобы увидеть, что происходит.

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

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

Покупатели нажимают на то, что не является кликабельным? Или, может быть, они отвлекаются на панель навигации?

Удалите эти отвлекающие факторы из одного варианта страницы, а затем выполните A / B-тестирование двух страниц, чтобы увидеть, какая из них больше привлекает клиентов.

Хотите увидеть анализ веб-сайта в действии? Посмотрите это видео, в котором мы анализируем домашнюю страницу электронной коммерции клиента Crazy Egg Томми Коппера, используя отчеты о посетителях и записи сеансов:

Воронка преобразования

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

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

Вы можете увидеть все это на картах прокрутки и картах конфетти.

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

Возможно, пришло время провести A / B-тестирование нескольких разных страниц, чтобы улучшить удобство использования и устранить отвлекающие факторы, из-за которых посетители могут застрять.

Что можно узнать из тепловой карты

помогут вам быстро увидеть:

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

Вы также можете использовать тепловую карту, чтобы узнать:

• Работает ли ваша навигация (Знают ли пользователи, что она есть?)
• Если люди могут легко найти параметры поиска
• Читают ли посетители ваш контент и сколько его (это огромный пример использования карт прокрутки! )

Просверлите глубже, и вы увидите:

• Где разместить контент, который наиболее важен для целей вашего посетителя (в недавнем исследовании ConversionXL обнаружил, что время просмотра пользователями распределялось почти точно в соответствии с принципом Парето: 80% вверху страницы, 20% — ниже.(Какая складка?))
• Где большинство пользователей просматривают страницу (как правило, это верхняя и левая стороны — люди обычно читают веб-страницы по образцу «F» или «Z», поэтому многие сайты предназначены для облегчения это, но контент на основе изображений часто читается по горизонтали.)
• Разница между тем, что мужчины и женщины, пожилые и молодые люди и люди из разных географических регионов хотят от контента
• Какие изображения просматриваются, как взаимодействуют пользователи с ними, и как их использовать более эффективно

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

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

Общие сведения о тепловых картах

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

Как читать тепловую карту

Давайте посмотрим на пару примеров тепловых карт в реальном времени. Вот как Khan Academy использовала инструмент тепловой карты, чтобы понять, как их пользователи взаимодействуют с их сайтом.

Инструмент «Тепловая карта» показывает домашнюю страницу Академии Хана, показывая долю посетителей, которые щелкнули по каждому элементу на странице.

Что это нам показывает? В верхнем меню пользователи часто нажимают «Наблюдать», «Практика», «Коуч», но не «Содействовать», на что почти не обращают внимания.

«Поиск» вызывает много действий, видео часто воспроизводится, и два призыва к действию под первым заголовком также привлекают много внимания.

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

Просто увидев, куда на странице нажимают люди, вы можете определить, нужно ли вам переместить какое-либо изображение, сделать правильный образ действий более понятным и легким для поиска, а также узнать, насколько сбиты с толку ваши посетители.

Есть еще кое-что.

На той же странице карты прокрутки показано, что наибольшая концентрация внимания — это середина экрана над сгибом:

Это нормально. Прокрутите вниз до большой коллекции ссылок Khan Academy на определенные фрагменты контента, которые есть на их домашней странице, и все начнет выглядеть примерно так:

Опять же, это нормально.Что вы можете сделать, так это сравнить впечатления, которые вы получаете с этим отчетом Scroll Map со списком.

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

Длинный хвост кликов по ссылкам в представлении списка очень хорошо согласуется с длинным хвостом внимания, который мы видели в отчете Scroll Map. Немногие прокручивают так далеко, но из тех, кто это делает, многие щелкают по одной из этих ссылок. Это говорит о том, что ссылки, вероятно, находятся в нужном месте и их стоит сохранить.

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

Например, вот страница «Участие» в Khan Academy в отчете «Тепловая карта»:

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

Но у этой страницы две цели. Другой — побудить людей зарегистрироваться и стать переводчиками.

И когда мы переместим страницу на карту прокрутки, мы увидим, почему не так много людей нажимают на эту ссылку:

Только половина посетителей сайта прокручивают так далеко вниз. Переместить CTA ? Отдать ему отдельную страницу?

Или текст недостаточно убедителен, чтобы люди читали? Проверьте изменения цвета, чтобы увидеть.

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

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

Вы можете посмотреть полное видео прохождение стратегии «Тепловая карта» Академии Хана здесь:

Теперь давайте начнем с вашей тепловой карты .

Тепловые карты: начало работы

Тепловые карты относительно просты в настройке. Настройка тепловой карты Crazy Egg занимает буквально пару минут. После настройки возвращаться к своим отчетам также очень просто.

Как шаг за шагом создать тепловую карту

Шаг 1. Зарегистрируйтесь

1. Создайте учетную запись CrazyEgg

Перейдите на https://www.crazyegg.com/ и подпишитесь на пробную версию. Вы получаете 30 дней бесплатно, поэтому вы можете запускать тепловые карты на своем сайте, а также записи сеансов пользователей и даже A / B-тесты.

Вам будет предложено выбрать тарифный план. На этом процесс регистрации завершен.

Перейдите на страницу «Новый снимок» на панели инструментов и настройте новый отчет.

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

Затем выберите, хотите ли вы создать отчет, в котором будут фиксироваться посетители настольных компьютеров, просмотры планшетов, посетители мобильных устройств — или все три.

Затем определите, как долго вы хотите запускать отчет:

Вы можете закончить через установленное время или после установленного количества трафика. По умолчанию 60 дней или 25 000 посетителей, но вы можете войти и изменить его, если у вас низкий трафик или вы думаете, что можете узнать то, что вам нужно знать, с меньшим количеством посетителей.

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

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

Вот семь примеров визуализации данных о том, как люди эффективно использовали тепловые карты Crazy Egg:

1. Softmedia повышает конверсию на 51 процент

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

Они успешно определили отвлекающие факторы, которые мешали посетителям выполнить желаемое действие.После их удаления конверсия увеличилась на 51 процент.

Левая пара изображений тепловой карты показывает, что кнопка «Не нажимать здесь» отвлекала посетителей от нажатия кнопки «запросить цитату».

Правая пара изображений показывает клики посетителей на странице контактов, где демонстрация видео отвлекала посетителей от связи с Softmedia.

Удаление обоих улучшенных преобразований для каждой страницы.

2. Эксперты по коэффициенту конверсии увеличивают количество подписок на 25.9 процентов

CRO-агентство по коэффициенту конверсии. Эксперты хотели улучшить подписку на определенной странице.

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

A / B-тест показал, что новая страница без боковой панели привела к увеличению числа подписок на 25,9%.

Посмотрите, как профессионалы используют Crazy Egg!

3. WPMU Dev устраняет проблемы с дизайном страницы продукта

WPMU Dev использовал отчет Confetti Crazy Egg, чтобы увидеть, как посетители, особенно новые посетители, взаимодействуют с контентом на своей странице продукта CoursePress.

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

Можете угадать, что не так с этой картинкой? Ага! Слишком много призывов к действию и элементов, на которые могут нажать посетители. На самом деле они обнаружили, что никто не нажимал (и не просматривал) то, что они хотели, чтобы посетители увидели.

4. Система локальной видимости улучшает локальное SEO

Консультант по поисковой оптимизации для малого бизнеса Local Visibility System (LVS) создал настраиваемый URL-адрес для Google Places (теперь Google My Business) и отслеживал посетителей по этому URL-адресу с помощью Crazy Egg.

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

(Есть также полезная информация об использовании Crazy Egg с картами, маршрутами и обзорами, которые являются частью местного SEO.)

Иногда сумасшедшие тепловые карты могут показаться пугающими. «Они везде щелкают!»

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

5. Pagely Проверяет конструктивные недостатки

WordPress Pagely использовала карту прокрутки Crazy Egg, чтобы определить, на какие части их страницы люди обращали внимание.

Компания обнаружила, что менее 25 процентов их посетителей просматривали более 600 пикселей, что означало, что большая часть страницы была потрачена впустую.

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

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

Знание того, сколько просмотров страниц превратилось в клики и сколько кликов фактически превратилось в подписки, является чрезвычайно ценной информацией. Объедините эти знания с вашими A / B-тестами и посмотрите, какой вариант не только получает больше кликов, но и подписок.

6. SugarRae регулирует микс содержимого

SEO-блогер SugarRae использовал тепловые карты Crazy Egg, чтобы определить, какой контент больше всего понравился посетителям.

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

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

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

7. Ювелирный бутик Harry Fay устраняет утечку прибыли

Ювелирный бутик Harry Fay определил несколько областей, которые отталкивали посетителей и влияли на прибыль, в том числе

• уведомлений об отказе файлов cookie

• Потеря посетителей социальных страниц

• оставшихся без ответа вопросов клиентов в процессе заказа

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

Scroll Maps позволяет быстро узнать, смотрят ли люди даже на контент, которым вы больше всего гордитесь. В этом примере, сравнивая карты прокрутки до (слева) и после (справа), изображения показывают, что сейчас гораздо больший процент людей просматривает продвигаемый контент.

Как использовать инструмент «Тепловая карта Crazy Egg»: пример

Вот пример того, как кто-то — на самом деле Crazy Egg — использует этот инструмент для решения проблем на главной странице своего клиента. Работая над собственным веб-сайтом Нила Пателя, цель заключалась в увеличении конверсии на 100 процентов.

В итоге команде удалось увеличить конверсию более чем на 400 процентов, согласно данным инструмента Crazy Egg.

Началась работа над домашней страницей Нила:

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

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

Многие люди нажимали на места, на которые нельзя было кликнуть — знакомая история.

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

Глядя на отчет Confetti, было легко увидеть, что 49% трафика, приходящего на страницу, поступало из QuickSprout, личного блога Нила Пателя, а это означает, что посетители, вероятно, уже знали, кто он такой.

«Вот почему, — говорит Майк Камо, который составлял отчеты о тепловой карте, — мы поняли, что нам не нужно так сильно продавать этих людей.«Слишком большая часть страницы рассказывала посетителям то, что они уже знали.

Может быть, они могли бы пойти более минималистично?

Новая страница была максимально простой: заголовок, две строки текста и форма с одним полем.

Вместо того, чтобы заставлять людей заполнять форму сразу, посетители теперь вводят URL своего веб-сайта и анализируют его, а затем добавляют свои данные позже.

(Звучит знакомо? Должно быть — это то, что предлагает домашняя страница Crazy Egg, а также множество других.)

«Когда люди обнаруживают ошибки на их сайтах, они с большей вероятностью захотят подписаться на нас», — говорит Майк.

Внизу новой домашней страницы вы можете увидеть две опции: Консультации и Отзывы. Консультационная страница теперь похожа на исходную домашнюю страницу и содержит много одинаковых копий:

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

Разница в производительности между двумя страницами огромна. На первой странице было всего 2,1% конверсий.

На новой странице 26% посетителей заполнили первую форму.

Новая страница — это двухэтапный процесс, и не все, кто заполнил первую форму, стали лидом. Проверьте на второй странице, и фактический коэффициент конверсии составляет 9,1%, что на 433% больше.

Используя вместе различные типы тепловых карт, Crazy Egg удалось добиться значительного увеличения конверсии.

Очевидно, что ни один инструмент тепловой карты или какой-либо другой инструмент не обладает встроенным творчеством и не избавляет от необходимости в отличном дизайне, копировании и поисковой оптимизации.

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

Заключение

Тепловая карта — это основа любой стратегии CRO (оптимизации коэффициента конверсии). Это также очень недооцененный инструмент из-за того, насколько он мощный.

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

Вы также можете видеть, откуда приходят ваши посетители, следить за коэффициентом конверсии просмотров страниц в клики и многое другое.

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

Мы увидели, как тепловые карты можно использовать для понимания поведения конверсии и оптимизации воронки продаж.

Использование простой тепловой карты позволяет увидеть, нажимают ли посетители ваши элементы конверсии, а если нет, то на что они нажимают вместо этого.

Это почти всегда что-то неожиданное.

И это позволяет вам ответить на вопрос, на который не может ответить никакая статистика отказов: почему люди уходят с вашего сайта?

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

Data from Confetti и Scroll Maps позволяют более детально определять поведение пользователя, сохраняя при этом такой же интуитивный анализ тепловых карт, как просмотр экрана.

Перекрестные ссылки Overlay, List Reports и User Session Recordings позволяют вам видеть, на что направлено внимание и кто именно куда щелкает.

Сегментирование трафика по активности и источнику и понимание его с точки зрения количества посетителей, которые фактически просмотрели эту часть страницы, может спасти вас от «неправильной оптимизации» неправильных частей страницы.Это также может сделать вашу контентную игру сильной!

Трудно превзойти этот простой и универсальный инструмент для оптимизации страниц или целых веб-сайтов.

Как можно использовать тепловые карты в своих интересах? Начните использовать бесплатную пробную версию Crazy Egg , чтобы узнать, где вы можете улучшить конверсию своего сайта!

бесплатных тепловых карт веб-сайтов | Smartlook

Зачем использовать тепловые карты?

Тепловые карты — мощный инструмент по нескольким причинам. Это наглядный способ увидеть агрегированные данные, которые расскажут вам о том, что работает, а что нет.Вы видите, куда люди нажимают. Вы видите, куда они перемещают мышь. И вы видите, как далеко они прокручивают страницу.

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

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

Типы тепловых карт в Smartlook

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

В других случаях вы можете увидеть, как люди нажимают на ссылки в меню чаще, чем на ваш основной призыв к действию.Может, он недостаточно большой или достаточно контрастный? Или, может быть, текста на нем недостаточно? Тепловые карты в Smartlook — это источники гипотез о том, что можно изменить для повышения производительности вашего веб-сайта.

Перемещение тепловой карты
Карты перемещения показывают, куда люди перемещают указатель мыши. Это может указывать на сомнения. Иногда люди наводят курсор на элементы, которые могут сбивать с толку. Как неуклюжая строка текста.

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

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

Карты прокрутки в Smartlook помогут вам избавиться от лишних хлопот и реорганизовать страницы так, чтобы ни один важный элемент не оставался незамеченным.И да… Мы уже слышим вопрос. Как должна выглядеть карта прокрутки для хорошо продуманной страницы?

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

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

Страница результатов поиска? Это другая история. Когда люди видят большую часть страницы поиска, возможно, она неправильно спроектирована.Просто потому, что это не помогает людям быстро находить то, что они ищут. Поэтому часто бывает желательно быстрое переключение на такую ​​страницу.

Что делает Smartlook отличным инструментом для создания тепловых карт?

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

Различные типы посетителей на тепловых картах
Выберите между всеми, новыми и вернувшимися посетителями и посмотрите, как их поведение отличается.Вернувшиеся чаще нажимают на определенные элементы?

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

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

Все о тепловых картах. Всеобъемлющее руководство | Шрашти Сингхал

Параметры vmin и vmax используются для изменения пределов цветовой карты, которые регулируют нижнюю и верхнюю границы контрастности. Все, что ниже vmin, и все, что выше vmax, будет одного цвета соответственно.

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

 sns.heatmap (data.corr (), vmin = -0.2, vmax = 0.2) 

Значения cmap устанавливаются для изменения значения цветовой карты по умолчанию.

 sns.heatmap (data.corr (), cmap = ”coolwarm”) 

Данные центрируются на «0» на цветовой карте по умолчанию. Центр можно изменить, установив для параметра «центр» цветовой карты определенное значение.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, center = 0.6) 

Robust удаляет vmin или vmax с помощью sns.Heatmap () надежный параметр. «Надежный» работает как «автоконтраст» для выбора хороших значений путем фиксации уровней контрастности на основе квартилей.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, robust = True) 

Параметр Annot заполняет ячейки относительными коэффициент корреляции от -1 до 1.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, annot = True) 

«Аннотация» только добавляет числовое значение в ячейку тепловой карты Python, но параметр «fmt» позволяет нам изменять формат этих аннотаций и значительно добавлять строковые (текстовые) значения. Для строковых значений «аннотация» должна содержать массив строк, а «fmt» должна быть «s».

Экспериментальная нотация по умолчанию — 2g. Fmt принимает следующие значения:

 s - строка 
 f, F - фиксированная точка 
 g, G - общий формат 
 e, E - формат экспоненты 

Аннотации с числовым значением:

 sns.heatmap (data.corr (), cmap = 'coolwarm', annot = True, fmt = ”. 3f”) 

 data2 = (data.corr ()). round (3) 
 corrA = np.squeeze (np.asarray (data2)) 
 print (corrA) 
 rows, cols = (12, 12) 
 arr_annot = [[(str (corrA [j] [i]) + ' _ '+ str (j) +' _ '+ str (i)) для i в диапазоне (столбцы)] для j в диапазоне (строк)] 
 sns.heatmap (data.corr (), cmap =' coolwarm ', annot = arr_annot, fmt = ”s”) 

Иногда параметра annot и fmt недостаточно для создания значимой и стильной тепловой карты. Для форматирования аннотаций ячеек, таких как размер шрифта, цвет шрифта, ориентация шрифта и т. Д., Может выполняться annot_kws. «Annot_kws» означает аргументы ключевого слова аннотации, которые помогают изменить стиль и форматирование текста аннотации.

«annot_kws» принимает все аргументы «ax.text» или «matplotlib.text». Для передачи annot_kws значение аннотации должно быть True.⁷

 · annot_kws: значения как словарь ключа, сопоставления значений, необязательно 
 · fontsize: размер шрифта 
 · fontstyle: стиль шрифта, такой как курсив, наклонный и нормальный 
 · fontfamily: семейство шрифтов, подобных serif, cursive 
 · цвет: цвет шрифта 
 · альфа: прозрачность текста 
 · вращение: поворот текста 
 · вертикальное выравнивание: вертикальное выравнивание (центр, верх, низ, базовая линия, center_baseline) 
 · цвет фона: Цвет фона текстов.heatmap (data.corr (), cmap = "coolwarm", annot = True, annot_kws = {'fontsize': 12, 'fontstyle': 'italic', 'color': "b", 'alpha': 0.6, ' Rotation ': ”vertical”,' verticalalignment ':' center ',' backgroundcolor ':' w '}) 

Увеличьте или уменьшите ширину линии между каждой ячейкой с помощью параметра «ширина линии».

 sns.heatmap (data.corr (), cmap = ”coolwarm”, linewidth = 0.5) 

Иногда параметр «ширина линии» не может разделить ячейку тепловой карты из-за сложности цвета. Параметр «цвет линии» дает возможность выбрать любой цвет для линии тепловой карты. Параметр «ширина линии» является обязательным для установки «цвета линии». Список цветов см. В следующем документе.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, linewidth = 0.5, linecolor = ’g’) 

Легенда или «cbar» видна по умолчанию. Без ключа это не имеет большого смысла в тепловой карте. Тем не менее, если ключ не нужен, для параметра cbar установлено значение False.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, cbar = False) 

Параметр аргументов ключевого слова цветной полосы (cbar_kws) может принимать несколько аргументов ключевого слова в качестве словаря. «Cbar_kws» принимает все параметры цветовой полосы matplotlib.⁷

 · ориентация: направление цветовой полосы, «горизонтальное» или «вертикальное». 
 · сжатие: размер цветной полосы. 
 · удлинение: удлинение, используемое для сужения цветовой полосы. Значения могут быть «оба», «минимальное», «максимальное» и «ни одно» в зависимости от требований. 
 · extendfrac: «extendfrac» используется для регулировки расширения цветовой полосы. Значение «False» при отсутствии указателя, значение «auto» регулирует указатель автоматически, а значение с плавающей запятой позволяет настроить указатель цветовой полосы вручную. 
 · ticks: Параметр «ticks» используется для изменения отметок цветовой полосы; значение может быть списком или множественным массивом тактов. 
 · drawedges: для краев на цветной полосе.Значение логическое. 'True' для краев, 'False' без краев. Sns.heatmap (data.corr (), cmap = "coolwarm", cbar_kws = {"label": "шкала качества вина", "ориентация": "горизонтальная", «Shrink»: 1, «extend»: «both», «extendfrac»: 0,1, «ticks»: np.arange (0,3), «drawedges»: True}) 

ax и cbar_ax используются для построения тепловой карты и cbar на отдельных осях.

 f, (ax, cbar_ax) = plt.subplots (1,2, figsize = (15,12), gridspec_kw = {«wspace»: 0.05, «width_ratios» :( 0.8,0.1)}) 
 ax = sns.heatmap (data.corr (), cmap = 'coolwarm', ax = ax, cbar_ax = cbar_ax) 

‘ax’ также используется для установки различных функций уровня осей, таких как заголовок, метка x, метка y и т. Д.

 f, (ax, cbar_ax) = plt.subplots (1,2, figsize = (15 , 12), gridspec_kw = {«wspace»: 0,05, «width_ratios» :( 0,8,0.1)}) 
 sns.heatmap (data.corr (), cmap = 'coolwarm', ax = ax, cbar_ax = cbar_ax) 
 ax.set (title = «Карта качества вина», 
 xlabel = «Строки характеристик», 
 ylabel = «Столбцы характеристик») 

Параметр «квадрат» используется для формирования ячеек тепловой карты в виде квадратов. «Квадрат» заставляет пропорции блоков быть одинаковыми.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, square = True) 

Для установки меток на оси X и Y используются параметры «xticklabel» и «yticklabel».

 xticklabel: для размещения тегов на оси X тепловой карты.«Xticklabels» - необязательный параметр, который принимает аргументы как «auto», bool, list-like, numpy array или int.  False: , чтобы скрыть метки  Array / list / int : для установки значений, отличных от defaultsns.heatmap (data.corr (), cmap = ”coolwarm”, xticklabels = np.arange (0,12)) 

Вращение меток метки возможно с помощью параметра «ротация».

Чтобы повернуть метки по умолчанию, для получения меток по умолчанию используется «get_yticklabels ()» или «get_xticklabels ()», затем для поворота устанавливается значение угла.

 HM = sns.heatmap (data.corr (), cmap = ”coolwarm”) HM.set_yticklabels (HM.get_yticklabels (), вращение = 40) 

Всю тепловую карту можно разделить на два треугольника: верхний и нижний. Оба треугольника предоставляют только полный набор информации. Поэтому строить полную тепловую карту излишне. Желательно построить любой из треугольников.

Чтобы замаскировать верхний треугольник, «triu», используется метод numPy. Чтобы скрыть нижний треугольник «tril», используется метод numPy.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, mask = np.triu (data.corr ())) 

Чтобы скрыть определенные значения, Условие скрытия желаемых значений передается в параметре «маска». Здесь мы маскируем каждую альтернативную строку, начиная со строки 1, и каждый альтернативный столбец, начиная с столбца 0.

 mask = np.нули (data.corr (). shape) mask [1 :: 2,0 :: 2] = 1sns.heatmap (data.corr (), annot = True, cmap = ”coolwarm”, mask = mask) 

 data1 = (data.corr ()). round (3) corrA = np.squeeze (np.asarray (data1)) mask = np. нули (data.corr (). shape) для i в диапазоне (12): для j в диапазоне (12): если corrA [i] [j] <0: маска [i] [j] = 1plt.figure (figsize = (15,12)) sns.heatmap (data.corr (), annot = True, cmap = ”coolwarm”, mask = mask) 

 kwargs = {'alpha':. 9, 'linewidth': 3, 'linestyle': '-', 'linecolor': 'k', 'rasterized': False, 'edgecolor': 'w', «capstyle». ”: 'Projecting',} sns.heatmap (data.corr (), cmap =” coolwarm ”, ** kwargs) 

 sns.set_theme (context = 'paper', style = 'ticks', font_scale = 2) sns.heatmap (data.corr ()) sns.despine () 

 plt.subplot (1,3,1) 
 sns.heatmap (data.corr (), cbar = False, linecolor = ”w”, linewidths = 1) plt.subplot (1,3,2) 
 sns.heatmap (data = data [['качество', 'алкоголь']]. corr (), cmap = 'inferno') plt.subplot (1,3,3) 
 sns .heatmap (data.corr (), cmap = ”coolwarm”, mask = np.tril (data.corr ()), cbar = False) 

 sns .set_theme (context = 'paper', style = 'ticks', font_scale = 2) f, (ax, cbar_ax) = plt.subplots (1,2, figsize = (15,12), gridspec_kw = {«wspace»: 0,05, «width_ratios» :( 0,8,0.05)}) mask = np.triu (data.corr ()) annot_kws = {'fontsize': 14, 'fontstyle': 'italic', 'fontweight': 'bold', «цвет»: «k», «альфа»: 0.6, «вращение»: нет, «вертикальное выравнивание»: «центр», «цвет фона»: «нет»} cbar_kws = {«метка»: «шкала цвета качества вина», «ориентация»: «вертикаль», «сжатие»: 1 , 'extend': 'max', 'ticks': [- 0,8, -0,5,0, 0,5], 'extendfrac': 0,1, «drawedges»: True} sns.