Animation and motion design has wiggled its way into most aspects of our lives at this point. It’s on our computer screens, in advertisements, and all over our mobile devices — and it’s easy to see why: motion catches our attention. It’s probably part of the reason Facebook has auto-play enabled on all of our newsfeeds (we stop scrolling when a video starts playing).
Over time (long before smart devices!), our minds have been trained to seek out moving objects. It helped cavemen hunt for food and to avoid predators in the same way modern humans look for animals crossing the road at night in front of our cars. Moving objects are the thing that’s “different,” so we see them more easily.
It’s this thought process that has caused animation to make its way into mobile app design. After all, if we can draw the user’s attention to specific areas, we can help them more efficiently use our mobile apps. At the very least, we should be able to improve their user experience. But how should we add animation without compromising our design philosophy?
Be Purposeful with Your Animation
First and foremost, a critical component to getting animation and motion design right is to be purposeful about it. Adding animation to your mobile app for the simple sake of saying you did it isn’t good enough and may end up annoying your users more than helping them. Any motion incorporated into your overall design needs to be there for a reason.
The reason doesn’t have to be a big one, per se, but it does have to be a good one — one that helps your company move toward an overall goal, such as making users feel more comfortable with your product, to keep them engaged, or to familiarize them with your mobile app. Here are some of the most common (and more useful) ways of incorporating animation into your mobile app.
Loading Animation
An easy way to plug purposeful animation into your mobile app is to do it while the app or a new page is loading. This doesn’t have to be elaborate or incredibly complicated. Many apps have a spinning something or other to indicate that the app is “thinking.” Most of the time, it’s a circle made up of dots that illuminate one by one to give the illusion of spinning, but with just a little bit more effort, those dots could become an object that aligns with your branding.
Years ago, little animations like this popped up across the Internet as “pre-loaders.” They might show a percentage of the website that was loaded accompanied by a kind of spinning object. This was most prevalent among web pages that used Flash, but it was also in a period of time when Internet speeds were slower. It wasn’t unusual to wait for web pages to load and designers didn’t want visitors to think the page was broken and abandon it before it finished loading.
Thankfully, computers and Internet service providers have largely fixed these loading issues and pre-loaders have all but disappeared. But some mobile app designers have found short animations along these same lines to be useful, popping them into components of their apps as they feel necessary.
For example, the Pinterest app has an animated button that spins out of the middle of the screen and toward the user while a new page is loading (like the search page or notifications page). As the content loads, the button spins back and away from the user, fading behind the images that replace it.
It’s a simple little animation that lets the user know the app is still working (to prevent the user from quitting the app or pulling down to refresh, thinking it’s frozen) and to provide a little entertainment while the mobile app is loading new content. But there’s no reason to limit animation’s reach to loading a new page — why not loading your app?
Again, this could be a very simple little thing because the point is to not alienate your user. Attention spans are short these days and we need to make sure people don’t give up on us because the app took three whole seconds to load. If you need some inspiration (or are looking to hire an animator), these guys have some pretty sleek ideas and links to resources.
Animated Tutorials to Onboard or Explain New Features
Onboarding new users and updating your app with new features are prime opportunities for incorporating animation into your mobile app design. It’s unlikely that users read the “what’s new” section in the app store when updating their mobile apps — most of us just hit “update all” and wait (impatiently) for them to finish.
But even if your users are the fastidious types that read every word, they may not know where to find the new features, which means your users aren’t getting the full experience with your app. A relatively easy way to introduce users (whether loyal or new) to your new features is to create a short animation that walks them through changes. It can launch when they first open the app post-update and provide a quick tour.
For new users who’ve downloaded the app for the first time, a slightly longer (but not irritatingly long) animation to lay the groundwork for how to accomplish tasks in your mobile app is perfect. You get to show off your most important features in a way that shows people how to most effectively use your app, which gives new users a proper understanding of the goals you’ve set forth in your mobile app design.
Product design and development agency Ramotion has a great example of an animated tutorial for Tile. They created an onboarding animation that quickly shows new users how to easily pair a Tile with their app, as well as how to find a Tile that’s been lost or misplaced. It doesn’t take long and users can swipe through it at their own pace.
We’re willing to bet the animation empowers new Tile users to actually use the product, rather than put it in the junk drawer. There’s nothing worse than investing in a product and then setting it aside because you don’t know how to use it — especially in a stressful time like not being able to find your keys when you’re already running late to an event. If you’re looking for those keys, you need to be able to get that app working pronto and the animation should be able to help with that. Remember that the more confident people feel when using your product, the more often they’ll use it.
Transition Animation
Animated transitions to a new page or feature of your app is one of the simplest and most common types of animation and when done well, they can add polish and refinement to your mobile app design. Again, they don’t have to be big to-dos. They can be simple swipes, dissolves, or motions that add fluidness to the UX.
For example, the background of the default weather app that comes with Apple’s iOS shows a visual representation of the weather in the city in which the user is currently viewing the forecast. If the user swipes in either direction to view another city (say, the one she’ll be vacationing in next week), the background fluidly dissolves into the appropriate visual. Perhaps she went from cloudy to sunny (hopefully) or clear to stormy (hopefully not).
The Major League Baseball (MLB) Ballpark app also has simple animated transitions that give an overall polished look to their design. Tapping on “teams” causes a page with all 30 MLB teams to slide up from the bottom. Tapping on “tickets” or “ballpark” toggles between the two pages with a lovely little sideways slide. They aren’t complicated, but they make it apparent to the user that the designers put a lot of thought into the UX.
Don’t Let Animation Slow Your Mobile App Down
One of the most frequent fears of animation is that it will slow your app down, which is the opposite of what you’re going for here. The animation is meant to hide any lag time by keeping the user’s mind occupied — even if it’s just with reassurance the app isn’t frozen. But if it’s using too much CPU power in the phone or tablet, it will only exacerbate your response time. That’s why we recommend keeping animations short and simple.
One way to ensure your animations aren’t bogging your app down is to build a prototype. Not only will you be able to test drive your motion designs before they ever reach your end user, but you can get feedback from your friends and family long before you get to the development phase — when it’s still easy to switch the animations out without adding to the coding bill.
If your animations are taking too long, it’s a simple fix that can be settled upon early so you can focus on more important things — like getting funding in place and launching your product.
Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! Sign up for a free 15-day trial of Proto.io today and get started on your next mobile app design.
How do you use animation in your mobile app design? Let us know by tweeting us @Protoio!
