Post on 28-Jan-2018
INTERFACE TRANSITIONS#UIFLOWCorey ChandlerJorge Furuya
Monday, March 11, 13
IntroductionsWhat are interface transitionsWhy use interface transitionsTransition typesWhen transitions go wrongGuidelines
Q&A
Monday, March 11, 13
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
InterfaceState 1
InterfaceState 2
Monday, March 11, 13
InterfaceState 2
InterfaceState 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 transition adds perceived value to these tools.
Monday, March 11, 13
Monday, March 11, 13
Motion -perhaps the most used tool for establishing transitions in interfaces- is a fundamental component of our reality and it helps us understand when somethingworks, when something is “normal” or “broken”, when something is “responsive” or “laggy”
Monday, March 11, 13
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
Monday, March 11, 13
Interface Transitions help us immerse people into the digital experiences we craft for them by reinforcing their “suspension of disbelief”
Monday, March 11, 13
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, 13
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 overall experience of an application subconsciously
Monday, March 11, 13
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 an application subconsciously
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
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
Monday, March 11, 13
Monday, March 11, 13
Monday, March 11, 13
DiscreetShowcaseEducationalProcessing
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 11, 13
...and keep your canvas in mind
Monday, March 11, 13
Q&A
Monday, March 11, 13