How we can improve both, the process and the way we think about animations to generate captivating user interfaces that are effectively easier to use.

3. Smart Transitions in UI Design
Adrian Zumbrunnen / @azumbrunnen_

6. Flow

7. – 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. districts

16. layers

17. nodes

18. spatial representation

19. spatial orientation

20. spatial orientation

24. Write App

25. The Elements of Smart Transitions

26. Orientation
1

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

32. orientation through details

35. google.com/design

36. Responsiveness
2
https://dribbble.com/shots/1717944-Material-Design-Keynote-Animation

37. performing actions optimistically

38. optimistic action: twitter

39. seamless top of mind actions

40. pull to refresh

41. responsive fade / reveal

42. smart progressive disclosure

45. animations tell stories.

46. https://dribbble.com/antalik
Time
3

48. time is relative.

49. – Albert Einstein
An hour sitting with a pretty girl on a
park bench passes like a minute, but a
minute sitting on a hot stove seems like
an hour.
“

50. perception changes our reality.

53. linear ease

55. Cushioning
4

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

57. Source: Transitional Interfaces

58. Source: Transitional Interfaces

60. easing makes our user interfaces behave
in a more natural way

61. State Abstraction
5

64. http://fian.my.id/marka/

65. state abstraction is about steadily
communicating the state of a UI to the user

66. Personality
6

68. facebook paper

69. facebook paper

71. nike make app

72. nike make app

73. yahoo news digest

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

76. personality is key in creating
memorable experiences

78. Communicating animation

79. 1. Refer to examples
- capptivate.com
- dribbble
- userinterfaces.io
- useyourinterface.com
- hoverstat.es

80. 2. Apple Keynote

82. 3. After Effects

83. A user interface from hell

85. 4. Framer

87. 5. Invision

89. 6. Use understandable vocabulary
Or how to talk about easing

92. Thanks!
Let’s keep in touch! We can exchange on talk on the
following platforms:
web: azumbrunnen.me
twitter: @azumbrunnen_
mail: azumbrunnen@gmail.com