Обсудим ваш проект?

Вебвизор 2.0: обновляем и тестируем

Подготовлено для Cossa.ru

Просмотров:
1365
Время на прочтение:
Статья обновлена:
11 Июня 2019
Информация о статье
Просмотров: 1365
Время на прочтение:
Статья обновлена: 11.06.2019
Дария, UX-проектировщик сайтов
Дария, UX-проектировщик сайтов

Полгода назад Яндекс обновил Вебвизор, инструмент для записи и анализа действий посетителей на сайте. В этой заметке мы наглядно покажем возможности Вебвизора 2.0 и расскажем, как его обновить.

Нужны ли новые данные при работе с тем или иным клиентом — решать уже вам. Мы рассматривали обновления на примере интернет-магазина «Гитарный клуб».

Фишки Вебвизора 2.0

Инструмент дополнили такими обновлениями:

1. Изменилось представление визитов с мобильных устройств.

Теперь визиты показываются в обрамлении экрана смартфона, причем контуры устройств на Android и iOS различаются.

Представление визитов с мобильных устройств
Представление визитов с мобильных устройств

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

В процессе изучения сайта пользователь перевернул экран
В процессе изучения сайта пользователь перевернул экран

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

Пользователь вводит данные на клавиатуре
В процессе изучения сайта пользователь перевернул экран

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

Как это использовать

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

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

В поле телефона не задан формат
В поле телефона не задан формат
В поле телефона задан цифровой формат
В поле телефона задан цифровой формат
Плохо. В поле телефона не задан формат, поэтому экранная клавиатура стандартная. Хорошо. В поле телефона задан цифровой формат, поэтому экранная клавиатура цифровая.

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

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

Содержимое корзины в записи
Содержимое корзины в записи

Как это использовать

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

3. Теперь отображаются сторонние сервисы (при условии, что они не в iframe): чаты, сервисы модальных окон и т.д.

Теперь отображаются сторонние сервисы
Теперь отображаются сторонние сервисы

Как это использовать

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

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

4. Если у пользователя открыты несколько вкладок сайта, то мы их видим.

У пользователя открыты несколько вкладок сайта
У пользователя открыты несколько вкладок сайта

Как это использовать

Если пользователь регулярно переключается между определенными страницами, значит, они является частью основного сценария выбора и покупки товара. Можно подумать об изменении навигации и объединить информацию с этих страниц на одной. Например, оформляя заказ, пользователь постоянно обращается к странице «Как купить» с условиями покупки. В этом случае логично будет продублировать информацию с этой страницы на странице оформления заказа.

5. Упростился процесс изучения видео:

  1. Если пользователь какое-то время не взаимодействовал с сайтом, запись за этот период перематывается с надписью: «Бездействие XX секунд».
  2. На таймлайне показаны моменты большей и меньшей активности пользователя, на которые при желании можно перемотать видео.
  3. Можно увеличить скорость просмотра видео: от 1х до 4х.
  4. Перечень страниц, которые пользователь посетил в рамках визита, вынесены на главную страницу Вебвизора (ранее они были внутри видео). Так, не запуская весь ролик, можно включить момент взаимодействия с конкретной страницей.
Упростился процесс изучения видео
Упростился процесс изучения видео

Как это использовать

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

Как обновить Вебвизор до Вебвизор 2.0

В настройках включите «Вебвизор 2.0» и поставьте в разработку задачу на обновление кода на сайте.

Как обновить Вебвизор до Вебвизор 2.0
Как обновить Вебвизор до Вебвизор 2.0

Обратите внимание: фраза об обновлении кода в настройках есть всегда вне зависимости от того, обновили вы код или нет.

О том, что активна новая версия Вебвизора, можно понять только по самим видео. Наиболее простой и очевидный способ проверки — посмотреть видеозаписи со смартфонов: именно они в этой версии значительно отличаются по сравнению с обычным Вебвизором.

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