Interface Transitions (South by Southwest 2013)
?
0 likes?157 views
Audio transcript: http://coreychandler.net/talks/sxsw2013/interfacetransitionsaudio.m4a Presenters: Corey Chandler & Jorge Furuya
![Creates a subtle effect that enhances the overall
experience of an application subconsciously
[Discreet]
Monday, March 11, 13](https://image.slidesharecdn.com/interfacetransitions-160526015434/85/Interface-Transitions-South-by-Southwest-2013-27-320.jpg)
![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](https://image.slidesharecdn.com/interfacetransitions-160526015434/85/Interface-Transitions-South-by-Southwest-2013-32-320.jpg)
![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](https://image.slidesharecdn.com/interfacetransitions-160526015434/85/Interface-Transitions-South-by-Southwest-2013-37-320.jpg)
![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](https://image.slidesharecdn.com/interfacetransitions-160526015434/85/Interface-Transitions-South-by-Southwest-2013-44-320.jpg)
Interface Transitions (South by Southwest 2013)
- 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
- 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