Micro-interacties: ontwerpen met details
"De beste producten doen twee dingen goed: functies en details. Functies zijn wat mensen naar uw product trekken; details zijn wat hen daar houdt ", zegt Dan Saffer. Het belang van details kan niet genoeg benadrukt worden. Details zorgen ervoor dat gebruikers dol zijn op of een hekel hebben aan een app of website. Micro-interacties zijn die details. Ze kunnen gemakkelijk over het hoofd worden gezien in het globale ontwerpschema, maar ze houden de hele ervaring bij elkaar.
In dit artikel zal ik uitleggen wat een microinteractie is, waarom ze belangrijk zijn en enkele geweldige voorbeelden geven.
Wat is een micro-interactie
Micro-interacties zijn subtiele momenten gecentreerd rond het uitvoeren van een enkele taak. Vrijwel alle toepassingen om ons heen zijn gevuld met microinteracties.
Het meest bekende voorbeeld van een micro-interactie bestaat al lang voordat computers ooit werden uitgevonden. De aan / uit-schakelaar is vaak de eerste micro-interactie die mensen tegenkomen met een product.
Enkele andere voorbeelden van specifieke micro-interacties zijn:
- De waarschuwing voor trillingen en het pictogram voor de stille modus worden weergegeven wanneer u een iPhone schakelt om te dempen.
- Het pull-to-refresh UI-patroon. Door de wens van de gebruiker om meer inhoud te vinden te koppelen aan de actie van verfrissen, wordt de ervaring naadloos.
Afbeelding credit: Ramotion
- De 'vind ik leuk'-knop op sociale netwerken die veranderingen benadrukt met behulp van interactieve animaties. Dergelijke feedback informeert gebruikers dat ze in de lijst staan van mensen die het bericht leuk vonden.
Afbeelding credit: Dribbble
Waarom ze werken
Kortom, micro-interacties verbeteren de UX door de gebruikersinterface minder machinaal en menselijker te maken. We denken vaak aan look & feel en hoe het zich verhoudt tot design. Wanneer we nadenken over micro-interacties, vormen ze vrijwel een balans tussen hoe gebruikers zich voelen over het product, de service of het merk. Micro-interactiemogelijkheden verfijnen mensgericht design door:
- Direct feedback geven - Visuele feedback spreekt de natuurlijke behoefte van de gebruiker aan om te erkennen. De gebruiker weet meteen dat hun actie is geaccepteerd en ze willen blij zijn met een visuele beloning.
- Handelen als facilitator voor interactie - Microinteracties hebben de kracht om gebruikers aan te moedigen om daadwerkelijk te communiceren. Ze kunnen gebruikers begeleiden bij het werken met de app.
- Verheugd maken - Micro-interacties zijn de perfecte kans voor een beetje extra plezier in het ontwerp zonder afbreuk te doen aan de belangrijkste ervaring.
Aanvullende voordelen
Omdat micro-interacties van korte aard zijn, moeten ze zijn ontworpen voor herhaald gebruik. Goed ontworpen micro-interacties kunnen creëren:
Habit-loop
Micro-interacties zijn de belangrijkste componenten van habit-lussen. Gewoonten worden gevormd wanneer mensen herhaaldelijk dezelfde acties uitvoeren. Een typische habituslus bestaat uit drie elementen:
- Cue - Trigger die actie initieert
- Routine - Als reactie op de cue voer je een actie uit
- Beloning - Een voordeel dat u krijgt door het voltooien van de routine, reden voor het voltooien van actie
Hoe sterker de beloning, hoe sterker de gewoonte wordt.
De melding van Facebook over een nieuwe vriendschapsverzoek is een goed voorbeeld van een habit-loop: een rode badge en een wit pictogram ( cue ) geven aan dat er een nieuwe aanvraag is, waardoor de gebruiker op het pictogram ( routine ) klikt om informatie over de persoon te zien ( beloning ). Na een tijdje klikken gebruikers automatisch op het pictogram wanneer ze de rode badge zien.
Handtekeningenmomenten
Als het goed wordt gedaan, kunnen microinteracties kenmerkende momenten zijn die de klantentrouw vergroten. Handtekeningenmomenten zijn microinteracties die zijn verheven om deel uit te maken van het merk. Denk aan Facebook's Like-knop. Het wordt een natuurlijk onderdeel van de Facebook-interface. Als Facebook deze functie plotseling verwijdert, zullen gebruikers het merken en denken dat de app kapot is.
Kansen identificeren
Een deel van de schoonheid van micro-interacties is dat ze op verschillende plaatsen kunnen worden ingevoegd, rond elke mogelijke actie. Micro-interacties zijn goed voor:
Wijzigingen markeren
Micro-interacties kunnen de aandacht van de gebruiker trekken . In veel gevallen worden animaties gebruikt om de aandacht van de gebruiker te vestigen op belangrijke details (dwz meldingen).
Afbeeldingen credits: Dribbble
Gebruikersinspanning minimaliseren
Autocomplete is een geweldig voorbeeld van micro-interactie. Typen heeft hoge interactiekosten; het is foutgevoelig en tijdrovend, zelfs met een volledig toetsenbord (en nog meer op een touchscreen). Autocomplete helpt de gebruiker om sneller en zonder typografische fouten het juiste antwoord te geven. Terwijl u elke letter typt, maakt het systeem zijn beste schatting van de woorden die u probeert te vinden.
Afbeeldingen credits: fancy.surge.sh
Feedback geven om te laten zien wat er is bereikt
Micro-interacties kunnen de acties die een gebruiker uitvoert, versterken. Door het principe " show, do not tell" te volgen , kunt u geanimeerde feedback gebruiken om te laten zien wat er is bereikt. In Stripe's voorbeeld , wanneer de gebruiker op "Betalen" klikt, verschijnt kort een spinner voordat de app de successtatus toont. Met de vinkje-animatie voelt de gebruiker zich gemakkelijk betaalbaar en stellen gebruikers dergelijke belangrijke details op prijs.
Geef statusinformatie
Het eerste usability-heuristische principe van Jakob Nielsen stelt: het systeem moet gebruikers altijd op de hoogte houden van wat er gaande is. Typindicator in de chat is een geweldig voorbeeld van microinteractie die statusinformatie biedt. Het verschijnt op het scherm van je buddy terwijl je een bericht aan het schrijven bent in de chat.
Afbeeldingen credits: Dribbble
Valideer gebruikersgegevens
Een van de belangrijkste en vaak over het hoofd geziene aspecten van formulierenontwerp is foutafhandeling . Het is echter menselijk om fouten te maken, en je vorm is waarschijnlijk niet vrijgesteld voor menselijke fouten. Gebruikers hebben een hekel aan wanneer ze het invullen van een formulier alleen doorlopen om achteraf te achterhalen dat ze een fout hebben gemaakt. Dit is waar validatie-microinteractie deel uitmaakt van een gebruikersvriendelijke vorm. Real-time inline-validatie informeert gebruikers onmiddellijk over de juistheid van de verstrekte gegevens. Met deze aanpak kunnen gebruikers de fouten die ze maken sneller corrigeren zonder te wachten tot ze op de verzendknop drukken om de fouten te zien. Als het goed is gedaan, kan het een dubbelzinnige interactie veranderen in een duidelijke.
Conclusie
Ontwerp zit in de details. Zelfs kleine details verdienen nauwlettend, omdat al deze kleine momenten het gevoel vormen, komen ze samen om een mooi holistisch product te vormen.
"Het verschil tussen producten waar we van houden en die we gewoon tolereren, zijn vaak de micro-interacties die we met ze hebben." - Dan Saffer
Als u om gebruikerservaring geeft, moet u om microinteracties geven. Omdat uw product slechts zo goed is als de minste micro-interactie die mensen ermee hebben.