4 Ways to Use Functional Animation in UI Design

Default avatar.
May 24, 2017
4 Ways to Use Functional Animation in UI Design.

Just a decade ago user interfaces that used animations were avoided, being most often associated with popups and flashing ads, but this has changed. Today details of interaction design and animation make a fundamental difference on modern websites and in modern apps. This mindset shift is clearly expressed in Zurb’s statement: 

We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content. 

If we are to design better digital products, then we need to embrace the interactive nature of the app and websites from the very beginning.

Why Animation Works

Motion, by its nature, has the highest level of prominence in a user interface. Neither text copy nor static images can compete with motion. Our eyes are hardwired to pay attention to moving objects — it’s almost a reflex. We can take advantage of this with this functional animation.

What is Functional Animation?

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

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

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.

How Functional Animation Improves UX

Our experience and impression of an app or site are shaped by a combination of factors, with interaction playing a fundamental role. Adding motion to our design can be meaningful and functional, when we find the right circumstances. Well thought-out and tested functional animation has the potential to fulfil multiple functions including:

1. Visual Feedback

Good interaction design provides feedback. Feedback acknowledges that the system has received a user’s action and demonstrates the result of the interaction whether it was successful or not. Animation in this group needs to be very subtle and should be designed responsively.

Button Feedback

In real life, buttons respond to our interaction, and this is how we expect things to work. In order to be predictable for the user digital interface should act in the same way. ios-toggle_gifSource: Jaron Pulver

Visualize the Result of an Action

By following the principle show, don’t tell, you can use animated feedback to highlight that something went wrong. For example, visual shake animation on incorrect passcode entry. It’s like the shaking of the head as if to say no, try again”. The user notices the animation and instantly understands the current status. 2 You can also reinforce the actions a user is performing. In the example below, when the user clicks Submit”, a spinner briefly appears before the app shows the success state. The checkmark animation makes the user feel like the process is finished successfully. submit_button Image credit: Colin Garven

2. Softening State Changes

Other good places to add animation in design are at moments of change. State changes in the user interface, especially on the web, often involve hard cuts which can make them difficult to follow. Nothing feels more unnatural than a sudden change. Abrupt changes in an interface are hard for users to process. These moments of change should be softened by adding some animation to the UI.

Establishing Connections

Animated transitions should act as intermediaries between the different states of the user interface, helping users to understand what is going on when the screen state changes. The user simply follows the motion and understand how the two UI states are related. music_player_transition Image credits: Anish Chandran It also works well for associating thumbnail and detail views: 6 The card animates from its original position into a position in the modal, making it clear that it’s the same item, just with more detail. Image credits: Charles Patterson

Call Attention to Changes

Animation can help the eye see where a new object comes from upon its reveal or where a hidden object goes, and can be found again. We can use it to call attention to changes that hide or reveal information, such as opening side drawers of content. In the example below, the main navigation slides out of the way when you click on hamburger icon. That movement lets you know the main menu hasn’t disappeared. solveburger-kojo Image credits: Tamas Kojo

3. Visibility of System Status

As one of the original of Jakob Nielsen’s 10 heuristics for usability, visibility of system status remains among the most important principles in user interface design. For users, it’s very important to know and understand their current context in the system at any given time.

Progress Indicators

Data uploading and downloading processes are great opportunities for a functional animation. Animated loading bars set an expectation for how fast the action will be processed. Animation can be helpful in the case of failures. Even a not pleasant notification, such as a data downloading fail, should be delivered in a nice way. download2 Image credits: xjw

Pull to Refresh

A user’s wait time begins the moment they initiate an action, and the worst case is when they don’t have any indication the system has received it. The pull to refresh action should have an immediate reaction. It’s essential to give some visual feedback immediately after receiving the request from the user to indicate that the process has initiated. Animation will help you with that. refreshdribbble3 Image credits: Tony Babel

4. Explanatory Animation

Sometimes users need a little extra help to understand the user flow or how to interact with certain interface elements. This is especially true for user interfaces that contain new or unfamiliar features or interactions for the user.

Onboarding

User onboarding demands a flawless UX, and animations in an onboarding flow has a tremendous impact on how first-time users will engage with an app. Animation gives you limitless freedom to convey anything, no matter how complex or how dry the subject matter, in an entertaining way. customerswifty Image credits: Anastasiia Andriichuk

Visual Hints

Animation can offer up some useful visual cues. Explanatory animation is most often seen when a page is opened for the first time and the animation shows how certain elements of the page are supposed to be used. This type of animation can be found in games which often deal very well with progressive disclosure, revealing game mechanics as you move further into a game. Such hints are only triggered when the user reaches the appropriate point in their experience.

Conclusion

Animation is powerful tool when used in a sophisticated ways. We need to embrace the motion from the very beginning and think of it as natural part of our design, because design is more than just about visual presentation. As Steve Jobs said about design: It’s not just what it looks like and feels like. Design is how it works.

Nick Babich

Fireart Studio is a design studio passionate about creating beautiful design for startups & leading brands. We pay special attention to nuances all the time to create professional while cool products that will not only meet all expectations, but exceed them.

Read Next

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…