UI Transitions: The Good, the Bad, and the Coded

Overview of transitions: why and where to use, what to avoid, and some code examples (available on Codepen).

Easing Types: http://easings.net/
Cubic Bezier: http://cubic-bezier.com
Using Transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Transcript

1. UI Transitions: The Good, the Bad, and the Coded Becky Hamm @thebeckyhamm
2. Becky Hamm Front-End UI UX Token Girl Developer / Designer
4. Transitions! Why we need them Where to use them Some cool ones Some really horrible ones Examples!
5. Why we need transitions
6. We aren’t computers.
7. [E]mploying animation not only aids the user in understanding the events in the user interface, but also makes the user’s experience of the interface more pleasant and comfortable. Animation: From Cartoons to the User Interface Chang, Ungar 1993.
8. Image: Warner Bros. We use transitions to make a linear process more “human”
9. Where to use transitions
10. Hiding/Showing
11. http://magento.com/
12. Apple Store Google Play
13. Guiding Tasks
14. https://www.facebook.com/paper
15. Drawing Attention
16. http://codepen.io/valhead/pen/adnKt
17. Transitions gone wrong
18. Slow as molasses. A “forced pause can be cumbersome and may break… [user] concentration” Phosphor: Explaining Transitions in the User Interface Using Afterglow Effects Baudish et al, 2006.
19. http://neilcarpenter.com/demos/flip-menu/
20. Rule of thumb: 200 - 300ms
21. Distracting! “Motion is hard to ignore and may thus cause users to be distracted by animated transitions” Phosphor: Explaining Transitions in the User Interface Using Afterglow Effects Baudish et al, 2006.
22. http://dataveyes.com/#!/en
23. Where content isn’t transitioning.
24. http://tickets.tomorrowworld.com/
25. Sweet transitions, brah.
26. Refresher -­‐webkit-­‐transition:  height  0.2s  ease-­‐in-­‐out;       -­‐moz-­‐transition:  height  0.2s  ease-­‐in-­‐out;   -­‐ms-­‐transition:  height  0.2s  ease-­‐in-­‐out;   -­‐o-­‐transition:  height  0.2s  ease-­‐in-­‐out;   transition:  height  0.2s  ease-­‐in-­‐out; transition:  height  0.2s  ease-­‐in-­‐out  0.5s; Can also add a delay:
27. Not everything is transitionable* •  display   •  background-­‐image   •  text-­‐decoration-­‐style https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties *Definitely a real word
28. {Coding interlude}
29. Pains in the Butt
30. Progressive Enhancement FTW! (you can also use JS if you want)
31. •Easing Types •Cubic Bezier Awesomeness •All about transitions (MDN) Resources
32. Be consistent. Be subtle. Be sparing. Be delightful.
33. Thank You @thebeckyhamm ! http://codepen.io/ thebeckyhamm/