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
ANIMATE A SMARTER UI
Tips for motion on the web@fourgrant and @gabemartin
#smarterUI
It’s your job to adapt
Learn more about the stuff we offer on our website.
Evolution & Adaptation
Call to Action!
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
Learn more about the stuff we offer on
our website.
Call to Action!
Evolution & Adaptation
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
Learn more about the stuff we offer on our website.
Call to Action!
Evolution & Adaptation
Animation can add life
Animation can add space
Animation can add delight
Only use animation when it improves user experience
The Golden Rule:
5 reasons to use web animation
Focus
Focusclarify an action
isolate specific content
direct user attention
Focus Clarify an action
Focus Isolate specific content
Focus
clarify an action!isolate specific content
Direct user attention
Focus Hint
Hint
Hintguide the user
suggest an action
highlight an option
Hint Guide the user
Gmail tab example (removed)
Hint Suggest an action
Hint Highlight an option
Focus NotifyHint
Notify
Notifyshow that content requires attention
alert the user to updates
inform the user of new content
Notify Show that content requires attention
Facebook Message example
Notify Alert the user to updates
Notify Alert the user to updates
Notify Inform the user of new content
Focus
React
NotifyHint
React
Reactgive confidence to user
confirm an action
prove the interface is working
React Give confidence to the user
React Confirm an action
React Prove the interface is working
Focus
React
NotifyHint
Orient
Orient
Orientshow user’s relationship to content
give context
expand virtual space
Orient Show user’s relationship to content
Orient Give context
Orient Expand virtual space
Focus
React
NotifyHint
Orient Personify
Personify
Personify
Personify
Personify
Focus
React
NotifyHint
Orient Personify
Focus
React
NotifyHint
Orient Personify
Only use animation when it improves user experience
The Golden Rule:
Code Demo
Thank you