Hvorfor ting beveger seg

Bevegelse på skjermen er ikke pynt — det er informasjon. Denne leksjonen handler om hva bevegelse faktisk forteller brukeren, og om den delen av historien som er mindre pen: at bevegelse også kan skade.

Bevegelse er tilbakemelding

Et grensesnitt gjør mye usynlig arbeid. Bevegelse gjør noe av det synlig: den bekrefter, forklarer og beroliger. Tre eksempler du kjenner fra hverdagen:

• Knappen som synker en anelse når du klikker — bekrefter at klikket landet.
• Spinneren mens noe laster — sier at jobben pågår, så du ikke klikker på nytt.
• Menyen som glir inn fra kanten — viser hvor den kom fra, så du forstår hvordan den lukkes igjen.

Det felles for alle tre: bevegelsen svarer på noe du gjorde, eller på noe som skjer med dataene dine. Ta bevegelsen bort, og grensesnittet virker frossent. Ta bort innholdet i bevegelsen — bare pynt — og den drar bare oppmerksomheten til seg.

Føl det selv

Forhåndsvisningen under har en boks som svarer når pekeren kommer. Regelen har to deler: transition sier at endringer i transform skal ta 0,3 sekunder, og :hover sier hva som skal endre seg. Du møter begge deler ordentlig i leksjon 2 og 3 — her gjelder det bare å kjenne forskjellen mellom et hopp og en bevegelse.

1.box {2  transition: transform 0.3s ease;3}4 5.box:hover {6  transform: scale(1.15);7}

Prøv å endre 0.3s til 1s og kjør på nytt. Samme effekt, helt annen følelse — varighet og timing styrer om bevegelsen føles som tilbakemelding eller som teater.

Ærlig om baksiden

Bevegelse kan også skade. For mange som blir kvalme eller svimme av bevegelse på skjermen, er en side full av flygende elementer ikke litt irriterende — den er noe man lukker. Og selv for dem som ikke reagerer fysisk, drar konstant bevegelse oppmerksomheten bort fra innholdet den skulle forklare.

Derfor finnes prefers-reduced-motion — en innstilling brukere kan slå på for å be om mindre bevegelse, og en media query du kan svare på i CSS. Du lærer å bruke den i leksjon 6, og vi bruker den i miniprosjektet. Fra nå av gjelder en kontrakt: hver gang du lærer en ny animasjonsteknikk, lærer du samtidig hvordan du slår den av for dem som ikke vil ha den.