Animation – campus – Interface Patterns – Designmönster för användargränssnitt

Vad är det?

Ofta ses animation som enbart något dekorativt, som en fin detalj att implementera i sin gränssnittsdesign, men det är att underskatta metoden, för det kan vara så mycket mer när det används med syftet att höja användarupplevelsen. De bästa animationerna har syfte och finess och har placerats i gränssnittet av en användarcentrerad anledning. Det är ett verktyg som man använder sig av för att förhindra abrupta ändringar i användargränssnitt, locka användarens uppmärksamhet och för att indikera korrelation mellan objekt eller händelser. Detta gör att användargränssnitt blir lättare att förstå och det blir mer likt verkliga livet när saker inte bara dyker upp ur tomma intet, samt att man får en känsla att det flyter på.

Animation är en metod där man kombinerar bilder med varandra för att få dem att se ut som att de rör sig på ett mjukt sätt. Alla typer av animationer är helt enkelt bilder som är ihopsatta för att “lura” ögat. Beroende på hur många bilder per sekund blir de olika mjuka, men för att en människa ska uppfatta animationen som flytande krävs åtminstone 24 bilder per sekund.

När används det?

När en användare använder sig utav en virtuell miljö som till exempel ett textdokument, en bild eller olika typer av kartor så bör användaren kunna scrolla i den här miljön, rotera den eller zooma in. I informationsgrafik som i till exempel kartor är detta väldigt användbart för användaren för att kunna zooma in eller titta runt på olika platser på denna karta. Animation kan användas när en användare öppnar eller stänger ett program, även när man går från en sida till en annan, till exempel på en webbplats.

Ett annat bra sätt att använda animationer är att använda det för att få fram ett viktigt budskap till användaren. Alltså att överanvända animationer kan skapa förvirring och därför kan det vara bra att spara detta till att få användarens uppmärksamhet när det behövs som mest.

Rikta uppmärksamhet

När något rör på sig, särskilt om något gör en stor rörelse, är det väldigt svårt att inte titta på det. Man kan fånga användarens uppmärksamhet på flera sätt, både på bra och dåliga. Ett exempel på bra rörelser för att rikta uppmärksamhet är kodningsverktyget CodePen, som när man inte sparat sin kod, skakar på spara-ikonen för att påminna användaren om att inte glömma bort att spara sitt arbete. Ett exempel som är relativt är animerade reklambanners som rör på sig och blinkar, vilka fångar uppmärksamhet och är svåra att missa. Kanske bra för företaget som står för reklamen, men kan uppfattas störande för användaren.

Feedback

Feedback används för att indikera att användarens handling har utlöst ett gensvar, som att knappar ser intryckt ut när man klickar på den eller att en textruta skakar när fältet är inkorrekt ifyllt.

Show/Hide

Med animation kan man hjälpa användaren genom att berätta för dem var något kommer ifrån samt vart det tar vägen. Innehållet i en shoppingvagn på en näthandel kan glida ut från sidan av skärmen när man klickar på vagnen, och glida tillbaka om man stänger ner det fönstret. En meny kan visas om man håller muspekaren över den, och försvinna om man tar bort muspekaren. Rörelsen hjälper till att skapa en mental bild av var föremål är någonstans, även när de inte visas i bild.

En extra fördel med detta är att det många gånger kan spara på användarens kognitiva belastning, alltså att man inte behöver processa för många saker samtidigt. När en kund shoppar på din näthandel kanske den inte behöver se hela innehållet av sin shoppingvagn hela tiden – för att få användaren att behålla sitt fokus på att hitta produkter att köpa, kan innehållet av shoppingvagnen visas om så användaren önskar det, exempelvis genom att klicka på vagnen så att innehållet “glider” fram.

Hur används det?

Saker att tänka på:

Om användaren måste vänta på att animationen ska spelas ut innan denne kan fortsätta använda applikationen så bör man korta ner denna eller ta bort den helt och hållet.
En animering skall vara underhållande, estetiskt väl utbyggd och så vidare, så vi som användare kan resonera i designen. MEN det är viktigt att det inte är för mycket saker som rör på sig, för det kan skapa förvirring och kognitiv överbelastning.
Det är viktigt att en animering är ett komplement till gränssnittet så att det blir lättare för användaren att förstå hur hen ska gå tillväga för att uppnå en viss uppgift.
När man animerar någonting är det också bra att få objektet som rör på sig att efterlikna någonting som rör på sig i verkligheten, till exempel att objektet saktar ner innan det stannar helt hellre än att det rör på sig i samma hastighet tills den stannar tvärt.
Animerar man en grupp objekt i ett gränssnitt som hör ihop, så är det viktigt att man inte har ett för långt intervall mellan animationerna då detta skapar en känsla att dessa inte rör sig som en enhet.
Något annat som är viktigt att tänka på när man skapar en animation är att man försäkrar sig att animationen fungerar på flera olika plattformar. Bara för en animation fungerar bra på en dator så är det inte säkert att den fungerar bra på en mobiltelefon.
Den optimala hastigheten för animationer ligger på mellan 200 och 500ms. Hastigheten behöver anpassas beroende på hur stort objektet är och hur lång sträcka den ska färdas. Mindre skärmar skapar kortare sträckor vilket gör att de behöver en längre animations-tid.

Egna Exempel

Vi har skapat en prototyp med några egna exempel med typer av animationer man kan skapa i Axure, denna ser ni här: https://dnspql.axshare.com

Hur man “loopar” bilder med animationseffekten “fade”