Конструктор скриптов Telly: Яндекс.Вебвизор, UI/UX и результаты первого месяца
Прошел первый месяц жизни нашего второго продукта (конструктора сценариев и скриптов продаж) и откровением этого периода стал Яндекс.Вебвизор. Почему - в этой статье с подробностями.
В прошлой статье я рассказал о том с чего мы начинали, как пришли к тому, чтобы вынести сервис из основного продукта и что получилось после первой итерации.
Андрей Шмиг
В этой статье:
- Итого первого месяца в цифрах;
- Обновленный UI/UX личного кабинета (+Яндекс.Вебвизор);
- Что дальше?
Из прошлой статьи на vc.ru...
.. закрылся проект Sale Script Gift. Бесплатный конструктор скриптов продаж в течение месяца или двух свернул свои паруса и умер, оставив за собой образ и инструкцию по развёртыванию VM.
Я бы не акцентировал на этом моменте внимание, если бы не тот факт, что на момент закрытия сервиса у нас в личном кабинете было от 60 до 80 скриптов продаж различной сложности и различного объёма. Экспорта в Sale Script Gift предусмотрено не было - голый JSON и понимание того, что данные терять нельзя, иначе будет грустно всем.
Даже не грустно, а совсем плохо, потому что оценив стоимость сервисов мы вдруг поняли, что не можем вытянуть такие регулярные платежи, а если и можем, то это будет неоправданно дорого. С другой стороны, полная потеря данных повлечёт за собой возвраты денег клиентам за сорванные сроки и проекты, что будет для нас равносильно закрытию и судам, испорченной репутации и негативным отзывам.
Выхода на тот момент не было другого, как оперативно поднимать что-то своё и одновременно конвертировать существующий формат хранения сценариев в другой. Да, был всё-таки вариант поднять ту же VM, которую парни оставили в паблике, но на тот момент у нас уже была инфраструктура на PHP / MySQL и начинать разворачивать что-то на Python / Java желания не было от слова совсем.
Героическими усилиями 1 человека за 1 день и 1 ночь был поднят самый ужасный по удобству, но спасительный редактор скриптов продаж (видео-инструкция для сотрудников)
А теперь к тому, что у нас получилось спустя 30 дней после запуска.
Итоги первого месяца в цифрах
Хотелось бы начать с показа изменений трафика на сервис после первой публикации на vc.ru:
Андрей Шмиг
Вот и данные по распределению источников регистраций:
Андрей Шмиг
Всего на сервисе зарегистрировалось 67 пользователей (включая меня).
Количество созданных пользователями сценариев - 51, а количество разработанных на продажу шаблонов скриптов продаж на этапе модерации - 34.
Не "уау", но и не так, чтобы огорчиться. Даже такое небольшое количество пользователей помогло нам лучше понять модель поведения того, кто работает в нашем сервисе.
Обновленный UI/UX личного кабинета и роль Яндекс.Вебвизора
К сожалению я не сразу догадался, что будет полезно фиксировать изменения в формате "до" / "после", поэтому единственная запись, которая осталась со старым интерфейсом - видео-инструкция на YouTube.
Просмотр приведённой видео-инструкции на скорости х2 даст лучшее понимание техник, которые использовали ниже.
Итак, урок №1:
Никто не смотрит видео-инструкции, а если и смотрит, то первые несколько секунд.
Если вы обратите внимание, то заметите на самом сайте Telly крупные кнопки "Play", кликнув на которые отобразится всплывающее окно с видео-инструкцией по работе в личном кабинете (конструкторе), но особенность в том, что в кабинете ссылок на это видео просто нет!
Несмотря на то, что некоторые пользователи всё-таки открывали видео, досматривать они его не собирались и сразу прыгали экспериментировать с редактором натыкивая себе какой-то сценарий.
Решение: сразу в момент регистрации пользователя в личном кабинете мы создаём ему тестовый сценарий с простейшей логикой и понятным названием "Тестовый сценария для обучения использования Telly" (примерно так).
В результате получаем: после регистрации пользователь видит сценарий с понятным названием, незамедлительно его открывает, видит примеры реплик и вопросов, начинает "натыкивать" уже в нём. Этим подходом нам удалось затянуть пользователя "глубже" в воронку реализации и использования сценария, увеличить время нахождения в кабинете и взаимодействию с сервисом.
Вывод: обучение в процессе работы.
Теперь давайте поговорим о "слепых зонах" пользователя (или "элементной слепоте" - термин на ходу придумал, кто профи - подправьте).
Внимание, "после":
На что вы первым делом обращаете внимание? Куда смотрите? Какие элементы вам бросаются в глаза?
Итак, урок №2:
Пользователь не обязан знать, что значит твоя иконка без подписи.
Обратите внимание, что в правом нижнем углу есть кнопка "Редактировать", а раньше там было два "кругляшка" с иконками при наведении на которые появлялась подсказка "Редактировать".
Просматривая Яндекс.Вебвизор я ужаснулся, какое огромное количество пользователей судорожно дергали мышкой и тыкали везде, чтобы найти режим редактирования, но ТАК И НЕ ЗАМЕЧАЛИ синюю иконку с ручкой / пером. Катастрофа!
Решение: если это возможно - добавляйте текстовое описание элемента сразу. Оставляйте без подписи только самые универсальные иконки - копировать, вставить, вырезать, удалить, закрыть и т.п.
Сделаем ещё один шаг на пути совершенствования пользовательского интерфейса. Смотрим редактор.
Анализируйте паттерны в действиях пользователей - из точки А в точку Б, вырезайте всё лишнее между.
На этот момент мне удалось обратить внимание только благодаря одной 2 часовой записи в Вебвизоре пользователя из Санкт-Петербурга. Представьте, что 4х кнопок с правой стороны нет - назовите проблему в интерфейсе.
Увидели? Замечательно!
Именно поэтому и появились 2 дополнительные кнопки с правой стороны + возможность воспользоваться быстрыми клавишами (те самые любимые шорткаты):
Андрей Шмиг
Как по-вашему, почему мы не убрали кнопки "Добавить" из серых полос?
Итак, урок №3:
Не разрывайте старые паттерны, а дополняйте.
Ещё одна отличная реализация паттерна сокращения пути от точки А к точке Б. Внимание, экран редактирования реплики:
Андрей Шмиг
Сомневаюсь, что не-профессионал заметит здесь элементы, которые оказались самыми важными.
Заметили?
"+2 ответа" и "+3 ответа" - решение, которое было реализовано только после того, как один из пользователей добавил 12 вариантов ответа, а затем я специально пересмотрел другие записи Вебвизора. Отсматривал именно моменты работы с ответами. Бинго, у нас новая оптимизация!
Итак, урок №4:
Пользователь не дурак, у него картина мира другая.
И несколько пунктов, которые не касаются UI/UX, но дают возможность нашим пользователям эффективнее решать задачи:
Встраивание интерактивных элементов в сценарий:
Андрей Шмиг
Можете поработать с интерактивной картой прямо из сценария. Откройте вопрос "По какому адресу вы находитесь?":
Андрей Шмиг
Итак, урок №5:
Ваш сервис не то, зачем вы его сделали, а то, зачем его используют.
Что дальше?
А дальше примерно такой план:
- Аналитика
- Интеграция с CRM
- Локализация
Если вам понравилась статья или у вас есть дополнения - напишите комментарий, мне будет интересно узнать о том, как лучше разрабатывать сервисы для людей!
Зарегистрироваться на сервисе можно по этой ссылке.
Хорошего утра / дня / вечера!