# Onboarding

> Onboarding is the first-run flow that takes a person from opening a mobile app to using it, through a welcome, a sign-in and any setup. Apple asks for a flow that is fast, fun and optional.

Page: https://www.appetiteui.com/glossary/onboarding. Mobile onboarding: Apple rules and screen patterns. Also called Onboarding flow, First-run experience, Welcome screens.

## Why it matters

Apple’s guidance is that people should understand an app by using it, so onboarding is a cost to keep low. It should not teach more than people can remember.

Setup that is not needed on day one should wait, with reasonable defaults.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Onboarding | No component: guidance only | Welcome, Sign in and Sign up screens |

## In Appetite UI

The Onboarding screens page holds Welcome, two Sign in layouts, social first and form first, and Sign up, built from the Input, Button and Social Button components. The blog covers the patterns.

## Example

An app shows a Welcome screen with one line, offers Continue with Apple and Google and an email form, and asks for notification permission later, at the moment a reminder is first useful.

## Common mistakes

- A long carousel of tips before any value. Let people use the app first.
- Asking for every permission on the first screen. Ask where the benefit is clear.
- Making a tutorial compulsory. Let people skip it and find it again later.
- Hiding sign-in methods behind an email form.

## Questions

### How long should mobile onboarding be?

As short as possible. Apple asks for a brief flow that does not require memorising a lot, and says to postpone nonessential setup.

### When should an app ask for permissions?

In onboarding only if the app cannot work without them, and then with a reason shown. Otherwise ask at the moment the feature is first used.

## Sources

1. [Apple Human Interface Guidelines: Onboarding](https://developer.apple.com/design/human-interface-guidelines/onboarding)

## Related

- Docs: [Onboarding app screens](https://www.appetiteui.com/docs/screens-onboarding)
- Docs: [Input](https://www.appetiteui.com/docs/input)
- Article: [Mobile onboarding screen patterns for iOS and Android](https://www.appetiteui.com/blog/mobile-onboarding-screen-patterns)
- Glossary: [Empty state](https://www.appetiteui.com/glossary/empty-state)
- Glossary: [Text field](https://www.appetiteui.com/glossary/text-field)
- Glossary: [Bottom sheet](https://www.appetiteui.com/glossary/bottom-sheet)