--- title: "Onboarding" url: "https://www.insideuxdesign.com/en/glossar/onboarding" language: "en" description: "What is onboarding in UX design? A plain-language explanation with an example and practical tips. Learn why contextual help often beats long tutorials." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T13:06:31+02:00" --- # Onboarding Onboarding is how new users get started with a product. Good onboarding gets people to their first real success as quickly as possible instead of explaining every feature up front. - **Buchstabe:** O UX glossary # Onboarding Onboarding is how new users get started with a product. Good onboarding gets people to their first real success as quickly as possible instead of explaining every feature up front. Imagine you download a new app for splitting household costs. Before you can do anything, you swipe through five colorful intro screens. Then you land on an empty screen and still don’t know how to add your first expense. You’ve already forgotten everything those screens told you. ## Explained simply Onboarding literally means bringing someone “on board.” The term comes from human resources, where it refers to helping new employees settle in. In UX design, it covers everything that helps people get started with a new product: from signing up and taking the first steps to the moment they experience real value for the first time. That moment is often called the “aha moment.” Think of joining a new sports club. A thick binder with every rule won’t help you much. What helps is someone showing you where the locker room is at your first practice and letting you join the game right away. Good onboarding works the same way. ## Why tutorials often don’t help Many apps rely on intros that explain everything before you actually use the product, often as a deck of swipeable cards. In 2020, the Nielsen Norman Group studied tutorials like these in four iOS apps. People who read the tutorial didn’t complete tasks measurably better than those who skipped it. They did, however, rate the tasks as harder. The study is small, but the signal is clear: a tutorial can make a simple app seem more complicated than it is. The reason lies in how memory works. Information without a relevant context doesn’t stick well. Help in context works better, meaning help that shows up exactly when someone needs it: a hint right next to an input field, a short tip the first time a feature opens, or an empty state that explains what belongs there. ## An example Back to the household app. Before, there are five intro screens followed by an empty screen that says “No entries.” Many people close the app right there. After the redesign, the intro screens are gone. The empty screen says: “No expenses yet. Add your first purchase and share it with your roommates.” Below it sits a large “Add first expense” button. After saving, a short hint explains how to invite roommates. Anyone who opens the app completes a real task right away and learns along the way. ## Common misconceptions Onboarding is not the same as a tutorial. Good onboarding is often invisible and built into the product itself: clear [microcopy](https://www.insideuxdesign.com/en/glossar/microcopy), sensible defaults and features that appear gradually instead of all at once. That gradual reveal is called [progressive disclosure](https://www.insideuxdesign.com/en/glossar/progressive-disclosure). For how small bits of feedback support this, see [What Are Microinteractions and How Can You Use Them?](https://www.insideuxdesign.com/en/blog/what-are-microinteractions-and-how-to-use-them) ## In practice - **Define the first success.** Decide which action shows that someone has understood the value. Then design the start so people reach that action quickly. - **Explain in the moment, not up front.** Show hints where they’re needed and make them easy to dismiss. If someone skips something, they need to be able to find it again later. - **Make use of empty states.** An empty screen is the perfect place for a clear next step. A button that leads straight to the first task helps more than a line like “No data.” ## Related terms [Progressive Disclosure](https://www.insideuxdesign.com/en/glossar/progressive-disclosure), [Microcopy](https://www.insideuxdesign.com/en/glossar/microcopy), [Cognitive Load](https://www.insideuxdesign.com/en/glossar/cognitive-load) ## Sources - [Alita Kendrick: Mobile Tutorials: Wasted Effort or Efficiency Boost? Nielsen Norman Group, 2020](https://www.nngroup.com/articles/mobile-tutorials/) - [Page Laubheimer: Onboarding Tutorials vs. Contextual Help. Nielsen Norman Group, 2023](https://www.nngroup.com/articles/onboarding-tutorials/) - [Kate Kaplan: Designing Empty States in Complex Applications: 3 Guidelines. Nielsen Norman Group, 2021](https://www.nngroup.com/articles/empty-state-interface-design/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)