Motion

UI-animationer ger mervärde

maj 18, 2020
Av Emil Seres

Vi spenderar mycket tid på att justera och finslipa vår digitala produkt, där animationer oftast blir en omständig eftertanke när designen väl ska appliceras – om den ens kommer till. För att få en digital produkt som levererar på helheten anser vi att UI-animationer är ett måste. Men är det värt att lägga pengar på mervärdet det skapar? Let’s find out.

UI-animering – what’s the fuzz about?

Först och främst bör vi klargöra vad UI-animering är. UI, User Interface, är det visuella du ser när du exempelvis besöker en hemsida eller ett affärssystem. Det som får dig att känna något.

Animering har de flesta redan koll på idag, men visste du att en animation måste vara mer än 24 bilder per sekund för att inte upplevas som hackig av det mänskliga ögat? Eller att karaktären Sully i Monsters Inc hade 2,320,413 animerade hårstrån? Idag ska vi kika på en annan sorts animering – nämligen UI-animering. Där blir andra frågor relevanta, som ”hur bör en hover-effekt se ut?” ”Hur bör en loader se ut?” Eller ”vad gör vi när vårt formulär tar 5 sekunder att skicka in?”

Att optimera en redan funktionell design

Vi möts dagligen av olika UI-animationer och micro-interaktioner i vårt digitala liv. Detta har gjort att allt fler designers har fått upp ögonen för hur viktig UI-animering kan vara för användarupplevelsen. Det är inte längre bara något visuellt; det har kommit att bli en central del i vår digitala interaktion.

Bra UI-design måste vara interaktiv för att vara begriplig. Den måste kunna ge feedback till användaren, som annars lätt kan bli förvirrad i den digitala djungeln vi numera lever i. Ett tydligt exempel på detta är när användaren fyller i ett formulär och anger felaktig information. Som besökare har du i dagsläget kommit att förvänta dig att fältet på något sätt blir rödmarkerat – oftast direkt på input.

Finns det egentligen några nackdelar?

Det finns en väldigt tydlig nackdel, och det är såklart den premie som jobbet medför. För 10 år sedan var det en omständig och tidskrävande process att skapa animeringar, men med dagens snabba prototyp-verktyg som Adobe XD, Framer eller InVision Studio går det betydligt snabbare att visa önskat resultat.

UI-animationer kan skapa ett irritationsmoment för användaren om det inte genomförs med känsla och smak. Rörelser och den visuella transformationen får inte vara inkonsekvent. Det kan också bli för mycket av det goda, och det resulterar i en uppgiven och frustrerad användare.

Samtliga av ovanstående resonemang går dock att åtgärda om UI-animering har varit en del av tankeprocessen från projektets start.

Slutsats

Det är inte alltid lätt för en beslutsfattare eller produktägare att riktigt förstå fördelarna UI-animationer ger när vi tar fram den kompletta designen för ett projekt. Därför måste vi som kreatörer förmedla vikten och den positiva påverkan det kan ha på interaktionen och helhetsuppfattningen av webbplatsen.

Det finns ett stort mervärde i att lägga fokus på detaljer – och varför skulle då animering vara ett undantag? Inom de kommande åren tror vi att det kommer  bli en markant ökning i micro-interaktioner och UI-animeringar.

Har ni några frågor är ni varmt välkomna att höra av er till oss.