Onboarding

Onboarding via tom tilstand

En first-use tom tilstand er den allerførste skærm, en ny bruger møder, før der findes noget indhold. I stedet for at vise en tom beholder kan den bruges som et guidet første skridt: forklar, hvad området er til, og peg på handlingen, der fylder det. Mønstret er vejlednings-drevet — der findes ingen troværdig konverteringsstatistik, så vær skeptisk over for blogs, der lover »+X% aktivering«.

4 min læsning

Definition

Onboarding via tom tilstand gør en ellers tom liste eller dashboard til en guide med eksempel-data eller en tydelig call-to-action.

Hvorfor det virker

En tom beholder er ikke neutral. Nielsen Norman Groups tre retningslinjer bygger på, at intentionelt designede tomme tilstande kan øge brugerens selvtillid, appens learnability og opdageligheden af nøglefunktioner.1

First-use-skærmen er et onboarding-øjeblik, ikke bare et tomrum: brug den til at uddanne og engagere — gør »et øjeblik af ingenting til noget«.2

Man lærer et produkt bedst ved at bruge det. Derfor anbefaler Material Design starter-/eksempelindhold frem for lange forklaringer, så brugeren kan udforske med det samme.3

In-context læring slår tvungne tutorials: kontekstuelle vink, vist mens brugeren er i gang, er generelt mere effektive end forced tutorials ved første brug, fordi de kan bruges med det samme og huskes bedre.1

Hvornår du bruger det — og hvornår ikke

Hvornår du bruger det

  • Nye brugere møder tomme lister, før de har oprettet noget.
  • Ét oplagt næste skridt kan få dem videre.
  • Eksempel-indhold kan vise, hvordan et fyldt view ser ud.

Hvornår du bør undgå det

  • Tomme tilstande optræder sjældent efter opsætning.
  • Skærmen fyldes automatisk uden brugerhandling.

Best practices

  1. Forklar tomheden og sæt forventninger

    Fortæl, hvad området er til, og hvad der kommer til at stå her. At sætte forventninger gør brugeren tryg.2

  2. Giv én klar primær handling

    Nøjes ikke med at beskrive — peg på næste skridt via en tydelig knap/link, der udfylder skærmen.1

  3. Overvej starter- eller eksempelindhold

    Giv brugeren noget at udforske med det samme — men lad det kunne slettes og erstattes, og gerne være personaliseret.3

  4. Lær ved at gøre frem for en tvungen tutorial

    Vis hjælpen i det øjeblik, den er relevant. NN/g foretrækker kontekstuelle vink frem for forced tutorials ved første brug.1

  5. Brug educational content sparsomt og springbart

    Kun når billede og en kort overskrift ikke er nok: vis kort, dismissible forklaring, og hold den kort.3

  6. Hold det visuelt enkelt

    Én ting i forgrunden. Brug et minimalistisk design, der bringer det vigtigste frem.2

  7. Undgå blindgyder

    Efterlad aldrig brugeren uden en vej videre — blindgyder skaber forvirring og unødvendige tryk.2

  8. Kommunikér systemstatus korrekt

    Skeln mellem »tomt, fordi du ikke er begyndt« og »tomt, fordi noget loader eller fejlede«, så brugeren ikke tror, produktet er i stykker.1

Typiske fejl

  • Den rene tomme beholder

    En tom liste uden forklaring eller handling spilder produktets vigtigste læringsøjeblik.

  • Smuk, men uklar skærm

    Æstetik uden retning hjælper ikke brugeren videre.

  • Blindgyde uden næste skridt

    Ingen CTA, ingen vej fremad.

  • Tvungen upfront-tutorial før første berøring

    In-context vink virker bedre end forced tutorials ved første brug.

  • Ikke-sletbart starter-indhold

    Både eksempel- og educational-indhold skal kunne slettes eller springes over.

Eksempler i praksis

First-use som guide (historisk)

Apps som Dropbox og Messenger blev fremhævet (Smashing, 2017) for tomme tilstande, der forklarer værdien og giver en klar call-to-action. Behandl som historiske eksempler — de konkrete skærme kan have ændret sig.

Starter-indhold (Material Design)

Materials eget principeksempel: en læse-app lægger et par gratis, populære bøger ind fra start, så nye brugere kan udforske med det samme.

Ofte stillede spørgsmål

Hvad er forskellen på en »first-use« tom tilstand og en »ingen resultater«-tilstand?

En first-use-tilstand betyder, at der aldrig har været indhold endnu — den bruges til at onboarde og pege på den første handling. En »ingen resultater«-tilstand betyder, at der findes indhold, men søgningen gav nul træffere — der skal du forklare hvorfor og hjælpe med at justere søgningen, ikke onboarde.

Skal jeg lave en tutorial-gennemgang i stedet?

Nej, ikke som det første. NN/g finder, at kontekstuelle hjælpevink, vist mens brugeren er i gang, generelt virker bedre end tvungne tutorials ved første brug. Lad brugeren lære ved at gøre.

Hvad skal en god first-use tom tilstand indeholde som minimum?

En kort forklaring af, hvad området er til, og én tydelig primær handling (CTA), der udfylder skærmen. Undgå blindgyder uden vej videre.

Hvad er »starter content«, og bør vi bruge det?

Starter content er eksempeldata, produktet selv lægger ind, så brugeren kan udforske med det samme. Material Design anbefaler det — men indholdet skal kunne slettes og erstattes, og gerne være personaliseret.

Kan I love mig en konkret stigning i aktivering?

Nej. Der findes ingen pålidelig, kildeverificeret statistik, der knytter et bestemt procenttal til first-use tomme tilstande. Anbefalingerne bygger på ekspertvejledning (NN/g, Smashing, Material Design), ikke på et efterprøvbart måltal.

Hvornår er en video eller forklaring på skærmen okay?

Kun når et billede og en kort overskrift ikke er nok. Så kan du vise kort educational content — men hold det kort, og lad brugeren kunne springe det over.

Kilder

  1. Designing Empty States in Complex Applications: 3 GuidelinesKate Kaplan, Nielsen Norman Group (2021)
  2. The Role of Empty States in User OnboardingNick Babich, Smashing Magazine (2017)
  3. Empty States — PatternsMaterial Design (Google)