Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› Making a Case for Animations and Interactivity

Making a Case for Animations and Interactivity

by Elias Parker
3 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Animated user interface elements can increase your product’s usability, define its personality, and make it more fun to use, but they come at a significant cost.

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.

Tweet
Share
Post
Share
Email
Print

Related Articles

What do Architecture, Computer Science, Agile, and Design Systems have in common?

Article by Kevin Muldoon
A Pattern Language
  • The article explores Christopher Alexander’s impact on diverse fields, from architecture to software development, introducing the concept of design patterns and their influence on methodologies like Agile and the evolution of Design Systems.
Share:A Pattern Language
7 min read

Since personal computing’s inception in the 80s, we’ve shifted from command-line to graphical user interfaces. The recent advent of conversational AI has reversed the ‘locus of control’: computers can now understand and respond in natural language. It’s shaping the future of UX.

Article by Jurgen Gravestein
How Conversational AI Is Shaping The Future of UX 
  • The article discusses the transformative impact of conversational AI on UX design, emphasizing the need for user-centric approaches and the emerging societal changes driven by AI technology.
Share:How Conversational AI Is Shaping The Future of UX 
3 min read
Article by Savannah Kunovsky
How AI Can Help Us Solve the Climate Crisis
  • The article delves into the transformative intersection of generative AI and the Climate Era, highlighting their potential to reshape economies, influence consumer behaviors, and address sustainability challenges.
Share:How AI Can Help Us Solve the Climate Crisis
5 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and