Дизайн онбордингу в застосунку: як зустріти нового користувача

Крок 1

Перевірте, чи онбординг узагалі потрібен

Nielsen Norman Group визначає онбординг як процес, що допомагає людині освоїти новий інтерфейс за допомогою окремих сценаріїв і елементів. Це не лише навчання, а й потрібні налаштування, і стосується він не тільки першого запуску: наявних користувачів теж «онбордять», коли з'являються нові функції чи редизайн. Водночас NN/g радить обходитися без окремого онбордингу, коли це можливо: він забирає час і увагу, навантажує пам'ять і не завжди покращує результат. За NN/g, онбординг виправданий, коли:

• •без даних від людини почати неможливо: наприклад, банку треба підтвердити особу;
• •застосунок сильно залежить від контексту й уподобань людини: наприклад, застосунку для схуднення корисно знати поточну вагу;
• •головна функція справді нова й незвична, і стандартних патернів для неї немає.

💡 Порада NN/g: спершу перевірте застосунок без онбордингу. Якщо люди справляються — він не потрібен. Якщо ні — насамперед зробіть зрозумілішим сам інтерфейс.

Крок 2

Розберіть, з чого складається онбординг

NN/g виділяє три компоненти, які найчастіше трапляються в мобільних онбордингах. Для кожного є своє правило:

• •реклама функцій («що вміє застосунок»): NN/g радить не показувати її на першому запуску — людина вже завантажила застосунок, тож такі екрани сприймаються як маркетинг і їх пропускають. Їхнє місце — сторінка в магазині застосунків або підказка в той момент, коли функція стане корисною;
• •налаштування (мова, інтереси, цілі): просіть лише те, без чого не почати. Apple радить відкласти необов'язкові налаштування й дати розумні значення за замовчуванням, щоб більшість людей могла одразу почати;
• •інструкції (як користуватися): найризикованіший компонент. Про нього — наступний крок.

Крок 3

Вчіть дією й у контексті, а не слайдами

Класичний онбординг — кілька слайдів із порадами перед стартом. У NN/g це називають push-підказками: вони з'являються без зв'язку з тим, що людина зараз робить. Такі туторіали переривають, їх часто пропускають, а показане швидко забувається. Apple радить так само: навчати через взаємодію і замість одного довгого сценарію давати підказки в контексті. Що робити замість слайдів:

• •підказка поруч із функцією в момент, коли вона знадобилася, — NN/g називає це pull-підказками;
• •перша дія замість пояснення: дайте людині одразу виконати головну дію на безпечних демонстраційних даних;
• •якщо окремий туторіал потрібен — зробіть його коротким і необов'язковим, а за Apple, не показуйте знову після пропуску, але залиште доступним, наприклад у налаштуваннях чи довідці;
• •навчайте вашому застосунку, а не тому, як користуватися телефоном.

Крок 4

Дозволи, акаунт і порожні екрани

Перший запуск — момент, коли застосунок найчастіше чогось просить. Порядок цих прохань — теж дизайн:

• •дозволи: документація Android радить просити дозвіл у контексті, коли людина починає користуватися функцією, якій він потрібен, не блокувати її і давати змогу скасувати пояснювальний екран. Apple додає: якщо без дозволу застосунок не працює, поясніть в онбордингу, навіщо він і яка користь;
• •оцінка й покупки: Apple радить спершу дати людині спробувати застосунок, а вже потім просити оцінку чи покупку;
• •акаунт: якщо можна щось показати до реєстрації — покажіть. Людині легше погодитися, коли вона вже бачила користь;
• •порожні стани: NN/g радить використовувати порожні екрани, щоб пояснити, що тут з'явиться, підказати, як користуватися функцією, і дати пряму кнопку для першої дії.

💡 Складіть порядок першого запуску на папері: кожне прохання — окрема картка. Для кожної спитайте себе: «Чи можна попросити це пізніше?» Усе, на що відповідь «так», переносьте ближче до моменту, коли воно справді знадобиться.

Крок 5

Спроєктуйте перший запуск і перевірте на новачках

Вправа для портфоліо: оберіть вигаданий застосунок, наприклад трекер звичок чи застосунок для обміну книжками між сусідами, і спроєктуйте його перший запуск у Figma.

• •визначте одну першу корисну дію — заради неї людина й завантажила застосунок;
• •намалюйте шлях від запуску до цієї дії й порахуйте кроки. Кожен крок, що не наближає до неї, — кандидат на видалення або перенесення;
• •зробіть дві версії: з мінімальним онбордингом і з підказками в контексті. З'єднайте їх у клікабельний прототип;
• •дайте прототип людям, які ваш застосунок ще не бачили, і задачу на першу дію. Порівняйте, де вони швидше дійшли до мети і що запам'ятали.

💡 Як зібрати клікабельний прототип із переходами, описано в гайді Прототип у Figma. А дві версії онбордингу покажіть у спільноті й спитайте, яку людям було б приємніше пройти і чому.