The document discusses various techniques for transitions in user interfaces, including stepping, riffling, glancing, pivoting, drilling into detail, immersing, and changing. It provides examples of interfaces that effectively use these techniques through behaviors like parallax scrolling, zooming, flipping pages, subtle animations, and playful bounces. The document emphasizes that transitions should be subtle, mindful, consistent, and occasionally playful to enhance the user experience.

1. The Power of Transitions
ON REACTION

2. This introduction is a transition.
I’m a sci fi geek
I wrote things with cool people
who teaches UX Design

3. What you really want to know…
What will I hear about, and
from which perspective?

7. No focus on transitions
other than a communication
about “connecting” between
each step.
My Verizon Mobile

8. Breadcrumbing>all>the>way>into>a>view
is an easy way to get lost.
!
Pasquale D’Silva, Elepath

9. 1 2 3 4

10. The moment my
mind was blown
Clear

12. Antonio De Pasquale

13. Monument Valley
!
Building anticipation
and setting tone

15. Human
Behaviors

16. Stepping

17. What is important?
The end point…
the beginning…
or the journey?

18. Behavior:
Stepping
Techniques:
Exaggeration,
Bounce
Nice use of:
Peripheral Hints,
Dominance
Duolingo

19. Great uses of BOUNCE
1. Feedback that a swipe can go no
further with a single gesture

20. Behavior:
Stepping / Riffling
Techniques:
Pinning, Extension
Nice use of:
Content & Category
Association
Facebook Paper

21. 1 1 1
2 2 2 2 2 2 22 22

22. Riffling

23. Behavior:
Riffling
Techniques:
Parallax / Z Space
Nice consideration of:
Peripheral “Vision”
Yahoo! Weather App

24. http://alistapart.com/article/the-z-axis-designing-for-the-future

25. Behavior:
Stepping / Riffling
Techniques:
Z Space Layering
Nice use of:
Maintaining Context,
Extension
Gmail

26. 1 2a0
2a
2b
2c
2d
2e
2f

27. Behavior:
Riffling
Techniques:
Automatic Play on
Focus
Nice use of:
Anticipation,
Attention Shifting
Vine

28. Glancing

29. Behavior:
Glancing
Nice use of:
Maintaining
Context, Position
Outside the Box

30. Behavior:
Glancing
Techniques:
Reference from the
Bottom, Page Turn
Nice use of:
Attention Switching
Duolingo

31. Pivoting

32. Behavior:
Pivoting
Techniques:
Sliding Tabbed
Panels, Bounce
Nice example of:
Maintaining Context
Google Search

33. Great uses of Bounce
1. Feedback that a swipe can go no
further with a single gesture
2. Building an understanding on how
a UI element can be interacted
with, AKA “Feedforward”

34. Not this…

35. Drilling
Into Detail

36. Behavior:
Drilling Into Detail
Techniques:
Gradual Blur,
Darken
Nice use of:
Attention Shifting,
Staging
Yahoo! Weather App

37. Behavior:
Drilling Into Detail
Techniques:
Fading, Carrying Over,
Pinning, Sizing
Nice example of:
Maintaining Context
Through Steps
Instacart

38. Techniques:
Flipping
Nice example of:
Associating Paired
Information
Buster

39. Immersing

41. Behavior:
Immersing
Duolingo

42. Behavior:
Immersing
Techniques:
Sizing, Color Shifting
Nice use of:
Tunneling/Zooming
Duolingo

43. Behavior:
Immersing
Techniques:
Skeumorphism,
Folding, Slight Arc
Nice use of:
Visual Hints,
Character
Facebook Paper

44. 1
2 2 2
3 3 3
2
3
2
3

45. Changing

46. Behavior:
Changing
Techniques:
Playful Animation
Nice use of:
Expressing Status
Change, Personality
Tumblr

47. Behavior:
Changing
Techniques:
Spreadable Items,
Transitions in Between
Spaces, Focus
Nice use of:
View/Edit Switching,
Help Text
Clear

48. Behavior:
Changing
Techniques:
Color Shifting
Nice use of:
Gesture Distance
Mailbox

49. Some suggestions…

50. be Subtle

51. “IOS 7 Is Reportedly Making People Sick”
FastCompany, Sept 2013

53. be Subtle
be Mindful
be Consistent

54. Inconsistency
NYPD

55. be Subtle
be Mindful
be Consistent
be Playful… when it’s playtime

56. Great uses of Bounce
1. Feedback that a swipe can go no
further with a single gesture
2. Building an understanding on how
a UI element can be interacted
with, AKA “Feedforward”
3. Playfulness!

57. Bounce!
Dots

60. Wren Lanier
The Z-Axis: Designing for the Future
…think about a menu as a piece of
content in and of itself, and not just
more interface cruft.
Presenting a menu to the user… can
be more than popping up or sliding
over from the left—it can be an
opportunity for surprise and delight.

61. Tools

62. Antonio De Pasquale

63. Inspiration

64. http://www.ui-transitions.comJohannes Tonollo

65. Pasquale Doble
Pasquale D’Silva
Elepath
Antonio De Pasquale
Frog Milan

66. Ease
Cushion
Sizzle
Shiver
Zoom
!
Hug
Bounce
Lumber
Swoon
Glide
!
Shatter
Rocket
Explode
Subtle
?
In-Your-Face
Redonkulous
Collect Verbs

67. Challenge!
Carolyn Chandler
carolyn.ux@gmail.com
@chanan