Onboarding (онбординг) – стартовый элемент дизайна в виде слайдов с инструкциями, который пользователь видит на экране сразу после запуска приложения. Использовать онбординг нужно с умом, так как именно он встречает потенциального пользователя первым.

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

Краткость – сестра таланта​


Не нужно вставлять слишком много слайдов, иначе пользователь захочет удалить ваше приложение и никогда больше его не открывать. Достаточно всего 3-5 слайдов об основных элементах вашего приложения.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2Fc895deceaba9cd4731532e1170b02751e77bd2e3.png&hash=745c51b6c968e0b7926d03ae16bbb3eb

Меньше текста – больше ярких иллюстраций​


Онбординг – это не нудная книжка для чайников, а краткий экскурс по вашему приложению, учтите это. Не стоит захламлять слайды лишней информацией, достаточно 1-2 предложений, чтобы описать посыл. Внимание также стоит уделить и графическому наполнению слайдов – яркие иллюстрации придадут вашим слайдам красоты и сразу отобразят всю суть посыла!

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2F3077575e3e62de52bf2678bd6358f120033752ae.png&hash=bb787fa1737da901dfe7d939cfdaf4fc

По возможности старайтесь использовать анимации​


Хорошая анимация позволит притянуть внимание пользователя к графическому наполнению слайдов. Ниже примеры того, как анимация прекрасно дополняет сами слайды. К тому же анимация дает пользователю некоторую уверенность в серьезности продукта, а также заменяет нудные тексты.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2F3effd0d9bed0b18bcba3161761dd120b25a472b6.gif&hash=1a46841431c307b6744ef71bfa865b84


proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2Fa446927a55c873901bb2b53e578a824c8d97378e.gif&hash=0374b2cb9356a09560004301d956f68a

Не забывайте о прогресс-барах​


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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2F0c11b164ef8192ce4fbf6a47f5a5394b7d084548.png&hash=23d2ef7cfe6e0372461d9372b78f7869

Сначала зарекомендуйте приложение​


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

То же самое касается и запросов в духе «Ого, вы впервые запустили наше приложение, поставьте нам 5 звезд в App Store и мы продолжим». Увы, это так не работает, вы лишь отпугнете потенциальных пользователей.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2F17b0213a8031522f07ce51ca997a36208193a27b.png&hash=ee4c127374f2c370e3447d7c94d382c2

Ну и самое главное!​


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

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2Fa507fb08049f543021604ecc956f4a8d7ea3ddfc.png&hash=252f0b4b1141029c364bec697dbb0cfe

Данный онбординг предлагает нам выбор: пропустить обучение либо просмотреть слайды. Отличный пример.

Примеры хороших онбордингов для вдохновения​


Макеты найдены на Dribbble.

proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2Fe873f87e7273ec2aaeda11b49df53f660a627149.png&hash=5f3a4eb638d02486a315c4e4f0efc490


proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2Fc49a298280a2bd899b14513d6d38538718dd8743.png&hash=901d5fdea478ecc8f9b80df6b17344a0


proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2F366c1f60a1be533cf7bdc7a580e1cb38f4dbe131.png&hash=03b4479d1c6434b406bba7f2cba33c11


proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2Fe81999166eaef0f9aea4c7295e046ec01b37aacb.png&hash=9659b6306f621d92cd9a1fa58fd8088a


proxy.php?image=https%3A%2F%2Ftimeweb.com%2Fmedia%2Farticles%2F0001%2F03%2F7c9eda86f35b5a1b483150040144d0844a679e0d.png&hash=612228d5a6d2fd8b9e02a21f5b9a357c

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