Дизайним адекватный Onboarding

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

Данную статью я пишу в первую очередь для новичков, которые только-только начали осваивать работу в сфере UX- и UI-проектирования, чтобы объяснить вам основные принципы создания онбордингов.

Также в конце статьи вас ждет ссылка на небольшой Figma-макет, который вы сможете свободно использовать при создании своих работ.

Что такое Onboarding?

Чаще всего первое, что видит пользователь при запуске нового приложения, это несколько обучающих экранов, которые знакомят его с основными функциями и фишками продукта. Это и есть Onboarding.

 Пример экранов онбординга Автор шота

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

3 основных типа Onboarding:

  • Описывающий главные преимущества:
    описание основных функций и преимуществ приложения, которые могут убедить пользователя попробовать ваш продукт.

  • Осуществляющий предварительную персонализацию:
    пользователю предлагается настроить информацию о себе, чтобы персонализировать приложение, прежде чем они начнут работать с основным функционалом. (вспомните как в музыкальных приложениях вам предлагают сначала выбрать любимые жанры музыки, а в Pinterest области ваших интересов)

  • Быстрый старт: тип онбординга, в котором человека учат пользоваться функциями приложения при помощи подсказок.

Немного примеров:

Отличный онбординг от студии Cuberto, описывающий главные преимущества приложения Автор работы
А вот пример предварительной персонализации данных. Этот онбординг я делал для приложения по подбору диеты.  Прежде чем начать пользоваться основным функционалом,  человек должен выбрать свой пол и параметры тела.

Почему онбординг так важен?

Главное знакомство пользователя с приложением происходит как раз во время первого запуска. Поэтому, впечатление от продукта напрямую связано с тем, как выглядит онбординг. Большинство успешных проектов настолько грамотно используют этот инструмент, что пользователь покупает подписку сразу после просмотра онбординга.

Несколько важных советов для дизайнеров:

  • Много экранов-ЗЛО!
    3-4 экрана вполне достаточно, чтобы познакомить пользователя с основными функциями приложения. Не стоит нервировать пользователя бесконечным скипом экранов.
  • Только Яркие и понятные иллюстрации!
    Наш мозг обрабатывает визуальный контент намного быстрее чем текст, поэтому понятные и качественные иллюстрации расскажут о функционале приложения куда быстрее, чем километровый текст.
    Важно использовать иллюстрации, которые точно отображают смысловую нагрузку текстового блока. Так что попросите иллюстраторов приберечь свой абстракционизм для персональных выставок.
  • Полюби анимацию!
    Даже самая простая анимация заставит пользователя обратить внимание на графический контент. Благодаря грамотной анимации иллюстраций вы сможете познакомить человека с целой историей, умещающейся на одном экране.
  • Не беси разраба!
    Не забывай, что твой дизайн будут верстать! Неоморфизм, миллиард теней и градиентов выглядят бесспорно круто, а на дрибле могут собрать 4 лайка, но сверстать это зачастую невозможно. Поэтому изучай официальную документацию Human Interface Guidelines и Material design
  • Используй индикатор прогресса.
    С самого начала взаимодействия пользователи должны знать, где они находятся и сколько времени занимает весь процесс.
    Когда ты читаешь книгу, то у тебя всегда есть возможность посмотреть, сколько тебе еще осталось. Позаботься и о пользователе)
  • Смысл в каждой букве!
    Главная задача — убедить юзера в пользе приложения. У тебя есть несколько секунд, чтобы донести до человека важную информацию. Поэтому каждая буква должна нести в себе смысл! Если есть возможность попроси об этом копирайтера. Так же обращай внимание на шрифты, их цвет и толщину. Текстовые блоки — самый главный элемент любого приложения!
  • Сначала дай, потом проси! 😏
    Фатальной ошибкой, при этом крайне распространенной, является размещение на онбординге просьбы оценить приложение в сторе. Часто туда пихают окна с разрешением доступа к камере, контактам и т.д.
    Тесты показывают, что такие действия иногда являются причиной мгновенного удаления приложения.
    Сначала использование приложения нужно закрепить позитивным эффектом, а потом просить об обратной связи.
  • Дай возможность скипнуть!
    Пользователь уже может иметь опыт использования вашего приложения на другом устройстве. Поэтому твоя цель дать ему возможность пропустить обучение. Добавь небольшую кнопку «пропустить».

Прототип

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

Ссылка на Figma-файл в моем Telegram-канале. У меня еще куча материалов, которыми бы я хотел с тобой поделиться. Поэтому залетай в гости!

Буду рад, если ты воспользуешься моими 3д- иллюстрациями в своих реальных проектах. Я их моделил с нуля в Blender, поэтому никаких проблем с правообладателями не будет! В будущем залью целый ассет 3д-иллюстраций!

Заключение.

Онбординг как свидание — у тебя не будет второго шанса произвести первое впечатление. Поэтому не стоит пренебрежительно относиться к этому разделу приложения.

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

Обнял-приподнял, подскакивай в телегу кабанчиком, будем на коротких циферках!

0
12 комментариев
Написать комментарий...
Александр Бычковский

Крутая статья, спасибо 🙏

Ответить
Развернуть ветку
Макс О дизайне
Автор

Благодарю!

Ответить
Развернуть ветку
Александр Бычковский

Сколько бы могло стоит разработать 3-4 таких экрана?

Ответить
Развернуть ветку
Макс О дизайне
Автор

ответил в лс

Ответить
Развернуть ветку
Евгений Маринов

ошибку выдает при импорте в фигму

Ответить
Развернуть ветку
Макс О дизайне
Автор

Что пишет? можно скрин?

Ответить
Развернуть ветку
Евгений Маринов
Ответить
Развернуть ветку
Макс О дизайне
Автор

отправил в лс ссылку

Ответить
Развернуть ветку
Margaret Gubareva

Спасибо!

Ответить
Развернуть ветку
Margaret Gubareva

Спасибо за статью!

Ответить
Развернуть ветку
Мария Иванова

Добрый день! можно мне пжл тоже стоимость?)

Ответить
Развернуть ветку
Sasha Geo

По-моему, вы описываете туториал. Онбординг - это, прежде всего, приземление пользователя в сам продукт, как правило после регистрации!

Ответить
Развернуть ветку
9 комментариев
Раскрывать всегда