Mikrointeraktioner för user experience
ISOLERAD FUNKTIONALITET MED ETT SPECIFIKT MÅL
Oavsett om du hört talas om mikrointeraktioner eller inte har du garanterat stött på dem, och om du är utvecklare kanske du till och med implementerat dem utan att tänka på det. De kan beskrivas som små visuella indikationer som signalerar till användaren vad som händer när denne interagerar med olika delar av gränssnittet. Om dessa är implementerade på ett bra sätt kan de avsevärt förhöja användarupplevelsen och skapa mersmak för gränssnittet i fråga. Om de däremot är implementerade på ett dåligt sätt, eller inte alls, kan de upplevas som frustrerande och stöta bort användaren. Här delar vi med oss av fördelarna med mikrointeraktioner och hur ni kan arbeta med dem.
FÖRDELAR MED MIKROINTERAKTIONER
Det finns många bra anledningar att låta genomtänkta, finjusterade mikrointeraktioner spela en roll i att bygga en positiv relation mellan gränssnittet och användarna. Här är några av dem:
Användarupplevelse: Upplevs mer intuitivt och lättjobbat.
Ökad trovärdighet: Upplevs mer stabilt och pålitligt.
Responsivitet: Reagerar på användarens handlingar.
Engagemang: Ger mersmak och skapar en emotionell koppling för användaren.
Vägledning: Hjälper användaren att förstå att, och hur, hen kan interagera.
Det lilla extra: Kan vara det som särskiljer ditt projekt från konkurrenternas.
Rätt från början: Förebygger kostsamma initiativ att implementera i efterhand.
VIKTIGT ATT TÄNKA PÅ NÄR DET KOMMER TILL MIKROINTERAKTIONER
Med det sagt är mikrointeraktioner självklart inte lösningen på alla problem. Utöver potentiella fördelar finns det även en del risker med att blint fokusera på dem. Här är några saker som är bra att ha i åtanke:
1. Prioriteringar: Att uppnå perfektion i detaljerna kan ta både tid och resurser och det är viktigt att hitta en balans mellan olika prioriteringar. Perfekta mikrointeraktioner gör ingen nytta om inte basfunktionaliteten de ska förbättra är på plats. Därför bör de heller inte prioriteras över den. Men om vi tänker oss att vi har en tjänst där den huvudsakliga funktionaliteten redan är implementerad, och vi står i vägskälet mellan att lägga till ny funktionalitet eller få till detaljerna i huvudfunktionaliteten, kan arbetet med mikrointeraktioner ha ett stort värde.
2. Rätt person på rätt plats: Det är viktigt att känna sitt team och se till att alla spelar till sina styrkor. En detaljfokuserad utvecklare som har ett intresse för det visuella kommer förmodligen både göra ett bra jobb med att implementera mikrointeraktioner och tycka att det är roligt. Om ingen i teamet har ett sånt intresse finns det en risk att fokus på mikrointeraktioner varken motiverar utvecklarna eller genererar ett särskilt bra resultat.
3. Mätbarhet: Mikrointeraktioner har en begränsad påverkan på konvertering vilket gör arbetet svårt att motivera för någon som efterfrågar kvantitativ mätbarhet. Det är också viktigt att ha i åtanke att det inte är antalet mikrointeraktioner som avgör hur intuitivt gränssnitt blir. Ett gränssnitt där det kryllar av animationer, indikatorer och feedback i alla dess former kan lätt upplevas som rörigt eller överväldigande. En stor del av tiden läggs på att testa och omvärdera, vilket innebär ett högt pris per rad kod för den som väljer att se på det på det sättet.
4. Subjektivitet: Hur vi än vrider och vänder på det är användarupplevelse någonting subjektivt. Därför är det som utvecklare viktigt att känna sin kundbas och fatta informerade beslut baserade på deras beteendemönster och önskemål, snarare än att bara gå på sin egen känsla.
EXEMPEL: ETT KLASSISKT NYHETSBREVSFORMULÄR
Det bästa sättet att förklara skillnaden som mikrointeraktioner kan göra i ett användargränssnitt är att visa det. Exemplet som vi visar här är ett klassiskt nyhetsbrevsformulär byggt i React. Vi börjar med det i sin enklaste form med ett email-fält och en knapp för att skicka formuläret. Om email-fältet innehåller en giltig email-adress ser vi det som att prenumerationen lyckas, annars visas ett felmeddelande:
Så hur skulle vi kunna förbättra detta med hjälp av mikrointeraktioner? Låt oss kika på nästa exempel där vi har gjort några förändringar. För det första interagerar besökaren med skicka-knappen, den enklaste formen av mikrointeraktioner, genom att ge den en ljusare bakgrundsfärg när de för musen över den (hover) och en ännu ljusare när de klickar på den (active).
En annan sak som inte finns med i det första exemplet är någon form av feedback till användaren under tiden förfrågan skickas. Dessa enkla mikrointeraktioner har vi lagt till i det andra exemplet för att åtgärda det:
Vi har gjort både email-fältet och skicka-knappen otillgängliga (genom attributet disabled), för att göra det tydligt för användaren att de inte går att interagera med under tiden formuläret skickas.
Vi har bytt ut etiketten och lagt till en ”spinner” i skicka-knappen för att signalera till användaren att någonting händer.
Vi förstärker även det lyckade eller misslyckade svaret genom att uppdatera etiketten och låta ”spinnern” animera en ”checkmark” respektive ett kryss innan formuläret återgår till sitt ursprungliga läge.
NÄR DET KOMMER TILL KRITAN
Mikrointeraktioner kan förhöja användarupplevelsen. Framförallt i och med att ett gränssnitt som engagerar påverkar hur mycket användarna interagerar med det. Mikrointeraktioner kan både vägleda användaren och göra att det känns mer intuitivt och pålitligt. För ett team som har detaljfokuset som en del av sitt helhetstänk och process, behöver arbetet inte vara särskilt tidskrävande eller kostsamt. Och när en kund står i valet och kvalet mellan ditt projekt och konkurrenternas kan de väl implementerade mikrointeraktionerna bli avgörande.
VAD TYCKER DU?
Har du erfarenheter av att jobba med mikrointeraktioner och försöka hitta en balans mellan dem och andra prioriteringar? Har du tankar om hur en hade kunnat förbättra det här nyhetsbrevsformuläret ytterligare med hjälp av mikrointeraktioner? Dela gärna med dig av dina tankar. Om du är intresserad av att veta mer om hur vi jobbar är du varmt välkommen att kontakta oss på Cypoint Incode.
