Our experience and impression of a product are shaped by a combination of factors, with interaction playing a key role. In fact, the details of interaction design and animation make a fundamental difference in modern mobile apps.
“We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content.”— ZURB Foundation
Well thought-out and tested interface animation is able to support fast and easy interaction and has the potential to fulfill multiple functions. In this article, we will consider the role of animation in modern mobile user interfaces, as well as its functions and usability.
Why is animation important for mobile user experience?
Animation has a special role in interface design, as one of the most important tools of successful interaction. It can be said that without animation, there cannot be interaction. People are mostly visually-driven creatures, meaning the force behind the picture, which is worth a thousand words, gets even stronger with the help of animation.
Animation breathes life into the process of interaction and is especially good for mobile apps that have to be developed with limited screen estate while providing an informative and functional interface.
Major types of animation
There are two major types of animation in the modern user interface: functional and delightful.
The functional animation is a subtle animation that we embed in a user interface design, as part of the process. The goal of functional animation is to help the user better understand what’s going on and how to use your app most effectively.
The delightful animation is focused on user emotions. The goal of this type of animation is in entertaining the user and bundling a brand’s values into a product.
The functional animation tells users a story about how the app works. It supposes to:
- Build meaningful transitions.
- Provide visual feedback.
- Show system status.
- Help the user get started.
Let’s take a look at these in more detail.
1. Build meaningful transitions
Transitioning between two visual states should be clear, smooth, and effortless. A well-designed transition helps the user clearly understand where their attention should be focused.
User interfaces are often based on static displays — a series of displays that each show a new state of the system. State changes in such UIs involve hard cuts by default, which can make them difficult to follow.
In cognitive science, this is called change blindness — when sudden change prevents users from noticing new information. With all these complex interactions and possibilities in mobile apps, users can quickly lose context; if visual changes in the user interface are sudden, users can lose an understanding of the interface. This problem can be seen in the example below.
It is unclear how the new view is related to the old because no transition occurs and there isn’t a clear focal point.
Functional animation fills the comprehension gaps. Animated transitions work as intermediaries between different UI states. Designers can use animation to smoothly transport users between navigational contexts, and explain changes in the arrangement of elements on a screen.
In certain cases, designers are forced to design an action button whose functionality changes under certain conditions. Due to the fact that mobile screen estate is limited, we often see icons that serve dual functions in designs. “Play”/”Stop” and “Hamburger”/”Back” buttons are probably the most common example of switchable buttons.
Animation in this case shows how an element changes when a user interacts with it. Transforming the menu icon into the back arrow, in example below, signifies that the two actions are connected, and that one cannot exist while the other is present.