Hos Pandi Web arbejder vi sammen med en lang række reklame- og kommunikationsbureauer, hvor vi fungerer som teknisk rådgiver og samarbejdspartner. “Til bureauer” er en serie af artikler, hvor vi forsøger at kaste lys på nogle af de spørgsmål vi oftest får stillet fra disse samarbejdspartnere. Vi håber det kan gøre arbejdet lettere for både eksisterende og kommende samarbejdspartnere. Se en fuld liste over indlæg i serien her.
Mikroanimationer er et fantastisk redskab på nutidens hjemmesider. Det er små, fortrinsvis funktionelle, animationer, som hjælper brugeren ved at give visuel feedback og guidance. På den måde kan du animere brugeren til at tage den handling, som du ønsker. Det gør mikroanimationer til et fantastisk UX-værktøj, hvis de bruges rigtigt. De kan omvendt også være brugerens værste fjende, hvis de overdrives eller bruges forkert. Det er balancen, som er vigtig, og den prøver vi at finde i det nedenstående skriv.
Hvorfor er mikroanimationer på web vigtige?
Mikroanimationer gør det muligt at sige en hel masse ting effektivt uden at skulle sige det med ord. Hvis de anvendes korrekt kan de spare brugeren en masse frustration da han/hun guides korrekt videre. Det er muligt at belønne og anerkende adfærd korrekt, hvilket gør brugeroplevelsen langt mere flydende og tilfredsstillende.
Hvornår bør mikroanimationer bruges?
Der er en lang række scenarier, hvor animationer giver mening at bruge. Det kan eksempelvis være til at illustrere et hierarki. Hvis du har en liste af kategorier, der har underkategorier kan en måde være, at animere ind i kategorierne når du klikker på dem. Ligeledes kan du have en animation når brugeren klikker sig tilbage til oversigten igen.
Det kan også være i inputfelter, hvor du skal give brugeren feedback på, om det indtastede er korrekt eller ej. Udover den klassiske metode med at fremhæve felter, som ikke er udfyldt kan det også være en idé at bruger animationer til at fremhæve fejlede felter når brugeren klikker på formularknappen.
Animationer kan også bruges til at fremhæve elementer og nudge den besøgende i den rigtige retning. Det kan eksempelvis være ved at lade en knap “blinke” subtilt så den ikke overskygger alt, men så brugeren ikke er i tvivl om, hvad han/hun skal foretage sig. På Pairy har vi eksempelvis illustreret, hvordan vores tidsberegner på denne måde.
Endelig kan de også bruges til at illustrere, at vi henter indhold frem til brugeren. Her er mikroanimationer et fantastisk værktøj til at fortælle brugere, at hjemmesiden ikke er gået i stå. Det kan hjælpe med at give lidt mere tålmodighed.
Sådan skal det ikke gøres
Mikroanimationer kan som nævnt være et fantastisk værktøj, som især på små skærme kan nudge brugeren uden brug af ord. I en tid, hvor mobile-first er mantraet er dette derfor ikke noget man kan komme uden om. Når det er sagt er der selvfølgelig også metoder, man ikke bør benytte. Det er svært at lave en udtømmende liste over dette, men sund fornuft og ikke-overdreven brug burde få dig et godt stykke ad vejen.
Lad eksempelvis være med at have flere mikroanimationer kørende på samme tid da brugeren så føler sig overvældet.
Sådan overleveres mikroanimationer bedst fra designer til udvikler
Hos Pandi Web agerer vi ofte teknisk samarbejdspartner til kreative bureauer. I en sådan konstellation er kommunikation og overdragelse to af de vigtigste elementer i samarbejdet. Derfor er det også vigtigt, hvordan tiltænkte mikroanimationer kommunikeres videre fra design til udvikling. Ligeså essentielt kan det være at anerkende når brugeren har gjort det korrekt ved hjælp af en animation.
Webdesign modtages oftes som statiske design filer i formater som .sketch, .xd, .studio etc. Det betyder også, at overleveringen af tilsigtede mikroanimationer skal overleveres på en måde som udvikleren kan kode ud fra. Dette kan gøres på flere måder, og der er ikke nogen der er mere rigtig end andre – det vigtigste er, at man aktivt har taget stilling til hvordan brugeren oplever og interagerer med siden.
Her er nogle metoder til hvordan sådanne kan overleveres:
1. Beskriv med ord: Beskriv løsningen så godt du kan, men husk at brug fagord som f.eks. tweening, fade, easing, duration etc. til at beskrive animationen.
2. Håndskitse: Tegn et storyboard af hvordan du forestiller dig animationen.
3. Video: Lav mikroanimationen præcis som du vil have den programmeres som After effect eller Principle.
4. Reference: Har du et eksempel på en eksisterende side, som minder om det du kunne tænke dig, så send gerne et direkte link til siden, så vi kan “lure” hvordan animation skal se ud.
Hvordan kommer jeg bedst i gang som websiteejer?
Selvom denne serie er skrevet til bureauer kan du jo godt være interesseret i, hvordan du som “ikke-bureau” kommer i gang med at bruge mikroanimationer på den bedste måde. Hvis du ikke har et bureau, som både har design- og udviklingskompetencer bør du have fat i ét som har eller tale med folk i hver lejr. Det er sjældent, at en udvikler har den nødvendige viden omkring emnet til at kunne rådgive dig på den bedst mulige måde. Det samme gør sig gældende, hvis du kun taler med en designer. Det er bedst at tale med begge parter for både at få en idé om, hvad den bedste løsning for kunden vil være, men også hvad den teknisk bedste løsning ville være. Hvis du har brug for vores input er du mere end velkommen til at tage kontakt til os.