UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 1290 August 14, 2014

Making a Case for Animations and Interactivity

From a design standpoint, we’re starting to think of apps more as interactive experiences and less as passive objects. This shift in mindset can largely be attributed to Apple’s iOS 7 overhaul, which emphasizes physics-driven animations. Since then, we’ve seen a slew of interesting animations work their way into some of the most popular apps.

With all the exciting motion UI elements out there, it's easy to get caught up in the fun, while forgetting about the opportunity costs. On the other hand, spending the extra time on the right animations, for the right reasons, can increase usability, help define your brand’s personality, and create delight. In this post, we’ll examine animations and interactions implemented with purpose and consider whether they make sense for your brand.

Usability

For some apps, interactivity is a core component of the flow. In these instances, interactions guide users through the experience, keeping them oriented and contextually aware of their place in the app.

Pinterest

One of my favorite examples is in the Pinterest iPhone app. Using swipe gestures, users can swipe through pins and collections. The inclusion of this interactivity helps users navigate the app in a less cumbersome manner.

Pinterest animation

Swipe down to return.

Emotive Insight

Swipe left to continue in feed.

Emotive Insight

Swipe up for new feed

Circa App

Another app that does a great job of providing context through the use of interactivity is Circa, a news app that tracks stories you’ve followed, giving you periodic updates as they become available. A scrolling animation acts as a sort of visual timeline, with a dot denoting each new development in a story.

Circa animation

In both examples, the animations aren’t just frivolous inclusions. They actually provide real value to the app and its usability.

Personality

For other apps, interactions act as a way to communicate distinct brand characteristics and aid in users’ understanding of your brand. In this case, animations are a part of the branding exercise. Is your brand playful or serious? Robotic or bubbly? Choosing the proper animations will heighten users’ understanding of—and connection with—your brand.

Path & Tumblr

For Path, mobile is their only platform. By limiting users’ experience with their brand to this one context, they really have an advantage when it comes to using interactions to help define what Path is all about. Following suit, their animations are approachable and playful.

Path animation

Tumblr’s Android app has also been experimenting with this playful feel.

Tumblr animation

Tweetbot

Tweetbot is another app that uses distinct animations to communicate something relevant about their brand. Compared to Path and Tumblr, the Tweetbot app feels snappy and mechanical.

@Tweetbot's animations contribute to the sense that the app is a robot and give it unique character

These animations contribute to the sense that the app is a robot and give the app unique character.

Emotive Insight

Delight

Other times apps include motion UI elements because they’re—for lack of a better word—fun. However, the amount of time put into designing and implementing these catchy animations can be a huge expense. Because of this, you will rarely see cash-strapped startups include these animations and interactivity. Overall, animations that fall into this category are going for the awe factor over the purpose factor.

Flickr

If you flip through the introductions screens of the Flickr app you probably won’t notice anything special initially. Slow down, and you’ll see that a lot of thought went into how the images animate. A combination of parallax layers and clever masking allows the drawing to transition in and out with a very illustrative quality as seen in the GIF below.

Emotive Insight

While it’s certainly a nifty little animation that caught our attention, it doesn’t make the most business sense for startups concerned with maximizing limited resources. Flickr is way past the initial funding phase and has the time and money to devote to dazzling end users with thoughtful details.

Conclusion

Striking a balance between creating a heightened user experience and acknowledging business constraints will ultimately determine the success of your app in the long run. Be mindful of why you are using an animation or interaction in your app before devoting precious resources to it. Do this by asking yourself if an animation is for usability, personality, or delight. If it doesn’t naturally fit into at least one of those categories, it’s probably not worth the effort.

For more motion UI design resources check out this post from BeyondKinetic.

 

Illustration of mobile gestures courtesy of Shutterstock.

ABOUT THE AUTHOR(S)

User Profile
Anonymous (not verified)

Add new comment

Comments

I would extend this to web applications as well. The considerations are certainly different, and need to be handled in an intelligent, careful way, but subtle interactivity and animation can add a lot to a web application, both to the delight in using it and to add important cues to the user. 

Mobile animations can be amazing when done right. Among many considerations, one big one would be performance. For me, when an animation skips a noticable amount of frames, it completely breaks a certain sense of emersion only attainable with an uninterupted stable framerate. It also makes the app feel "slow" or even "broken" in the users mind. At least this is my own impression. I know the iOS and Windows Phone develoeprs have put in a neigh insane amount of effect into maintaining a solid 60fps throughout their OS's whereever possible. I often feel it's better to remove an aniamtion alltogether if I can't confidently make it run smoothly on most of the devices I'm targeting. I'm sure the topic is worthy of it's own article and I think it's far too often an overlooked aspect of UX.

Great post, Sara! Adding animations to mobile apps can not only improve the user experience, but can also add depth and therefore another layer of space to work with to the constricted screen size of mobile. 

I wanted to share a "code-free" tool that I use to prototype and test animations such as these with folks - you can see how they have created the Path menu animation using Proto.io

http://blog.proto.io/2014/07/10/prototyping-the-most-popular-apps/