Animating the User Experience

12,074 views

Published on

Since the widespread adoption of CSS animations and transitions, animation has started creeping back into web design. Loading screens and “flashy” intros are back, as well as subtle UI interactions that invisibly improve the user’s experience. Rachel Nabors explains the six components of motion design, how you can apply them in your own projects, and when to start planning animation in your process.

Published in: Design, Business, Technology
1 Comment
36 Likes
Statistics
Notes
  • kurumsal evden eve nakliyat firmaları için http://www.evdenevenakliyatcim.gen.tr adresini ziyaret ediniz
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
12,074
On SlideShare
0
From Embeds
0
Number of Embeds
247
Actions
Shares
0
Downloads
128
Comments
1
Likes
36
Embeds 0
No embeds

No notes for slide

Animating the User Experience

  1. 1. The Future of UX Animation on the Brain with @RachelNabors
  2. 2. It’s true. RacheltheGreat.com
  3. 3. surgery.
  4. 4. RachelNabors.com/archive
  5. 5. google.com/design/spec/anima;on/authen;c-mo;on.html
  6. 6. ibm.com/design/language/framework/interac;on/mo;on.shtml
  7. 7. lightningdesignsystem.com/design/mo;on
  8. 8. homestarrunner.com
  9. 9. THE BRAIN’S GPU Anima&on &
  10. 10. Dropdown courtesy of Codrops
  11. 11. Jump Cut From film, when the camera cuts directly to a different perspec;ve.
  12. 12. Inner Sanctum, 1948
  13. 13. UI credit: codrops.com
  14. 14. In-Betweening From anima;on, drawing all the poses “in between” two important poses.
  15. 15. What just happened?
  16. 16. “By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised.” Scott E. Hudson and John T. Stasko (1993)
  17. 17. @rachelnabors Cognitive load has a cost that rivals page load cost.
  18. 18. Jump Cut Site Animated Site 0 1.25 2.5 3.75 5 3 seconds 2 seconds Perceived Speed: Page Load
  19. 19. Jump Cut Site Animated Site 1.25 2.5 3.75 5 0.5 seconds 3 seconds 3 seconds 2 seconds Page Load Time Cognitive Load Time (“Time to Decipher”) Perceived Speed: Cogni;ve Load
  20. 20. @rachelnabors Do your own math. Google “KLM GOMS.”
  21. 21. CAPTURING ATTENTION Anima&on for
  22. 22. It’s Alive! Animate Mo;on Captures A=en;on (2010) “(T)hese speeded responses appeared to be due to the perceived animacy of the objects… We conclude that animate motion does indeed capture visual attention.”
  23. 23. Animacy How “alive” something appears to be.
  24. 24. @rachelnabors If you want someone to notice something, make it bright and jiggly.
  25. 25. cracked.com/ar;cle_15239_the-5-most-annoying-banner-ads-internet_p5.html
  26. 26. Levels of Animacy and the Cone of Vision
  27. 27. @rachelnabors When everything vies for our attention, we don’t know what to focus on.
  28. 28. APPLIED TO USER INTERFACES Anima&on
  29. 29. @rachelnabors Animation is a visual representation of a rate of change over time. ;me loca;on
  30. 30. You use anima;on to indicate an element’s… Direction Solidity Momentum
  31. 31. Stateful Transi;ons
  32. 32. rachelnabors.com
  33. 33. fluevog.com
  34. 34. Supplemental Anima;ons
  35. 35. rachelnabors.com
  36. 36. magazine.good.is/ci;es
  37. 37. Causal Effects
  38. 38. rachelnabors.com
  39. 39. biology.allaboutbirds.org/features/fancymales/fancy-males
  40. 40. Decora;ve Anima;ons
  41. 41. rachelnabors.com
  42. 42. polygon.com/a/xbox-one-review
  43. 43. IN PRACTICE Anima&on
  44. 44. Storyboards
  45. 45. Key Poses or “Keys” From anima;on, two important poses that can be in-betweened.
  46. 46. @rachelnabors Look for page loads, AJAX, form submissions, any time the page or its content changes.
  47. 47. • Stateful Transi2ons when a user changes tasks • Supplemental Anima2ons when new informa;on appears • Causal Effects when a user interacts with a page Spo]ng Keys in your product
  48. 48. • Causality • Feedback • Loca;on • Progression • Transi;on • Physics Does the anima;on reinforce at least two of these?
  49. 49. BEST PRACTICES Anima&on
  50. 50. and @RachelNabors How to Not Set Everything on Fire with Motion & Animation and @RachelNabors How to Not Set Everything on Fire
  51. 51. –a Shaker saying “Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.” deligh1ul
  52. 52. Short and sweet…
  53. 53. Three ;meframes for user a_en;on 100 ms, instantaneous 1 second, still connected
  54. 54. Three ;meframes for user a_en;on 100 ms 1 second 10 seconds, disconnected
  55. 55. rachelnabors.com
  56. 56. –Studio anima;on rule of thumb “However long your pre-production animation, halve its duration… then halve it again.”
  57. 57. rachelnabors.com
  58. 58. @rachelnabors 250~300 ms: sweet spot for many animations
  59. 59. …but not too fast.
  60. 60. @rachelnabors Faster != Better
  61. 61. rachelnabors.com
  62. 62. What just happened?
  63. 63. Be invisible
  64. 64. I thought it was cute the first time but by the 70th… It’s annoying!
  65. 65. I only ever wanted to be loved…
  66. 66. Install a kill switch.
  67. 67. Op;on 1: Give No;ce This site uses anima;on and mo;on. Disable it?
  68. 68. Op;on 2: Ask First This site uses anima;on. How would you like to experience it? Full anima;on Reduce anima;on Disable anima;on
  69. 69. Op;on 3: Change Se]ngs Accessibility Settings Anima;on preferences: Full anima;on Reduce anima;on Disable anima;on
  70. 70. devToolsChallenger.com
  71. 71. Animate deliberately.
  72. 72. @rachelnabors Use animation deliberately or not at all.
  73. 73. JUST REMEMBER!
  74. 74. Find your project’s key “frames.”
  75. 75. • Stateful Transi2ons • Supplemental Anima2ons • Causal Effects • Decora2on* *used sparingly The four kinds of anima;on
  76. 76. go forth and Animate Responsibly @RachelNabors WebAnima)onWeekly.com

×