Mikroanimationer – Små rörelser för ökad klarhet

Vare sig det är glidande, studsande, snurrande, hoppande, scrollande, expanderade, förminskande, skakande, bromsande eller intonande så kan mikroanimationer ha en stor inverkan på hur effektivt en webbplats eller app används och hur den upplevs.

Mikroanimationer i användargränssnitt är exempelvis menyn som glider in på mobilskärmen, knappen som tonas bort när du trycker på den eller kommentarsfältet som expanderar när du markerar det. En mikroanimation innebär förändring mellan två stadier med en tydlig början, mitt och slut efter en interaktion.

Varför är mikroanimationer viktiga?

Ett bra gränssnitt är ett där man aldrig känner sig förvirrad. Omedelbara övergångar eller rutor som ‘poppar’ upp kan förvirra då ingenting i vår verklighet utanför skärmarna fungerar på detta vis. Allting har en början, mitt och ett slut.

Mobiltelefonen och dess lilla skärmyta innebär en speciell utmaning. Eftersom så pass lite innehåll kan presenteras åt gången så delas det väldigt ofta upp i olika vyer som användaren kan byta mellan. Här kan mikroanimationer användas för att hjälpa användaren att skapa en förståelse (en s.k. mental modell) över systemet och därmed lättare förstå bytet mellan olika vyer.

Vi människor tappar lätt fokus från det vi håller på med – eller sållar bort sådant vi inte tror är viktigt – och därmed riskerar vi att missa det vi förväntas se. En av anledningarna till det kallas för ”change blindness” och det händer när vi har svårigheter att lägga märke till förändringar mellan två olika vyer, exempelvis ett felmeddelande. Detta beror främst på hastighet: om en förändring sker för snabbt så registrerar vi den inte.

I en sådan situation är en mikroanimation perfekt. Dels då förändringen sker gradvis under ett längre tidsspann, men också för att människor instinktivt lättare lägger märke till en rörelse än annat visuella stimuli. Med detta kan vi dra uppmärksamheten till vad som är viktigt: informera användaren vid ett inmatningsfel.

Mikroanimationer behöver inte bara vara en visuell lyx på en webbplats eller app utan kan också användas för att minska förvirring i ett gränssnitt. Dock, som alla verktyg, så löser inte mikroanimationer alla svårigheter i en design, utan fungerar bäst i harmoni med andra lösningar för att bidra till en produkt som är tydlig, effektiv och behaglig att använda.

/Sam Mikaelsson, Interaktionsdesigner på Cloud Nine

Läs mer här: https://cloudnine.se/mikroanimationer-sma-rorelser-for-okad-klarhet/