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 ikke pynt: den er feedback-laget, der bekræfter, at systemet har set handlingen. Her er, hvad bevægelsen skal gøre, hvor hurtig den bør være, og hvordan du respekterer brugere, der har bedt om mindre motion.
Definition
Et mikrointeraktion er ifølge Dan Saffer et lille, indeholdt produkt-øjeblik bygget op om én enkelt opgave. Det 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 — den gør en ellers abstrakt tilstandsændring synlig.
Hvorfor det virker
Bevægelse er den mest pålidelige måde at give feedback på. 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, netop når en statisk ændring ellers ville blive overset på grund af change blindness.1
Motion gør abstrakte tilstandsskift mærkbare. NN/g fremhæver, 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 netop 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å gratis motion 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 er tydelige: animation bør være diskret, kort og subtil og bruges til feedback — ikke til at underholde. Bevægelse trækker automatisk øjet til sig via periferisynet, så gratis animation koster opmærksomhed uden at give mening 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 standard-hensyn, ikke som en kant-case.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 honorere 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 reel ubehag — kvalme, svimmelhed, 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 mikro-detalje til en makro-forhindring. Feedback må aldrig stå i vejen for næste handling.
Eksempler i praksis
Material Design toggle (ofte fremhævet)
Googles Material-toggle er et ofte fremhævet skoleeksempel: knappen glider fra side til side, farven skifter, og en halo toner ind — 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