Brug animationer til at forbedre din user experience

Dit formål med at anvende animationer på din hjemmeside bør ikke være at underholde brugerne, men derimod at hjælpe brugerne til at forstå, hvad der foregår – og hvordan de mest effektivt skal bruge din hjemmeside eller app.

Du skal se på animationer som en sammenkobling af funktionalitet og design: Det kan påvirke og vejlede brugernes adfærd, fortælle en given status og hjælpe dem med at se resultaterne af deres handlinger – alt sammen på en mere spændende måde. I indlægget kan du se nogle eksempler, som viser, hvordan animationer kan bruges til at forbedre brugeroplevelsen.

Loading behøves ikke at være kedeligt

Ventetid er aldrig sjov, og hvis du ikke kan forbedre loadtiden, så prøv at gøre noget unikt ved dine “loading”-effekter på din hjemmeside. Her kan du se vores favoritter fra Dribbble:

Når du arbejder med animationer, bør du bestræbe dig efter at integrere din identitet. Det sætter prikken over i’et og du skiller dig ud fra dine konkurrenter.

De klassiske CSS-transitions

Animationer kan bruges til at gøre overgange mere tydelige, så det er åbenlyst, hvad brugerne har foretaget af handling hjemmesiden. Disse overgange laves typisk med CSS og hvis du er vant til at arbejde med WordPress og Visual Composer, så er der mange prædefinerede “CSS-transitions” at vælge imellem. Du lykkedes med din CSS-transition, når det er tydeligt for brugerne, hvor de skal lægge deres fokus og de ikke er i tvivl om, hvad der sker.

Credit: SmashingMagazine

Kedelig og standard.

Vores favorit. Gør det altid tydeligt for brugerne, hvad der sker. Her er der brugt en glidende overgang.

Brug animationer til at be- eller afkræfte en brugers handling

Animationer kan være med til at forstærke de handlinger, en bruger foretager sig.

For eksempel, kan du gøre en kedelig og klassisk formular mere spændende, hvis du anvender animationer. Hvis brugerne udfylder felterne korrekt, kan du lave en “nikkende” animation – eller et grønt flueben – som bekræfter en korrekt handling.

Udfyldes felterne forkert, kan du lave en horisontal “rystende” animation. Dine brugere ved, hvad animationerne betyder og at de har udfyldt formularen med forkert data.

Se om du kan arbejde efter princippet “show, dont tell”, når din hjemmeside udvikles. Det får din hjemmeside til at skille sig ud og gør noget ekstra godt for hele brugeroplevelsen.

Må jeg sende mit næste blogindlæg til dig? 🎉

Indtast din e-mail herunder og vær den første til at få besked, næste gang vi skriver et nyt blogindlæg om Shopify eller e-handel

Konklusion

Animationer er effektive, så længe du er bevidst omkring hvordan de skal bruges – og det hele ikke løber løbsk. Inden du implementerer en animation, skal du overveje, om den giver mening eller om det er bedre at lade være. Omvendt skal du se på animationer med et åbent sind og se på det som en naturlig del af design og hjemmesider og webshops.

Jeg håber, du fandt indlægget inspirerende. Tøv ikke med at kontakte os, så kan vi komme med vores bud på, hvordan der kan implementeres animationer på din hjemmeside eller webshop.