7 приёмов онбординга из Notion, Linear, Slack и других — и что из них перенять

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

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

1. Notion — шаблон вместо чистого листа

Главная трудность нового пользователя Notion — пустая страница: инструмент может всё, и непонятно, с чего начать. Поэтому Notion предлагает начать с шаблона. В публичной галерее шаблоны разложены по категориям, есть фильтры «бесплатные / платные» и превью, по которому видно результат до того, как вы что-то сделали.

Что перенять: вместо пустого состояния предложите 2–3 стартовых шаблона под частые сценарии — прямо на пустом экране, а не в отдельном разделе. Подвох: галерея на тысячи вариантов сама становится новым чистым листом, поэтому внутри продукта выбор лучше сузить.

2. Linear — учить скорости там, где работают

Linear рассчитан на работу с клавиатуры, но не заставляет учить сочетания заранее. Горячие клавиши собраны в панель помощи с поиском прямо в приложении — компания рассказывала о ней в своём changelog. Сочетание находится в момент, когда оно нужно.

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

3. Slack — бот, который ведёт за руку

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

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

4. Duolingo — ценность до регистрации

Duolingo не начинает с формы «email и пароль». Первый экран на странице регистрации спрашивает, что вы хотите учить, — и человек выбирает курс и цель раньше, чем создаёт аккаунт.

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

5. Miro — шаблоны против бесконечного холста

У Miro та же проблема, что у Notion, только крупнее: бесконечная доска. Порог входа снижают шаблоны — публичная галерея разложена по задачам (исследования, стратегия, диаграммы, брейншторм, agile) и снабжена поиском.

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

6. Figma — учиться на настоящем файле

Figma учит не роликами про инструменты, а файлами, которые можно открыть и потрогать: в сообществе есть учебные файлы и «плейграунды» для отработки конкретных приёмов вроде auto layout и вариантов.

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

7. Банковские кабинеты — подсказка у сложного действия

В финансовых кабинетах много редких и рискованных операций: лимиты, переводы, выписки. Здесь работают точечные подсказки рядом с конкретным элементом, которые ведут по шагам. Кабинеты банков закрыты авторизацией, поэтому показываем обобщённую схему, а не конкретный банк.

Что перенять: в плотном интерфейсе ставьте подсказку у редкого действия, а не водите общим туром по всем разделам. Подвох: подсказка, которая после релиза не нашла свой элемент, молча пропадает — такие шаги нужно отслеживать.

Что из этого собирается в онбординг-инструменте, а что нет

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

• Шаблоны на пустом экране (Notion, Miro) — это работа продукта. Clew может только подсветить блок с шаблонами подсказкой.
• Справка в момент вопроса (Linear) — подсказка по наведению или тултип у кнопки.
• Бот в чате (Slack) — чата в Clew нет. Ближайшее — чеклист в углу экрана, пункты которого отмечаются сами.
• Выбор цели до регистрации (Duolingo) — это устройство регистрации. Виджет работает и на сайте, так что подсказать на лендинге можно, но форму за вас он не перестроит.
• Песочница с подсказками (Figma) — тур по демо-данным, если такие данные в продукте есть.
• Подсказка у редкого действия (банки) — тултип или короткий тур у элемента. Шаги, которые перестали находить элемент, собирает вкладка «Здоровье».