Image: Ramotion

Animated Transitions in Mobile Apps

Animation is a big part of user experience. When it comes to transitions in mobile apps, there are a lot of things you can communicate very subtly with animation. Send the message, open Settings, check the box, navigate to another page — these are all moments of change. Animating a transition is an excellent way to reinforce the user’s action.

In this article, we’ll review the common cases when functional animation can complement the visual design and support interactions.

Provide system status

  • Confirm user action. Users get an acknowledgment that system receives the action. When users have visual feedback, this prevents them from tapping on the element again.
Notify users of the results of their actions. Image: Colin Garven
  • Update content on the page using pull to refresh. Visual feedback in the format of loading indicator helps users understand that system is working on their request.
Subtle animation helps users understand what is going on. Image: Ramotion
  • Waiting for content to load. Loading doesn’t have to be boring. Almost any app can utilize a subtle animation when loading it’s content to prevent users from going away. Loading animations keep the user occupied with visual feedback and as a result, users perceive a shorter wait time.
Animation can keep the user engaged even before the app fully loads. Image: UI8

Connect different steps in multi-step process

Below is an excellent example of how using animation can create a linear progression of events.

Image: Jakub Antalík

Animation can help designers to create progressive disclosure. Progressive disclosure makes the interface easier to learn by reducing the amount information presented at one time. Here are two great examples of using progressive disclosure to provide information in meaningful chunks:

Image: Ramotion
Image: Anton Skvortsov

Introducing new elements

Animation can show where new objects are coming from. Image: Virgil Pana

Give the user a sense of spatial orientation

We can use animation to guide the user. Animation helps to explain how information flows from one state to another are linked together. It keeps users from getting lost by giving the user information about what they’re going through right now.

Orientational animation lets you know where are you now in relation to where you came from. Image: Jae-seong, Jeong

In the following example, the floating action button (FAB) transforms into a header and makes it clear to the user how these two objects related to each other.

Animation can help you build a relationship between elements. Image: Anish Chandran

Minimize cognitive load

As designers, our goal should be in creating an interface that is easy to use. Animation, when used well, reduces user effort required to complete the task.

In almost any app users have to fill out some forms. Many forms have text placeholders as labels for fields. When users tap on such field, the label disappears. As a result, it becomes hard for the user to figure out what this field represents. Floating label helps users to keep the context and makes it comfortable to interact with long forms.

When it comes to user input, don’t rely on users memory. Make all critical information visible. Image: MDS

Allow users to comprehend the functional change

One common example of functional change which can be seen in many mobile interfaces is a toggle. Animation helps users understand what is the state of the element.

Button animates on tap so users can see the change. Image: Jurre Houtkamp

In some cases, the functional change of single element leads to the change of entire view. For example, a hamburger menu that changes to ‘X’ and activates a new view.

Make it clear to users that object utility was changed. Image: Tamas Kojo

Tools for creating animation and motion

Conclusion

Thank you!

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz


UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Nick Babich

Written by

Editor-in-chief of UX Planet (https://uxplanet.org). http://babich.biz

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade