We Categorized More Than 500 User Onboarding Experiences Into 8 UI / UX Patterns For You to Use
We hebben meer dan 500 User Onboarding-ervaringen gecategoriseerd in 8 UI / UX-patronen die u kunt gebruiken
Onboarding van gebruikers is een ervaring die zich in de levenscyclus van een gebruiker afspeelt en die, mits goed uitgevoerd, een delicate reis tussen uw aanmeldingspagina en de eerste, van uw gebruiker gewonnen waarde van uw product overbrugt .
We verwijzen naar dit moment van waarde als het wauw- of aha-moment van een gebruiker -ahaha, " Wow this is awesome!" Of " Aha! Nu snap ik het! "
User onboarding UX / UI-ervaringen bevatten vaak welkomstberichten en productrondleidingen om gebruikers vertrouwd te maken. Deze ervaringen bevatten gemeenschappelijke UI-patronen die de echte interface van de app overlappen met of aanvullen met annotaties.
Deze annotaties zijn erop gericht om een gebruiker sneller naar hun 'aha'-moment te leiden dan wanneer ze eenvoudigweg in uw app zijn geplaatst nadat ze zich hebben aangemeld. En door uw nieuwe gebruikers sneller naar dat aha-moment te brengen , heeft u meer kans om een groter deel van uw nieuwe gebruikers na hun eerste sessie te behouden.
Gebruikers bouwen aan boord van UX / UI-ervaringen
Elk gemeenschappelijk UI-patroon kan worden gebouwd met open-source- of SaaS-oplossingen en beide hebben hun voordelen.
Dit is hoe ze het vergelijken:
Open source tools
SaaS-oplossingen
Naar mijn mening is het verstandig om uw niet-technische team de sleutels te geven om nieuwe gebruikers aan te trekken door een SaaS-oplossing aan te schaffen. Als je echter bootstrapping hebt en een overvloed aan dev-tijd hebt, kunnen open source-oplossingen zinvol zijn.
Bij Appcues hebben we het op ons genomen om alle gebruikerservaring die we tegenkomen te analyseren. Cumulatief in de afgelopen paar jaar hebben we meer dan 500 onboarding-ervaringen van gebruikers geanalyseerd en deze onderverdeeld in 8 UI-patronen zodat u inspiratie kunt opdoen.
1. Welkomstberichten
Wanneer gebruiken
Hoe vaak meldt u zich aan voor een nieuw product en ontvangt u een welkomstbericht?
Door onze schermcaptures van onboarding-ervaringen van gebruikers te doorzoeken, begint ongeveer 9 van de 10 nieuwe onboarding-sequenties voor gebruikers met een welkomstbericht.
Voor alle duidelijkheid: we definiëren een welkomstbericht als een begroeting die maar één keer wordt weergegeven voor nieuwe gebruikers en meestal tekst bevat zoals hallo of welkom: het bericht hoeft niet helemaal gewijd te zijn aan het zeggen van hallo; het omvat meestal een mogelijkheid tot actie.
Met welkomstberichten kunnen gebruikers zich beter verwelkomd voelen bij een applicatie en kunnen ze de verwachtingen en de toon zetten voor hun eerste ervaring.
Tips voor het ontwerpen van welkomstberichten
Welkomstberichten worden meestal opgenomen in een modaal venster - iets dat de onboard-ervaring van de gebruiker visueel scheidt van de interface van de toepassing zelf. Ze hebben vaak een laagje transparantie achter zich en geven gebruikers een kijkje in de daadwerkelijke toepassing op de traditionele pop-up. Dit ontwerp helpt gebruikers een oogje te houden op hun einddoel en kan hen motiveren om de ervaring van uw gebruiker met inboarding te voltooien om uw app te kunnen gebruiken.
Als alternatief nemen sommige modi van welkomstberichten het volledige scherm van een gebruiker over, waardoor het zicht op uw app wordt belemmerd en een gebruiker volledig wordt gericht op het bericht en de onboarding-ervaring van de gebruiker ervoor. We verwijzen naar dit patroon als een overname op volledig scherm. Dit patroon kan het beste zijn wanneer er bepaalde vereiste invoer is die een gebruiker moet uitvoeren voordat hij uw product gebruikt.
Hier is een goede diepe duik op in-app welkomstberichten .
U kunt welkomstberichten maken met de modal windows van Appcues of met een van deze open source-alternatieven:
2. Productrondleidingen
Wanneer gebruiken
Productreizen oriënteren nieuwe gebruikers en helpen hen de snelste manier te vinden om hun eerste moment van waarde te bereiken. Rondleidingen leiden een gebruiker vaak door een belangrijke workflow - zoals hierboven te zien is - of wijzen op een paar belangrijke stappen die anders misschien worden gemist.
Tips voor het ontwerpen van productrondleidingen
Productrondleidingen komen meestal in de vorm van tooltips. Tooltips zijn kaders met verwijzingen die bepaalde elementen binnen een product oproepen en contextualiseren. Een paar tips om de Uboarding aan boord van uw productrondleiding te optimaliseren:
U kunt productrondleidingen bouwen met de tooltips van Appcues of met een van deze open source-alternatieven:
3. Voortgangsbalken
Wanneer gebruiken
Mensen zijn bevooroordeeld in de richting van het voltooien van taken die ze krijgen. Producten spelen vaak op deze vooringenomenheid door voortgangsbalken in hun gebruikersinterface op te nemen om nieuwe gebruikers te motiveren om aan boord te gaan. Een voortgangsbalk herinnert ons eraan dat we een taak hebben gekregen en we hebben het gevoel dat we die taak moeten voltooien.
Tips voor het ontwerp van de voortgangsbalk
Voortgangsbalken die het beste bij onze vooroordelen passen, beginnen met een aanzienlijk percentage van de afgevulde balk. Dit helpt een gebruiker het gevoel te hebben dat ze al onderweg zijn in plaats van helemaal opnieuw te beginnen, en het verhoogt het verlangen van een persoon om de taak die voor hem ligt te voltooien.
U kunt voortgangsbalken aan uw gebruiker toevoegen met de modal windows van Appcues of zelf bouwen met een van deze open source alternatieven:
4. Checklists
Wanneer gebruiken
Controlelijsten, zoals voortgangsbalkjes, kunnen gebruikers helpen te weten wat er van hen verwacht wordt om aan boord te komen. Het belangrijkste verschil is echter dat checklists vaker worden gebruikt voor items die langdurig aan boord zijn.
Quora gebruikt een checklist voor langdurige onboardingstaken voor gebruikers.
Tips voor het ontwerp van de checklist
Checklists kunnen inhaken op krachtige psychologische principes, waardoor nieuwe gebruikers worden gemotiveerd om de cruciale set-uptaken die nodig zijn om uw product aan de praat te krijgen, te voltooien en zelfs te genieten . De lijsten veranderen complexe, meerstapsprocessen, zoals het plannen van een maand sociale media-inhoud, in eenvoudige, haalbare taken: kies vijf boekingsperioden, importeer uw RSS-feed en klik op "planning".
Uit wat we hebben gezien, moeten controlelijsten naast uw product leven als een herinnering aan wat er nog moet worden voltooid. Raadpleeg 5 andere voorbeelden van best-in-class checklists voor meer inspiratie bij het ontwerpen van checklists .
We werken momenteel hard aan controlelijsten voor apps. Helaas kon ik geen goede open source checklists vinden om aan te bevelen. Als u er een kent, tweeten ons dan met uw aanbeveling!
5. Hotspots
Wanneer gebruiken
Hotspots zijn een relatief nieuw UI-patroon dat overal in de SaaS-wereld is ontstaan. Hotspots zijn een goed alternatief voor tooltips omdat ze minder ingrijpend zijn voor gebruikers. Ze worden niet automatisch geopend en kunnen gemakkelijk worden genegeerd.
Hotspots worden vaak gebruikt om een beetje contextuele hulp te bieden om nieuwe gebruikers te verleiden bepaalde elementen of functies van uw product te activeren.
Tips voor hotspotontwerp
Hotspots hebben mogelijk unieke pulserende animaties om het oog van een gebruiker te vangen. U zult waarschijnlijk de intensiteit van de animatie van uw hotspots willen aanpassen, afhankelijk van hoe belangrijk de hotspotinformatie is voor het succes van uw gebruikers.
Je kunt hotspots maken met Appcues . Er zijn op dit moment geen open source-alternatieven.
6. Action-driven tooltips
Wanneer gebruiken
Voor meer technische workflows of accountactivatie op meerdere pagina's kunnen actiegedreven tooltips een spelwisselaar zijn in termen van uw activerings- en retentiegraden.
Action-driven tooltips isoleren elementen zoals formuliervelden of knoppen om een gebruiker te begeleiden bij het instellen van het account. Zodra een gebruiker een stap voltooit, worden deze doorgestuurd naar de volgende stap. Deze zware handpositie kan vergelijkbare resultaten opleveren als een onboarding-service voor witte handschoenen met de tijd- en schaalvoordelen van een low-touch-relatie.
Tips voor het ontwerp van tooltip-acties
Door een bepaald element in uw app te markeren en de ruimte eromheen donkerder te maken, dwingt u gebruikers een bepaalde set instructies te volgen. Deze zware handhouding moet spaarzaam worden gebruikt, omdat gebruikers hierdoor soms een beetje bekneld kunnen raken.
De actiegedreven tooltips van Appcues zijn in ontwikkeling. Tot die tijd kunt u uw eigen bouwen op basis van de hierboven genoemde open source-alternatieven .
7. Creëren van uitgestelde accounts
Wanneer gebruiken
Het is logisch dat u de conversieratio's op uw aanmeldingspagina kunt verhogen door het aantal formuliervelden dat u wilt invullen te verminderen. Je verlaagt de toetredingsdrempel.
Sommige producten vertragen bepaalde formuliervelden die nodig zijn voor het maken van een account tot na de eerste bestemmingspagina. Anderen gaan zo ver om het maken van accounts volledig uit te stellen tot na de Aha van een gebruiker! moment.
Met Typeform, een toepassing voor het maken van prachtige enquêtes, kunnen gebruikers hun eerste enquêtes maken zonder ooit iets over zichzelf in te voeren. Nadat hun enquête echter is gemaakt en ze klaar zijn om het formulier te distribueren, moet een gebruiker zijn account maken. Meer over de gebruikerservaring van de gebruiker van Typeform hier .
Tips voor het ontwerp van uitgestelde accounts
Omdat het maken van een account na het aanmelden zo belangrijk is, moet de gebruikersinterface voor zo'n ervaring hypergericht zijn. Als een gebruiker niet beseft dat hij zijn account moet opslaan, kun je ze verliezen als deze stuiteren of, misschien erger, ze hun voortgang verliezen.
U kunt gebruikersenquêtes maken met de modale venster-tool van Appcues en informatie via integraties doorgeven aan uw database. Of u kunt een van de hierboven genoemde open source-alternatieven gebruiken .
8. Onboarding op basis van gebruikers
Wanneer gebruiken
Wanneer een nieuwe gebruiker uw product begint te gebruiken, hebben ze mogelijk al een idee voor wat ze het eerst willen doen. Sommige user onboarding-flows vragen gebruikers om hun eigen manier van handelen te kiezen. Elke optie leidt naar verschillende first-run-ervaringen.
Deze vertakking kan plaatsvinden zonder dat de gebruiker dit weet - door gegevens te gebruiken die zijn verzameld tijdens het aanmelden - of misschien vragen ze de gebruiker wat ze willen doen. In beide gevallen moeten op gebruikers gebaseerde onboarding gebruikers helpen om meer relevante first-run-ervaringen te krijgen die moeten leiden tot een hogere betrokkenheid.
Tips voor persona-gebaseerd onboarding UX-ontwerp
Meestal begint gepersonifieerde gebruiker aan boord met een optie nadat een gebruiker een aanmeldingsformulier heeft ingevuld. De optie kan een duidelijke keuze voor de gebruiker zijn om te maken op basis van hun wensen, of het kan zijn om hun functie te selecteren.
Het is belangrijk om niet te veel keuzes te hebben voor de gebruiker om te selecteren, omdat je ze niet wilt overweldigen. Van wat ik heb gezien, lijken 3 opties het magische getal te zijn.
U kunt op gebruikers gebaseerde onboarding bouwen met Appcues of door de logica- en datalussen hardcodering toe te passen met een van de hierboven genoemde open source-alternatieven .
Bonusbeelden
We hebben deze video voor je samengesteld om wat extra kleurcommentaar te geven over wat deze UI-patronen voor SaaS-bedrijven betekenen. Voer je e-mailadres in en kijk eens:
[Opmerking van de redacteur: we hebben dit artikel van een vorige versie gepubliceerd in maart 2016 - ik hoop dat je het leuk vond!]
Ty Magnin is de Director of Marketing bij Appcues, waar hij softwareproducten helpt bij het verbeteren van hun nieuwe gebruikerservaring. Ty was de eerste marketeer op Work Market en heeft zijn wortels in poëzie en filmproductie.
