Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
INTERFACE TRANSITIONS
#UIFLOW
Corey Chandler
Jorge Furuya
Monday, March 11, 13
Introductions
What are interface transitions
Why use interface transitions
Transition types
When transitions go wrong
Guid...
Corey Principal Ixd @ deep dive design
@cchandler
Jorge Lead UX designer @ htc innovation
@somasdf1
Monday, March 11, 13
...Let me tell you a story...
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
What about transitions in other disciplines?
Monday, March 11, 13
Opening
Theme
Transition
Beethoven 3, 1st Movement
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
TRANSITIONS IN INTERFACE DESIGN
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Interface transitions are an event that takes
place between two states of an interface
Monday, March 11, 13
Interface
State 1
Interface
State 2
Monday, March 11, 13
Interface
State 2
Interface
State 1
Transition
Monday, March 11, 13
Why use Interface Transitions?
Monday, March 11, 13
Interfaces are meant to be tools to support activities
and just like the tools we use in the physical world a
polished tra...
Monday, March 11, 13
Motion -perhaps the most used tool for establishing transitions in interfaces- is a
fundamental component of our reality a...
Motion -perhaps the most used tool for establishing transitions in interfaces- is a
fundamental component of our reality a...
Monday, March 11, 13
Interface Transitions help us immerse people into the
digital experiences we craft for them by reinforcing
their “suspensi...
Monday, March 11, 13
What kind of transitions are out there?
Monday, March 11, 13
Creates a subtle effect that enhances the overall
experience of an application subconsciously
[Discreet]
Monday, March 11,...
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Introduces a recognizable effect for the user to
perceive and enjoy
[Showcase]
Creates a subtle effect that enhances the o...
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Educates the user as to how a system works
[Educational]
Creates a subtle effect that enhances the overall
experience of a...
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Masks the processing time
[Processing]
Introduces a recognizable effect for the user to
perceive and enjoy
Educates the us...
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Discreet
Showcase
Educational
Processing
Monday, March 11, 13
Often times transitions are used and they combine
different values
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
but some times transitions are used and...
...They go wrong
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
Guidelines. Or how to keep transitions useful
and enjoyable
Monday, March 11, 13
PROTOTYPE !
Monday, March 11, 13
Consider introducing a discreet transition any time an
experience suddenly changes
Monday, March 11, 13
The more often an interface transition is triggered,
the more likely it should be discreet
Monday, March 11, 13
When adding showcase transitions make sure they are
not accidentally introducing false educational elements
Monday, March ...
...and keep your canvas in mind
Monday, March 11, 13
Q&A
Monday, March 11, 13
Upcoming SlideShare
Loading in …5
×

Interface Transitions (South by Southwest 2013)

91 views

Published on

Audio transcript: http://coreychandler.net/talks/sxsw2013/interfacetransitionsaudio.m4a

Presenters: Corey Chandler & Jorge Furuya

Published in: Design
  • Be the first to comment

  • Be the first to like this

Interface Transitions (South by Southwest 2013)

  1. 1. INTERFACE TRANSITIONS #UIFLOW Corey Chandler Jorge Furuya Monday, March 11, 13
  2. 2. Introductions What are interface transitions Why use interface transitions Transition types When transitions go wrong Guidelines Q&A Monday, March 11, 13
  3. 3. Corey Principal Ixd @ deep dive design @cchandler Jorge Lead UX designer @ htc innovation @somasdf1 Monday, March 11, 13
  4. 4. ...Let me tell you a story... Monday, March 11, 13
  5. 5. Monday, March 11, 13
  6. 6. Monday, March 11, 13
  7. 7. Monday, March 11, 13
  8. 8. What about transitions in other disciplines? Monday, March 11, 13
  9. 9. Opening Theme Transition Beethoven 3, 1st Movement Monday, March 11, 13
  10. 10. Monday, March 11, 13
  11. 11. Monday, March 11, 13
  12. 12. TRANSITIONS IN INTERFACE DESIGN Monday, March 11, 13
  13. 13. Monday, March 11, 13
  14. 14. Monday, March 11, 13
  15. 15. Interface transitions are an event that takes place between two states of an interface Monday, March 11, 13
  16. 16. Interface State 1 Interface State 2 Monday, March 11, 13
  17. 17. Interface State 2 Interface State 1 Transition Monday, March 11, 13
  18. 18. Why use Interface Transitions? Monday, March 11, 13
  19. 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. 20. Monday, March 11, 13
  21. 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. 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. 23. Monday, March 11, 13
  24. 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. 25. Monday, March 11, 13
  26. 26. What kind of transitions are out there? Monday, March 11, 13
  27. 27. Creates a subtle effect that enhances the overall experience of an application subconsciously [Discreet] Monday, March 11, 13
  28. 28. Monday, March 11, 13
  29. 29. Monday, March 11, 13
  30. 30. Monday, March 11, 13
  31. 31. Monday, March 11, 13
  32. 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. 33. Monday, March 11, 13
  34. 34. Monday, March 11, 13
  35. 35. Monday, March 11, 13
  36. 36. Monday, March 11, 13
  37. 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. 38. Monday, March 11, 13
  39. 39. Monday, March 11, 13
  40. 40. Monday, March 11, 13
  41. 41. Monday, March 11, 13
  42. 42. Monday, March 11, 13
  43. 43. Monday, March 11, 13
  44. 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. 45. Monday, March 11, 13
  46. 46. Monday, March 11, 13
  47. 47. Monday, March 11, 13
  48. 48. Discreet Showcase Educational Processing Monday, March 11, 13
  49. 49. Often times transitions are used and they combine different values Monday, March 11, 13
  50. 50. Monday, March 11, 13
  51. 51. Monday, March 11, 13
  52. 52. Monday, March 11, 13
  53. 53. Monday, March 11, 13
  54. 54. but some times transitions are used and... ...They go wrong Monday, March 11, 13
  55. 55. Monday, March 11, 13
  56. 56. Monday, March 11, 13
  57. 57. Monday, March 11, 13
  58. 58. Monday, March 11, 13
  59. 59. Monday, March 11, 13
  60. 60. Monday, March 11, 13
  61. 61. Guidelines. Or how to keep transitions useful and enjoyable Monday, March 11, 13
  62. 62. PROTOTYPE ! Monday, March 11, 13
  63. 63. Consider introducing a discreet transition any time an experience suddenly changes Monday, March 11, 13
  64. 64. The more often an interface transition is triggered, the more likely it should be discreet Monday, March 11, 13
  65. 65. When adding showcase transitions make sure they are not accidentally introducing false educational elements Monday, March 11, 13
  66. 66. ...and keep your canvas in mind Monday, March 11, 13
  67. 67. Q&A Monday, March 11, 13

×