Audio transcript: http://coreychandler.net/talks/sxsw2013/interfacetransitionsaudio.m4a Presenters: Corey Chandler & Jorge Furuya

1. INTERFACE TRANSITIONS
#UIFLOW
Corey Chandler
Jorge Furuya
Monday, March 11, 13

2. Introductions
What are interface transitions
Why use interface transitions
Transition types
When transitions go wrong
Guidelines
Q&A
Monday, March 11, 13

3. Corey Principal Ixd @ deep dive design
@cchandler
Jorge Lead UX designer @ htc innovation
@somasdf1
Monday, March 11, 13

4. ...Let me tell you a story...
Monday, March 11, 13

5. Monday, March 11, 13

6. Monday, March 11, 13

7. Monday, March 11, 13

8. What about transitions in other disciplines?
Monday, March 11, 13

9. Opening
Theme
Transition
Beethoven 3, 1st Movement
Monday, March 11, 13

10. Monday, March 11, 13

11. Monday, March 11, 13

12. TRANSITIONS IN INTERFACE DESIGN
Monday, March 11, 13

13. Monday, March 11, 13

14. Monday, March 11, 13

15. Interface transitions are an event that takes
place between two states of an interface
Monday, March 11, 13

16. Interface
State 1
Interface
State 2
Monday, March 11, 13

17. Interface
State 2
Interface
State 1
Transition
Monday, March 11, 13

18. Why use Interface Transitions?
Monday, March 11, 13

19. Interfaces are meant to be tools to support activities
and just like the tools we use in the physical world a
polished transition adds perceived value to
these tools.
Monday, March 11, 13

20. Monday, March 11, 13

21. Motion -perhaps the most used tool for establishing transitions in interfaces- is a
fundamental component of our reality and it helps us understand when something
works, when something is “normal” or “broken”, when something is “responsive”
or “laggy”
Monday, March 11, 13

22. Motion -perhaps the most used tool for establishing transitions in interfaces- is a
fundamental component of our reality and it helps us understand when something
is “normal” or “broken”, when something is “responsive” or “laggy”
Akinetopsia or the inability to perceive motion in our field of view actually is a
neuropsychological disorder
Monday, March 11, 13

23. Monday, March 11, 13

24. Interface Transitions help us immerse people into the
digital experiences we craft for them by reinforcing
their “suspension of disbelief”
Monday, March 11, 13

25. Monday, March 11, 13

26. What kind of transitions are out there?
Monday, March 11, 13

27. Creates a subtle effect that enhances the overall
experience of an application subconsciously
[Discreet]
Monday, March 11, 13

28. Monday, March 11, 13

29. Monday, March 11, 13

30. Monday, March 11, 13

31. Monday, March 11, 13

32. Introduces a recognizable effect for the user to
perceive and enjoy
[Showcase]
Creates a subtle effect that enhances the overall
experience of an application subconsciously
Monday, March 11, 13

33. Monday, March 11, 13

34. Monday, March 11, 13

35. Monday, March 11, 13

36. Monday, March 11, 13

37. Educates the user as to how a system works
[Educational]
Creates a subtle effect that enhances the overall
experience of an application subconsciously
Monday, March 11, 13

38. Monday, March 11, 13

39. Monday, March 11, 13

40. Monday, March 11, 13

41. Monday, March 11, 13

42. Monday, March 11, 13

43. Monday, March 11, 13

44. Masks the processing time
[Processing]
Introduces a recognizable effect for the user to
perceive and enjoy
Educates the user as to how a system works
Monday, March 11, 13

45. Monday, March 11, 13

46. Monday, March 11, 13

47. Monday, March 11, 13

48. Discreet
Showcase
Educational
Processing
Monday, March 11, 13

49. Often times transitions are used and they combine
different values
Monday, March 11, 13

50. Monday, March 11, 13

51. Monday, March 11, 13

52. Monday, March 11, 13

53. Monday, March 11, 13

54. but some times transitions are used and...
...They go wrong
Monday, March 11, 13

55. Monday, March 11, 13

56. Monday, March 11, 13

57. Monday, March 11, 13

58. Monday, March 11, 13

59. Monday, March 11, 13

60. Monday, March 11, 13

61. Guidelines. Or how to keep transitions useful
and enjoyable
Monday, March 11, 13

62. PROTOTYPE !
Monday, March 11, 13

63. Consider introducing a discreet transition any time an
experience suddenly changes
Monday, March 11, 13

64. The more often an interface transition is triggered,
the more likely it should be discreet
Monday, March 11, 13

65. When adding showcase transitions make sure they are
not accidentally introducing false educational elements
Monday, March 11, 13

66. ...and keep your canvas in mind
Monday, March 11, 13

67. Q&A
Monday, March 11, 13