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

921b21db0adbe6810cae63e616777d4a?s=47 thebeckyhamm
March 04, 2014

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

921b21db0adbe6810cae63e616777d4a?s=128

thebeckyhamm

March 04, 2014
Tweet

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

  3. None
  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/