Upload
mailru-group
View
3.739
Download
1
Embed Size (px)
Citation preview
«Первое впечатление есть последнее»
— Неизвестный автор
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
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