Mikrointeraktioner: Designa med detaljer
"De bästa produkterna gör två saker bra: funktioner och detaljer. Funktioner är vad dra personer till din produkt; detaljer är vad håll dem där ", säger Dan Saffer. Betydelsen av detaljer kan inte överbelastas. Detaljer gör att användarna älskar eller hatar en app eller webbplats. Mikrointeraktioner är dessa detaljer. De kan lätt överskådas i det globala designsystemet, men de rymmer faktiskt hela upplevelsen tillsammans.
I den här artikeln ska jag förklara vad som är en mikrointeraktion, varför de är viktiga och ge några bra exempel.
Vad är en mikrointeraktion
Mikrointeraktioner är subtila moment centrerade kring att uppnå en enda uppgift. Nästan alla applikationer runtom oss fylls i med mikrointeraktioner.
Det mest kända exemplet på en mikrointeraktion har funnits länge innan datorer någonsin uppfunnits. På / av-omkopplaren är ofta den första mikrointeraktionen som människor stöter på med en produkt.
Några andra exempel på specifika mikrointeraktioner innefattar:
- Vibrationsmeddelandet tillsammans med tyst läge visas när du stänger av en iPhone för att stänga av.
- Uppgraderings-UI-mönstret. Genom att ansluta användarens önskan att hitta mer innehåll med uppfriskande verkan blir upplevelsen mer sömlös.
Bildkredit: Ramotion
- Den "som" -knappen på sociala nätverk som lyfter fram förändringar genom att använda interaktiva animeringar. Sådan återkoppling informerar användarna att de är i listan över dem som gillade posten.
Bildkredit: Dribbble
Varför de arbetar
Kort sagt förbättrar mikrointeraktioner UX genom att användargränssnittet blir mindre maskin och mer mänskligt. Många gånger tänker vi på utseende och känsla och hur det rör design. När vi tänker på mikrointeraktioner, gör de ganska mycket en balans hur användarna känner sig för produkten, tjänsten eller varumärket. Mikrointeraktioner finjusterar människa-centrerad design av:
- Ger omedelbar feedback - Visuell återkoppling vänder sig till användarens naturliga önskan om bekräftelse. Användaren vet omedelbart att deras handlingar accepterades, och de vill vara glada av en visuell belöning.
- Fungerar som facilitatorer för interaktion - Mikrointeraktioner har kraft att uppmuntra användare att faktiskt interagera. De kan styra användarna i hur man arbetar med appen.
- Bringa glädje - Mikrointeraktioner är den perfekta chansen för lite extra glädje i designen utan att det påverkar huvudupplevelsen.
Ytterligare fördelar
Eftersom mikrointeraktioner är korta i naturen måste de utformas för upprepad användning. Välutvecklade mikrointeraktioner kan skapa:
Habit loop
Mikrointeraktioner är nyckelkomponenterna hos vanliga slingor. Vanor bildas när människor utför upprepade gånger samma åtgärder. Typisk vana består av tre delar:
- Cue - Trigger som initierar åtgärd
- Rutin - Som svar på cue utför du en åtgärd
- Belöning - En fördel du får från att slutföra rutinen, anledning till att slutföra åtgärden
Ju starkare belöningen desto starkare blir vanan.
Facebook: s anmälan om ny vänförfrågan är ett bra exempel på vanligt slöde: Red badge och whitened icon ( cue ) visar att det finns en ny förfrågan, vilket gör att användaren klickar på ikonen ( rutin ) för att se information om personen ( belöning ). Efter ett tag klickar användarna automatiskt på ikonen när de ser det röda märket.
Signaturmoment
Om det går bra kan mikrointeraktioner vara signaturmoment som ökar kundlojaliteten. Signaturmoment är mikrointeraktioner som har förhöjts för att vara en del av varumärket. Tänk på Facebook-liknande-knappen. Det blir en naturlig del av Facebook-gränssnittet. Om Facebook plötsligt tar bort den här funktionen kommer användarna att märka det och kommer att tro att appen är trasig.
Identifiera möjligheter
En del av mikrointeraktionernas skönhet är att de kan sättas in på olika ställen, kring eventuella åtgärder. Mikrointeraktioner är bra för:
Markera ändringar
Mikrointeraktioner kan rikta användarens uppmärksamhet . I många fall används animeringar för att locka användarens uppmärksamhet på viktiga detaljer (dvs. anmälningar).
Bildkrediter: Dribbble
Minimera användaransträngningen
Autofyllning är ett bra exempel på mikrointeraktion. Typing har hög interaktions kostnad; Det är felaktigt och tidskrävande även med ett helt tangentbord (och ännu mer på en pekskärm). Autofyllning hjälper användaren att ge rätt svar snabbare och utan typografiska fel. När du skriver varje bokstav gör systemet sitt bästa gissningar om de ord du försöker hitta.
Ge feedback att visa vad som uppnåtts
Mikrointeraktioner kan stärka de åtgärder en användare utför. Genom att följa principen " visa, berätta inte" kan du använda animerad feedback för att visa vad som uppnåtts. I Stripes exempel , när användaren klickar på "Betala" visas en spinnare kort före appen visar framgångsstaten. Checkmark-animering gör att användaren känner att de enkelt uppskattar betalningen och användarna så viktiga detaljer.
Ge statusinformation
Jakob Nielsens första användbarhetsprinciper säger att systemet alltid ska hålla användarna informerade om vad som händer. Typindikatorn i chatt är ett bra exempel på mikrointeraktioner som ger statusinformation. Den visas på kompisens skärm medan du skriver ett meddelande i chatt.
Bildkrediter: Dribbble
Validera användardata
En av de viktigaste och ofta förbisedda aspekterna av formdesign är felhantering . Det är mänsklig natur att göra misstag, och din form är förmodligen inte befriad för mänskliga fel. Användare ogillar inte när de går igenom processen att bara fylla i ett formulär för att få reda på vid inlämning, att de har gjort ett fel. Det här är där validering mikrointeraktion spelar det är en del i en användarvänlig form. Inline validering i realtid informerar omedelbart användarna om korrektheten av den angivna data. Med detta tillvägagångssätt kan användarna rätta till de fel som de gör snabbare utan att behöva vänta tills de trycker på Skicka-knappen för att se felen. När det är gjort rätt kan det göra en tvetydig interaktion till en klar.
Slutsats
Design finns i detaljerna. Även mindre detaljer förtjänar noggrann uppmärksamhet, eftersom alla dessa små stunder utgör känslan, de kommer samman för att bilda en vacker holistisk produkt.
"Skillnaden mellan produkter vi älskar och de som vi bara tolererar är ofta de mikrointeraktioner vi har med dem." - Dan Saffer
Om du bryr dig om användarupplevelse, måste du bry dig om mikrointeraktioner. Eftersom din produkt bara är lika bra som den minsta mikrointeraktionen som människor har med det.