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?
4. • 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.

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