Menu Search
Jump to the content X X

How Functional Animation Helps Improve User Experience

Since humans are visually driven creatures, the impact of imagery only increases with the help of animation. Our eyes innately pay attention to moving objects, and animation is like eye candy — catchy and bright elements that call attention to and help differentiate an app from its competitors. As of late, more and more designers are incorporating animation as a functional element that enhances the user experience. Animation is no longer just for delight; it is one of the most important tools for successful interaction.

However, animation in design can only enhance user experience if it’s incorporated at the right time as well as the right place. Good UI animations have a purpose; they are meaningful, and functional. In this article, we’ll talk about the role of functional animation in UX design and see when to incorporate motion into a design. If you’d like to follow along and spice up your designs with animations, Adobe introduced Experience Design CC1 (also known as Adobe XD) which you can download and test for free, and get started right away.

Further Reading on SmashingMag: Link

What Is Functional Animation? Link

Functional animation is a subtle animation embedded in the UI design as a part of the functionality of that design. It reinforces the design and has very clear and logical purposes including:

  • Reduce cognitive load
  • Prevent change blindness
  • Establish better recall in spatial relationships

Animation brings user interfaces to life. In a human-centered design approach, where the user is the prime focus, a user interface needs to be intuitive, responsive, and human. Functional animation helps you achieve these goals.

The Role Of Functional Animations In User Interface Design Link

Well thought-out and tested functional animation has the potential to fulfill multiple functions.

Visual Feedback on User Actions Link

Good interaction design provides feedback. Feedback makes you feel like you’re interacting with real elements on the screen and demonstrates the result of this interaction (whether it was successful or not).

User interface elements such as buttons and controls should appear tangible, even though they are behind a layer of glass. Visual and motion cues can bridge this gap by acknowledging input immediately and animating in ways that look and feel like direct manipulation.

funcanimation75
Buttons and other active controls should respond to user actions with visual feedback. (Image credit: Behance6)

(Image credit: Ramotion97 on Behance228)
(Video credit: Ramotion97)

Visual feedback is also helpful when you need to inform users about results of an operation. Cases in which operations aren’t done successfully, functional animation provides information about the problem in a fast and easy way. For example, a shake animation can be used when a wrong password is entered. It’s easy to see why the shake is a fairly universal gesture to communicate the word “no,” since a simple head shake is how people give feedback to each other.

funcanimation310
Users see this animation and immediately understand the problem. Image credit: thekineticui11

Purpose: Link

  • Acknowledge that the system has received a user’s action.
  • Confirm (or deny) a user’s action.

Visibility of System Status Link

As one of the original 10 Jakob Nielsen’s heuristics for usability12, visibility of system status remains among the most important principles in user-interface design. Users want to know their current context in a system at any given time and apps shouldn’t keep them guessing — they should tell the user what’s happening via appropriate visual feedback.

Data uploading and downloading processes are great opportunities for a functional animation. For example, animated loading bars shows how fast a process goes and sets an expectation for how fast the action will be processed.

Fun animation also distracts users from what's happening behind the scenes and helps makes them wait longer13
Fun animation also distracts users from what’s happening behind the scenes and helps makes them wait longer. (Image credit: tympanus14)

This type of functional animation can also be used to attract a user’s attention to important status changes in an app (or even in a system), such as an incoming call:

Image credit: Material Design15
(Image credit: Material Design2116)

Or a new email in the inbox.

Image credit: Behance17
(Image credit: Behance18)

Purpose: Link

Provide real-time notification of a system status, and enable the user to understand what is going on quickly.

Visual Hints Link

First-time users often need help to understand how to use an app interface. This is especially true for interfaces which contain unfamiliar or unique interactions (such as gesture-driven19 interfaces). Without help, users may be confused on how to interact with an app.

When it comes to teaching users to use your UI, you should provide a set of visual hints which convey what interactions are possible. This kind of functional animation drives a user’s attention to the possible interactions.

Visual hints can give the user insights into what is about to happen. For example, functional animation which prepares the user for the action of taking a photograph can be found in the iOS camera app (before iOS 7).

Shutter animation in Apple iOS 6 camera app20
Shutter image in the iOS 6 camera app

Or, visual hints can engage users to take further steps (which aren’t as obvious at first glance) by demonstrating how certain functionality in the design operates:


Pudding Monsters for iOS>

Visual hints can increase the level of usability and therefore the desirability of the product.

Purposes: Link

  • Create necessary expectations by giving the user a clue of what is about to happen
  • Help users orient themselves to the interface
  • Tell users how they can and should interact with elements on the screen

Navigational transitions are movements between states in an app, for instance, from a high-level view to a detailed view. State changes often involve hard cuts by default which can make them difficult to follow. Functional animation ease users through these moments of change; it smoothly transports users between navigational contexts and explains changes on a screen by creating visual connections between transition states.

Navigational transitions can be hierarchical (parent to child) or sibling transitions. Hierarchical transitions are used when users explore deeper levels or screens of an app, which are children to the current (parent screen). Motion highlights movement away from the parent towards a destination (a child element).


Animated zoom-in transition guides a user’s attention from parent-to-child (detailed view). (Image credit: Material Design2116)

Animated parent-to-child transition clarifies the relationship between parent and child. (Image credit: Behance228)

Sibling transitions occur between elements at the same level of the hierarchy. For example, this animation is used when a user navigates through tabs.

23
The content and surface of each tab stays at the same level and the animation simply guides focus between views. (Image credit: Behance24)

In both cases, functional animation helps the eye see where a new object comes from upon its reveal and where a hidden object goes (and can be found again). It provides visual cues, making the interaction easier to follow and reinforcing what has occurred.

Purposes: Link

  • Define the spatial relationship between screens and elements
  • Avoid a surprising transition by helping users comprehend the change that has just happened in the page’s layout

Branding Link

Whereas the previous roles of animations are quite logical, this one is full of emotions. Often, there are dozens of apps that have same exact features and accomplish the same tasks. They might all have a good user experience, but the ones that people love offer something more than just a good user experience. They establish emotional engagement with users.

Branding animation is responsible for this engagement. It can be used as marketing tool — support a company’s brand values or highlight a product’s strengths — at the same time make user experience truly delightful and memorable. The approach might not be clearly user-centered, but it has a functional purpose. In order to be successful, branding animation should support continuity of the experience. For example, fine animation from Lo-Flo Records25 website has a power to encourage users to interact more — people look forward to what they are will see next.


Branding animation is able to make design feel unique. (Image credits: Lo-Flo-Records)

People do notice the details. Attention to animations can convey an emotion and can make the experience feel crafted. A fine animated waiting indicator, which demonstrates a unique style, can create a truly enjoyable experience.


Attention to fine movements can delightfully surprise the user. (Image credit: Creativedash)

Purposes: Link

  • Entertain users, bring empathy and fun to design
  • Create a signature of the product; help users relate to the product, increase a brand perception

How To Find A Balance Link

Where is the balance between useful and pure eye candy? It’s really important to take time and consider when an animation is and isn’t appropriate.

Animate With Purpose Link

Animations should always serve a purpose. They should never be done for animation’s sake. When an animation doesn’t fit a functional purpose, it can feel awkward or annoying, especially when it is slowing down a process that could be faster without any animation. For example, below you can see an animated concept for a PayPal email receipt. This animation looks great, but at the same time it’s excessive and obstructs the app flow because it takes almost 4 seconds to see transaction details. A simple fade-in animation of the receipt would be more suitable for this purpose, (simply because it takes up less time).


An example of superfluous animation. (Image credits: Vladyslav Tyzun)

Keep in mind that users come to sites or launch the apps for a purpose — we need to show them what they are after in a short space and time-frame. Thus, when deciding to use animation in your app, incorporate animation only when it has a meaning and won’t distract the user from successfully completing what they intended to do.

Keep Longevity in Mind Link

Even good animation can be annoying when it’s overused. When designing an animation, ask yourself a question: “Will the animation get annoying on the 100th use, or is it universally clear and unobtrusive?”

26
Animation shouldn’t be annoying. (Image credit: Rachel Nabors27) (Large preview28)

Prototype and Test Your Animation Link

When adding UI animations to your own work, iterative prototyping and testing with actual users are the right things to do. Prototyping is the absolute best way to convey how you intend to use animation in your design. If you use interactive prototypes, you will get a clear picture as to what works and where the flaws in your app are hiding. Very often, this leads to a complete rework because the look of your animation differs from how it feels. Thus, iterate often and iterate fast! Iterating numerous times on even the tiniest detail will make your animation great.


Create interactive prototypes using Adobe XD. (Image credits: fastcodesign)

Conclusion Link

Identifying the places where animation has utility is only half the story. If you’re going to use animations in your designs, they should be built well, and that is only possible when an animation is a natural part of the design process. When done correctly, animation can turn a digital product from a sequence of screens into carefully choreographed memorable experiences.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app29 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance30, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free31.

(ms, vf, aa, il)

Footnotes Link

  1. 1 https://adobe.ly/2j8Lwzx
  2. 2 https://www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
  3. 3 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  4. 4 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Buttons-and-other-active-controls-should-respond-to-user-actions-with-visual-feedback.gif
  6. 6 https://www.behance.net/gallery/23056487/Material-Design-Button-Animation
  7. 7 https://ramotion.com/
  8. 8 https://www.behance.net/gallery/22981559/Mobile-Interaction-Design
  9. 9 https://ramotion.com/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Users-notice-this-animation-and-immediately-understand-the-problem.gif
  11. 11 http://thekineticui.com/your-app-login-is-boring/
  12. 12 http://www.nngroup.com/articles/ten-usability-heuristics/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Fun-animation-also-distracts-users.gif
  14. 14 http://tympanus.net/codrops/2015/09/23/elastic-progress/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/12/incoming-call.gif
  16. 16 https://material.google.com/
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/12/new-email-in-the-inbox.gif
  18. 18 https://www.behance.net/gallery/11288081/UI-Animation
  19. 19 https://blogs.adobe.com/creativecloud/in-app-gestures-and-mobile-app-user-experience/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/12/Shutter-animation-in-Apple-iOS-6-camera-app.png
  21. 21 https://material.google.com/
  22. 22 https://www.behance.net/gallery/22981559/Mobile-Interaction-Design
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/12/The-content-and-surface-of-each-tab-stays-at-the-same-level.gif
  24. 24 https://www.behance.net/gallery/38426573/DailyUI-21-30-(dailyui)
  25. 25 http://loflorecords.com/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/01/animation-should-not-be-annoying-large-opt.jpeg
  27. 27 https://twitter.com/rachelnabors
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/01/animation-should-not-be-annoying-large-opt.jpeg
  29. 29 https://adobe.ly/2j8Lwzx
  30. 30 http://adobe.ly/1U9LS0E
  31. 31 https://adobe.ly/2j8Lwzx

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    A very thorough and useful write up. Thank you.

    6
  2. 2

    I loved the examples but to be honest I found this article lacking.

    A few categories of animation listed, very little info on how to actually test and moderate the urge to make a movie instead of an app. I’m also surprised there is no mention on relationship between animation and screen size and user expectations. For example, why do apps feature so much more animated elements than web for the same tools (perhaps because mobile data is slower and needs more time to be filled, or simply the expectations?)

    Also, types of applications: many more animations in game menus vs minimal or none in work oriented ones. There is so much more that could be said besides placing labels on gifs… Lacking.

    11
  3. 3

    Thak you for the article Nick. I like the examples. Animation makes user happier and experience using the product becomes positive. Not sure animation should be used in every case, but nevertheless for some purposes it looks awesome.

    3
  4. 4

    Awesome write up. I was literally just talking about this with someone the other day but 1.) didn’t know what it was called and 2.) didn’t have examples to reference. Book marking this!

    1
  5. 5

    Hi Vitaly,

    Please excuse me from taking the opportunity to urge you into considering accessibility when publishing/editing articles and tutorials about animations.

    I’m suffering from vestibular disorders and animations don’t necessarily improve my personal experience. Indeed, some animations can definitely ruin my user experience because they’re making me uneasy.

    For instance, when Apple released iOS 7, a lot of users complained about the “quick scale” animation when opening apps. This is one of those animations having a very negative impact on users with vestibular disorders. Hopefully you can reduce motion in the settings and this animation then turns into a “dissolve effect.”

    I’ve heard webkit is implementing a media query for this setting but I doubt a lot of designers will use it because they never take vestibular disorders into account. At least this is my impression because very few (maybe 1 or 2) articles/tutorials I’ve read in 2016 mentions accessibility.

    Now, I consider Smashing Magazine dope, you’re one of those publications caring about accessibility, as various and multiple of your previous articles can prove. So maybe if you start systematizing accessibility in animation articles you publish, designers will start factoring it into their practices and tutorials?

    The current situation for people like me is sad right now, it feels like it is hopeless and designers will fortuitously build a web I can’t use because animation in UI is the new hype.

    Thanks for your awesome work anyway. Let’s hope this comment can have an impact because, as a matter of fact, any user can experience uneasiness with animations at some point, if only because s/he is ill.

    8
    • 6

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      January 15, 2017 11:35 pm

      @Diegelstein: a very, very important point. Yes, absolutely — you are right. However, at this point I don’t think there are any way to make animation conditional — unless we can move to Web Components at some point to better control what’s happening inside of each component. We’re on it, and we’ll be watching out for how to keep our articles accessible. And thank you *so* much for your kind comment — it means a lot.

      1
      • 7

        Safari Developer Preview does support the prefers-reduce-motion media query which is being considered by the CSSWG. There is also an effort to include interaction based animation in WCAG 2.1.

        In the mean time developers need to do it on a site by site basis using code that namespaces the animation and allowing users like Diegelstein and me to turn them off if we desire.

        If you happen to be coming to CSUN this year, I’ll be presenting on this very topic addressing the good examples demonstrated here as well as some research on what is “good” and “beneficial” with small impacts to users with vestibular disorders, autism, ADHD, blind, low vision, mental health, and PTSD issues and how to approach including them.

        2
  6. 8

    Stefan Smiljkovic

    January 16, 2017 5:47 am

    Beautiful animations. We used Velocity.js to animate most of elements on https://vanila.io .

    The key to animations, is to be in motion, not linear.

    Peace!

    1
  7. 9

    Really glad you mentioned balance towards the end. Even purposeful animations work best when they’re not too “in yer face”, subtlety is important aesthetically.

    1
  8. 10

    Todays mobile apps hardly avoid interface animations. Even the simplest and imperceptible interface element animations makes the user contact more realistic. To this point, there is a great article on our blog http://adoriasoft.com/5-tips-15-examples-ui-mobile-app-animation/
    I fully agree with you Nick that smartphone users are very accustomed to animation inside the mobile apps interfaces. Absolute absence of animation might look boring and outmoded.

    -3

↑ Back to top