Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ANIMATE ASMARTERUI
Tips for motion on the web
@fourgrant and @gabemartin
#smarterUI
It’syourjob

toadapt
Learnmoreaboutthestuff
we offer on our website.
Evolution&Adaptation
Callto
Action!
Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation
Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation
Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation
Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation
Learn more about
the stuff we offer on
our website.
Callto
Action!
Evolution&Adaptation
Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation
Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation
Animationcanaddlife
Animationcanaddspace
Animationcanadddelight
Onlyuseanimation when
itimprovesuser experience
The Golden Rule:
5reasonsto use 

webanimation
Focus
Focus
clarify an action
isolate specific content
direct user attention
Focus Clarify an action
Focus Isolate specific content
Focus Direct user attention
Focus Hint
Hint
Hint
guide 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
Notify
show 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
React
give 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
Orient
show 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
Onlyuseanimation when
itimprovesuser experience
The Golden Rule:
CodeDemo
Thankyou
Upcoming SlideShare
Loading in …5
×

Animate a Smarter UI: Tips for Motion on the Web

2,759 views

Published on

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_IAP23559

Published in: Design
  • Be the first to comment

Animate a Smarter UI: Tips for Motion on the Web

  1. 1. ANIMATE ASMARTERUI Tips for motion on the web @fourgrant and @gabemartin #smarterUI
  2. 2. It’syourjob
 toadapt
  3. 3. Learnmoreaboutthestuff we offer on our website. Evolution&Adaptation Callto Action!
  4. 4. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  5. 5. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  6. 6. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  7. 7. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  8. 8. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  9. 9. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  10. 10. Learn more about the stuff we offer on our website. Callto Action! Evolution&Adaptation
  11. 11. Animationcanaddlife
  12. 12. Animationcanaddspace
  13. 13. Animationcanadddelight
  14. 14. Onlyuseanimation when itimprovesuser experience The Golden Rule:
  15. 15. 5reasonsto use 
 webanimation
  16. 16. Focus
  17. 17. Focus clarify an action isolate specific content direct user attention
  18. 18. Focus Clarify an action
  19. 19. Focus Isolate specific content
  20. 20. Focus Direct user attention
  21. 21. Focus Hint
  22. 22. Hint
  23. 23. Hint guide the user suggest an action highlight an option
  24. 24. Hint Guide the user Gmail tab example (removed)
  25. 25. Hint Suggest an action
  26. 26. Hint Highlight an option
  27. 27. Focus NotifyHint
  28. 28. Notify
  29. 29. Notify show that content requires attention alert the user to updates inform the user of new content
  30. 30. Notify Show that content requires attention Facebook Message example
  31. 31. Notify Alert the user to updates
  32. 32. Notify Alert the user to updates
  33. 33. Notify Inform the user of new content
  34. 34. Focus React NotifyHint
  35. 35. React
  36. 36. React give confidence to user confirm an action prove the interface is working
  37. 37. React Give confidence to the user
  38. 38. React Confirm an action
  39. 39. React Prove the interface is working
  40. 40. Focus React NotifyHint Orient
  41. 41. Orient
  42. 42. Orient show user’s relationship to content give context expand virtual space
  43. 43. Orient Show user’s relationship to content
  44. 44. Orient Give context
  45. 45. Orient Expand virtual space
  46. 46. Focus React NotifyHint Orient Personify
  47. 47. Personify
  48. 48. Personify
  49. 49. Personify
  50. 50. Personify
  51. 51. Focus React NotifyHint Orient Personify
  52. 52. Focus React NotifyHint Orient Personify
  53. 53. Onlyuseanimation when itimprovesuser experience The Golden Rule:
  54. 54. CodeDemo
  55. 55. Thankyou

×