Дизайн онбординга

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

Экраны онбординга

Онбординг состоит из нескольких экранов, которые вы добавляете и оформляете.

Пользователи будут нажимать кнопку для перехода между ними.

Если части ваших пользователей нужен немного другой сценарий (например, в фитнес-приложении вы хотите показывать разные картинки с «целями» в зависимости от пола), не нужно создавать отдельные онбординги.

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

Элементы онбординга

Элементы онбординга отображаются слева в том порядке, в котором они показываются. Нажмите Add в правом верхнем углу, чтобы добавить новый элемент.

Вы можете добавить следующие группы элементов:

Containers: Контейнеры позволяют настраивать гибкую компоновку. Например, чтобы добавить текст в две колонки, нужно добавить Columns и перетащить два текстовых блока в Columns на левой панели. Или, если вы добавляете карусель, нужно поместить изображения в элементы Media внутри.
Typography: Добавляйте готовые текстовые блоки и настраивайте их внешний вид по необходимости.
Media & Display: Помимо изображений и видео, можно добавлять анимированные графики, которые демонстрируют ценность вашего приложения и мотивируют пользователей. Поддерживаемые форматы видео — MP4 и WebM. Максимальный размер медиафайла — 15 МБ. Если вы хотите добавить неподдерживаемый анимированный элемент (например, Lottie), его можно конвертировать в видео (например, с помощью этого инструмента) и вставить как видео.
Quiz: Создавайте короткие опросники с текстовыми и графическими вариантами ответов, чтобы персонализировать онбординг и лучше узнать своих пользователей.
Inputs: Собирайте данные ваших пользователей.
Buttons: Кнопки позволяют пользователям переходить между экранами, закрывать онбординг или переходить к пейволу. Можно также добавить глянцевые или анимированные кнопки, чтобы привлечь внимание пользователей и превратить установку в покупку.
Loaders: Анимированные лоадеры удерживают внимание пользователей в процессе ожидания.
User engagement: Добавляйте отзывы, списки email-адресов пользователей и обратный отсчёт.

В группе Media & Display также можно добавить произвольный HTML-код, если встроенных настроек кастомизации недостаточно.

Однако пользовательские HTML-элементы не кешируются и не предзагружаются, поэтому Raw HTML рекомендуется использовать только для небольших и лёгких элементов.

ID элемента и ID действия

Если вы хотите использовать кнопку для пользовательских действий, назначьте ей ID действия и затем используйте его в исходном коде. ID действий позволяют одинаково обрабатывать разные кнопки с одним и тем же ID действия.

Если вы хотите обрабатывать введённые пользователем данные в конкретном поле (например, сохранять возраст или email), назначьте ему идентификатор элемента и используйте его в исходном коде, чтобы связать вопросы с ответами. Идентификаторы элементов можно использовать в онбординге только по одному разу.

Параметры настройки

В конструкторе доступны следующие параметры настройки:

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

Копирование экранов и элементов

Если вы создали онбординг и хотите переиспользовать его части или немного изменить его для A/B-теста, можно скопировать один или несколько экранов из одного онбординга в другой.

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

Кликните правой кнопкой мыши по нужному экрану и выберите Copy
Выделите нужный экран и нажмите Ctrl+C (Windows) или ⌘+C (Mac)

Также можно копировать отдельные элементы или текстовые блоки — как внутри одного онбординга, так и между разными онбордингами.

Копирование экранов из веб-воронок в онбординг

Если вы используете веб-воронки, созданные в FunnelFox, и хотите перенести экраны из воронок в онбординги, это можно быстро сделать, скопировав экраны в конструкторе воронок и вставив их в конструктор онбординга:

В конструкторе воронок FunnelFox щёлкните правой кнопкой мыши по экрану и выберите Copy, или выберите экран и нажмите Ctrl+C/⌘+C.
Откройте конструктор онбординга.
Щёлкните правой кнопкой мыши по экрану, после которого нужно вставить скопированный, и выберите Paste, или выберите его и нажмите Ctrl+V/⌘+V. Скопированный экран будет вставлен ниже выбранного.