När du stannar upp och tänker på det är våra liv bara en serie av interaktioner – både mikro och makro.
Att fråga din partner vad de vill äta till frukost är en interaktion mellan två personer, men när du lagar frukosten har du också mikrointeraktioner med alla apparater runt omkring dig:
– Brödrosten dyker upp för att tala om att din toast är klar
– Vattenkokaren visslar för att du ska veta att den är kokt
– Äggtimern pingar för att informera dig om att dina ägg är tillagade till perfektion
Dessa interaktioner är så små att vi går igenom våra liv utan att någonsin tänka på dem. Det är först när saker och ting inte går som planerat som vi inser deras betydelse. Till exempel om brödrosten dyker upp för sent och ger dig två skivor bränt bröd.
Så...varför berättar vi allt detta för dig?
Tja, mikrointeraktioner finns också i onlinevärlden. De gör din webbplats mer välkomnande och engagerande, och de ger kunderna ett inslag av feedback eller tillfredsställelse från att slutföra en uppgift – hur liten den än är.
När denna artikel skrivs finns det 1,9 miljarder webbplatser online – och antalet ökar för varje sekund som går. Det är mycket av konkurrens. Så du behöver din webbplats för att vara den bästa den kan vara, och 2022 innebär det mikrointeraktioner!
I den här artikeln kommer vi att ta en titt på allt du behöver veta om mikrointeraktioner, från vanliga användningsområden till våra bästa tips...
Vad är en mikrointeraktion?
Enligt Dan Saffer, författare till den högt respekterade boken:Microinteractions:Designing with Details, är en mikrointeraktion:
“Ett inneslutet produktögonblick som kretsar kring ett enda användningsfall eller uppgift. ”
Han använder exemplen på att "gilla ett inlägg" eller "sätta ett larm" som vanliga mikrointeraktioner som de flesta av oss gör varje dag.
Saffer förklarar också i sin bok att mikrointeraktioner kan delas upp i en struktur i fyra delar:
Det första steget, eller "trigger", är det som initierar mikrointeraktionen. Om du till exempel vill tvätta händerna med en sensorkran så viftar du med handen framför sensorn.
Det andra steget, eller "regler", avgör vad som ska hända. Genom att hålla sig till kranexemplet känner sensorn igen dina händer.
Det tredje steget, eller "feedback" är verifieringen av mikrointeraktionen. Det är då kranen börjar rinna, så att du kan tvätta händerna.
Det sista steget är "loopar och lägen", och detta bestämmer metareglerna för mikrointeraktionen. Om mikrointeraktionen behöver upprepas, kommer den att loopa – som ett kylskåpslarm som inte slutar pipa förrän du stänger dörren. Lägen styr åtgärder som inte kräver upprepning.
Naturligtvis hänvisar allt detta till mikrointeraktioner som utlöses av en person. Men inte alla mikrointeraktioner sker på detta sätt. Vissa är systeminitierade – med andra ord triggade av mjukvara.
Ett välkänt exempel är när du anger fel lösenord och ser inloggningsrutan göra en liten blandning från sida till sida:
Eller när du scrollar ner på en webbplats och ser en cool animation som fångar din uppmärksamhet:
När någon landar på Wyzowls hemsida, har vi en fin liten mikrointeraktion som vinkar mot vår nya besökare och sedan ger dem en titt på vad vi kan göra med animation.
Mikrointeraktioner – vanliga användningsområden
Nu när du vet vad mikrointeraktioner är, låt oss ta en titt på några populära användningsområden för dem i våra vardagliga liv...
1. Rulla
Visste du att du kan utlösa en mikrointeraktion bara genom att rulla ner en webbsida?
Scrollning är en av de vanligaste mikrointeraktionerna på nätet, och något vi ofta tar för givet. Interaktionen uppstår för att du som användare byter plats på sidan och får visuell feedback på det – med andra ord, du ser det du vill se.
Vissa webbsidor berättar till och med hur långt du är, eller hur mycket av sidan som är kvar innan du kommer till botten, tack vare en rullningslist på höger sida, som exemplet ovan från HubSpot. Detta är också en typ av mikrointeraktion.
2. Laddar
Laddarskärmar är en välbekant syn för alla som någonsin har spelat tv-spel. Med åren har de blivit mer och mer imponerande, ta Skyrims laddningsskärm som ett exempel:
Laddningsskärmen har olika 3D-modeller som användare kan interagera med medan de väntar på att spela spelet.
Att ladda är ett nödvändigt ont, men mikrointeraktioner kan göra processen mer engagerande. Om du har en funktion på din webbplats som kräver lite laddningstid, överväg att implementera en mikrointeraktion för att underhålla användare under tiden. Här är ett exempel från Namelix:
3. Laddar ned
På samma sätt som att ladda, ned laddning är en annan åtgärd som tar tid – och tack vare denna värld av "omedelbar tillfredsställelse" som vi befinner oss i kan användare vara otåliga.
Faktum är att en studie av 2 000 britter fann att den genomsnittliga personen blir frustrerad på bara 16 sekunder när de väntar på att något ska laddas.
En mikrointeraktion kan hjälpa till att underhålla användare eller hålla deras uppmärksamhet medan de väntar på att de laddas ner.
4. Uppmaningar
Din uppmaning till handling är så viktig. Det är en sak du vill att dina kunder ska klicka, så du bör se till att upplevelsen är lockande för dem. Du behöver inte uppfinna hjulet på nytt här (eller med några mikrointeraktioner ), kan bara en subtil animation vara tillräckligt för att uppmuntra användare att klicka:
Det här exemplet visar månens olika cykler när de håller muspekaren över knappen, vilket fångar deras uppmärksamhet ytterligare och förhoppningsvis lockar dem att klicka.
5. Aviseringar
En studie av New York Post visade att människor kollar sina telefoner var 12:e minut , det är 80 gånger om dagen! Och vad kollar de efter?
Aviseringar!
Mikrointeraktioner kan göra aviseringar mer spännande och även mer märkbara för användare. Lite rörelse (som ses ovan) är mycket mer iögonfallande än en stillbild.
6. Svep
Pekskärmar är en så stor del av våra liv att svepning nästan har blivit en självklarhet. Mikrointeraktioner hjälper till att ge användarna en bekräftelse på deras svep:
Detta roliga koncept för en mikrointeraktion tillåter användare att ta bort objekt genom att svepa. Det är viktigt att användare aldrig av misstag raderar något, och en mikrointeraktion kan se till att detta inte händer genom att kräva fokus och uppmärksamhet från användaren.
7. Strömställare
Att växla från en vy till en annan, eller mellan mappar, är en annan mikrointeraktion som människor använder dagligen. Här är ett exempel:
Det här är ett riktigt coolt och fräscht sätt att visa en switch, vilket är bra för kundernas lycka. Men det är också väldigt funktionellt, vilket är superviktigt när det kommer till mikrointeraktioner.
8. Håller muspekaren över något
Du kanske har märkt att när du håller muspekaren över gilla-knappen på Facebook dyker olika animerade uttryckssymboler upp som du kan välja mellan:
Sociala nätverk handlar om användarengagemang, och mikrointeraktioner som denna uppmuntrar användare att engagera sig i inlägg på olika sätt.
9. Markering
En framhävande mikrointeraktion är mycket lik att sväva över något. Det låter helt enkelt användaren veta att det finns något där som förtjänar deras uppmärksamhet – oavsett om det är en klickbar ikon eller bara en rolig animation:
Det här konceptet visar olika sätt som ikoner kan animeras när de är markerade, men möjligheterna med denna är praktiskt taget oändliga.
10. När du ansluter enheter
Vissa mikrointeraktioner är "trevliga att ha" och andra är mycket välbehövliga. När du ansluter enheter behöver du någon form av feedback som låter dig veta att anslutningen fungerar. En mikrointeraktion som denna är förmodligen bekant för dig:
Det är ett exempel på hur enheter ser ut när de söker efter en annan enhet att ansluta till via bluetooth. Detta kan ta lite tid så mikrointeraktioner, förutom att de är funktionella, ger också lite mild underhållning för användare för att förhindra att de blir uttråkade eller frustrerade medan de väntar.
Exempel på effektiva mikrointeraktioner
Så det verkar som om mikrointeraktioner finns i stort sett överallt! Låt oss ta en titt på några särskilt effektiva exempel...
1. Social delning
Du kanske inte inser det, men när vi delar saker på sociala medier väntar vi alltid på ett "kvitto" - ett bevis på att inlägget faktiskt har gått live. Här är ett exempel:
Detta har borrats in i oss eftersom det är så de flesta sociala nätverk fungerar, men det visar att subtila mikrointeraktioner finns överallt – och för det mesta märker vi dem inte ens!
2. Skriver...
En annan vanlig mikrointeraktion som vi har vant oss vid att se är funktionen för att "skriva" som nu är en del av de flesta meddelandeappar. Här är ett exempel:
Denna lilla interaktion håller användarna engagerade, med fönstret öppet, eftersom de vet att ett svar är nära förestående. Det ger också användare en indikation om när de ska skriva och när de ska vänta på att den andra personen ska skriva klart sitt meddelande.
3. Laddar ned
Vi har redan pratat om nedladdning ovan, men naturligtvis är vissa mikrointeraktioner bättre än andra. Här är ett bra exempel på en nedladdningsmikrointeraktion:
Även om det kanske inte verkar så händer det mycket här. Det finns en disk och även en grön bar som färdas över, som symboliserar nedladdningens framsteg. När mikrointeraktionen är klar växlar nedladdningsknappen till "Klar" och blir grön.
Det här är bara ett exempel på hur man skapar en nedladdningsmikrointeraktion – möjligheterna är praktiskt taget oändliga!
4. Dra för att uppdatera
"Pull to refresh" är en vanlig interaktion på de flesta smarta enheter, men det enda sättet att veta att sidan faktiskt har uppdaterats är om det finns någon form av mikrointeraktion för att visa dig att programvaran förstod din begäran.
Det här designkonceptet för en uppfriskande animation är bra eftersom det är rent och tydligt, men också snyggt märkt. Att presentera ett varumärke konsekvent på alla plattformar kan öka intäkterna med upp till 23 % .
5. Svep
En annan interaktion som vi har vant oss vid som mjukvaruanvändare är "swipen". Som nämnts ovan är svepning nu nästan en självklarhet för människor som använder smarta enheter. Här är ett exempel:
Det här exemplet visar ett lekfullt sätt att ta bort och arkivera e-postmeddelanden med ett enkelt svep. Färgerna rött och grönt gör det enkelt för användare att skilja mellan varje alternativ.
Skapa mikrointeraktioner – 5 bästa tips
Vi har tittat på MÅNGA mikrointeraktioner hittills, och om du inte har några på din webbplats så kanske du känner lite FOMO (rädsla för att missa ). Låt oss ändra på det!
Här är våra 5 bästa tips för att skapa mikrointeraktioner...
1. Gör dem funktionella
Först och främst, mikrointeraktioner måste ha ett syfte. När allt kommer omkring är de tänkta att uppmuntra användare att interagera med en viss del av din webbplats – så gör dem funktionella.
2. Håll det enkelt
De kallas mikro interaktioner av en anledning. De ska vara korta och söta. Mikrointeraktioner är till för att förbättra ditt användargränssnitt och få allt att se och kännas renare ut, så det är viktigt att hålla dem enkla.
3. Följ strukturen
När det kommer till mikrointeraktioner kan Dan Saffer sin sak. Så se till att dina mikrointeraktioner följer hans 4-delade struktur. Kom ihåg:Trigger> Regler> Feedback> Slingor och lägen .
4. Tänk på livslängden
En av de viktigaste sakerna som vi har nämnt gång på gång är att mikrointeraktioner ska kännas så naturliga att användare inte ens lägger märke till dem för det mesta. Och om de gör det, borde det bero på att de har haft en trevlig upplevelse, inte för att de är trötta på att se en distraherande eller alltför utarbetad animation.
Så, när du skapar dina mikrointeraktioner, tänk på hur de kommer att hålla över tiden.
5. Experimentera och testa
Som med allt du släpper ut till allmänheten måste mikrointeraktioner testas och förbättras. Se till att du samlar in massor av användarfeedback från dina mikrointeraktioner och experimentera med olika sätt att göra saker på.
Sluta tankar
År 2022 är det säkert att förutsäga att användare kommer att vilja ha mer från deras interaktioner. Och ett sätt att säkerställa att du uppfyller det behovet är med subtila, men användbara, mikrointeraktioner.
Vi hoppas att den här artikeln har varit till hjälp för att lära dig allt om hur de fungerar och att du känner dig inspirerad att skapa din egen. Om du är redo att komma igång skapar vi faktiskt mikrointeraktioner som en tjänst – som täcker allt från idé till design och animering.