Feedback
Mikrointeraktioner & animation
En mikrointeraktion er et lille, afgrænset øjeblik omkring én opgave: en toggle, der skifter, et hjerte, der fyldes, en pull-to-refresh, der giver efter. Animationen er feedback-laget, der bekræfter, at systemet har set handlingen.
Definition
En mikrointeraktion er ifølge Dan Saffer et lille, indeholdt produkt-øjeblik bygget op om én enkelt opgave. Den består af en trigger (brugerens eller systemets handling), regler (hvad der sker), feedback (den synlige/hørbare bekræftelse) og loops/modes (hvor længe og under hvilke betingelser). Animationen er feedback-laget, der gør en ellers abstrakt tilstandsændring synlig.
Hvorfor det virker
Nielsen Norman Group beskriver animation som primært et værktøj til at give brugeren letbemærket, blød feedback. Den bekræfter, at en handling er registreret, i de tilfælde hvor en statisk ændring ellers ville blive overset på grund af change blindness.1
Motion gør abstrakte tilstandsskift mærkbare. NN/g skriver, at animation kan signalere et skift i tilstand eller mode (fx et ikon, der morfer fra »redigér« til »gem«) og dermed give brugeren en konceptuel metafor for, hvad der lige skete.1
Bevægelse hjælper også med orientering. Zoom- og glide-animationer kan vise retning i et hierarkisk informationsrum, så brugeren forstår, om de bevæger sig ind i en detalje eller tilbage til en oversigt, uden at skulle læse sig frem til det.1
Begrebet stammer fra Dan Saffers »Microinteractions«, der definerer en mikrointeraktion som et lille produkt-øjeblik bygget op af fire dele: en trigger, regler, feedback og loops/modes. Feedback-delen er ofte animationen: det synlige svar på, at triggeren blev udløst.3
Hvornår du bruger det, og hvornår ikke
Hvornår du bruger det
- Når en handling ellers ikke giver noget tydeligt svar (en toggle, et like, en tilføjet vare), og statisk feedback let overses.
- Når en tilstand skifter (fx redigér → gem), og bevægelsen kan gøre skiftet mærkbart og forklare, hvad der lige skete.
- Når brugeren bevæger sig i et hierarki (ind i en detalje, tilbage til listen), og retningen på en glidning eller zoom hjælper med orienteringen.
Hvornår du bør undgå det
- Når animationen kun er til pynt: bevægelse tiltrækker øjet i periferisynet, så overflødig animation stjæler opmærksomhed uden at tilføje mening.
- Når bevægelsen forsinker brugeren. En animation, der er for lang eller blokerer næste handling, føles hurtigt som en bremse frem for feedback.
Best practices
Hold feedback-animationer korte
NN/g anbefaler, at enkel feedback (som en checkbox eller toggle) varer omkring 100 ms, mens større skift på skærmen (fx et modal-vindue, der glider ind) kan ligge på 200–300 ms. Som tommelfingerregel er 100–400 ms passende, hvor 400 ms allerede er en langsom animation, der kun bør bruges til store bevægelser.2
Fejl hellere for hurtigt end for langsomt
Ifølge NN/g er det langt mere almindeligt, at animationer er for lange end for korte. Ved omkring 500 ms begynder bevægelsen at føles som en bremse for brugeren. Søg den korteste varighed, der ikke virker abrupt.2
Lad motion være funktionel, ikke dekorativ
NN/g anbefaler, at animation er diskret, kort og subtil og bruges til feedback, ikke til at underholde. Bevægelse trækker automatisk øjet til sig via periferisynet, så unødvendig animation koster opmærksomhed uden at give noget igen.1
Respektér prefers-reduced-motion
Brugere kan slå »reducér bevægelse« til i deres styresystem. CSS-media-forespørgslen prefers-reduced-motion: reduce afspejler det ønske, så du kan fjerne, dæmpe eller erstatte ikke-essentiel motion. Behandl det som et standardhensyn, ikke som et særtilfælde.6
Gør det muligt at slå bevægelse fra (WCAG AAA)
WCAG Success Criterion 2.3.3 Animation from Interactions (niveau AAA) kræver, at bevægelses-animation udløst af interaktion kan slås fra, medmindre den er essentiel for funktionen eller informationen. At respektere prefers-reduced-motion er den anbefalede vej.46
Undgå at skabe en anfaldsrisiko
Som sikkerhedsgrænse siger WCAG 2.3.1 Three Flashes or Below Threshold (niveau A), at intet indhold må blinke mere end tre gange på ét sekund. Blink og hurtige gentagelser i en mikrointeraktion skal holdes langt under den grænse.5
Hold animationen billig at afvikle
En feedback-animation skal føles øjeblikkelig. Animér egenskaber, der er lette for browseren (transform og opacity), frem for layout-udløsende egenskaber, så bevægelsen ikke selv bliver kilden til hak og forsinkelse.
Typiske fejl
Dekorativ bevægelse uden formål
Animation, der kun er til pynt, trækker øjet til sig uden at tilføje feedback eller orientering, og bliver hurtigt støj, der gør produktet langsommere at bruge.
For lange animationer
Den hyppigste fejl. Når en overgang trækker op mod eller over 500 ms, holder den brugeren tilbage og føles som en bremse frem for et svar.
Ingen respekt for reduceret bevægelse
At ignorere prefers-reduced-motion kan give brugere med vestibulære lidelser ubehag som kvalme, svimmelhed og migræne. Det er både et tilgængeligheds- og et WCAG-problem.
Blokerende animation i det kritiske flow
En bekræftelses-animation, der skal spilles færdig, før brugeren kan gå videre, gør en lille detalje til en forhindring. Feedback må aldrig stå i vejen for næste handling.
Eksempler i praksis
Material Design toggle (ofte fremhævet)
NN/g bruger Googles Material-toggle som eksempel: knappen glider fra side til side, farven skifter, og en halo toner ind. Ifølge NN/g giver det tilsammen en kort feedback på omkring 100 ms, der gør et enkelt til/fra-skift tydeligt uden at forsinke.
Pull-to-refresh (ofte fremhævet)
Pull-to-refresh er en klassisk mikrointeraktion: brugerens træk er triggeren, spinneren er feedbacken, og løkken kører, indtil data er hentet. Bevægelsen forklarer i sig selv, hvad der sker, uden en eneste linje forklarende tekst.
Ofte stillede spørgsmål
Hvad er en mikrointeraktion?
Det er et lille, afgrænset øjeblik omkring én opgave, fx en toggle, et like eller en pull-to-refresh. Dan Saffer beskriver den med fire dele: trigger, regler, feedback og loops/modes, hvor animationen typisk er feedback-delen.
Hvor længe bør en feedback-animation vare?
NN/g anbefaler omkring 100 ms for enkel feedback som en toggle og 200–300 ms for større skift på skærmen. Som regel er 100–400 ms passende, og allerede ved 500 ms begynder bevægelsen at føles som en bremse.
Hvad er forskellen på funktionel og dekorativ animation?
Funktionel animation giver feedback, viser en tilstandsændring eller hjælper med orientering. Dekorativ animation er til pynt eller underholdning. NN/g anbefaler at holde motion diskret, kort og subtil, altså funktionel.
Hvordan tager jeg hensyn til brugere, der ikke vil have bevægelse?
Brug CSS-media-forespørgslen prefers-reduced-motion: reduce til at fjerne eller dæmpe ikke-essentiel motion. WCAG 2.3.3 (AAA) kræver desuden, at bevægelse udløst af interaktion kan slås fra, medmindre den er essentiel.
Kan animation være et tilgængelighedsproblem?
Ja. Bevægelse kan udløse ubehag hos brugere med vestibulære lidelser, og blink kan i værste fald udløse anfald. Derfor sætter WCAG 2.3.1 en grænse på højst tre blink i sekundet. Respektér altid brugerens ønske om reduceret bevægelse.
Kilder
Relaterede mønstre