Grasping Meaningful UI Animation

However, the power of such a coherent visual tool like animation might be as misleading as it can be meaningful.

Let’s try to grasp motion impact on the perception of the web and mobile apps’ UIs.

Why Animate User Interfaces?

Ever since we are born, we learn the cause-and-effect relationship, the way things trigger each other, and the mechanisms of how stuff appears. Rarely do things emerge out of the blue. We are able to observe them as they move in our view, grow, morph, and disappear.

The digital representation of the real world, even though tweaked, has to rely on the same perception habits as real objects in order to avoid being misleading and confusing to users. If we incorporate objects that change their state depending on the user actions, they have to move and transition in a natural or augmented way.
Here’s how motive UI affects UX:

• Gives navigational context. When you recognize patterns in navigation, you are likely to find your way around the app easier.
• Packs suspension. The gap between the expectation and reality can be negated by means of a meaningful motion.
• Emphasizes hierarchy. Visual anchors can be subtle and almost invisible due to the magnetic motion of significant elements.
• Illustrates the process by showcasing changes. Animating some of the grueling operations can smoothen the unpleasant experience users have to go through at times.

Sounds quite significant, huh? In reality though, animation often gets overrated. It’s not like it is a crucial performance element or a critical asset for the UI’s functionality booster. It is more like a cherry on top of the cake. The cake itself has to be good first and foremost.

At the same time, animation seems to be the easy way out and sort of a cheap shot due to our natural desire to pay attention to moving things. Oftentimes websites filled with meaningless animation produce an opposite effect, basically, makes you want to kill yourself.

App Animation Design Principles & UX 

It is important to distinguish the types of interaction animation suggests to users. It can be:

• Direct interaction. When the UI elements showcase motion while a person is using their input to manipulate these elements. Think of swiping as an example of direct interaction.

 

• Post factum interaction. In this case, we experience motion after the physical action on the screen. In this case, motion is a part of the result “package” that users receive upon the completion of an action. A good example would be hidden elements in a hamburger many or the “+” button.

This distinction is significant in creating meaningfulness. It’s either user actions that are reflected by the animation or the narrative of the app that masks the interaction.

Purpose & Style

If the perks of animation are clear and obvious, what are the guidelines of making them meaningful, valuable and cool? There are none. The thing is, thoughtfully put together, motion becomes a natural feel, augmented with artificial behavior. So the purpose of the animation is the most important thing to begin with. Motion for the sake of a “less static” interface won’t be natural and meaningful.
As for the style, this is the challenging part. It’s been proven that things like background color affect animation’s perception and the mood it creates. Add to that compliance, functionality, and meaningful transaction requirements and you’ll have your hands full. This is a bottleneck UI designers have to go through in order to maintain consistency and create a delightful motion.

Authenticity

Since the early days of human-readable UIs, there was a constant trend towards a realistic depiction of elements. The Apple II computer used the entire technological arsenal of the time in order to create empathy.

In order to engage the widest variety of users, UI elements had to resemble things from the real world, be self-explanatory, and intuitive.

Furthermore, with the introduction of touch screen UIs, it became more and more apparent that visual form is the one and only physical feel that  can transmit the meaning.

That movement never changed until it got to the prime of skeuomorphism. By that time animation was already in place. It came sort of naturally that the more realistic UI elements were getting, the better physical properties they were showcasing. Motion was one of those properties. If we design a paper-based screen with realistic texture and color, no surprise its motion is mimicking paper.

The skeuomorphic environment creates a container for reality-based motion. Now there is a following of the Walt Disney’s 12 Principles Of Animation approach to motion in UI design. This has to be taken with a grain of salt, though.

Disney’s animation principles had been created specifically for the genre of animated movies, aka cartoons.

The level of exaggeration there is corresponding to the audience, which is the little ones. Animation has to be contextual just as much. Even though the bouncy rubbery motion is hardly applicable to the design of say, a FinTech web application UI, there are some principle basics that intersect:

Timing & Spacing

This principle has to deal with the duration of an action. By engaging and ending at a certain point and lasting for a specific amount of time, motion can transmit physical qualities of an object – its size, weight, the material it’s been made of, also the force applied and the energy. By doing so, the motive element injects mood into the interaction. This is primarily done by the utilization of the Cubic-Bezier function. Relying entirely on physics, this skeuomorphic principle is legitimately an underlying one.

An object’s momentum enforces the naturalism of motion. The behavior of an element is predictable due to the user’s experience with similar objects. The principle also known as easing. Easing contributes to the seamlessness of user experiences and connects subsequent actions making objects behave the way users expect them to. It can also add significance to actions and rule them out of plane motion.

As for the direction, in the Western world of latin writing, progressing objects tend to move left. At the same time, people from Arabic countries read to the left and their natural inclination is to expect rightwards motion in progression. For some cultures, downward movement is a default progressive behavior. Of course, technology has unified these concepts under one default principle and everybody had to adjust, but if we are talking about naturalism, perhaps taking into account these differences is a good idea. For example, Snapchat went against the grain and started using the entire spectrum of swiping directions to discover different functions.

With the introduction of 3D touch and haptics, motion acquired a Z-axis vector, taking the element animation to the next level. This technology has not yet been unfolded to its fullest, but it is definitely an asset to keep an eye on.

Hierarchy & Secondary Actions

Multiple actions have to convey their significance in spatial and temporal terms. This is what builds the visual hierarchy and relationships between elements.

A secondary action in animation is added to magnify the main one, emphasize, and create a visual following. It does fall into the hierarchy but its purpose is obvious – supplementation of the main movement. A great example of a secondary action is Medium’s most recent update – the applause. Before it was a ?  and now it’s  ?   with unlimited clap count. Now when you hit the clap there are sparks bursting out and a counter ticking. Here’s me applauding to Jeffrey Zeldman:

Dynamic Values

Whenever text and number-based information and metrics are brought up, users look for the specific data. It is the objective but the experience can be enhanced through animation. We are all used to loading. If a video game takes time to load it creates the anticipation, that’s why some game designers add status messages like “generating textures” to the loading process.
Another real world example is coffee vending machine Vs coffee machine. Even though they both perform a fairly similar procedure, vending machines are neglected despite the fact some of them brew good coffee and do it faster. The reason is the dynamic significance of the moment. The two threads pouring into a cup, the noise it produces, and all the steampunk pipes turn the espresso-making process into something bigger than it really is.

We want suspension and the feeling that something worthwhile takes time to emerge. The same way, data can be presented instantaneously, but it’s the dynamics that makes you appreciate and trust it more.

Overlapping

In the context of mobile UX where a multitude of functions has to be accessible without occupying too much estate, the common practice is using the layered approach. This is a way to hide things behind the contractions and have them intuitively placed and sliding out when activated. But there is a hazard of over overlaying menus and navigation elements. Spacial orientation can’t be compromised by the motion of elements, so beware of fouling the trail of the UX. As an example, here is a mail app three-layer navigation:

Background Blur & Parallax

Background diffusion is one of the ways to avoid visual hierarchy in a contextual situation. Emphasized elements are brought out by the blur of the rest of the UI which makes the stand out notable. The direct background blur, (like Instagram) is only enabled in the real-time interaction – force touch. While the post factum background blur activates the semi-permanent state of the UI.

In the first case the blur is sort of mimicking the magnifying glass effect, while the second case is more of an optical zoom in.

Occurrence & Departure

Spacial thinking implies elements’ motion of occurrence and departure. Locating elements and embedding them into the narrative is easy when the edges are blurred and some sort of physical model is in place. It also helps solve the overlapping problem by building the scheme in terms of past and present instead of intense layering. The Flipboard app enforces the spacial narrative by flipping and folding elements. 

Occurrence can also be arranged around the 3D space to model the real-world experience. As a post factum transition, motion shows the effect of the action taken.

Once again, the material and flat design principles are wrapped into the skeuomorphic motion, blending the experience and actualizing the UI.

UI Animation in Web and Mobile Application design

Web and mobile design of today operates under the laws of the material design language. With motion design added to the mix, things took off rapidly towards the transitional interaction design. Animation became the tool in fine tuning brand identity. Meaningful stories that motion perpetuates are more than just transitional patches covering the loading time.

However, with the availability of motion-creating tools and the growing skill set of designers, the industry might be throwing itself under the bus. The unnecessary animation watering down the cognitive effect is a potential reality.

In this light, it makes perfect sense that motion design stays restricted by some objective laws.

And what can be more objective than nature?

There is the reason why some realistic patterns last through all the design trends. In case of flat design, it’s shadows, gradients, and lighting principles that are physical by nature. They become a reference point for further leaps of imagination. Same applies to motion design.

If there is a place where skeuomorphism is nowhere to go, it’s motion design, where styles blend into something called “skeuominimalism”. The obvious physics of elements’ motion is wrapped into the flat design form to convey meaningful information in the clearest way.

As the journey towards the most meaningful, intuitive, and delightful interaction design continues, let’s not forget to stop and smell the roses.

. . .