animate a smarter ui: tips for motion on the web
DESCRIPTION
Join the conversation: #smarterUI Animate a Smarter UI: Tips for Motion on the Web Gabe Martin (@gabemartin) & Robby Grant (@fourgrant) Some of the mp4 examples are here: http://d.pr/f/xUx6/4DjJHI5t (not all but some) Description: You’ve seen them. The blinking, pulsing eyesores. Animations used by developers and designers who think “Because I can” is a good excuse. It’s not. On the web, there should be a reason for everything. Every transition, triggered event, and state change needs a purpose. In this session, we’ll cover the only 5 reasons to ever use web animations: 1. Focus 2. Notify 3. Hint 4. React 5. Orient (Plus one bonus — but it’s a secret.) We’ll break down each category, looking at what works and what doesn’t — and why. You’ll see some brilliant uses of UI animation. And some terrible displays of superfluous bouncies. Then, we’ll dig into some real code and give a live demo of creating some simple, purposeful animations with a little personality. You’ll leave with a few new tricks up your sleeve and a fresh outlook on animations on the web. http://schedule.sxsw.com/2014/events/event_IAP23559TRANSCRIPT
![Page 1: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/1.jpg)
ANIMATE A SMARTER UI
Tips for motion on the web@fourgrant and @gabemartin
#smarterUI
![Page 2: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/2.jpg)
It’s your job to adapt
![Page 3: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/3.jpg)
Learn more about the stuff we offer on our website.
Evolution & Adaptation
Call to Action!
![Page 4: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/4.jpg)
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
![Page 5: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/5.jpg)
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
![Page 6: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/6.jpg)
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
![Page 7: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/7.jpg)
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
![Page 8: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/8.jpg)
Learn more about the stuff we offer on
our website.
Call to Action!
Evolution & Adaptation
![Page 9: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/9.jpg)
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
![Page 10: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/10.jpg)
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
![Page 11: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/11.jpg)
Animation can add life
![Page 12: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/12.jpg)
Animation can add space
![Page 13: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/13.jpg)
Animation can add delight
![Page 14: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/14.jpg)
Only use animation when it improves user experience
The Golden Rule:
![Page 15: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/15.jpg)
5 reasons to use web animation
![Page 16: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/16.jpg)
Focus
![Page 17: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/17.jpg)
Focusclarify an action
isolate specific content
direct user attention
![Page 18: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/18.jpg)
Focus Clarify an action
![Page 19: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/19.jpg)
Focus Isolate specific content
![Page 20: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/20.jpg)
Focus
clarify an action!isolate specific content
Direct user attention
![Page 21: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/21.jpg)
Focus Hint
![Page 22: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/22.jpg)
Hint
![Page 23: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/23.jpg)
Hintguide the user
suggest an action
highlight an option
![Page 24: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/24.jpg)
Hint Guide the user
Gmail tab example (removed)
![Page 25: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/25.jpg)
Hint Suggest an action
![Page 26: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/26.jpg)
Hint Highlight an option
![Page 27: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/27.jpg)
Focus NotifyHint
![Page 28: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/28.jpg)
Notify
![Page 29: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/29.jpg)
Notifyshow that content requires attention
alert the user to updates
inform the user of new content
![Page 30: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/30.jpg)
Notify Show that content requires attention
Facebook Message example
![Page 31: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/31.jpg)
Notify Alert the user to updates
![Page 32: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/32.jpg)
Notify Alert the user to updates
![Page 33: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/33.jpg)
Notify Inform the user of new content
![Page 34: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/34.jpg)
Focus
React
NotifyHint
![Page 35: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/35.jpg)
React
![Page 36: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/36.jpg)
Reactgive confidence to user
confirm an action
prove the interface is working
![Page 37: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/37.jpg)
React Give confidence to the user
![Page 38: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/38.jpg)
React Confirm an action
![Page 39: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/39.jpg)
React Prove the interface is working
![Page 40: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/40.jpg)
Focus
React
NotifyHint
Orient
![Page 41: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/41.jpg)
Orient
![Page 42: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/42.jpg)
Orientshow user’s relationship to content
give context
expand virtual space
![Page 43: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/43.jpg)
Orient Show user’s relationship to content
![Page 44: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/44.jpg)
Orient Give context
![Page 45: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/45.jpg)
Orient Expand virtual space
![Page 46: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/46.jpg)
Focus
React
NotifyHint
Orient Personify
![Page 47: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/47.jpg)
Personify
![Page 48: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/48.jpg)
Personify
![Page 49: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/49.jpg)
Personify
![Page 50: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/50.jpg)
Personify
![Page 51: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/51.jpg)
Focus
React
NotifyHint
Orient Personify
![Page 52: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/52.jpg)
Focus
React
NotifyHint
Orient Personify
![Page 53: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/53.jpg)
Only use animation when it improves user experience
The Golden Rule:
![Page 54: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/54.jpg)
Code Demo
![Page 55: Animate a Smarter UI: Tips for Motion on the Web](https://reader033.vdocuments.site/reader033/viewer/2022051817/548436815806b5bd588b460a/html5/thumbnails/55.jpg)
Thank you