Principal Interaction Designer
Deep Dive Design
Jorge Furuya Mariche
Lead UX Designer
Interface transitions are the subtle (and sometimes not-so-subtle) transitions that take place between different points in a user experience. From the subtle effect of a pin dropping onto a map to the infamous Flash-based website splash-screens, interface transitions can add delight or dismay to the user experience. This session hopes to articulate the different types of interface transitions, show good and bad industry examples of their use, and help attendees be aware of how they can use interface transitions for their own work. As a bonus, we’ll even examine ways that other fields leverage conceptually similar transitions, including film, classical music, and architecture.
In many areas exist transitions, such as music, dance, architecture, and even culinary arts.
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.
Akinetopsia – the inability to perceive motion in our field of view accurately. It iss a neuropsychological disorder. It’s your mental ability to remove transitions between objects movements to fill in the gaps.
Interface Transitions help us immerse people into the digital experience.
Create a subtle, effect that enhances the overall experience of an application subconsciously. There are 4 different categories of transitions that a designer may want to invoke.
- Discreet: Transitions that you barely even notice that it is there. Fast motions that cause quick transitions often help soften the edges of your application.
- Showcase:This introduces a recognizable effect for the user to perceive and enjoy. Transitions the user is supposed to watch and enjoy. Think about a video game where you have to watch the character reload a gun in a first person perspective. This is a slow process and transitions from an empty gun to a full one. It makes you feel like you’re actually in the environment. The time introduced in this case is actually a game element as well.
- Educational: Educates the user as to how the system works. An initial transition that shows a user how to navigate a phone, for instance.
- Processing: Masks the processing time. For instance, a loading screen, but in an interesting way.
All of these effects can be abused, rather it be causing a usability issue, or long wait time.
Considerations when creating transitions:
- 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 (it gets annoying).
- When adding showcase transitions make sure they are not accidentally introducing false educational elements (such as things flying in from the side or bottom, without anything to do from that area).