Waaruit bestaat een interface?
Motion is communicatie.
Motion helpt gebruikers:
Voorbeelden?
Motion is communicatie.
Wat gebeurde er?
Waar komt het vandaan? Waar gaat het naartoe?
Wat is belangrijk?
✅ Feedback
✅ Continuity
✅ Focus
✅ Oriëntatie
✅ Hiërarchie
Helpt dit de gebruiker?
Gebruiker voert actie uit.
Interface antwoordt.
Voorbeelden:
Gebruiker bouwt een mentale kaart op.
Motion helpt relaties tonen tussen schermen.
Motion stuurt aandacht.
Een van de belangrijkste motion concepten.
Timing bepaalt:
Te snel:
❌ Niet zichtbaar + Stress?
Te traag:
❌ Frustrerend
Doel:
✅ Natuurlijk
Denk aan de fysieke wereld.
100–200ms
Voorbeeld: buttons, checkbox, hover
200–400ms
Voorbeeld: Panel openen, dropdowns, cards
300–600ms
Voorbeeld: page transitions, modals (dialog panels)
Klein object (weegt minder)
→ sneller
Groot paneel (weegt meer)
→ trager
Menu openen:
Observeer:
Niet alleen:
Hoe lang?
Maar ook:
Hoe beweegt het?
In de echte wereld:
Objecten starten en stoppen niet abrupt.
Interfaces ook niet.
Constante snelheid
Gebruik:
Zelden voor UI-transities
Snel starten,
Langzaam stoppen
✅ Meest gebruikt in UI
Langzaam starten,
Snel eindigen
Wanneer gebruiken:
Rustige start
Snelle middenfase
Rustige stop
Perfect voor grotere bewegingen
Voelt:
Gebruiker krijgt onmiddellijk feedback
Pas op dezelfde animatie van je menu verschillende easings toe:
Welke voelt het best?
Waarom?
Niet alle 12 zijn relevant.
Belangrijk voor interfaces:
Kleine voorbereiding vóór actie.
Voorbeeld:
Button:
98% → 102% → 100%
Menselijke hersenen:
➡️ voorspellen beweging
Resultaat:
Focus creëren: Waar moet de gebruiker kijken?
Its purpose is to direct the audience's attention, and make it clear what is of greatest importance in a scene;
Technieken:
Niet alles stopt tegelijk.
Voorbeeld:
Voelt organisch
Hoofdactie
Text
Subtiele ondersteunende beweging
Voorbeeld:
Card + icon
Animeer een CTA Button in Figma Motion en maak twee versies, gebruik volgende concepten:
Vergelijk gevoel
Belangrijk UX Motion Concept:
Motion toont relaties.
Elementen:
❌ verschijnen niet zomaar
❌ verdwijnen niet zomaar
✅ hebben oorsprong
✅ hebben bestemming
Denk aan "Continuity", dit sluit hier bij aan.
Card
↓
Detailpagina
Gebruiker begrijpt:
Dit is hetzelfde object.
Product Card
↓
Product Detail
Maak een Shared Element Transition.
Populaire patronen:
Niet iedereen ervaart motion hetzelfde.
Denk aan:
Gebruik motion bewust.
Geen duidelijk doel?
➡️ Verwijderen.
Goede motion: