Animaties
Animaties - inspiratie
Inspiratie: landing.love
Inspiratie animaties en UI-elementen: universe.io
Doel
Animaties
Waarom zouden animaties toevoegen?
Aandacht trekken
https://www.magische-spiegelungen.de/
Aandacht trekken
https://dribbble.com/shots/15467437-E-Commerce-App-Landing-Hero-Section
Feedback geven
https://dribbble.com/shots/1426764-Submit-Button
Geruststellen
https://dribbble.com/FlyToRakib
Geruststellen
https://dribbble.com/shots/17308709-Toast-to-Success
Frustraties verminderen
Frustraties verminderen
Navigatie bevorderen
https://dribbble.com/shots/9866905-Final-steps-in-Onboarding
Interacties aanleren
https://dribbble.com/jkosla
Interacties aanleren
https://material.io/design/motion/understanding-motion.htm
Decoratieve doeleinde
Decoratieve doeleinde
snelheid
Animaties
Snelheid
- text
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Snelheid
- text
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
400–450 ms
+30%
200–300 ms
basis
150–200 ms
-30%
Snelheid
- text
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Easing
Welke ken je nog van CSS - animations timing-function ?
- Linear
- Ease-in
- Ease-out
- Ease-in-out
Linear
text
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Ease-in
text
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Ease-out
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Ease-in-out
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Triggers
Animaties
Triggers
Welke triggers kan je bedenken voor een animatie binnen een UI?
Triggers
https://dribbble.com/shots/17252458-Gig-Share-Landing-on-Webflow
Triggers
Wat kunnen we allemaal doen binnen een animatie?
Valkuilen & tips
Animaties
Animaties
Valkuilen
- Laadtijd: indien animaties te zwaar zijn pakt deze laadtijd in, wat resulteert in wachttijd en een negatief effect heeft op de UX
- Animatie overload: een overload aan animaties kan vermoeiend zijn en de gebruiker wegduwen.
- Afleiding: we gebruiken animaties om de aandacht te trekken, maar ze kunnen ook het omgekeerde effect hebben.
Animeer niet alles
- Niet alles moet geanimeerd worden
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Reële wereld + uitvergroting
- Onderzoek de reële wereld en vergroot de beweging uit
- Denk aan zwaartekracht
https://dribbble.com/shots/4243770-Fingerball
https://dribbble.com/shots/4256105-Hoops
Gewaarwording
Alle elementen moeten gewaar worden van elkaars bestaan. Ze kunnen reageren op elkaar.
De hoofdvraag
Bevordert de animatie mijn UX?
Webflow interactions
Animaties
Tutorials
Kies 1 tutorial uit en probeer die uit
Animaties
By Evelien Rutsaert
