Here’s How Animation Makes Your Mobile Apps Better

So you wanna’ jump on that mobile app bandwagon. Maybe you want to expand your brand image, or you have a cool new idea for a mobile-based service. Whatever your intentions are with developing an app, the one thing that’s absolutely vital to understand is your user experience design. Yeah, it can feel a little pretentious to start whipping around terms like ‘UX Design’, but the crux of the idea is to create an overall beneficial experience for anyone using your app.

This leads us to the question: what design choices make an app more intuitively useful? And how can we best take advantage of existing animation techniques to give the best user value? Today we’re looking at five ways animation is commonly used in mobile apps to enhance user experience.

1) visual feedback

There is a saying that goes along the lines of: “Good design stands out. Great design is invisible.” This is no truer than in the case of creating a smooth user experience for mobile applications. How often have you really considered the fact that your favourite app has a button that momentarily lights up when you tap on it? Or that your favourite email client has an icon that swirls around when refreshing the list? Or that most swiping actions actually cause the screen to ‘slide’ with your finger movement instead of simply snapping to the next page?

These are the kinds of animations and design features that prevent change blindness in the user, which in turn helps foster an overall more comforting user experience. The comfort comes from the sense of control we feel from knowing and understanding the process we’re engaged in. For example, seeing that button light up when we tap on it assures us it’s been hit in the right spot. Whereas if we hit a button and nothing happens for a few seconds… is it broken? Did I miss the button with my finger? Or is the app just loading? Visual feedback helps give our brains a more seamless understanding of what action needs to be taken.

2) highlighting new or important features

Change blindness and aversion not only occurs in inexperienced users but also in long-time users, who become so used to an app’s functions they may be blind and/or resistant to product updates. To help curb this phenomenon, animated highlights can call attention to new features and where they’re located in a one-time animation that plays upon startup of the new version. These visual highlights are often minimalist motion graphics: for example, a coloured circle spotlight that centres in on a new button while transparently greying out other features, or a moving arrow that points to a new feature that would otherwise be hidden within a menu. The motion of the animation immediately draws the eye to the new feature’s location, eliminating the need to spend time explaining where the feature is.

3) visual branding

Many apps feature an animated logo which plays upon startup. Interestingly this can serve more than one function. Firstly, in some cases, a splash screen can help provide an interesting visual while the application is loading in the background. If an app is consistently taking a few seconds to boot up while in development, it’s worthwhile considering what visual cues can be added to help keep the user’s attention in the interim.

Secondly, animated logos which play on startup serve an important function in brand recognition. A very short animated logo is non-intrusive to the user but leaves a memory imprint when viewed on multiple occasions. A small (un-obnoxious) amount of animation gets the viewer’s attention while a quiet (again, make sure it’s not obnoxious) sound effect helps associate an aural memory with the use of the app. Exercise app maker ‘Fitness 22’ has a great example of an effective animated app logo as seen in their major suite of apps like 5K Run Trainer, 10K Runner, 100 Pushups, and 200 Situps. Simple white and green italicised text reading ‘Fitness 22’ wipes onto a dark grey screen along with three green animated ‘speed lines’. A quick and pleasantly shimmering ‘whoosh’ sound effect accompanies each animation. It’s light, streamlined, and evokes the feeling of speed and athleticism, perfect for a suite of fitness apps.

4) instruction / tutorials

Gone are the days of the software instruction manual. Bye bye, downloading a 500-page PDF of 10pt instruction text. These days many apps (and even some hardware) are taking advantage of motion graphic’s greatest strength: clarity. The idea is that clean, simple visuals greet brand new users and guide them through the basics of how to use the app, often with nothing more than a few swipes.

For an example, check out our last month’s article How Animation Is Used In Education, where we took a look at how the meditation app Headspace uses swipeable intro screens and animated videos to ease newbies into the concept of meditating.

5) game animation

Sometimes animation appears in apps as a seamless tool, but other times it’s the main star of the entertainment. Mobile games are almost 100% comprised of animated visuals – largely 2D digital cutouts and motion graphics – and the functions the animation serves within each game is countless. But even from a purely aesthetic standpoint, the style of animation can become a selling point itself.

Console-turned-mobile game Limbo uses black and white silhouettes against layered, blurred backgrounds to evoke an incredibly eerie yet beautiful design which is instantly recognisable with the game. In this way, animation choices for games like Limbo are made not just for practical reasons but also as a unique visual branding tool.