Onboarding-tooltips voor SaaS: hoe u dit UI-patroon het beste kunt gebruiken om gebruikers te begeleiden bij het accepteren van uw product.

Er is een eenvoudige manier om productgerichte groei te stimuleren: geef gebruikers een fantastische eerste indruk van je product door onboarding tooltips te gebruiken.

In dit artikel verkennen we enkele best practices en principes over hoe u dit handige UI-patroon kunt gebruiken om de productadoptie te verhogen door middel van geweldige gebruikerservaringen bij het instappen.

Dat begint met begrijpen hoe nieuwe gebruikers uw product leren kennen. Dan is het relatief eenvoudig om een inwerkproces te creëren dat aan hun behoeften voldoet en de adoptie bevordert.

Klaar om te beginnen?

Laten we erin duiken!

TL;DR

• Een onboarding tooltip is een soort gerichte popup waarmee bestaande en nieuwe gebruikers nieuwe functies op een contextuele manier kunnen begrijpen – ze worden vaak gebruikt om interactieve producttours te maken.
• Het primaire doel van een onboarding tooltip is de gebruiker te helpen begrijpen wat hij/zij nu moet doen door hem/haar naar de volgende fase van een taak of activiteit te leiden, wat de productadoptie bevordert.
• U kunt tooltips gebruiken in verschillende scenario’s, zoals het lanceren van producttours, het aankondigen van belangrijke functies die onlangs zijn uitgebracht of bijgewerkt, het uitvoeren van interactieve gidsen, het activeren van in-app contextuele hulp om self-service mogelijk te maken, of het upsellen van een nieuwe functie.
• Voor het maken van tooltips zijn er drie mogelijkheden: zelf bouwen, iets open source gebruiken, of een van de vele beschikbare tools gebruiken.
• Het gebruik van een tool als Userpilot heeft een aantal duidelijke voordelen ten opzichte van het bouwen of hergebruiken van code: in de eerste plaats meer flexibiliteit, inzicht in de gegevens en een kortere time to value.
• Wanneer u contextuele tooltips wilt gebruiken als onderdeel van een onboardingproces, moet u rekening houden met een aantal fundamentele principes: bouw voort op een basis van een geweldige gebruikersinterface, houd tooltips kort en bondig, gebruik ze alleen waar het zinvol is, vermijd rommel en laat de voortgang van gebruikers zien.
• Wilt u interactieve elementen zoals tooltips, modals, checklists en meer toevoegen aan uw onboarding van nieuwe gebruikers? Vraag een Userpilot Demo aan en ga aan de slag.

Wat zijn onboarding tooltips?

Een onboarding tooltip is een soort gerichte popup waarmee gebruikers nieuwe functies op een contextuele manier kunnen begrijpen terwijl ze bezig zijn met een onboarding flow. Een goed ontworpen tooltip laat gebruikers bepaalde kenmerken van het product ontdekken die de meeste waarde hebben voor de nieuwe gebruiker.

Natuurlijk moet u niet alleen denken aan onboarding van nieuwe klanten – het gaat niet alleen om out-of-the-box producttours of gebruikersactivatie.

User onboarding is een iteratief proces dat elke fase van het gebruikerspad doorkruist en het gebruik van contextuele tooltips om gebruikers te motiveren tot actie maakt deel uit van een digitale en interactieve gebruikerservaring.

Wat is het doel van een tooltip?

Enkele tooltips zijn leuke kleine interactieve elementen die zijn ontworpen om de aandacht te trekken en gebruikers te helpen begrijpen hoe ze met uw SaaS-product moeten omgaan.

Een tooltip is een van de vele hulpmiddelen die je tot je beschikking hebt.

Het inwerken van gebruikers is het belangrijkste doel van een tooltip, die de aandacht van de gebruiker vestigt op wat hij vervolgens moet doen. Ze werken als een kleine begeleiding die contextuele hulp biedt terwijl de gebruiker het traject aflegt en interageert met een nieuwe app.

Gebruikersaandacht vestigen op UI-elementen die voor hen relevant zijn tijdens het onboarding-traject.

Het inwerken van gebruikers is het belangrijkste doel van een tooltip, die de aandacht van de gebruiker vestigt op wat hij vervolgens moet doen. Ze werken als een kleine begeleiding die contextuele hulp biedt terwijl de gebruiker het traject aflegt en interageert met een nieuwe app.

Gebruikers stap voor stap begeleiden bij het gebruik van specifieke functies

Door meerdere tooltips in een onboarding flow met elkaar te verbinden, krijgt u in feite een interactieve walkthrough die een nieuwe gebruiker begeleidt bij het gebruik van uw product.

Door voortgangsbalken toe te voegen aan een reeks tooltips wordt de betrokkenheid ook verhoogd, omdat de gebruiker kan zien hoeveel moeite hij moet doen. Bovendien zijn we allemaal geneigd een taak af te maken als we zien dat we dichter bij de eindstreep zijn.

Hoe tooltips te gebruiken in het hele onboardingproces van gebruikers

Tooltips kunnen een waardevol instrument zijn in het zwitsers legermes van elke slimme productmanager, omdat ze zo veelzijdig zijn – je kunt ze gebruiken in een reeks verschillende scenario’s (niet alleen als onderdeel van een product walkthrough om gebruikers kennis te laten maken met het product).

Enkele use cases zijn:

• Een interactieve producttour bouwen
• Aankondiging van belangrijke functies die nieuw zijn uitgebracht of bijgewerkt

• Het runnen van interactieve gidsen (ja, deze zijn niet hetzelfde als productrondleidingen!)
• In-app contextuele hulp activeren om zelfbediening mogelijk te maken
• Upselling van nieuwe functies

Laten we nu eens kijken naar enkele tooltip-voorbeelden voor elk gebruik.

Tooltips voor producttour

Producttours zijn een goed voorbeeld van een goede onboarding-ervaring – er is geen betere manier om gebruikers aan uw SaaS-product te binden.

In wezen is een producttour een reeks tooltips die ontworpen zijn om een nieuwe gebruiker kennis te laten maken met de belangrijkste kenmerken en voordelen van uw product. Bij het maken van producttours zijn er veel hulpmiddelen om te overwegen.

Een belangrijk principe van effectieve producttours om te benadrukken: producttours mogen nooit te gedetailleerd zijn – het gaat erom dat gebruikers naar de belangrijkste kenmerken worden geleid.

Laten we het onderstaande voorbeeld van de producttour van Slack bekijken als een voorbeeld van initiële onboarding.

Een handige tooltip die aangeeft welke acties u moet ondernemen.

Slack gebruikt twee eenvoudige tooltips, die nieuwe gebruikers tijdens een onboarding-flow laten zien hoe ze berichten kunnen versturen en gesprekken kunnen bijhouden (waardoor de leercurve kleiner wordt).

Dit is een goed voorbeeld van een producttour voor een gemiddelde gebruiker, omdat het er alleen op gericht is te laten zien hoe je aan de slag kunt gaan, en de gebruikers niet door een hele rondleiding door het product leidt die misschien wel of niet relevant voor hen is.

Functie-aankondiging tooltips

Een aankondiging van een functie is een manier om oude en nieuwe gebruikers te informeren over wijzigingen in belangrijke functies en functionaliteiten van uw SaaS.

Het kunnen eenvoudige, gewone lanceringsberichten zijn, zoals deze tooltip van Calendly.

Of laat je inspireren door dit voorbeeld van Slack: maak interactieve tooltips (een geweldige manier om een release te communiceren en de adoptie van functies te stimuleren).

Interactieve wandelingstips

Niet alle producttours hoeven dezelfde aanpak te hebben – interactieve walkthroughs kunnen een fantastische manier zijn om de onboarding van gebruikers te verbeteren en gebruikers door een reeks belangrijke acties te leiden(aanmeldingsstromen zijn zeer gebruikelijk).

Waarom? Want de meeste gebruikers leren door te doen, niet door alleen maar te horen wat ze moeten doen. Een interactieve ervaring is een geweldige manier om een gebruiker vertrouwd te maken met zelfs het meest complexe product.

Op de juiste manier uitgevoerd, helpen interactieve walkthroughs gebruikers om zinvolle acties te ondernemen en ‘wins’ te behalen – wat betekent dat u de kans aanzienlijk vergroot dat ze uw product opnieuw willen gebruiken.

Vergeet niet dat het altijd de moeite waard is om een ‘overslaande’ optie te behouden voor ervaren gebruikers.

Dus wat is het verschil tussen een snelle rondleiding door het product en het gebruik van tooltips in een walkthrough bij het onboarding van uw gebruikers? Het komt neer op één ding: actie van de gebruiker.

Hier is een voorbeeld van een handleiding voor gebruikers om hun chatwidget van Kommunicate te personaliseren.

In-app contextuele hulp tooltips

Onboarding-tooltips worden ingesteld om op specifieke pagina’s te worden geactiveerd en zijn bedoeld om specifieke functies aan te geven wanneer een gebruiker door uw product navigeert. Hoe beter je tooltips, hoe groter de kans op een ‘aha-moment‘.

In de juiste context gebruikt, kunnen ze een minimalistische UI verbeteren en leiden tot effectieve onboarding tijdens het hele gebruikstraject.

Het onderstaande voorbeeld van Loom laat zien hoe ze naadloos in uw UI passen, en alleen verschijnen wanneer de gebruiker met de muis over een specifiek element beweegt – slimme UI-patronen.

Hier is nog een mooi voorbeeld van Asana (een hulpmiddel voor projectbeheer), dat een tooltip toont die verschijnt wanneer een gebruiker een taak opent en een commentaar begint te schrijven.

Dit benadrukt een belangrijke functie die de gebruiker nodig heeft, op het juiste moment.

Upselling van nieuwe functies

In de regel moet u niet proberen upselling op willekeurige momenten toe te passen. Het werkt alleen als je de juiste boodschap op het juiste moment deelt.

Het onderstaande voorbeeld van Intercom is perfect: het toont gebruikers een ‘grijze’ inactieve functie, die met een simpele klik kan worden opgewaardeerd.

Hoe maak je tooltips?

Het is duidelijk dat tooltips – gericht op de juiste use case – een grote impact kunnen hebben op het onboardingproces van gebruikers, adoptie kunnen stimuleren en kunnen bijdragen tot explosieve groei.

Maar hoe maak je tooltips in het hele traject van de gebruiker, contextueel?

Als het erom gaat tooltips in de gebruikerservaring op te nemen, zijn er drie mogelijkheden: bouw ze zelf, maak gebruik van iets open source, of gebruik een van de vele beschikbare adoptietools.

 

De no-code manier: Userpilot

De snelste manier om tooltips te lanceren en te creëren voor uw gebruikers is het gebruik van een vertrouwde no-code tool zoals Userpilot.

Je begint met het maken van een flow, een van de belangrijkste functies van Userpilot.

Van daaruit kunt u voorgebouwde sjablonen van tooltips gebruiken – deze zijn volledig aanpasbaar, maar kunnen u kostbare tijd besparen als u uw gebruikers snel waarde wilt bieden. Ga je gang en selecteer Tooltip en je kunt een sjabloon kiezen of beginnen met een eigen sjabloon.

Het is gemakkelijk om inhoud te bewerken, kleuren te veranderen, of secties toe te voegen als je eenmaal de tooltip als patroon hebt gekozen.

De laatste stap is het instellen van ‘triggers’, en het definiëren van uw publiek – en u kunt aan de slag.

Waardevolle prestatiegegevens en geavanceerde analyses helpen begrijpen hoe tooltips landen bij uw gebruikers.

Als u een doel koppelt, kunt u ook de vooruitgang ten opzichte van dat doel bijhouden (bijvoorbeeld of een tooltip uw gebruikers helpt een ‘aha-moment’ te bereiken en een nieuwe functie te gebruiken).

U kunt zelfs A/B-tests uitvoeren om te experimenteren met hoe verschillende producttours landen, en gebruikers dienovereenkomstig segmenteren.

Wilt u Userpilot in actie zien? Ontvang een demo en begin met het bouwen van tooltips zonder code.

De open-source manier: Bootstrap en Jquery

Een andere manier om tooltips te gebruiken in uw producttours is door gebruik te maken van open-source code – u zou Bootstrap en Jquery kunnen proberen.

Deze vereisen nog steeds een behoorlijke hoeveelheid technische kennis om te implementeren – en u zult zeker een aantal van de geavanceerde functies die hierboven zijn beschreven missen – maar u zou in staat moeten zijn om door de voorbeelden heen te werken als u genoeg tijd krijgt.

Het is zeker moeilijker om effectieve producttours en in-app begeleiding te maken met behulp van tooltips, in vergelijking met het gebruik van een tool zonder code.

De ‘ontwikkelaar’-manier: Javascript, HTML, CSS

Dit is de meest complexe optie – maar als je sterke ontwikkelingsvaardigheden hebt (of een ontwikkelaar hebt die je kunt inschakelen), zal het gebruik van Javascript je de meeste autonomie geven om tooltips te ontwerpen, te creëren en aan te passen als onderdeel van je producttours.

Natuurlijk kost het voortdurend tijd en moeite om je tooltips op peil te houden.

HTML en CSS hebben niet zo’n steile leercurve, maar je bent nog steeds beperkt in functionaliteit en onderhoud.

Om producttours te maken en tooltips te maken die uw gebruikers snel tevreden stellen, zijn andere tools een eenvoudigere optie.

Tooltips best practices voor goede UX

Om gebruikers betrokken te krijgen – en te houden – moet je onboarding-ervaringen en producttours ontwikkelen die waarde toevoegen.

Overweeg de volgende principes voor onboarding tooltips om in de juiste richting te gaan.

Hoe lang moeten tooltips zijn?

Om gebruikers betrokken te krijgen – en te houden – moet je onboarding-ervaringen en producttours ontwikkelen die klanten waarde bieden.

Overweeg de volgende principes voor onboarding tooltips om in de juiste richting te gaan.

Wat schrijf je in een tooltip?

UX schrijven moet beknopt zijn. Zorg voor een duidelijke structuur bij het maken van tooltip-inhoud.

Begin met een titel en een korte beschrijving, met als voornaamste doel uw gebruikers te helpen begrijpen wat hun volgende actie is – net als deze beknopte tooltip van Narrato hieronder.

Het onderstaande voorbeeld van Miro is iets gedetailleerder en informatiever – maar dat komt omdat het een ander doel heeft (gebruikers wijzen op een nuttige selectie van gidsen en producttours)

Tooltips ontwerpen voor bruikbaarheid

Je moet altijd prioriteit geven aan je in-app berichten en tooltips voor bruikbaarheid. Hoe ziet dat er in de praktijk uit?

• Actiegerichte tekst – Houd uw tekst stevig gericht op de volgende haalbare actie.
• Geef gebruikers een uitweg – Voeg altijd een skip-knop toe aan uw producttours om frustratie bij gebruikers te voorkomen.
• Neem CTA’s op – Waar het zinvol is, neem duidelijke CTA’s op – zoals dit updatevoorbeeld van Asana.

• Laat uw merkpersoonlijkheid zien. Definieer duidelijke UI-patronen die uw merkkleuren laten zien in uw tooltips – het helpt uw gebruikers de betekenis van bepaalde soorten meldingen te begrijpen (zoals dit voorbeeld van Asana hieronder).

Een voortgangsbalk toevoegen

Wanneer u meerdere tooltips gebruikt om interactieve gidsen te maken, moet u eerst nadenken over de gebruikerservaring.

Goede producttours (of interactieve walkthroughs) bevatten vaak een soort voortgangsindicator. Een voortgangsbalk helpt gebruikers massaal om ‘de eindstreep te zien’, en kan hen aanmoedigen om een reis vol te houden.

U kunt kiezen uit verschillende UI-patronen: een voortgangsbalk, cijfers of stippen – het maakt niet uit, zolang het maar duidelijk is voor uw gebruikers.

Zorg ervoor dat u een terugknop toevoegt voor gemakkelijke navigatie.

Vermijd rommel en overlapping van tooltips

Hoewel u uw gebruikers natuurlijk op de hoogte wilt houden en informeren, moet u dit in evenwicht brengen met strakke, eenvoudige UI-patronen om het risico van verwarring of overcomplicatie te vermijden.

Wanneer berichten elkaar overlappen, en de gebruiker moeite heeft om ze te lezen – heeft het gewoon geen zin om ze te hebben (zoals dit ongelukkig slechte UX-ontwerpvoorbeeld van Zoom hieronder).

U kunt dit voorkomen door specifieke voorwaarden te stellen – bijvoorbeeld gericht op een bepaald gebruikerssegment, een specifiek scherm of pagina, of door prioriteit te geven aan bepaalde use cases.

Vertrouw niet op tooltips om een slechte UI te compenseren.

Hoe fantastisch hulpmiddel tooltips ook zijn, ze kunnen een slechte gebruikersinterface niet oplossen. Uw SaaS moet nog steeds zinvol en zo duidelijk mogelijk zijn.

Een veelgemaakte fout is de gebruiker te bombarderen met een lange reeks tooltips wanneer het product zelf moet worden gerepareerd. Focus op gebruikersadoptie en -behoud betekent meer dan vertrouwen op een tooltip als gimmick.

Richt u eerst op de basiselementen van uw ontwerp en gebruik tooltips om die ervaring te verbeteren.

Wanneer zijn tooltips GEEN goed idee en leiden ze tot slechte UX

Tooltips zijn geen wondermiddel en zeker niet de beste manier om kritieke informatie door te geven die een gebruiker vaak moet raadplegen.

Gewoonlijk werken ze niet goed met afbeeldingen, video’s, formulieren of andere interactieve inhoud. U moet tooltips bij repetitieve acties absoluut vermijden – er is geen snellere manier om uw gebruikers te frustreren dan een irritante, irrelevante popup.

De belangrijkste les komt hierop neer: je moet tooltips niet gebruiken waar ze niet nodig zijn.

Het lijkt misschien vanzelfsprekend, maar veel SaaS-bedrijven maken de fout het onboardingproces te ingewikkeld te maken met tooltips, terwijl ze te kampen hebben met fundamentele ontwerpproblemen.

Conclusie

We hebben in dit artikel heel wat behandeld.

Van wat tooltips zijn, waar ze passen als onderdeel van een onboarding flow, best practices, verschillende manieren om ze te implementeren – en waar ze te vermijden.

De belangrijkste conclusie is deze: tooltips kunnen een fundamentele bouwsteen vormen van mensgerichte ervaringen die op een contextuele manier worden geleverd, als je de beste praktijken volgt.

Houd ze relevant, gebruik ze op een relevante manier en vermijd onnodige poeha om het meeste effect te sorteren.

Zo heb je het grootste effect op de gebruikersadoptie.

Wil je tooltips zonder code bouwen? Boek een demo gesprek met ons team en beginnen! Bekijk onderstaande banner om aan de slag te gaan met het maken van boeiende onboarding tooltips.