Тепловая карта разочарования: детали интерфейса в ПО для бизнеса, из-за которых клиенты уходят навсегда

Самый обидный и одновременно распространенный момент в жизни ПО для бизнеса – когда клиент решает закрыть вкладку и больше никогда не возвращаться. Руководители почти никогда не знают, что именно пошло не так, потому что внешне всё выглядит пристойно: страница загрузилась, кнопки на месте, дизайн аккуратный.

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

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

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

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

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

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

В чем ловушка применения тепловых карт?

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

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

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

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

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

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

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

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

Люди не просто смотрят на эти элементы – они с ними борются, тратят на них время и душевные силы, а потом уходят. И если смотреть исключительно на стандартную тепловую карту, то создаётся впечатление, что именно эти места и есть самое ценное в интерфейсе.

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

Как собирать данные эффективно?

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

Записи действий посетителей

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

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

Воронка событий

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

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

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

Быстрые опросы на странице

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

• Указатель резко ушёл за пределы окна (вероятно, человек переключается на другую вкладку или закрывает текущую).
• Активность на странице полностью прекратилась на десять и более секунд.
• Пользователь удалил несколько символов из уже заполненного поля и замер.

Формулировка вопроса должна быть максимально нейтральной и не требовать от человека усилий. Вместо «Опишите, пожалуйста, что вызвало ваше затруднение» лучше спросить что-то вроде: «Что остановило вас от продолжения?» – и дать три-четыре типовых варианта ответа плюс поле для свободного комментария.

Составляем и анализируем тепловую карту

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

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

Первый слой: зона спокойного движения

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

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

Второй слой: зона неуверенности

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

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

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

Третий слой: зона отторжения

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

• Серия быстрых кликов по одному и тому же элементу, особенно если элемент не является кнопкой. Человек уверен, что здесь должно что-то происходить, но ничего не происходит, и он повторяет попытку с нарастающим нетерпением.
• Хаотичные перемещения между несколькими элементами, когда пользователь мечется в поисках выхода, но ни один из путей не кажется ему подходящим.
• Резкое удаление данных из уже заполненных полей, после чего следует уход со страницы. Человек уже вложил время в заполнение, но в какой-то момент решил, что продолжать бессмысленно.
• В воронке наблюдается резкий обрыв: значительный процент пользователей покидает процесс именно на этом шаге, и цифра не колеблется в зависимости от дня недели или источника трафика, что говорит о системной, а не ситуативной проблеме.
• В опросах появляются эмоционально окрашенные комментарии: «бесит», «непонятно зачем», «я потратил десять минут и бросил».

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

Как всё это отобразить на одной схеме

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

Рядом с каждым помеченным местом коротко подписывается, какой именно сигнал там обнаружен: «долгие паузы», «повторные клики по статичному блоку», «обрыв воронки на этом поле», «три жалобы в опросах за неделю».

Несколько принципов безопасного проектирования

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

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

Правило первое: проверять цену до щелчка

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

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

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

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

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

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

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

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

Правило третье: называть вещи своими именами

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

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

На что обратить внимание заранее:

• Избегать профессиональных и внутренних терминов команды. То, что для разработчиков «сущность», для пользователя может быть просто «записью» или «карточкой».
• Проверять, не скрывается ли за одной короткой надписью два разных действия. Например, кнопка «Сохранить» может означать и «сохранить как черновик», и «сохранить и отправить на проверку» — если разница важна, лучше её явно обозначить.
• Не маскировать опасные или необратимые действия под безобидные формулировки. Если удаление действительно окончательное, слово «Убрать» только создаст ложное чувство безопасности, за которым последует разочарование.

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

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

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

Разработка ПО от 66 Бит

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

Опытные специалисты 66 Бит проведут глубокий аудит ваших бизнес-процессов, спроектируют безопасный и эффективный интерфейс и разработают решение, которое повысит производительность вашего дела в разы! Скорее переходите на наш сайт по ссылке и оставляйте заявку.