The Animated Interface: A User Experience Perspective on Best Practices in UI Design

12 min readApr 9, 2017

Animation is fast becoming a common element of interface design. But understanding how animations serve to improve the functions of graphical user interfaces, and not distract from them is not always clear.

As a UX designer who is very interested in motion design, I decided to explore the topic of making animation for user interface, hoping it can bring useful ideas to designers.

The following is three problems I want to solve in this article:

PART ONE

Around 1970, graphical user interfaces were basically a series of static screens (PDF) linked together sequentially without any transitions. Every state change was a “hard cut”.

The first computing device to use animation and animated transitions as core elements of the user experience was the 1984 Apple Macintosh.

Dialogs no longer simply appeared: they slid or popped into place. Expandable drawers, palettes, and panels became common idioms, especially in professional software.

However, because of the limited graphical capabilities of computers back then, effective animation was the exception rather than the rule.

It was not until the 2007 introduction of the iPhone that the use of animation and animated transitions became an integral and critical part of the digital product experience.

I think there are 3 reasons to push the wide use of animation:

Powerful computer processors allow animation codes runs smoothly
Advanced graphical displays support high-quality animation
Innovative gestures interactions bring uncountable possibilities for UI animations

PART TWO

In the book Microinteractions, Dan Saffer said :

“If you can do without animation, avoid it. Your microinteraction will be faster and less cognitively challenging without it.”

We should know what we want to make by using animations. Not only is an overabundance of animation potentially confusing and irritating, but it also can make some people physically ill.

Saffer also listed the 6 goals of using animation:

Similarly, Yalanska mentioned 4 functional types of UI animation in her article:

Besides, in Material Design, Google wrote that motion shows how an app is organized and what it can do. The details are:

In conclusion, the author summarized the SAFARI(without the second A) for the context of use of animation.

State: Tell users states of objects or windows

When state of objects in the window change, aimation can present the changing process. Therefore, user will realize how the change goes. Accordingly, when state of window changes, animation can show how a window change from one state to the other.

Attention: Attracts user’s attention and tells users what they should do next

If designers want user to focus on one area or to operate one action, animation can attract their attention. Also, instructed on combining text with animated images, users can understand how to execute the next operation.

Feedback: Tell users the relationships between operations and objects

After users execute an operation, animation is a good way to provide feedback. Therefore, users can know whether their actions are valid.

Relief: Alleviate users’ anxiety about time elapse

When an operation takes a long time to process, animation can alleviate users’ anxiety about time elapse. Designers can even user animation to create a fake waiting time in order to bring certain emotions to user.

Individualization: To make products more individualized, designers can create unique animations to make user feel pleasure and interesting

To make products more individualized, designers can create unique animations to make user feel pleasure and interesting.

However, such types or uses of animation are not exclusive. Designers may apply several rules to an animation at the same time to achieve the effect they want. For instance, a slide-in animation not only attracts users’ attention, but also tells users the spacial relationship between two panels.

State + Attention + Feedback + Individuation

When designers design animation for interface, we should ask ourselves at least one question:

What is the goal that I want to achieve by using this animation?

PART THREE

In 2015, Cao summarized 9 uses for animation in Web design in his article:

Galleries and slideshow
Form fields
CTA
Navigation and menus
Page animation
Backgrounds
Loading
Scroll animation
Hover
Animated photography

1.Galleries and slideshow

2.Form fields

3.CTA

4.Navigation and menus

5.Page animation

6.Backgrounds

7.Loading

8.Scroll animation

9.Hover

10.Animated photography

PART FOUR

Hazwani and Bernard (2016) listed four detailed issues of how to create motion with meaning:

A simple shift: Instead of designing screens and then adding transitions between them, start by designing individual components and thinking about how they change and move in different contexts. With that in place, layout and animations will come together naturally, following the semantic structure of the content.
Explain relationships between elements: Think of every element of your interface as a single, self-sufficient component with a specific meaning, state and position in place. Then make sure your animations reflect this. If a popover belongs to a button, it shouldn’t just fade in; it should emerge from that button. When opening an email, the full message should not just slide in from the side, but come from within the preview.
Multiple representations: A common problem to look out for is different representations of a single element that are visible at the same time. This is bad, because it doesn’t make sense from the user’s point of view to see the same thing in more than one place simultaneously.
Keep space consistent: Animations create expectations about where the animated elements are in space. For example, if a slidebar slides out to the left, you intuitively know that it’s somewhere left of the visible elements. Thus, when it comes back into view, you expect it to come in from the left, where you last saw it.

Material Design (2017) said that motion has the four characteristics:

Responsive: Material is full of energy. It quickly responds to user input precisely where the user triggers it.
Natural: Material depicts natural movement inspired by forces in the real world.
Aware: Material is aware of its surroundings, including the user and other material around it. It can be attracted to elements and respond appropriately to user intent.
Intentional: Material in motion guides focus to the right spot at the right time.

For a presentation at CSSConf Australia 2015, De Cock offered four simple rules for UI animation that takes into account the current limitations of real-time rendering:

Animate exclusively opacity and transform properties
Animate things independently
Keep animations fast
Always use custom easing functions

Therefore, I summarized 3 attention notes that designers should pay attention to when they self-evaluate their animations.

PART FIVE

Since I am totally an amateur about building smooth animation, I firstly read the 12 basic applicable principles of animation, introduced by Ollie Johnston and Frank Thomas in 1981.

Squash and stretch
Anticipation
Staging
Straight ahead action and pose to pose
Follow through and overlapping action
Slow in and slow out
Arc
Secondary action
Timing
Exaggeration
Solid drawing
Appeal

They don’t all apply equally to our efforts in interface animation, but it’s still helpful to know what each entails. After understanding each principle’s meaning, I selected 9 principle which I believe I can use to my animation design.

Next, I will map Cao’s 10 situations for Web Design to APP Design and build the animation for each situation by using theories I have summarized above, following the order : situations, context, methods, and notices.

1.Banner

Context: State, Attention, Individualization, Relief

Using PageComponent of Framer to control pages’ transferring. And adding loading animation to the bottom dots to show duration of transferring.
Using CSS background: linear-gradient property to control the dot’s background color change (24 frames/s). Ands using CSS scale and opacity properties to control the bubble effect.
Timing is set to around 300ms for transition. And using suitable easing function to each animations: such as linear to loading effect, ease-out to slide-in effect.

2.Form

Context: State, Attention, Feedback, Individualization

Using PageComponent of Framer to mimic Google’s form logging effect. And using a Framer input plugin to achieve the inputing effect.
Using CSS backgroundColor and scale propertities to make portrait changing effect. And listening for mouseDown event to trigger the effect.
All come-in animations use ease-out easing function. All come-out animations use ease-in easing function. Also making sure the clicking area is big enough for fingers to tap.

3.Stage

Context: Attention, Feedback, Relief, Individualization

Using CSS scale to control the scaling effect. And using Utils.modulate() to dynamically control the CSS strokeDashoffset in order to achieve the loading effect.
Using Anticipation principle: enlarge the rectangle first, then shrink it. Using Second animation principle: when the rectangle moves up, it also turns into a circle.
The loading’s easing function is ease-in-out, trying to give users a dynamic feeling.

4.Menu

Using CSS transform properties to achieve the Material Design menu effect. And using CSS rotate property to achieve the menu icon animation.
Using Exaggeration principle: the two lines of the menu icon rotate a large degree to create attractive visualization effect.
The rotating’s easing function is Spring. Coming-in uses ease-out function. Coming-out uses ease-in function.

5.Transition

Using CSS transform properties to achieve the transition effect. And using scale property to make the clicking ripple effect.
Using Follow through principle: after clicking the Add button, the button expands and moves up with the new content together.
Coming-in uses ease-out function. Coming-out uses ease-in function. And making hiding duration is shorter than showing duration.

6.Background

Using CSS transform properties to control 3 layers’ movement to achieve the parallax scrolling effect.
Using reality note: the closer objects should be bigger, clearer, faster and the distant objects should be smaller, blurrier, and slower.
Using ease-in easing function to make the floating feeling.

7.Loading

Context: Attention, Relief, Individualization

Using CSS transform properties to code a trigonometric function in order to achieve the loading animation. x = midX + maxX * math.sin(x). y = midY + maxY * math.sin(2x)
Making two circles move in opposite direction and changing their color when they meet up to add individualization to the animation
Because Framer doesn’t support easing function to customized motion curves, the animation plays in the linear way, which could be done much better.

8.Scrolling

Using CSS rotateX property to mimic the folding effect. And listening to scrolling event to trigger the animation.
Using Reality principle: adding shadow to folding card. The shadow changes as the card folds. Also, the up-side shadow should be darker than the down-side.
Using Utils.modulate() to map scrolling’s distance to rotation degree and shadow opacity.

9.Hover

Because there is no mouse in the APP environment, I replace long hover event with long press event.
Using Anticipation principle: before the heart scale down, making it scale up to make animation more smooth.
Coming-in uses ease-out easing. Coming-out uses ease-in easing. And heart filling effect uses linear easing.

10.Image

Using creativity to make static images into animated images to create interesting visualization effect.
Drawing good quality images: pay attention to shape, primary color, linear-gradient, shadow and highlight.
Adding relationships between two images. Like my example, creating a time elapse atmosphere from day to night.

See all 10 Framer animations:

Framer-Animations-for-10-Mobile-Interaction-Situations Github Address

PART SIX

1.Static images frist

It might be a messy if you just go ahead to the animation building part. From my opinion, it is better to sketch all your ideas on static images first. It won’t cost you much time but it will help you figure all your ideas.

Later, when you create animations, you have a very clear goal of knowing what you want to achieve. Also, if you use Framer to build your animation, Sketch is definitely a good static image helper, whose artboard can be directly imported into Framer.

2.Open to techniques

At the very beginning, I preferred to master only one tool and use it to do everything. However, later I realized that if you want to increase your woking efficiency, always choose the right tool to do the right thing. Don’t be afraid to try new techniques. Take a while to know each tool’s features and you will be amazed by how much time you will save.

For example, you can use illustrator to draw shapes, use photoshop to add effects to shapes, use sketch to layout shapes, use Framer to make interaction animation, use afterEffect to edit animation, and finally choose a Video-Gif transfer tool to export good quality Gifs.

3.Stay hungry, Stay foolish

Don’t expect to make good animations once for all. It does take time and patience. All my animations still have a lot room to improve. Stay hungry for ideas, new techniques, suggestions and good friends. Stay foolish for yourself and your works. Never be satisfied about your status quo, just keep going.