Живое демо Plausible: два шага до ответа
Plausible ставит «View live demo» рядом с «Start free trial» в первом экране, и демо — это настоящий продукт на собственном трафике компании. Через два клика дашборд отвечает на вопрос, который выбрали мы. Обсуждать стоит зазор между тем, как приходит экран, и тем, как приходят числа.
Точка входа: «View live demo» в первом экране на plausible.io — plausible.io/plausible.io
2 шага до первого полезного действия~0,5 с до экрана, 2,4–3,3 с до чисел время до первой пользыпервое полезное действие: дашборд, пересчитанный под один источник трафика
Путь, который мы прошли
- Нажать View live demo в первом экране на plausible.io. Кнопка стоит прямо рядом с «Start free trial», того же размера, и между ними ничего не спрашивают: ни почты, ни куки-диалога, ни согласия.
- На дашборде демо нажать строку в Sources (мы нажали Google). Весь дашборд пересчитывается под этот источник: плитки метрик, график, страницы, страны, браузеры. Это и есть первое полезное действие — мы задали данным свой вопрос и получили ответ.
Что мы измерили
| Шагов до первого полезного действия | 2 |
| Время до первой пользы | дашборд был на экране примерно за полсекунды (первый байт 0,16 с, событие load 0,53 с); числа в нём пришли девятью запросами к API, самый медленный из которых занял 2,4–3,2 с в трёх проходах |
| Цена шага с фильтром | ещё 8–9 запросов к API, самый медленный 1,3–3,3 с; вёрстка не сдвинулась, поменялись только числа |
| Вес демо при холодном кэше | 473 КБ за 10 запросов (маркетинговая страница перед ним — 108 КБ за 13) |
| Что стоит на пути | ничего — ни куки-диалога, ни кнопки согласия ни на одной из двух страниц |
| Когда просят аккаунт | на пути — никогда; «Login» и «Sign up» стоят справа вверху, а блок «Start free trial» ждёт в самом низу страницы |
| Чем доказано, что ответ настоящий | уникальные посетители сменились с 348 тыс. на 19,6 тыс., а топ страниц — с /:dashboard и /sites на /, /login и /register |
Экраны
Что сделано хорошо
Демо — это продукт на живых данных
На дашборде собственный трафик Plausible со своими некрасивыми числами: 46% отказов, страница логина в первой пятёрке. Заготовка была бы опрятнее и не доказывала бы ничего. А точка входа стоит в первом экране, одного размера с кнопкой триала: компания явно не боится, что сначала посмотрят.
Каждое углубление — настоящая ссылка
Каждая строка источника — это ссылка с href (?f=is,source,Google) и с доступным именем, которое говорит, что произойдёт: «Add filter: Source is Google». Поэтому кнопка «назад» снимает фильтр, у отфильтрованного вида есть адрес, который можно переслать коллеге, а скринридер озвучивает действие, а не слово «Google». Три разные вещи, которые большинство дашбордов делает неправильно, исправлены одним решением.
Следующий вопрос занимает место предыдущего
Отфильтруйте по поисковику — и панель Sources станет Search terms. Продукт заметил, на какой вопрос вы только что ответили, и предложил следующий, в том же прямоугольнике и без всплывающей подсказки.
Обещание показано, а не заявлено
На странице продукта, у которого главное «никаких кук», нет куки-баннера — ни на сайте, ни в демо. За весь проход не пришлось ничего принимать.
Три вещи, которые мы бы изменили
Закрыть зазор между экраном и числами
Дашборд рисуется примерно за полсекунды, а потом две-три секунды ждёт собственный API: 9 запросов на входе, ещё 8–9 на фильтре, самый медленный от 1,3 до 3,3 с в наших проходах. Пока он ждёт, панели показывают спиннер в пустом прямоугольнике. Рисовать вместо этого настоящую форму панели: заголовок, названия колонок и серые строки размером с те, что сейчас придут.
Почему это важно. Спиннер говорит «где-то что-то происходит»; скелет говорит «ваша таблица едет, и в ней восемь строк». На первом визите именно эта разница решает, прочитается трёхсекундная пауза как основательность или как поломка, — а это продукт, у которого вся идея в лёгкости.
Сказать новому человеку, на что он смотрит и что нажать
Новичок попадает на шесть плиток метрик чужого сайта, и нигде нет фразы, называющей первый ход. Мы нашли его, наведя курсор на строку и прочитав её доступное имя. Одна строка под именем сайта — «Это живой трафик самого plausible.io. Нажмите любой источник, страницу или страну, чтобы отфильтровать всё ниже» — превратила бы витрину в приглашение.
Почему это важно. Лучшее, что есть в этом демо, — что каждая строка является фильтром, и это единственное, чего экран не говорит. Демо — не дашборд для того, кто уже знает продукт; это первый урок, а у первого урока пропущена первая строка.
Сделать мост обратно ответом на то, что вы только что сделали
Дорога от демо к собственным данным — блок «Start free trial» в самом низу длинной страницы, и он говорит одно и то же, изучали вы демо пять секунд или пять минут. После первого фильтра стоит поставить одну строку вверху дашборда: «Это был один клик по нашим данным — чтобы получить такое для своего сайта, нужен один тег», со ссылкой на инструкцию по установке.
Почему это важно. Момент, когда человек заставил продукт ответить на его собственный вопрос, — это момент, когда он поверил. Этот момент наверху страницы, а приглашение внизу и никак не зависит от того, что произошло между ними.
Чего мы не увидели
Мы не заводили аккаунт, поэтому не видели ни регистрацию, ни создание сайта, ни инструкцию по установке в контексте, ни пустой дашборд, который встречает каждого нового клиента, ни письма. Пустое состояние — вероятно, самый важный экран онбординга у этого продукта, и именно до него проход без аккаунта не добирается.
Как мы считали
- Шаг — это одно осознанное действие, которое продвигает по пути: клик или тап, одно заполненное поле, один обязательный выбор или одно закрытие того, что продукт поставил на пути (куки-стена, модальное окно, тур). Нажатие на точку входа — кнопку или адрес, с которого мы начинаем, — это шаг 1. Загрузки страниц, редиректы и ожидание шагами не считаются.
- Часы запускаются в момент нажатия на точку входа и останавливаются, когда результат первого полезного действия виден на экране. Мы измеряем собственную задержку продукта часами самой страницы, а не секундомером: каждое ожидание заканчивается по условию, которое мы опрашиваем, и в число не входит время, которое человек тратит на чтение и решение. Это нижняя граница, а не опыт пользователя.
- Первое полезное действие — первое, что даёт результат, ради которого приходили: рисунок на холсте, ответ на вопрос, который вы сами задали своим данным, сработавший сценарий. Пройденный тур, подтверждённая почта и чужой готовый дашборд — не считаются.
- Мы не заводим аккаунты. Каждый проход — это публичное демо, песочница или тестовый режим. Если до продукта нельзя добраться без регистрации, мы говорим об этом и берём другой. Значит, мы видим парадное, а не дом изнутри, — и честно пишем, чего не увидели.
Раскрытие
Вопросы
Демо-дашборд — это вообще онбординг?
Для продукта, который продают людям, уже пользующимся чем-то другим, — да. Это первый экран, который видит большинство, а для многих и единственный. У него та же задача, что у первого запуска: показать, что штука работает, и дать посетителю что-то сделать самому.
Зачем два числа для времени до первой пользы?
Потому что они измеряют разные отказы. Полсекунды до экрана — это фронтенд, который делает свою работу. Две-три секунды до чисел — это пауза, которую посетитель действительно высиживает, и именно её надо закрывать. Публиковать только первое — льстить продукту, только второе — описывать его неверно.
Эти задержки — вина Plausible или вашего канала?
Это круговые запросы к собственному API Plausible, измеренные от отправки запроса до получения ответа, в трёх проходах на обычном домашнем канале. Объёмы маленькие, так что дело не в полосе. Европейский посетитель, вероятно, увидит меньше, а кто-то далёкий — больше.
Вы бы внесли те же три изменения в свой продукт?
Два уже внесли: скелеты, повторяющие реальную вёрстку, и первую строку, которая называет первое действие. Третье — привязать приглашение к тому, что посетитель только что сделал, — самое трудное, и мы с ним тоже не закончили. Мы пишем об этом приёме здесь.