Genom att klicka på "acceptera alla cookies" samtycker du till lagring av cookies på din enhet för att förbättra navigeringen på webbplatsen, analysera webbplatsens användning och bistå i våra marknadsföringsinsatser. Läs mer i våra Integritets- och Cookie policy för mer information.
illustration av kulor

UI-animationer ger mervärde

Emil Seres
May 18, 2020

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.

Relaterade artiklar

Se alla Artiklar
Låt användarna visa vägen

Hur tar man fram digital gränssnittsdesign som både älskas av användarna och är bra för affärerna?

UX-förbättringar för e-handel

De här är de viktigaste viktigaste sakerna vi tycker e-handlare bör kika på.

Vad är användarskapat innehåll och varför är det viktigt?

Att låta användarna skapa innehållet på webbplatsen har många fördelar. Inte bara sparar det tid och pengar, det upplevs även som mer äkta och trovärdigt.

7 sätt AI kan användas för att öka den digitala tillgängligheten

AI har fått stort genomslag inom innehållsproduktion. Men artificiell intelligens kan även användas för att öka den digitala tillgängligheten. Och hjälpen är välkommen.

Se alla artiklar

Kontakta oss

Fråga mig om du vill veta mer

Anders Widell
Projektledare & marknadsansvarig
Tack så mycket!

Vi har mottagit ditt meddelande och uppskattar att du tog dig tid att kontakta oss.

Om du har ytterligare frågor eller behöver omedelbar hjälp, är du välkommen att kontakta oss direkt på +46 768 58 22 10.
Vi ser fram emot att höra från dig snart!
Oops! Något gick fel. Försök gärna igen eller kontakta oss på +46 768 58 22 10. Tack!