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

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

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

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

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

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

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

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

Элементы онбординга отображаются слева в порядке их показа. Нажмите 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 рекомендуется использовать только для небольших и лёгких элементов.

design-onboarding4.png

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

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

ios-events-1.webp

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

design-onboarding5.png

Параметры кастомизации

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

  • Вкладка Styles: настройка внешнего вида элемента.
    design-onboarding1.png
  • Вкладка Element: настройка атрибутов элемента, таких как видимость, действия при нажатии кнопок и другие свойства, не связанные с внешним видом.
    design-onboarding2.png
  • Вкладка Screen: общая конфигурация экрана, например заголовок или отображение счётчика экранов.
    design-onboarding3.png

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

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

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

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

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

Копирование экранов из web-to-app воронок

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

  1. В конструкторе воронок FunnelFox кликните правой кнопкой мыши по экрану и выберите Copy, либо выделите экран и нажмите Ctrl+C/⌘+C.
  2. Откройте конструктор онбординга.
  3. Кликните правой кнопкой мыши по экрану, после которого хотите вставить скопированный, и выберите Paste, либо выделите его и нажмите Ctrl+V/⌘+V. Скопированный экран будет вставлен ниже выбранного.
funnel-to-onboarding.gif