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

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

Acties & Triggers

Animaties

Actions

Wat kunnen we allemaal doen binnen een animatie?

Triggers

Welke triggers kan je bedenken voor een animatie binnen een UI?

Trigger hunt

• Download het start FigJam board
• Vermeld bovenaan je groepsnaam
• Ga in team op zo snel mogelijk op zoek naar een voorbeeld binnen UI-design voor minimaal 7 triggers
• Dien je eigen Figjam versie in
  Share > copy link
  Let op toegang

Triggers

https://dribbble.com/shots/17252458-Gig-Share-Landing-on-Webflow

Mouse Click

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?

Lottie & Figma

Animaties

Demo - startfile