1. Giv hver animation en opgave
Spørg, hvad bevægelsen hjælper kunden med. En knap kan skifte udseende, når man trykker på den. En menu kan åbne roligt, så man kan følge med. En baggrundsvideo kan skabe stemning. Prioritér de effekter, der gør siden lettere at bruge, og vær mere tilbageholdende med dem, der kun pynter.
Forestil dig en kontaktknap, hvor en farve breder sig, og en pil glider frem, når musen føres hen over den. Det kaldes en hover-effekt. Knappen skal stadig ligne en knap, og ordet “Kontakt” skal være synligt, før effekten starter. Kunden skal kunne se, hvad der kan klikkes på, uden først at skulle lede med musen.
En lille roterende cirkel kan vise, at en formular er ved at sende. Når beskeden er sendt, skal kunden have et tydeligt svar, fx “Tak, vi har modtaget din besked”. Hvis afsendelsen mislykkes, skal det også stå med ord. En animation alene fortæller ikke, om beskeden kom frem.
Placér beslutningen i hjemmesidens samlede visuelle retning. En rolig informationsside har ikke nødvendigvis brug for samme bevægelse som en præsentation af et interaktivt produkt.
2. Vurder effekten i et almindeligt besøg
Se animationen som en kunde, der skal løse en opgave, ikke kun som en person, der bedømmer design. Kan du læse overskriften med det samme? Kan du klikke på kontaktlinket, mens indholdet animeres? Skal du vente på den samme introduktion, hver gang du vender tilbage til siden?
Se også på gentagelser. En kort effekt kan virke diskret én gang og være forstyrrende, hvis mange elementer bevæger sig samtidig. Begræns antallet af konkurrerende bevægelser, og prøv en version, hvor de dekorative effekter er fjernet. Sammenlign, hvad der bliver lettere eller sværere at forstå.
Kontrollér, at knapper og indhold ikke skubber hinanden rundt under effekten. En pil kan eksempelvis få plads inde i knappens eksisterende bredde. Kunden bør ikke skulle jage en handling, som flytter sig, når markøren nærmer sig. Test også den faktiske side på en telefon, hvor hover ikke er en pålidelig betjeningsmodel.
I artiklen om mobiloptimering og UX finder du eksempler på at afprøve en hel kundeopgave. Brug samme tilgang til animationer: se effekten i den sammenhæng, hvor kunden faktisk møder den.
3. Tilbyd kontrol og mindre bevægelse
Har du en video eller en billedserie, der starter af sig selv og bliver ved med at køre? Giv besøgende en tydelig pauseknap. Det gør det lettere at læse resten af siden uden noget, der hele tiden bevæger sig ved siden af. De tekniske regler og undtagelser findes i vejledningen om at kunne stoppe automatisk bevægelse.
Tænk også på effekter, der starter, når man klikker eller ruller ned ad siden. Store bevægelser kan være ubehagelige for nogle besøgende. Bed derfor om en roligere udgave, hvor indholdet stadig kan bruges. Du kan læse mere om baggrunden i vejledningen om bevægelse efter klik og andre handlinger.
På telefoner og computere kan man vælge mindre bevægelse i indstillingerne. Din hjemmeside kan følge det valg, hvis udvikleren har sat den op til det. Bed om at få det vist: Slå indstillingen til, og se, om effekterne bliver roligere eller forsvinder. Den tekniske vejledning til udvikleren findes her.
Planlæg et alternativ, hvor indhold og funktion stadig er tilgængelige. En kontaktknap kan skifte farve uden en bevægelig overgang. En forklarende animation kan suppleres med et statisk diagram og tekst. Beskriv de godkendte alternativer i hjemmesidens designmanual, så nye effekter følger samme tilgang.
4. Gennemgå effekterne før godkendelse
Gennemgå effekterne én ad gangen. Hvor vises de? Hvad sætter dem i gang? Gentager de sig? Og hvordan fungerer siden uden dem? Skriv svarene ned, så du og udvikleren kan aftale, hvad der skal beholdes eller ændres.
- Test med mus, tastatur og touch.
- Aktivér mindre bevægelse i enhedens indstillinger og gennemgå siden igen.
- Kontrollér pause eller stop for relevant automatisk indhold.
- Prøv et langt besøg og gentagen navigation, ikke kun første visning.
- Se, om alle opgaver kan løses, når dekorativ bevægelse fjernes.
Hvis I har fundet en effekt på en anden hjemmeside, så beskriv dens opgave frem for blot at bede om den samme animation. Guiden til designinspiration hjælper med at omsætte referencen til jeres eget behov. Hos Designet arbejder vi med effekterne som en del af hjemmesidens design og betjening, så bevægelsen understøtter indholdet.
