Чеклист онбординга: как выбрать пункты и сделать так, чтобы они отмечались сами

Чеклист онбординга — короткий список действий в углу экрана с полосой прогресса. Работает он, только если в нём реальные шаги к результату и каждый отмечается тогда, когда шаг действительно сделан. Ниже — как этого добиться, на примере чеклиста, который мы показываем новым пользователям Clew.

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

Сколько пунктов и в каком порядке

Три-пять. Больше — и чеклист превращается в список задач, который хочется закрыть, а не выполнить. Оставляйте только то, без чего человек не получит результат, ради которого пришёл.

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

Пример для сервиса выставления счетов: подключить расчётный счёт → выставить первый счёт → пригласить бухгалтера. Три пункта, каждый — реальное действие, вместе — путь к тому, ради чего человек зарегистрировался.

Четыре способа отметить пункт

В Clew у пункта может быть правило завершения. Если правила нет, пункт — обычный чекбокс.

• Вручную. Человек кликает по пункту. Если у пункта есть ссылка, она откроется в новой вкладке.
• По адресу. Пункт отмечается, когда человек попал на нужную страницу: точный путь, префикс, «содержит» или регулярное выражение. В SPA проверка повторяется после каждого перехода.
• По клику. Пункт отмечается, когда человек кликнул по элементу с заданным CSS-селектором, например по кнопке «Пригласить».
• По событию. Ваш код вызывает Clew.complete('invited') в момент, когда событие действительно произошло, — скажем, когда сервер подтвердил приглашение.

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

Почему мы выбираем событие

Ручная галочка доказывает только то, что человек нажал на галочку. Клик по кнопке — что он нажал на кнопку, но не что действие удалось: форма могла вернуть ошибку. Событие из кода отмечает пункт, только когда результат есть.

Поэтому наш чеклист в кабинете Clew — «Запустите первый A/B-тест» — целиком на событиях:

snippet_copied  →  код установки скопирован
widget_live     →  виджет прислал события с сайта
tour_published  →  тур опубликован
ab_started      →  включён A/B-тест
ab_decided      →  тест завершён

Если событие случилось, пока чеклиста нет на экране, ключ не теряется: виджет держит его в памяти страницы и отмечает пункт, как только чеклист появится. Как устроен весь наш онбординг — в статье про активацию на примере Clew.

Как чеклист ведёт себя на экране

• Показывается рядом с туром или модалкой, а не вместо них.
• На экранах шире 1024 px открыт, на узких — свёрнут в плашку. Если человек сам развернул или свернул его, этот выбор запоминается.
• Прогресс синхронизируется между вкладками одного браузера.
• Когда выполнены все пункты, чеклист засчитывается пройденным и при частоте «один раз» больше не появляется.

Ограничения

• Прогресс хранится в браузере, а не в аккаунте. На другом компьютере чеклист начнётся заново: пункты «по адресу» отметятся снова, когда человек зайдёт на нужную страницу, остальные — нет.
• Сколько людей отметило каждый пункт, видно в статистике, только если у виджета включён сбор данных.
• Чеклисты доступны с тарифа Pro. На бесплатном — туры и подсказки.