Содержание
- Что такое тепловые карты в UX-дизайне?
- Преимущества использования тепловых карт в UX-дизайне
- Различные типы тепловых карт UX
- Как определить болевые точки пользователей на тепловых картах UX
- Использование карт кликов для выявления ошибочных кликов
- Использование кликмапов для выявления неработающих ссылок и кнопок
- Использование кликмапов для выявления холодных CTA
- Использование карт прокрутки для дальнейшего изучения холодных CTA
- Использование карт прокрутки для выявления неинтересного контента
- Инструменты для создания тепловых карт UX
- Заключение
Поэтому вам нужно доказать, что вы привлекаете внимание пользователей к вашим CTA, формам регистрации, правильным теглайнам и информации. Тепловые карты - простой способ измерить, что привлекает внимание.
Тепловые карты UX используются для улучшения пользовательского опыта приложений и веб-сайтов. В этой статье вы узнаете, что такое тепловые карты UX, для чего используются различные типы тепловых карт UX, как определить болевые точки пользователей на тепловых картах UX и как настроить инструменты тепловых карт UX.
Что такое тепловые карты в UX-дизайне?
Тепловые карты - это визуализации данных, создаваемые инструментами тепловых карт. В UX-дизайне одна тепловая карта отображает действия пользователей на экране приложения или странице сайта в отношении нажатий, прокрутки и перемещения мыши. Используя эту информацию, UX-дизайнеры могут улучшить пользовательский интерфейс приложения или сайта.
Они называются тепловыми картами, потому что области с высокой активностью визуализируются как ”горячие” (красно-оранжевые), области со средней активностью - как “теплые” (оранжево-желтые), а области с низкой активностью - как “холодные” (желто-прозрачные). Эти визуализации размещаются поверх снимков экрана/страницы, чтобы команды разработчиков (обычно UX-дизайнеры) могли увидеть, как вели себя пользователи в тот момент, когда они там находились:
Преимущества использования тепловых карт в UX-дизайне
В целом, UX-исследования не обязательно должны быть дорогими. Тем не менее, некоторые его аспекты определенно не дешевы (например, привлечение участников и компенсация их времени, особенно для новых продуктов с небольшим количеством пользователей).
К счастью, тепловые карты UX используются для выявления проблем - пусть и незначительных, как правило, - без участия участников. Иногда их можно использовать даже для сужения круга крупных проблем. Это значит, что когда придет время проводить UX-исследование с участниками, все пройдет гораздо спокойнее, и вам не придется компенсировать им лишнее время.
В качестве альтернативы можно проверить потенциальные решения проблем, выявленных с помощью тепловых карт UX, используя A/B-тестирование или многомерное тестирование вместо участников, но только в сценариях с низким уровнем риска, когда эти решения быстро/легко/дешево реализуются.
Подводя итог, можно сказать, что тепловые карты UX способствуют выявлению болевых точек пользователей экономически эффективным способом.
Различные типы тепловых карт UX
Существуют различные типы тепловых карт UX; каждый тип отслеживает различные виды поведения пользователей.
Тепловые карты кликов (clickmaps)
Карты кликов визуализируют места, на которые нажимают пользователи:
UX-дизайнеры или UX-исследователи могут использовать эту информацию, чтобы определить, на какие интерактивные элементы не нажимают. Они также могут использовать ее для обнаружения ошибочных кликов (когда пользователи нажимают на неинтерактивные элементы, ошибочно полагая, что они интерактивные).
Кроме того, разработчики могут использовать карты кликов для обнаружения ”мертвых” кликов, когда интерактивные элементы не реагируют на клики или реагируют на них не так, как предполагалось. Когда пользователи ошибаются в нажатии или делают мертвые нажатия несколько раз от разочарования, некоторые инструменты кликарт отмечают их как “яростные нажатия”.
Тепловые карты прокрутки (scrollmaps)
Карты прокрутки визуализируют, куда пользователи прокручивают страницу:
UX-дизайнеры/исследователи могут использовать эту информацию, чтобы понять, прокручивают ли пользователи страницу до ключевых призывов к действию (CTA). Они также могут использовать эту информацию, чтобы увидеть, какие разделы интересуют или смущают пользователей.
Тепловые карты движения мыши (карты внимания/говермапы)
Карты внимания/говермапы визуализируют, куда пользователи перемещают мышь:
Наведенные карты не являются полезными и их следует избегать. Причина в том, что они не показывают области интереса, поскольку пользователи не направляют свои мыши на то, на что они смотрят. На самом деле, они обычно стараются держать указатель в безопасном месте, где они не смогут случайно с чем-то взаимодействовать, пока они занимаются содержимым, которое они хотят увидеть.
Кроме того, хотя они в некоторой степени отслеживают клики и прокрутку, карты кликов и прокрутки, соответственно, уже делают это и делают это более точно.
И наконец, они не работают на сенсорных устройствах, поскольку у них нет указателя.
Как определить болевые точки пользователей на тепловых картах UX
В этом разделе я более подробно расскажу о различных типах проблем пользователей, которые можно выявить с помощью тепловых карт, о том, как они могут выглядеть на тепловой карте, и о том, как следует проверять эти проблемы и их решения.
Использование карт кликов для выявления ошибочных кликов
Если кликабельная карта показывает горячую область там, где ее не должно быть, значит, у пользователей есть основания полагать, что в этой области находится элемент, на который можно нажать. Чаще всего это происходит, когда текст подчеркивается для акцента, что заставляет пользователей ошибочно нажимать на него для получения ссылки.
Карты кликов (и тепловые карты в целом) редко указывают на первопричину проблем; однако ошибочные клики обычно довольно легко обнаружить, поскольку мы знаем, где наши пользователи не должны и не обязаны кликать.
Исправить ошибку можно, [дав понять, что элемент не является кликабельным] (https://blog.logrocket.com/ux-design/affordances-ux-design/):
Использование кликмапов для выявления неработающих ссылок и кнопок
Мертвые ссылки и кнопки трудно обнаружить на кликабельной карте; в конце концов, пользователи нажимают на кликабельные элементы - это совершенно нормальное явление. Однако пользователи, как правило, не спешат нажимать на них, поскольку они не реагируют на нажатия, и кликмапы (или, скорее, инструменты для создания тепловых карт) способны это заметить.
Все, что вам нужно сделать, это передать эти проблемы разработчикам, чтобы они исследовали их как ошибки.
Использование кликмапов для выявления холодных CTA
Легко увидеть, на какие CTA (призывы к действию) пользователи не нажимают. Области с низкой активностью будут холодными (желтыми/синими), а области с отсутствием активности не будут иметь никакого цвета. Однако чтобы выяснить, почему пользователи не нажимают на них, вам нужно провести дополнительное исследование с помощью других методов UX-исследований:
Я не рекомендую пытаться выяснить, почему пользователи не нажимают на элемент. Вместо этого попробуйте выяснить, почему они не совершают действие, к которому мы их призываем. В первом случае предполагается, что элемент - это правильный способ совершить действие и что пользователи хотят совершить это действие, тогда как во втором случае эти предположения отпадают. Тестирование пользователей (как модерируемое, так и немодерируемое) - единственный способ узнать, что происходит на самом деле.
Если вы создаете карты кликов с помощью инструментов тестирования прототипов, вы сможете посмотреть и послушать записи сессий ваших ”мертвых” кликеров. Если вы генерируете карты кликов на основе реального трафика приложения/веб-сайта, вы сможете наблюдать только за действиями пользователей, а это может оказаться недостаточно полезным, чтобы сделать вывод о том, что происходит.
Однако сначала проверьте свои карты прокрутки (см. ниже), потому что возможно, что пользователи даже не видят кликабельные элементы.
Использование карт прокрутки для дальнейшего изучения холодных CTA
CTA может быть холодным, если он находится слишком далеко внизу страницы, недостаточно заметен или не находится в пределах ориентира, который ожидают увидеть пользователи. Кроме того, если он недостаточно четко обозначен заголовком раздела или собственным ярлыком, пользователи могут подумать, что он делает что-то другое:
Поскольку количество потенциальных виновников в этом сценарии меньше, если у вас нет доступа к записям сессий с аудиообратной связью, вам может хватить внимательного взгляда на эвристику дизайна в сочетании с A/B/многовариантным тестированием.
Вы можете протестировать перемещение раздела дальше по странице, изменить его дизайн, переместить его на ориентир (например, в основную навигацию), если пользователи ожидают, что он будет именно там, или обозначить его более четко.
Использование карт прокрутки для выявления неинтересного контента
КогдаЕсли речь идет о холодном информационном контенте, проверьте, есть ли у раздела четкий заголовок. Если он имеет четкий заголовок, значит, пользователям он просто неинтересен, и вам стоит подумать о том, чтобы просто удалить его. Если за разделом следуют более теплые цвета, это еще больше подтверждает предположение о том, что пользователи его пропускают:
Если за ним следуют более холодные разделы и пользователи не переходят на другую страницу перед ним (вы можете сопоставить это с картой кликов), это то, что мы называем ”отсевом”.
Независимо от того, нашли ли пользователи то, что искали, в этот момент или нет, это возможность сделать что-то для предотвращения отсева. Рассмотрите возможность тестирования оптимизированного контента. Например, меньше слов, больше визуальных эффектов, ссылки на что-то другое или просто улучшение контента):
Наконец, перепроверьте ”горячие” области, чтобы убедиться, что пользователи не тратят много времени на то, что не требует этого. Если это так, то, скорее всего, дизайн/контент сбивает с толку, например, привлекает по неправильным причинам. Получение обратной связи через тестирование прототипов - лучший способ решить эту проблему.
Однако если это важная область, на которую пользователи, возможно, захотят потратить некоторое время, но там нет призыва к действию, вам, вероятно, стоит его добавить!
Инструменты для создания тепловых карт UX
Существует два различных типа инструментов для создания тепловых карт, когда речь идет об UX: есть инструменты для создания тепловых карт, которые могут отслеживать действия реальных пользователей в приложениях и на сайтах, а есть инструменты для тестирования прототипов с функциями тепловых карт.
Инструменты для тестирования прототипов с аналитикой тепловых карт
Инструменты тестирования прототипов с функциями тепловой карты полезны для команд, которые еще не создали свой продукт и поэтому не могут использовать инструменты тепловой карты на базе приложений/веб-сайтов. Они также полезны для продуктовых команд, которые хотят провести исследование перед внедрением, что дешевле, чем внедрять непроверенные решения, если они окажутся неэффективными, и менее рискованно по той же причине. Наконец, тепловые карты для тестирования прототипов выявляют исключительно проблемы дизайна, в то время как инструменты тепловых карт на базе приложений/веб-сайтов могут выявить и проблемы разработки, что может быть не идеальным для начального этапа тестирования.
Инструменты для тестирования прототипов не так уж сильно отличаются друг от друга в плане тепловых карт. Основные различия заключаются в том, какие функции исследования/тестирования они предлагают, которые дают данные тепловых карт в дополнение к другим типам данных. UXTweak, UXArmy, Useberry, Maze, Userbrain, UserTesting и Ballpark - все это отличный выбор.
При использовании инструментов для тестирования прототипов тепловые карты создаются автоматически, и вы сможете увидеть их вместе с остальными данными, собранными в ходе тестирования. При настройке теста вам понадобится ссылка на ресурс вашего прототипа. Чтобы сделать это, например, в Figma, начните с открытия прототипа в режиме Present (Command + Option + Return / Ctrl + Alt + Return):
После этого нажмите на синюю кнопку Поделиться прототипом на горизонтальной панели инструментов, убедитесь, что в настройках установлено значение Любой, у кого есть ссылка, может просматривать прототипы, а затем нажмите Копировать ссылку.
Затем предоставьте эту ссылку на общий доступ выбранному вами инструменту тестирования прототипов. Например, при настройке теста в Maze нажмите на кнопку Добавить блок, выберите опцию Тест прототипа, нажмите на кнопку +Добавить прототип, а затем вставьте туда свою ссылку на ресурс:
Убедитесь, что вы отслеживаете так называемую репрезентативную выборку пользователей, которая представляет собой подмножество пользователей, точно отражающее характеристики всех пользователей. Если вы не отслеживаете репрезентативную выборку пользователей, то полученные данные не будут точно отражать всех пользователей. Лучший способ сделать это - выбрать наугад большую выборку, скажем, из 20 участников.
Инструменты тепловой карты для живых приложений и веб-сайтов
Инструменты Heatmap, такие как LogRocket, предоставляют вам код отслеживания, который необходимо передать разработчику (разработчикам) для установки.
После этого вам нужно будет настроить кампанию. Здесь вы укажете экраны/страницы для отслеживания, устройства для отслеживания, дату начала и окончания кампании и многое другое. Этот процесс отличается в зависимости от инструмента, но он достаточно прост.
Кроме того, вам не придется беспокоиться о репрезентативной выборке пользователей, если приложение/веб-сайт получает определенную посещаемость.трафик.
Являются ли инструменты UX heatmap дружественными к конфиденциальности?
Инструменты UX heatmap дружелюбны к конфиденциальности. Обычно они подтверждают, каким законам и нормам (например, GDPR) они соответствуют, какие данные они собирают и что они с ними делают. Как правило, они анонимизируют аналитические данные, а также размывают конфиденциальные данные, предоставленные пользователями, при создании снимков и записи сессий.
Однако, прежде чем отслеживать пользователей в приложениях и на веб-сайтах, вам необходимо получить их контент, поскольку эти типы трекеров не считаются основными. Согласно законам и нормам многих стран, только основные трекеры не требуют согласия.
Заключение
Тепловые карты UX отлично подходят для выявления болевых точек пользователей. Даже если они не помогут вам выявить их все или определить, в чем, собственно, заключаются проблемы, это все равно довольно дешевый способ, по крайней мере, найти направление на север. Это экономит время и деньги, когда речь идет о более интенсивных методах UX-исследования или когда UX-тепловые карты достаточно красноречивы, чтобы сразу перейти к A/B-тестированию или многовариантному тестированию.
Инструменты для составления тепловых карт UX относительно дешевы, просты во внедрении и использовании. После настройки они генерируют тепловые карты в фоновом режиме, чтобы вы могли использовать их в любое время.
Если у вас есть вопросы, задавайте их в разделе комментариев ниже, и спасибо, что читаете!