animate a smarter ui: tips for motion on the web
Post on 07-Dec-2014
1.606 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related