A talk about motion in user interface design.

1. Meaningful Motion in UI Design
Adrian Zumbrunnen / @azumbrunnen_

4. Flow

5. – Mihaly Csikszentmihalyi
The holistic experience that people
feel when they act with total
involvement.
“

12. Aiming for delight is not enough.It’s about creating smart interactions

13. Thinking in spatial terms

14. our perception of the world

15. spatial orientation

16. spatial orientation

17. The story continues off-screen

19. Write App

20. Elements Of Meaningful Transitions

21. Orientation

23. Moving from one information space to
another takes a certain amount of time.

27. Motion is not a detail. It makes or
breaks the experience.

30. Motion creates orientation
through relationships.

33. http://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design

34. http://alistapart.com/article/motion-with-meaning-semantic-animation-in-interface-design

37. “What’s your plan after chatbots take over,
and designers are no longer needed?”

38. Raphael Leiteriz
Director Product Management Google
“Fire you!”

41. Motion creates orientation
Takeaway:

42. Responsiveness
Elements Of Meaningful Transitions

43. anticipatory techniques

45. optimistic action: twitter

46. interactive animation

47. fade / reveal

49. Progressive disclosure

52. Good animation is responsive and tells a story
Takeaway:

53. Time
Elements Of Meaningful Transitions

54. Spatial time perception
🙃

55. Spatial time perception

56. Duration interpretation

57. The sweet spot

58. If motion slows down the
experience, you’re doing it wrong

60. Motion affects time perception
e=mc2

63. Duration adds significance
Takeaway:

64. Easing
Elements Of Meaningful Transitions

65. – Laurian Gridinoc, Creative Technologist
Out of all hand-throwable things,
socks have the most unpredictable
trajectory.
“

66. adapted from Pasquale D’Silva
Linear computer garbage

68. Animation curves
💩

69. Animation curves

70. Animation curves

72. If the motion curve isn’t right, the
animation won’t delight.

73. Focus in motion

74. If the motion curve isn’t right, the
animation won’t delight.
Takeaway:

75. Personality
Elements Of Meaningful Transitions

76. OS X Aqua

77. animation as rewards

78. facebook paper

79. facebook paper

82. https://dribbble.com/shots/1901531-Loading?list=users&offset=1

83. personality isn’t the experience.
it enhances it.
Takeaway:

84. Meaningful Motion in UI Design
Adrian Zumbrunnen / @azumbrunnen_

85. Orientation
Placebo choices
Why moments matter
The importants of sequence
Default behaviors

86. Orientation
Responsiveness
Why moments matter
The importants of sequence
Default behaviors

87. Orientation
Responsiveness
Time
The importants of sequence
Default behaviors

88. Orientation
Responsiveness
Time
Easing
Default behaviors

89. Orientation
Responsiveness
Time
Easing
Personality

90. Meaningful Motion in UI Design
Adrian Zumbrunnen / @azumbrunnen_
Takeaway:

91. Thanks!
Let’s keep the good times rolling.
I tweet about design and UX
@azumbrunnen_