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

1. ANIMATE ASMARTERUI
Tips for motion on the web
@fourgrant and @gabemartin
#smarterUI

2. It’syourjob
toadapt

3. Learnmoreaboutthestuff
we offer on our website.
Evolution&Adaptation
Callto
Action!

4. Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation

5. Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation

6. Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation

7. Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation

8. Learn more about
the stuff we offer on
our website.
Callto
Action!
Evolution&Adaptation

9. Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation

10. Learn more about the stuff
we offer on our website.
Callto
Action!
Evolution&Adaptation

11. Animationcanaddlife

12. Animationcanaddspace

13. Animationcanadddelight

14. Onlyuseanimation when
itimprovesuser experience
The Golden Rule:

15. 5reasonsto use
webanimation

16. Focus

17. Focus
clarify an action
isolate specific content
direct user attention

18. Focus Clarify an action

19. Focus Isolate specific content

20. Focus Direct user attention

21. Focus Hint

22. Hint

23. Hint
guide the user
suggest an action
highlight an option

24. Hint Guide the user
Gmail tab example (removed)

25. Hint Suggest an action

26. Hint Highlight an option

27. Focus NotifyHint

28. Notify

29. Notify
show that content requires attention
alert the user to updates
inform the user of new content

30. Notify Show that content requires attention
Facebook Message example

31. Notify Alert the user to updates

32. Notify Alert the user to updates

33. Notify Inform the user of new content

34. Focus
React
NotifyHint

35. React

36. React
give confidence to user
confirm an action
prove the interface is working

37. React Give confidence to the user

38. React Confirm an action

39. React Prove the interface is working

40. Focus
React
NotifyHint
Orient

41. Orient

42. Orient
show user’s relationship to content
give context
expand virtual space

43. Orient Show user’s relationship to content

44. Orient Give context

45. Orient Expand virtual space

46. Focus
React
NotifyHint
Orient Personify

47. Personify

48. Personify

49. Personify

50. Personify

51. Focus
React
NotifyHint
Orient Personify

52. Focus
React
NotifyHint
Orient Personify

53. Onlyuseanimation when
itimprovesuser experience
The Golden Rule:

54. CodeDemo

55. Thankyou