Een eenvoudige UI-hack om Onboarding UX te verbeteren [OCD]

UI-modellen en schetsen gaan ervan uit dat gebruikersgegevens al aanwezig zijn. In het onderstaande model wordt bijvoorbeeld aangenomen dat de gebruiker contacten heeft om mee te chatten, meldingen en zelfs chatthreads.

Eenvoudige messenger-ui gebouwd met behulp van deze gratis schetsbron

Maar dit is nooit het geval wanneer een gebruiker zich aanmeldt. In het begin zijn er geen gegevens, dus een lege contactkolom en een leeg chatvenster.

Het glanzende UI-ontwerp maakt het gemakkelijk om informatie te consumeren en is niet gericht op het maken van die informatie.

Ik leerde dit op de moeilijke manier toen ik zoveel mogelijk van Dribbble doorweekte om een ​​dashboard voor een b2b-toepassing te ontwerpen. Het zag er geweldig uit op Sketch, maar onze klanten konden de weg er niet door vinden.

Bad UX verhoogt de instap- en ondersteuningskosten en heeft direct invloed op de omzet. Het voelt ook slecht om een ​​gebruiker te zien die moeite heeft om je pixel perfect ontwerp te consumeren. Herinnert u eraan dat u hebt gefaald.

Bestaande oplossingen

Een oplossing was om vooraf aan boord te zijn met behulp van dia's zoals een interface. Dit lijkt de standaard te zijn voor mobiele apps.

Slack's op dia gebaseerde on-boarding UX

Het probleem met dia'sbenadering is het gebrek aan context. U kunt slechts zoveel overbrengen op de dia's (hoeveel de gebruiker behoudt is een andere vraag).

Het is geweldig om een ​​overzicht van het product te geven, maar niet erg nuttig om uit te leggen hoe het product werkt. Het was niet relevant voor mijn use case, omdat de complexiteit van het product niet kon worden teruggebracht tot enkele dia's.

Er was ook een tooltip-gebaseerde oplossing die de gebruiker door specifieke stappen leidt. Deze optie is populairder bij web-apps. Er zijn veel goede javascript-bibliotheken om u te helpen deze stromen op te bouwen.

Tooltip gebaseerde on-boarding demo voor introjs.com/

Wat een op tooltip gebaseerde oplossing betreft, ik vond ze vervelend en klikte bijna altijd op "tutorial overslaan". Hoewel grote bedrijven zoals Canva tooltip gebruiken op basis van instappen. Met het product AppCues kunt u deze tooltips zonder code ontwerpen, netjes.

Er bestaat ook een bakenachtige benadering, waarbij vaak onbegrepen functies worden gemarkeerd met gloeiende bakens, die relevante informatie bieden wanneer (indien) nodig is.

Dit is de meest onopvallende manier. In tegenstelling tot knopinfo die een 17-staps tutorial in je keel duwt en verdwijnt wanneer je het echt nodig hebt, biedt deze op hotspot gebaseerde aanpak informatie wanneer je klaar bent.

Het is vermeldenswaard dat Slack alle 3 de vormen gebruikt. Geen wonder dat hun gebruikers vasthouden. Dat wijst er ook op de een of andere manier op dat retentie recht evenredig is met instapgemak.

OCD aka Onboarding centraal ontwerp

Ik vind het leuk dingen te benoemen. Namen helpen ideeën in de geest te materialiseren. Laten we dit dus Onboarding centric design noemen.

Ik wilde een oplossing die:

  • Was relevant voor de context
  • Was niet vervelend (niemand neemt graag 17 stappen om te leren hoe een functie werkt)
  • Is onopvallend (zoals de bakens)
  • Is gemakkelijk te consumeren (tooltips zijn niet gemakkelijk te consumeren)

Resultaat

Ik begon eenvoudig staten te ontwerpen. Het chatontwerp dat u zag toen u dit artikel begon te lezen, kan worden ontworpen met drie statussen.

Status 1: Er zijn geen contacten aanwezig

Status 2: Contacten aanwezig, maar geen chats

Status 3: zowel chats als contacten zijn aanwezig

Het doel van elke status is om de gebruiker naar de volgende status te brengen. Wanneer de gebruiker is overgegaan naar status 3, is ze met succes aan boord. Gezien het chatmodel is het doel voor elke status als volgt:

Doel van staat 1: Eerste gebruiker om een ​​contactpersoon toe te voegen

Het onderstaande model heeft slechts één call-to-action, de blauwe plusknop waarmee de gebruiker een nieuw contact kan toevoegen. De grafische weergave en de tekst zorgen ervoor dat de gebruiker die actie uitvoert.

Status 1 - Prime de gebruiker om contacten toe te voegen (illustratie door undraw.co)

Zodra een contact is toegevoegd, kunnen we het tweede doel beginnen.

Doel van Staat 2: Prime gebruiker om een ​​chat te starten

Het onderstaande mockup toont een grafische inleiding om een ​​chat te starten. Het beschrijft expliciet de beschikbare functies. Nogmaals, er is slechts één ding dat u nu kunt doen, namelijk een bericht verzenden. U kunt ook bellen in deze gebruikersinterface, maar beide acties hebben hetzelfde doel. Ze brengen uw gebruiker naar stap 3.

Status 2 - Contact toegevoegd, prime om een ​​chat te starten

Doel van staat 3: Geen, de gebruiker is aan boord - alle signalen zouden moeten verdwijnen

En ten slotte, wanneer uw gebruiker het proces een paar keer heeft herhaald, zal haar gebruikersinterface beginnen te kijken zoals we oorspronkelijk hadden bedoeld.

Status 3 - De gebruiker is succesvol ingeschakeld

Voordelen van deze aanpak

  • In vergelijking met de dia'sbenadering in stap 1, presenteert Onboarding Centric Design (OCD) de inhoud in brokken. De informatie is beschikbaar op het moment van besluitvorming.
  • Deze aanpak kan zowel op mobiele apparaten als op desktopapparaten worden gebruikt. Deze gebruikersinterface is eenvoudig, maar in het geval van een complexe gebruikersinterface kunt u OCD met hotspots gebruiken om CTA's te verhogen.
  • Deze aanpak verbetert uw UX in de eerste plaats door u te dwingen te denken in termen van de reis van de gebruiker.
  • Als je toevallig je frontends schrijft met React, past deze aanpak netjes bij de componentarchitectuur.

Dus als vuistregel:

Ontwerp mockups voor staten.
Elke staat heeft één doel - vooruitgang naar de volgende staat.
De laatste status is wanneer uw gebruiker aan boord is.

Bedankt voor het lezen :)

Hallo, als je dit artikel leuk vond en op de hoogte wilt blijven, volg me dan op: Medium, Github of Twitter

Ik heb een slappe community (met 18 leden vanaf 6 oktober 2018) waar je anderen kunt helpen of hulp kunt krijgen met betrekking tot frontend, backend en ontwikkeling in het algemeen. Je kunt hier lid worden.