Улучшение взаимодействия с кнопками call to action в объявлении
Проблема
Кнопки call to action являются как трамплинами, так и барьерами на пути к целевому действию. Из-за большого количества кнопок пользователи тратят больше времени на выбор. Если кнопки находятся вне видимости, пользователь может вовсе не выполнить нужное действие, а бизнес потеряет потенциального клиента.
Бизнес запросил внедрение нового функционала — открытое диалоговое окно чата с риелтором (продукт компании Этажи чаты) в карточку специалиста на странице объекта. Однако фиксированная карточка была уже перегружена кнопками и информацией. В мобильной версии кнопки действий разбросаны по макету, что усложняет их нахождение. Поэтому вместо простого добавления чата я предложила переработать все кнопки действий, снизив визуальную и информационную перегруженность.
Цель
- Улучшение пользовательского опыта: Снизить визуальную и информационную перегруженность карточки специалиста
- Интеграция нового функционала: Внедрить чаты и кнопки действий, не перегружая интерфейс
- Повышение конверсии: Увеличить количество взаимодействий пользователей с кнопками действий, повысить конверсию взаимодействия с объявлением
Процесс:
1 Анализ текущего дизайна: Изучение текущих call to action, выявление ключевых проблем и точек перегруженности. Собрали метрики, выявили зоны взаимодействия пользователей с карточкой специалиста и кнопками действий.
2 Исследование: Анализ информации, исследование конкурентов и схожих сервисов.
3 Создание фреймворка и визуального стиля: Проектирование нескольких вариантов, демонстрация команде и выбор варианта для тестирования.
4 Прототипирование: Создание прототипа в Figma для исследования.
5 Исследование с пользователями: Проведение интервью с 8 пользователями, тестирование текущей версии и нового прототипа, анализ результатов.
6 Корректировка макетов: На основе выводов, подготовка макетов и состояний интерфейса для запуска A/B теста (сейчас мы с командой находимся на данном этапе).
Дизайн процесс
Mobile
Проблема 1: Низкое взаимодействие действий в объявлении
Проблема: Кнопки действий разбросаны по всей странице, что затрудняет их нахождение пользователями и снижает взаимодействие:
- Кнопка «Поделиться» в первом блоке медиаслайдера. Как выяснилось на интервью не все пользователи считывают данное действие
- Кнопка «Избранное» во втором блоке рядом с ценой
- Кнопки «Добавить в сравнение» и «пожаловаться на объявление» в 7 блоке в отдельном острове
Решение:
Переместить все кнопки действий в хедер страницы для улучшения навигации:
- Кнопка «поделиться»: Будет всегда в зоне видимости пользователей, используя ту же иконку, что и на десктопе. Так как исследование показало, что данная кнопка является самой важной в интерфейсе. Пользователи чаще делятся с близкими людьми, и как следствие чаще оставляют заявку на просмотр квартиры, если заинтересованы в объекте
- More-menu: Для перемещения всех действий с объявлением
- Кнопка «избранное» будет продублирована рядом с ценой
- Navigation bar расположен в первом блоке медиаслайдера и сохраняется при скролле страницы
Проблема 2: Перегруженная карточка специалиста затрудняет внедрение чата
Проблема:
Множество действий в карточке затрудняет выбор нужной кнопки. Чат скрыт за кнопкой, что снижает конверсию
Решение:
- Сократить количество кнопок до двух: для тех, кто предпочитает звонить сам, и для тех, кто оставит номер
- Убрать кнопку «забронировать», так как в Sticky Header уже есть якорная ссылка «Бронирование»
- Переместить кнопку «Я не дозвонился» в More-menu, так как исследование показало, что в случае неудачного звонка пользователи перезвонят позже, оставят номер в форме «перезвоните мне», напишут специалисту в чат или будут ждать звонка, так как специалист увидит пропущенный вызов. То есть выберут альтернативные способы связи
- Убрать подпись «Специалист по недвижимости», так как на исследовании респонденты понимали, с кем они свяжутся
- Заменить кнопку чата на диалоговое окно с популярными тегами и предзаполненным приветствием
Desktop
Проблема 1: Низкое взаимодействие с действиями в объявлении
Проблема:
Кнопки действий находятся во втором блоке с описанием, поэтому при скролле и изучении информации они становятся недоступными пользователю, что снижает шанс сохранения объявления и последующего обращения в компанию
Решение:
Переместить кнопки действий в Sticky Sidebar для постоянной видимости.
Менее важные действия скрыть в More-menu:
- «Сообщить об ошибке»: Пользователи сообщают об ошибке только в случае неправильной цены, предпочитая писать специалисту в чат или спрашивать во время разговора, если объявление заинтересовало. Эту кнопку чаще используют специалисты компании
- «Я не дозвонился»: Пользователи могут оставить заявку. Респонденты отмечали, что готовы сделать повторный звонок или написать в чат.
Проблема 2: Перегруженная карточка специалиста затрудняет внедрение чата
Проблема:
- Множество действий затрудняет выбор нужной кнопки
- Чат скрыт за кнопкой, что снижает конверсию
- Много текстовой информации, необходимой по запросу юристов, увеличивает когнитивную нагрузку на карточку специалиста
Решение:
- Упрощение информации: Удалила надпись «Специалист по недвижимости», так как пользователи уже знают, кому звонят и пишут
- Оставить две кнопки call to action: самостоятельный звонок и оставить заявку
- Внедрить чат с приветственным сообщением и тегами. Респонденты отметили удобство этого функционала
- Перенести действия с объявлением (поделиться, в сравнение, в избранное) в фиксированную карточку. Это повысит удобство, позволяя пользователям всегда иметь доступ к кнопкам действий при изучении информации об объекте. Что увеличит количество сохранений объявлений и удобство отправки ссылок в мессенджеры
- Скрыть правовую информацию в модальном окне
- Добавила контрастный бейдж рейтинга, чтобы привлечь внимание пользователей и помочь быстрее оценить качество риелтора
- Добавила QR-код для удобства звонка с мобильного устройства, что должно повлиять на увеличение количества звонков
Результаты интервью
- Гипотеза: Добавление кнопок (сравнить, поделиться, добавить в избранное) в карточку СПН может быть не очевидно для пользователя (Desktop)
Результат: Опровергнуто. Все респонденты справились и нашли функционал быстрее, чем на текущей версии сайта - Добавление eChat повлияет на увеличение/улучшение количества лидов
Результат: Подтверждено. Респонденты видели, что специалисту можно написать, и большая часть отмечала, что воспользуется данным функционалом. - Инпут-теги интуитивно понятны пользователю и сократят звонки в пользу сообщений
Результат: Нужно тестировать на сайте (ставить цели на теги и собирать сообщения). Часть респондентов отметила, что сформулируют вопрос от себя, остальные - воспользовались бы тегом - Кнопка «Я не дозвонился» не нужна, так как есть возможность оставить заявку
Результат: Подтверждено. Респонденты отмечали, что сделают повторный звонок, оставят номер телефона, позвонят по другому номеру или напишут в eChat. - Кнопка «Сообщить об ошибке» в more-меню СПН может оказаться не очевидной
Результат: Подтверждено. Но пользователи отмечали, что сообщат об ошибке специалисту только если будет неправильная цена. В остальном они не будут пользоваться функционалом. Поэтому данный функционал оставили для сотрудников компании, которые пользуются функционалом. - Кнопки «добавить в избранное», «добавить в сравнение», «пожаловаться на объявление» в одном месте удобны для пользователя
Результат: Подтверждено. В варианте, когда кнопки разбросаны по странице (Mobile), пользователи тратили много времени на поиск функционала. - Меню в хедере, которое появляется при скролле, увеличит взаимодействие с объявлением
Результат: Подтверждено. Пользователи активно взаимодействуют с ним и знают, что все действия можно найти там. Сокращается время на поиск функционала. - Кнопка «Поделиться» положительно влияет на взаимодействие
Результат: Подтверждено. Респонденты отмечали, что удобно отправить короткую ссылку сразу в мессенджеры. Таким образом, будут чаще делиться с родственниками, что может повлиять на обращение в агентство и покупку. - Функционалом «Сравнение» в новом дизайне пользователи начнут пользоваться чаще
Результат: Подтверждено. Респонденты начинают видеть его под карточкой риелтора (особенно на Desktop) и заинтересовались, как это работает - Убрали надпись «Специалист по недвижимости» – пользователь имеет понимание, кому звонит и пишет
Результат: Подтверждено.