Александр Зимин, onboarding в мобильном приложении: первое...

«Первое впечатление есть последнее»

— Неизвестный автор

2

Onboarding

На русском я буду использовать слово «Адаптация» 3

• Часть 1 (Onboarding)

• Что это и с чем едят

• Советы

• Часть 2 (Пример)

• Карта onboarding и демонстрация

• Результат

План

4

Что это и с чем едят

5

6

• Первое взаимодействие пользователя с вашим продуктом

• Преследует одну или несколько целей:

• Знакомство

• Нестандартный функционал

• Права доступа

• Авторизация

7

Знакомство

IFTTT8

Mailbox

Нестандартный функционал

9

https://dribbble.com/shots/2409518-Data-Access-Concept

Права доступа

10

Cover

Логин

11

• Первое впечатление есть последнее

• Объясняйте

• Мотивируйте

• Упрощайте

Советы

12

Пример

13

Uberchord www.uberchord.com

14

15

16

by Uberchord Engineering

WELCOMEGRAB YOUR GUITAR!

LET’S MAKE SURE WE CAN HEAR YOU!

Play your guitar!

NOW LET’S MAKE SURE YOU CAN HEAR US!

Can you hear the drums?

LET’S MAKE SURE WE CAN HEAR YOU!

(Modal) (Modal)

HOW TO SET UP MY ELECTRIC GUITAR?

SETUP GUIDE

GET STARTED

I CAN’T HEAR ANYTHING!

YES, I CAN HEAR THE DRUMS!

I DON’T HAVE A GUITAR

User Onboarding Tour

Too loud/too soft

success sound afterat the right level for 0,3snot success sound

How should I set up myelectric guitar?

How should I set up myelectric guitar?

Play indicator(Toggle on/off (Autostart) 30s)

Choose „external input“

Choose „external input“

Check audio

volume

iRig/iRig2 iRig2

Got it! Got it!

Auto Continue

1 2

2a

LET’S MAKE SURE WE CAN HEAR YOU!

Play your guitar!

Level

We can’t hear you!

3 4 5

Level

Level

i

i

3a 3b 5a

GuitarEarphones

Amp Aux

iRig

2

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

Wrong String

6

6a 6b

7 8

played correct

1) Play success sound2) Move on after 1s

1) Success Sound2) Move on

Play the low E String,it is the thickest one!

INTRODUCING THE CHORD DIAGRAM

9

G3

E2

E2 E2

Wrong string!

Wrong string!

A2

INTRODUCING THE CHORD DIAGRAM

8a

A2E4

Wrong string!

E2 E2

E4

Wrong String

E2

Play the high E String,it is the thinest one!

E2

E4

Guitar

iRig

OR

E2

Карта

17

by Uberchord Engineering

WELCOMEGRAB YOUR GUITAR!

LET’S MAKE SURE WE CAN HEAR YOU!

Play your guitar!

NOW LET’S MAKE SURE YOU CAN HEAR US!

Can you hear the drums?

LET’S MAKE SURE WE CAN HEAR YOU!

(Modal) (Modal)

HOW TO SET UP MY ELECTRIC GUITAR?

SETUP GUIDE

GET STARTED

I CAN’T HEAR ANYTHING!

YES, I CAN HEAR THE DRUMS!

I DON’T HAVE A GUITAR

User Onboarding Tour

Too loud/too soft

success sound afterat the right level for 0,3snot success sound

How should I set up myelectric guitar?

How should I set up myelectric guitar?

Play indicator(Toggle on/off (Autostart) 30s)

Choose „external input“

Choose „external input“

Check audio

volume

iRig/iRig2 iRig2

Got it! Got it!

Auto Continue

1 2

2a

LET’S MAKE SURE WE CAN HEAR YOU!

Play your guitar!

Level

We can’t hear you!

3 4 5

Level

Level

i

i

3a 3b 5a

GuitarEarphones

Amp Aux

iRig

2

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

INTRODUCING THE CHORD DIAGRAM

Wrong String

6

6a 6b

7 8

played correct

1) Play success sound2) Move on after 1s

1) Success Sound2) Move on

Play the low E String,it is the thickest one!

INTRODUCING THE CHORD DIAGRAM

9

G3

E2

E2 E2

Wrong string!

Wrong string!

A2

INTRODUCING THE CHORD DIAGRAM

8a

A2E4

Wrong string!

E2 E2

E4

Wrong String

E2

Play the high E String,it is the thinest one!

E2

E4

Guitar

iRig

OR

E2

Часть 1 - Введение

18

LET’S TUNE YOUR GUITAR!

LET’S TUNE YOUR GUITAR!

LET’S TUNE YOUR GUITAR!

LET’S TUNE YOUR GUITAR!

LET’S TUNE YOUR GUITAR!

LET’S TUNE YOUR GUITAR!

LET’S PLAYA CHORD!

1

5a

2a

Start with the low E string again!

Great! One more time!

HOW TO TUNE

2

E4

B3

G3D3

A 2

E 2

E2

fill when played

static

logarithmic: shows tuning relative to desired tone (everywhere)

center perfectly

Tune the machine head until indicator turns green!

when tuned correctly for 1s+,success sound, move on

success sound, move on after 1s

Continue until all strings turned

once finished success sound

success sound

not recognizedInteractive

3 4 5 6

E2 E2A2 A2

Play the A stringPlay all strings

at once!

E4B3G3D3

LET’S PLAYA CHORD!

6a

We couldn’t recognizethe chord, try again!

7 9

TURN YOUR iPHONETO CONTINUE

10

The Trainer worksin landscape.

E2

E2

E2 E2

-208 820-

8

success soundLET’S PLAY

A CHORD!

6b

We can’t hear you!

LET’S TUNE YOUR GUITAR!

5b

E2A2

E4B3G3D3

DO YOU WANTTO TUNE AGAIN?

NO, CONTINUE

YES, PLEASE!

Great! One more time!

LET’S PLAYA CHORD!

LET’S PLAYA CHORD!

LET’S PLAYA CHORD!

to 10 if played with in 3s

Help me tune my guitari

5c

Часть 2 - Гитарный строй

19

Часть 3 - Тестовое упражнение

20

Демонстрация

21

Проверка звука

22

Гитарный строй

23

Упражнение

24

Конверсия

25

Экран приветствия

• Самый первый экран

• Есть возможность начать адаптацию

• Либо перейти сразу к туру

26

Любой экран адаптации

• Содержит кнопку пропуска

27

Любой экран адаптации

• Содержит кнопку пропуска

28

До onboarding

29

После onboarding

30

После featured

31

Еще аналитики

32

• Featured by Apple

• Неделя работы и неделя шлифовки

• Конверсия прохождения первого упражнения выросла с 2.59% до 24.57% (почти в 10 раз)

• 25% запустивших в первый раз выполняют первое упражнение

• 83% выбирают, что у них есть гитара

• 31% понимают, что она у них действительно есть

Итоги

33

• https://www.useronboard.com/onboarding-teardowns/ — анализ разных адаптаций популярных приложений

• https://medium.com/muzli-design-inspiration/onboarding-inspiration-for-mobile-apps-a5fd41e40542#.ff6o8vqxk — графическое вдохновение

• http://uxarchive.com/tasks/onboarding — набор существующих адаптаций

• https://www.producthunt.com/@dontmitch/collections/onboarding-on-fleek - Product Hunt подборка

Ссылки

34

Зимин Александр iOS разработчик

UX дизайнер35