Guiding the way

Designing transitions to keep your users from getting lost

Animated transitions between screens are omnipresent across digital apps, and they’re a great way to create a smoother user experience beyond the separate web pages of yesteryear. But it’s easy to throw transitions around without thinking about why they provide a nicer experience:

Transitions guide the user through the app without having to explicitly tell them the way.

Humans are used to orienting themselves in a space. If you walk through a building you know where you came from and which direction to go back; in digital experiences we need to provide this reference point for users. Transitions allow users to know where they are in your app, and how to move around.

For example, this is a simple transition example where the user moves through screens in a different direction depending on the context.

This is how the user sees your app. But it’s important for us as designers to look at the screens as a larger connected canvas. Think of your screens in 3D space and treat your current screen as a window into a certain area of that canvas.

When a user moves through your app, they remember where they came from, and therefore know how to navigate back.

By keeping this large canvas in mind you can tap into your users’ innate spacial understanding, and provide directions on their journey through your app.

[30 Second Design] is a series of quick and easy visual and UX designs tips to help you craft better experience.