How to use animation in mobile apps

[Rss Bot 1]

A good mobile app must boast a great UI design and an engaging user experience, of course, but people also judge by appearances. In a crowded marketplace, developers must make sure that their app is beautiful enough to stand out.

I work at EffectiveSoft, a custom applications development consultant, which often advises developers on integrating animations into their UIs in order to win over customers. Get it right, and it really works.

However, that's not as easy as it sounds. Use too many animations or use them in the wrong places, and it can create an irritating or noisy experience. Animations, when used properly, help reduce cognitive load, attract and direct users’ attention, and make an experience easier to follow.

So, when are animations appropriate? This article pulls together some best practices for using animation in mobile apps.

01. Animated app launch screens

Studies show that people expect apps to load instantly, but with complex mobile apps this isn’t always possible. Loading animations can help distract users and make the load time appear shorter than it is. There are a lot of different animation options for load screens. 

A simple option is to use an animated logo, as Édouard Puginier has done here in his design for the launch screen of Wit. 

App launch screens are prime locations for animations

Other designers like to get more creative, and tie their animation in with the theme of the app itself or the rest of the branding. In the loader design below, Anton Drokov has animated a spacecraft travelling to the stars.

Theme your animations to create excitement as your app loads

02. Animated login screens

Some apps ask users to log in before they launch. Here, an awesome background illustration can help liven up a login screen, and keep new users on side so they’re willing to take the time to log in.

In the login animation below, @herac1es has used a time-lapse animation of a busy city to add momentum to the process of logging in.

Jazz up a login screen with animation

Other apps use animation to distract the viewer while they check the username and password that has been entered. In the space-inspired concept below, Oliver Günther has even designed an error state.

Getting your password wrong has never been so fun

03. Animated onboarding screens

Software developers understand the importance of the onboarding process. This helps first-time users to become familiar with the app – there’s a real risk people will abandon the app if they do not understand how to work with it.

Showing static slides to users is a common approach to the onboarding experience, but animated walkthroughs are much more engaging, as this calming onboarding animation from Zhenya & Artem proves.

Walk users through the app with animation

04. Animated progress and activity indicators

It is common knowledge that people are impatient and hate waiting. Developers do their best to ensure their apps work smoothly and speedily but sometimes waiting is inevitable – for example, when something needs to be loaded or a new element is installed.

Apps often employ animated progress or activity indicators to capture users’ attention. These could be circular or linear, and developers tend to choose indeterminate indicators for operations that are performed quickly, and determinate indicators for actions that take more than two to three seconds.

However, some app designers make their activity indicators more distinctive. For example, Domaso’s circular progress indicator has been turned into a cute cat that stretches as it moves.

What else could be a fun play on the spinning wheel?

Andrey Davlikanoff has also plumped for a cute creature. His tiny snail moves forward to indicate progress.

This is certainly more fun than most progress indicators

Other developers have chosen to tap into our obsession with food. Such indicators are a great choice for mobile apps that deal with food delivery, recipes or cooking. For instance, Giedrius Butkus’ mouthwatering pizza preloader design would fit a pizza delivery app perfectly.

Just hope your users don't get hangry

Roman Kryzhanovskyi has opted for a simpler, geometric design in his Android app server search progress screen.

We love the sonar-style ripple effect (You might have to refresh to make this one play)

Finally, Mark Martemianov has decided to combine a circular and linear progress indicator in his Material Design-style subscription button. 

Next page: UI animation ideas for buttons, menus and error pages

05. Animated buttons and controls

Developers extensively make use of animations when it comes to different buttons and controls. A common example might be an animated handset to indicate there is an incoming call –  as in this design by Andreas Storm.

Animated toggle buttons are also popular. The toggle switch below, by Tsuriel, enables the user to switch between day and night modes.

06. Menus

Mobile app menus offer plenty of scope for imagination. Most designers use different fonts and backgrounds to make them beautiful. Some go a step further and take advantage of animated buttons and fonts to make their apps to be even more distinctive. This charming menu animation from Anastasiia Andriichuk is a sweet surprise for users.

07. Pull-to-refresh

Both users and developers love swipe-to-refresh patterns. This method for updating content involves a physical interaction between the human being and the app, almost like a dialogue between the two.

This pull-to-refresh animation from Jon Rundle takes a simple approach, with a satisfying elastic bounce effect when the user lifts their thumb.

In other cases, more complex animations can work better. Ramotion’s liquid pull-to-refresh animation for Dribbble adds a touch of fun to the experience.

It's a good idea to use animations that match the overall style or subject of the app. Dmytro Prudnikov’s design for a rentals app gives the user a cheeky peek of a skyscraper in the sunshine.

08. Error pages

In an ideal world, errors would never occur. But realistically, sometimes things don't go to plan. Putting some effort into your error pages can help diffuse the frustration of hitting a dead end. A custom error page can help retain users.

Sathish Kumar's 'no internet' animation shows a bee falling out of the sky when the user's connection isn't working properly.

These kind of animations work well when designed in tandem with other error pages – for example, Kumar has designed an accompanying animation for when something goes wrong, which shows a bee being blown off course – sure to take the sting out of not getting the information you were expecting

Similarly, Scott M Thigpen's design for a weather app introduces an element of surprise and humour when an error page occurs.

Related articles: 

• Understand the 12 principles of animation
• Supercharge SVG animations with GSAP
• A beginner's guide to designing interface animations

View the full article