Microinteraction In UX: The Secret Weapon To An Everlasting User Engagement and Retention

När du kör en video på YouTube, vad ser du då? Innan videon börjar spelas tar det en viss tid att streama innehållet. Tills dess får du en buffringsikon i rörelse som visas på skärmen. Detta är ett perfekt exempel på mikrointeraktion.

I grund och botten kan vilken visuell representation som helst av en viss process kallas en MIcrointeraction. De fungerar som byggstenar som så småningom förbättrar en UX. Om UX är en cell är mikrointeraktion DNA:t.

Låt oss dela upp det:

Mikrointeraktion – vad är det exakt?

Som en integrerad del av UX är mikrointeraktion en process som förmedlar en funktion som utförs av en app/mjukvara enligt instruktionerna från användaren. Exempel inkluderar: laddning, buffring, etc.

Det förbättrar också de visuella elementen som är förknippade med små funktioner. Du vet hur Gilla-knappen lyser innan du klickar på den. Och hur den reagerar när du äntligen klickar på den. Samma kan tillämpas på kommentarsektionen, dela-knappar, prenumerera-knappar, etc.

Om du vill ha ett mer fysiskt exempel, så finns det inget bättre exempel än en hiss. Vad ser du? En serie knappar? Ja. Men vad händer när du trycker på en? Det är rätt! Det lyser. Detta är mikrointeraktion.

Du kanske inte inser, men denna enkla glödande handling skapar en trevlig upplevelse för hissanvändaren. Tänk om det inte hade glödt. Inte så visuellt tillfredsställande är det inte? Dessutom skulle du inte veta om processen utförs av hissen eller inte.

Samma sak kan göras med appen/webbgränssnittet för att skapa en tillfredsställande UX.

Några illustrationer för att rensa bort dina tvivel

Exempel har alltid visat sig vara mer givande när man definierar ett begrepp. För en korrekt förståelse av vad mikrointeraktion egentligen är, ta en titt på dessa instanser:

• När du ska trycka på Gilla lyser knappen blått. När du äntligen trycker på knappen trycks den lätt ned, eller hur? Detta fungerar som en indikation på att en åtgärd har vidtagits.
• När du besöker en webbplats ser du Om oss, tjänster, blogg, kontakta oss, etc. När du för markören över en av dem får den färg (vanligtvis i linje med webbplatsens för att undvika skarpa kontraster). Om du flyttar markören åt vänster och höger, markeras de enskilda avsnitten separat. Även detta är ett exempel på mikrointeraktion.
• När du slår på eller av en funktion kommer du att se hur knappen flyttas fram och tillbaka mellan de två alternativen. När du klickar AV, flyttas den lilla stapeln (vit/svart/etc) över till AV. Samma sak med ON-delen. Detta är funktionalitetsbaserad mikrointeraktion.

• En annan sak som du kommer att märka nuförtiden, särskilt på nyhetssajter som TechCrunch, är att när du scrollar upp och ner kommer du att se en viss cirkulär ikon som följer din rörelse när du navigerar.

  Den har en viss rörelsefärg längs kanten som indikerar hur mycket av sidan du har täckt. Anta att sidan är ganska lång, detta hjälper läsaren att veta sin nuvarande position på sidan. Den kommer också med en korsknapp inbäddad i den, så att användaren kan lämna artikeln utan att lämna webbplatsen.

  Artikeln skulle stängas, vilket lämnar användaren på hemsidan där han/hon kan navigera till något annat ämne som de anser vara intressant.

Så du ser hur mikrointeraktioner hjälper till att skapa små steg som så småningom leder till förbättrad UX. Det går inte att förneka att informationsarkitektur utgör det grundläggande ramverket för ett kraftfullt UX, men samtidigt förbättrar eller katalyserar mikrointeraktioner processen för UX-förbättring.

Om informationsarkitektur är skelettet är mikrointeraktioner de nerver som utlöser funktioner och svarar på användarna därefter.

Så varför är det viktigt för UX-design?

Som nämnts ovan finns det i grunden två element som leder till ett bra UX, nämligen: Information Architecture och MIcrointeraction Elements. Medan människor erkänner vikten av IA, förblir mikrointeraktion som en process ofta obemärkt. Men vad vi inte inser är att utan det förblir det förra ofullständigt. Se hur processen med mikrointeraktion kommer till användning:

• Du skapar arkitekturen och det grundläggande arbetsflödet med hjälp av IA, men det är till ingen nytta om användaren inte fastnar för de små detaljerna som är förknippade med varje steg. Mikrointeraktion hjälper dig att fylla i dessa små detaljer.
• Kunder älskar att utöva kontroll över gränssnittet de använder. Medan IA hjälper till med smidig navigering och processflöde, ger MI dem en känsla av kontroll genom att visuellt skildra de individuella processerna som genomförs.
• Inte bara det, MI lyfter individuellt fram varje avsnitt som en användare närmar sig, vilket ger en sorts visuell tillfredsställelse på en mycket visceral nivå.
• Detta ökar i sin tur värdet av just den sektionen i användarens tanketrappa, samtidigt som det höjer intressenivån från användarens sida, vilket får dem att klicka på den med tillförsikt och tillfredsställelse.

Så du förstår, mikrointeraktion hjälper till att förstärka varumärkesvärdet för en app/webbplats. Genom att samarbeta med IA hjälper det att skapa ett helhetspaket för att tillhandahålla rätt UX.

Vilka är de fyra grundläggande stegen som bäst definierar mikrointeraktion?

Du kan helt enkelt inte skriva om mikrointeraktion utan att komma över dessa fyra steg myntade av mikrointeraktionsgurun Dan Saffer. I sin bok "MIcrointeraction" klassificerar Saffer hela processen i följande steg:

• Triggerelement: Alla åtgärder som utlöser en mikrointeraktionsprocess räknas som ett triggerelement. Till exempel att klicka på knappen, vilket utlöser en process.
• Regelelement: Detta bestämmer själva funktionen. Du trycker till exempel på en knapp och den navigerar dig till respektive sida.
• Feedbackelement: Detta informerar användaren om att en process har genomförts. Du klickar till exempel på något och det blir tryckt eller markerat.
• Loops Element: Användaren som påverkas av en mikrointeraktion tenderar att ägna sig åt upprepad användning av den specifika funktionen. Mikrointeraktioner implementeras på ett sätt så att användarpsyket fastnar för det. Det uppmanar användaren att komma tillbaka oftare. Detta är Loop Element, där en användare hamnar i en beteendeloop av repetitiv interaktion.

Så hur bygger du en bra mikrointeraktionsmiljö för ditt gränssnitt?

Anta att du planerar att bygga en app. Eller så är du redan i utvecklingsfasen. Men du har ännu ingen plan för att inkludera mikrointeraktion. Du läser den här artikeln och blir villig att införliva detsamma. Men hur går man tillväga? Med tanke på att du är i IA-fasen kan du göra det här:

• När du utvecklar en viss del av gränssnittet, till exempel avsnittet Om oss, be din utvecklare att komma med en kod (programmering) som kan känna igen markörens plats på nämnda element och automatiskt markera den för en bättre visuell tilltalande. När du klickar på den ska den också se ut som om den trycks lätt.

• Efter det kommer navigeringsdelen. När användaren klickar på en sektion programmeras den för att leda honom/henne till nästa inställning. Vad du kan göra är att införa en buffringsliknande funktion som visar den pågående processen.

  Detta hjälper dig att hålla dina användare engagerade, om de har långsamma internetanslutningar eller om sidans inläsning kanske tar längre tid än förväntat. Föreställ dig vad som skulle hända om du inte använder detta.

  Användaren skulle helt enkelt känna att din app/webbsida inte fungerar. De skulle aldrig få veta att problemet uppstår från webbläsarens slut. Som ett resultat kommer du att förlora en kund. Använd istället den här tekniken för att hålla dem engagerade i liknande situationer.

• En sak som de flesta interaktiva appar har gemensamt nuförtiden är sektionen gilla-kommentar-dela. Anta att appen du utvecklar hjälper användaren att bläddra igenom olika reseplatser över hela världen och välja sina favoriter.

  Använd mikrointeraktionsmarkeringstekniken på liknande-knapparna, så att den skapar ett bra UX när någon för sin markör över den. Som nämnts tidigare bör den visa en tryckande effekt när du klickar.

  När du kommer till delningsknapparna kan du skapa en sorts rullgardinsmeny som består av olika delningsalternativ som Facebook, Twitter, WhatsApp, etc. så att när de för markören över det här avsnittet, markeras den med en specifik färg och visar rullgardinsmenyn samtidigt .

  [Obs: färgerna som används i alla tre avsnitten bör vara lika för att undvika för mycket visuell kontrast]

• Du kan också använda buffringsmodellen för olika typer av webbplatser/applikationer. Byt bara ut ikonen för buffertrörelse med de som passar respektive plattform. Om du till exempel bygger en betalningsapp kan du visa en myntstapel i linjär rörelse eller sedlar som blandas när betalningsprocessen genomförs.

  Eller ta till exempel en e-handelsapp, där användare hela tiden lägger till olika varor i sin personliga kundvagn. Du kan använda en rörelsevagnsikon för att informera användaren om att det valda objektet läggs till osv.

Så du ser, det finns gott om utrymmen där du kan använda mikrointeraktioner. Strategisk användning kan framgångsrikt engagera en användare på lång sikt och därmed få mer och mer varumärkesvärde.

Vilken effekt har mikrointeraktioner på användarens sinne och hur reagerar de?

Hittills har vi tagit upp vad de olika typerna av mikrointeraktioner är och hur du som entreprenör kan införliva det. Men det är bara en sida av myntet. Den andra sidan är kunden. Att förstå hur de reagerar på olika typer av mikrointeraktioner kan hjälpa dig att styra processen mer effektivt. Se vilken effekt mikrointeraktioner har på det undermedvetna:

• När en användare kommer i kontakt med en viss mikrointeraktion utlöser det en subtil signal i deras nervsystem som gör att de vill använda den mer. Detta resulterar i en Habit Loop.
• Som en konsekvens kommer användaren hela tiden tillbaka gång på gång för att interagera med produkten. Så du förstår, det behåller en användare/kund på obestämd tid.
• Visuals är något som används av varje marknadsföringsstrateg, eftersom de är medvetna om de enorma fördelarna som kommer med dem. Och mikrointeraktion som ett visuellt element kan manipulera en användares psyke för att skapa konverteringar.
• Feedbackelementet i mikrointeraktion genererar en känsla av komfort i användarens sinne, och vi vet alla hur kunder har exklusiv kontroll när de navigerar genom sin önskade produkt.
• Själva rörelserna som erbjuds av mikrointeraktioner genererar en bekväm känsla som ansluter till en användare på en visceral nivå. Detta resulterar i kundtilltal och en snabb ökning av användarbasen.

Slutgiltiga tankar

Vid det här laget måste du ha insett att mikrointeraktionens kärnfunktion är att väcka IA till liv. Det förbättrar den dynamiska karaktären hos en webbplats/applikation. Medan människor tenderar att förbise betydelsen av mikrointeraktion, känner de dock kritan när dessa funktioner inte fungerar.

Det är viktigt att du tar itu med de små undermedvetna förändringarna som är resultatet av denna process, oavsett hur små eller till synes obetydliga de verkar. Kom ihåg att dessa små effekter så småningom leder till framgångsrik UX. Med Lao Tzus ord: "Resan på tusen miles börjar med ett enda steg."