Конструктор скриптов Telly: Яндекс.Вебвизор, UI/UX и результаты первого месяца

Прошел первый месяц жизни нашего второго продукта (конструктора сценариев и скриптов продаж) и откровением этого периода стал Яндекс.Вебвизор. Почему - в этой статье с подробностями.

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

В этой статье:

Из прошлой статьи на vc.ru...

А теперь к тому, что у нас получилось спустя 30 дней после запуска.

Хотелось бы начать с показа изменений трафика на сервис после первой публикации на vc.ru:

Вот и данные по распределению источников регистраций:

Всего на сервисе зарегистрировалось 67 пользователей (включая меня).

Количество созданных пользователями сценариев - 51, а количество разработанных на продажу шаблонов скриптов продаж на этапе модерации - 34.

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

К сожалению я не сразу догадался, что будет полезно фиксировать изменения в формате "до" / "после", поэтому единственная запись, которая осталась со старым интерфейсом - видео-инструкция на YouTube.

Просмотр приведённой видео-инструкции на скорости х2 даст лучшее понимание техник, которые использовали ниже.

Итак, урок №1:

Если вы обратите внимание, то заметите на самом сайте Telly крупные кнопки "Play", кликнув на которые отобразится всплывающее окно с видео-инструкцией по работе в личном кабинете (конструкторе), но особенность в том, что в кабинете ссылок на это видео просто нет!

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

Решение: сразу в момент регистрации пользователя в личном кабинете мы создаём ему тестовый сценарий с простейшей логикой и понятным названием "Тестовый сценария для обучения использования Telly" (примерно так).

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

Вывод: обучение в процессе работы.

Теперь давайте поговорим о "слепых зонах" пользователя (или "элементной слепоте" - термин на ходу придумал, кто профи - подправьте).

Внимание, "после":

На что вы первым делом обращаете внимание? Куда смотрите? Какие элементы вам бросаются в глаза?

Итак, урок №2:

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

Просматривая Яндекс.Вебвизор я ужаснулся, какое огромное количество пользователей судорожно дергали мышкой и тыкали везде, чтобы найти режим редактирования, но ТАК И НЕ ЗАМЕЧАЛИ синюю иконку с ручкой / пером. Катастрофа!

Решение: если это возможно - добавляйте текстовое описание элемента сразу. Оставляйте без подписи только самые универсальные иконки - копировать, вставить, вырезать, удалить, закрыть и т.п.

Сделаем ещё один шаг на пути совершенствования пользовательского интерфейса. Смотрим редактор.

Анализируйте паттерны в действиях пользователей - из точки А в точку Б, вырезайте всё лишнее между.

На этот момент мне удалось обратить внимание только благодаря одной 2 часовой записи в Вебвизоре пользователя из Санкт-Петербурга. Представьте, что 4х кнопок с правой стороны нет - назовите проблему в интерфейсе.

Увидели? Замечательно!

Именно поэтому и появились 2 дополнительные кнопки с правой стороны + возможность воспользоваться быстрыми клавишами (те самые любимые шорткаты):

Как по-вашему, почему мы не убрали кнопки "Добавить" из серых полос?

Итак, урок №3:

Ещё одна отличная реализация паттерна сокращения пути от точки А к точке Б. Внимание, экран редактирования реплики:

Сомневаюсь, что не-профессионал заметит здесь элементы, которые оказались самыми важными.

Заметили?

"+2 ответа" и "+3 ответа" - решение, которое было реализовано только после того, как один из пользователей добавил 12 вариантов ответа, а затем я специально пересмотрел другие записи Вебвизора. Отсматривал именно моменты работы с ответами. Бинго, у нас новая оптимизация!

Итак, урок №4:

И несколько пунктов, которые не касаются UI/UX, но дают возможность нашим пользователям эффективнее решать задачи:

Встраивание интерактивных элементов в сценарий:

Можете поработать с интерактивной картой прямо из сценария. Откройте вопрос "По какому адресу вы находитесь?":

Итак, урок №5:

А дальше примерно такой план:

Если вам понравилась статья или у вас есть дополнения - напишите комментарий, мне будет интересно узнать о том, как лучше разрабатывать сервисы для людей!

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

Хорошего утра / дня / вечера!