interface transitions (south by southwest 2013)

INTERFACE TRANSITIONS#UIFLOWCorey ChandlerJorge Furuya

Monday, March 11, 13

IntroductionsWhat are interface transitionsWhy use interface transitionsTransition typesWhen transitions go wrongGuidelines

Q&A


Corey Principal Ixd @ deep dive design@cchandler

Jorge Lead UX designer @ htc innovation@somasdf1


...Let me tell you a story...


What about transitions in other disciplines?


Opening

Theme

Transition

Beethoven 3, 1st Movement


TRANSITIONS IN INTERFACE DESIGN


Interface transitions are an event that takes place between two states of an interface


InterfaceState 1

InterfaceState 2


InterfaceState 2

InterfaceState 1

Transition


Why use Interface Transitions?


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.


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”


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


Interface Transitions help us immerse people into the digital experiences we craft for them by reinforcing their “suspension of disbelief”


What kind of transitions are out there?


Creates a subtle effect that enhances the overall experience of an application subconsciously[Discreet]


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


Educates the user as to how a system works[Educational]

Creates a subtle effect that enhances the overall experience of an application subconsciously


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


DiscreetShowcaseEducationalProcessing


Often times transitions are used and they combine different values


but some times transitions are used and...

...They go wrong


Guidelines. Or how to keep transitions useful and enjoyable


PROTOTYPE !


Consider introducing a discreet transition any time an experience suddenly changes


The more often an interface transition is triggered, the more likely it should be discreet


When adding showcase transitions make sure they are not accidentally introducing false educational elements


...and keep your canvas in mind


Q&A


interface transitions (south by southwest 2013)

Design