Web animation – for brugernes skyld

Web animation har aldrig været lettere at implementere. Dengang jeg startede i 2009 var det en ulidelig proces, der indebar integration af Flash på en hjemmeside. Det var tidskrævende og det var tungt – for brugeren såvel som udvikleren.

Men i dag er teknologien kommet så vidt, at en simpel UI-animation (som en menu der slider ind) kan klares med to linjers CSS-kode. Den ene sætter animationen op, og den anden knytter den til elementet.

Man kan tilmed lave hele animationsfilm til webbrug ved hjælp af f.eks. GSAP – et JavaScript library, der giver dig en tidslinje, du kan sætte animerede elementer op på, ligesom ved traditionel 2D-animation.

Så det er altså kun fantasien der sætter grænser i dag! Men med magt følger ansvar… Og hvor god en brugeroplevelse giver det lige, hvis alle elementer hopper rundt på skærmen?

Udfordringen i dag er ikke, hvordan man implementerer animation – men hvornår man bør.

Nogle grundregler for animation på nettet

Det klassiske eksempel på den fornuftige brug af animation er genie-effekten i MacOS, der viser et element folde sig ud og fylde skærmen, og modsat trække sig sammen og forsvinde ned igen, ved tryk på et program-ikon.
Det er en fantastisk måde at illustrere for brugeren, at der er en forbindelse mellem dette ikon, og dette vindue. Efter at have set den effekt er let at regne ud – selv for helt nye brugere – at trykker du på ikonet, så kommer vinduet frem, og at vinduet ikke forsvinder ud i ingenting hvis man minimerer det – det komprimerer bare sig selv og bevæger sig et bestemt sted hen, hvor du kan finde det igen!

Det er en af de ting, animation er genialt til: At vise brugeren vej, eller hjælpe brugeren med at udføre handlinger på en side.

I hvor høj grad man bør benytte det, er selvfølgelig afhængig af projektet, men hvis brugeren ser at indholdet “reagerer” på interaktioner, så føler de sig også mere forbundet med det. Det giver et ellers statisk websted en illusion af liv, og det er virkelig effektivt til at fange og fastholde brugerens opmærksomhed.

Dermed er det selvfølgelig også let at komme til at misbruge, og ødelægge oplevelsen for brugeren. Vi kender alle de skrigende banner-reklamer, der hopper op og ned i en sidebar, og proklamerer at du har vundet X antal millioner. Et element på en side, der opfører sig på den vis, kan fuldkommen ødelægge brugeroplevelsen, fordi det er så dominerende.

Derfor skal animation bruges med omtanke, og kun til de elementer hvor det virkelig giver mening. For eksempel til at lede en bruger derhen, hvor man ønsker de skal hen.

Gode Use Cases for web animation

Den mest åbenlyse er selvfølgelig menuen der folder sig ud. I stedet for bare at dukke op ud af det blå ved tryk på en knap, så brugeren får et chok, så glider eller fader den ind, så brugeren får en illusion af, at den er en fysisk komponent med en fysisk placering – selv når den ikke er synlig.

En anden åbenlys ting er hover-effekter. I stedet for at en købsknap f.eks. bare skifter farve når man holder musen hen over den – så forestil dig, at den gradvist vokser en smule, kaster en lidt længere skygge, og ser ud til at komme frem imod dig. Du interagerer med den, den svarer dig, og svaret er en invitation til at trykke (og dermed lægge noget i indkøbskurven).

I den lidt større ende af skalaen kan man f.eks. nævne grafer, der kan være svære at danne sig et overblik over, uden en smule hjælp. F.eks. kan en kurve animere ind (tegne sig selv) i stedet for bare at være der. Det giver en umiddelbar følelse af, at det drejer sig om noget, der har udviklet sig over tid. Derudover kunne man også bruge tooltips med hjælpetekst, der animerer ind, når man holder musen henover en søjle i et diagram.

Et andet sted hvor animationer virkelig kan hjælpe folk, er i manualer. Hvis man f.eks. har en manual der viser, hvordan man samler et stykke værktøj, og manualen indeholder en 3D-video, der langsomt gentager sig selv, og viser hvordan de forskellige dele er sat sammen, så giver det et meget mere overskueligt indtryk af noget ellers meget komplekst, og gør det langt lettere for brugeren, at fuldføre den opgave, de kom ind på siden for at få hjælp til at udføre.

Men husk: Det er stadig kun fantasien, der sætter grænser

Jeg håber, dette indlæg har givet jer noget inspiration til, hvad animation i praksis kan bruges til, og hvilken værdi det kan bibringe brugerne af et website.

Men husk: Det er stadig kun din fantasi, der sætter grænserne. Som sagt er alle tekniske døre åbne i dag, så i sidste ende er alting op til din egen vurdering.

Det kan sagtens være, at du står i den situation, at du kan bruge en animeret tegneserie-stribe på din hjemmeside – eller at du vil have teksten til at “skrive sig selv” for at illudere en person, der sidder og skriver på computeren. Og hvis det passer til sidens indhold, og er det, du ønsker at henlede brugernes opmærksomhed på – så slå dig endelig løs.

Bare husk, at det der bevæger sig, som regel er det første øjet søger. Så sørg for, at den ting du animerer, også er det du ønsker skal være det primære fokus på siden.

Så som altid, benyt din egen sunde fornuft – og byg noget fedt, som andre kan få glæde af!

Er du interesseret i et samarbejde?