UX/UI & Motion Design

Analyseren • Systematiseren • Prototypen

Leerdoelen

Na deze les kan je:

  • Motion analyseren vanuit UX-perspectief
  • Goede en slechte motion herkennen
  • Motion-hiërarchie toepassen
  • Een motion system opzetten
  • Figma Motion doelgericht gebruiken
  • Motion beslissingen verantwoorden

Opfrissing

Vorige les:

✅  Timing

✅  Easing

✅  Anticipation

✅  Continuity

✅  Spatial Relationships

✅  Shared Element Transitions

Vandaag:

➡️  Evalueren

➡️  Systematiseren

➡️  Toepassen

Niet:

"Wanneer ziet het er mooier uit?"

Wel:

"Welke UX-frictie wordt opgelost?"

Analyse van Motion

— Motion design & UX/UI Patterns

Analyse van Motion

Als designer moet je motion kunnen beoordelen.

Niet:

  • mooi
  • cool
  • fancy

Wel:

  • functioneel
  • begrijpelijk
  • ondersteunend

We hebben nood aan een houvast om Motion te analyseren en beoordelen.

Motion Review Framework

Stel altijd deze vragen:

  1. Wat verandert?
  2. Waarom beweegt het?
  3. Helpt dit de gebruiker?
    • Is de timing correct?
    • Is de easing correct?

1. Wat verandert?

  • Object?
  • Status?
  • Scherm?
  • Context?

Motion moet verandering zichtbaar maken.

2. Waarom beweegt het?

Mogelijke redenen:

  • Feedback
  • Oriëntatie
  • Focus
  • Hiërarchie
  • Navigatie

Als er geen reden is:

➡️ verwijder de animatie.

3. Helpt dit de gebruiker?

Belangrijkste vraag.

Zonder animatie:

  • Begrijpt de gebruiker minder?

Ja → nuttige motion

Nee → decoratie

4a. Is de timing correct?

Timing beïnvloedt:

  • Snelheid
  • Vertrouwen
  • Professionaliteit

Te snel = onzichtbaar

Te traag = frustrerend

4b. Is de easing correct?

Easing moet overeenkomen met de fysieke wereld:

  • Snel in? Traag uit?
  • Gevoel
    • Speels
    • Premium
    • ...

Analyse Oefening

Werk per twee.

Analyseer:

  • Instagram Like
  • Apple Face ID
  • Google Maps Bottom Sheet
  • ...

Bespreek:

  • Waarom beweegt dit?
  • Wat lost het op?

Hierarchie van Motion

— Motion design & UX/UI Patterns

Motion Hierarchy

Niet alle beweging is even belangrijk.

Zoals typografie:

H1 → H2 → Body

Heeft motion ook niveaus.

Primary Motion

Belangrijkste bewegingen.

Voorbeelden:

  • Navigatie
  • Onboarding
  • Checkout
  • Schermwissels

Moeten duidelijk zichtbaar zijn.

Secondary Motion

Ondersteunend.

Voorbeelden:

  • Cards
  • Filters
  • Tabs
  • Panels

Minder nadruk.

Tertiary Motion

Microfeedback.

Voorbeelden:

  • Hover states
  • Like buttons
  • Toggles

Korte subtiele bewegingen.

Waarom Hierarchie?

Wanneer alles beweegt:

➡️ Niets is belangrijk.

Motion vraagt aandacht.

Gebruik die aandacht bewust.

Oefening

Identificeer onderstaande motion en wijs toe aan een categorie:

🟥 Primary Motion

🟨 Secondary Motion

🟩 Tertiary Motion

Bespreek verschillen.

Motion Systems

— Motion design & UX/UI Patterns

Motion Systems

Professionele teams ontwerpen geen losse animaties.

Ze ontwerpen systemen.

Wat is een Motion System?

Een verzameling van vaste afspraken.

Het motion-equivalent van:

  • Color Systems
  • Typography Systems
  • Design Systems

Losse Animaties

Probleem:

  • Inconsistent
  • Moeilijk onderhoudbaar
  • Moeilijk schaalbaar

Elke designer verzint iets anders.

Motion System

Voordelen:

✅ Consistent

✅ Herbruikbaar

✅ Efficient

✅ Schaalbaar

Voorbeeld

Enter

Slide Up

Exit

Fade Out

Modal

Scale + Fade

Notification

Slide In Right

Motion Tokens

Zoals design tokens. Nog geen volledige support in Figma, maar kan je wel gebruiken puur als documentatie.

Motion Tokens

Duration
---------
Fast     = 150ms
Medium   = 300ms
Slow     = 450ms

Easing
---------
Standard = Ease Out
Emphasis = Ease In Out
Exit     = Ease In

Distance
---------
Small    = 8px
Medium   = 24px
Large    = 64px
``

Waarom Tokens?

Niet:

"Pak iets dat goed voelt."

Wel:

"Gebruik duration-medium."

Consistentie wint altijd!

Oefening

Ontwerp een motion system voor:

📱 Tinder-like App

Definieer:

  • 3 durations
  • 3 easings
  • 3 transitions

Motion UI Patterns

— Motion design & UX/UI Patterns

Advanced UI Patterns

Veelgebruikte motion patronen.

Niet alleen trendy, maar ook bewezen dat ze werken.

1. Bottom Sheets

Populair in:

  • Google Maps
  • Uber
  • Bolt

Voordeel:

Context blijft zichtbaar.

Waarom Werken Bottom Sheets?

Gebruiker verliest de huidige pagina niet.

Motion verduidelijkt:

  • Waar de informatie vandaan komt
  • Hoe ze terug kan verdwijnen

2. Expand / Collapse

Veel gebruikt.

Vaak fout ontworpen!

Slechte Expand

Paneel verschijnt instant.

Resultaat:

  • Onrust
  • Minder context

Goede Expand

Inhoud groeit mee.

Gebruiker volgt de evolutie.

Continuity blijft behouden.

3. Floating Action Button

FAB gebruikt motion om:

  • Focus te trekken
  • Extra acties te tonen
  • Context te behouden

4. Progressive Disclosure

Toon niet alles ineens.

Motion helpt om informatie geleidelijk te onthullen.

  • Steps
  • Popups on focus
  • ...

Waarom?

Gebruiker verwerkt informatie stap voor stap.

Minder cognitieve belasting.

Oefening

Bouw een Onboarding met Figma en Motion gebaseerd op volgend ontwerp:

  • Step 1:

Motion Checklist

— Motion design & UX/UI Patterns

Motion Heuristics

Een checklist voor elke designer.

Vraag 1

Waarom beweegt dit?

Vraag 2

Helpt het de gebruiker?

Vraag 3

Verduidelijkt het een relatie?

Vraag 4

Geeft het feedback?

Vraag 5

Stuurt het aandacht?

Vraag 6

Is het snel genoeg?

Vraag 7

Is het consistent?

Vraag 8

Respecteert het accessibility?

Vraag 9

Wordt de UX slechter zonder deze animatie?

Vraag 10

Kan dit een herbruikbaar patroon worden?

Challenge

— Motion design & UX/UI Patterns

Redesign Challenge

Je krijgt een interface zonder motion.

Doel:

Voeg maximaal 3 animaties toe.

Niet meer.

Regel 1

Elke animatie moet een doel hebben.

Vraag jezelf:

Welk probleem los ik op?

Regel 2

Gebruik niet meerdere animaties voor hetzelfde probleem.

Eenvoud wint.

Regel 3

Consistentie boven spektakel.

Professionele motion is meestal subtiel.

Bespreking

Verdedig elke animatie.

Niet:

"Het ziet er mooi uit."

Wel:

"Dit verduidelijkt de relatie tussen schermen."

Klasopdracht

Ontwerp motion voor één flow:

  • Food Delivery
  • Banking
  • Travel Booking
  • E-commerce
  • ...

Verplicht Gebruiken

✅ Timing

✅ Easing

✅ Anticipation

✅ Continuity

✅ Shared Element Transition

Pitch

2 minuten per team.

Toon:

  • Prototype
  • Motion keuzes
  • UX motivatie

Niet tonen:

"coole effecten"

Wel tonen:

"opgeloste gebruikersproblemen"

Recap

Goede motion:

✅ Informeert

✅ Oriënteert

✅ Begeleidt

✅ Versterkt UX