Animating the User Experience
Report
Rachel NaborsFollow
Apr. 15, 2014•0 likes•14,712 views
37 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Animating the User Experience
Apr. 15, 2014•0 likes•14,712 views
37 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Design
Business
Technology
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.
Rachel NaborsFollow
Animating the User Experience
- The Future of UX Animation on the Brain with @RachelNabors
- It’s true. RacheltheGreat.com
- surgery.
- RachelNabors.com/archive
- google.com/design/spec/anima;on/authen;c-mo;on.html
- ibm.com/design/language/framework/interac;on/mo;on.shtml
- lightningdesignsystem.com/design/mo;on
- homestarrunner.com
- THE BRAIN’S GPU Anima&on &
- Dropdown courtesy of Codrops
- Jump Cut From film, when the camera cuts directly to a different perspec;ve.
- Inner Sanctum, 1948
- UI credit: codrops.com
- In-Betweening From anima;on, drawing all the poses “in between” two important poses.
- What just happened?
- “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)
- @rachelnabors Cognitive load has a cost that rivals page load cost.
- Jump Cut Site Animated Site 0 1.25 2.5 3.75 5 3 seconds 2 seconds Perceived Speed: Page Load
- 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
- @rachelnabors Do your own math. Google “KLM GOMS.”
- CAPTURING ATTENTION Anima&on for
- 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.”
- Animacy How “alive” something appears to be.
- @rachelnabors If you want someone to notice something, make it bright and jiggly.
- cracked.com/ar;cle_15239_the-5-most-annoying-banner-ads-internet_p5.html
- Levels of Animacy and the Cone of Vision
- @rachelnabors When everything vies for our attention, we don’t know what to focus on.
- APPLIED TO USER INTERFACES Anima&on
- @rachelnabors Animation is a visual representation of a rate of change over time. ;me loca;on
- You use anima;on to indicate an element’s… Direction Solidity Momentum
- Stateful Transi;ons
- rachelnabors.com
- fluevog.com
- Supplemental Anima;ons
- rachelnabors.com
- magazine.good.is/ci;es
- Causal Effects
- rachelnabors.com
- biology.allaboutbirds.org/features/fancymales/fancy-males
- Decora;ve Anima;ons
- rachelnabors.com
- polygon.com/a/xbox-one-review
- IN PRACTICE Anima&on
- Storyboards
- Key Poses or “Keys” From anima;on, two important poses that can be in-betweened.
- @rachelnabors Look for page loads, AJAX, form submissions, any time the page or its content changes.
- • 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
- • Causality • Feedback • Loca;on • Progression • Transi;on • Physics Does the anima;on reinforce at least two of these?
- BEST PRACTICES Anima&on
- and @RachelNabors How to Not Set Everything on Fire with Motion & Animation and @RachelNabors How to Not Set Everything on Fire
- –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
- Short and sweet…
- Three ;meframes for user a_en;on 100 ms, instantaneous 1 second, still connected
- Three ;meframes for user a_en;on 100 ms 1 second 10 seconds, disconnected
- rachelnabors.com
- –Studio anima;on rule of thumb “However long your pre-production animation, halve its duration… then halve it again.”
- rachelnabors.com
- @rachelnabors 250~300 ms: sweet spot for many animations
- …but not too fast.
- @rachelnabors Faster != Better
- rachelnabors.com
- What just happened?
- Be invisible
- I thought it was cute the first time but by the 70th… It’s annoying!
- I only ever wanted to be loved…
- Install a kill switch.
- Op;on 1: Give No;ce This site uses anima;on and mo;on. Disable it?
- 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
- Op;on 3: Change Se]ngs Accessibility Settings Anima;on preferences: Full anima;on Reduce anima;on Disable anima;on
- devToolsChallenger.com
- Animate deliberately.
- @rachelnabors Use animation deliberately or not at all.
- JUST REMEMBER!
- Find your project’s key “frames.”
- • Stateful Transi2ons • Supplemental Anima2ons • Causal Effects • Decora2on* *used sparingly The four kinds of anima;on
- go forth and Animate Responsibly @RachelNabors WebAnima)onWeekly.com