Why do we need motion design?

With the rise of international brands such as Apple and Google, more and more domestic companies have begun to pay attention to motion design. More and more teams have realized the importance of motion in product user experience, and more designers have begun to engage in the field of motion design.

But in the end, why do we need motion design? Or what kind of motion do we need? I have been doing motion design for a while, so I will try to use some cases to talk about my thoughts on motion design from the perspective of the product itself.

(Some of the cases in this article are personal works of designers, and some are online products. They are all works that I admire very much. If they are inadvertently offensive, please click me to replace them.)

1. Enhance the comfort level of the experience

Well, it means making users enjoy using your product even more.

Specifically:

1. Representation hierarchy

In order to show the relationship between layers, whether it is a drawer, open, or horizontal switch, etc., let the user know the relationship between this interface and the previous and next one. This is already the most common application.

2. Combine with user gestures for more natural animation performance

When users use gestures, the dynamic direction of the interface should be more consistent with the movement of the fingers, so that users feel that they are controlling the direction of the interface rather than mechanically jumping.

City guide app can throw cards left and right with gestures

3. Pleasant reminder function

It can attract the user's attention when reminders are needed, but it will not be abrupt and will appear as expected.

Action button feedback Error message

City Guides prompts users to swipe left and right on the card when it starts

4.Add extra vitality to the interface

The surprise added beyond the user's expectations can be handsome, cute, or have some physical properties. In short, it allows users to feel the vitality of the product.

readme.io cute input box

Amazon's bouncy menu

Tumblr doesn't like it and my heart is broken~

5. Attract users’ lasting attention

It also increases the user's sense of surprise. Some dynamic effects are added to certain interfaces with large amounts of data to keep the user's attention.

Bubbles display data points in a dynamic form

2. Reduce the inevitable discomfort

Although our products, our interactions, our designs, and our engineers are working hard to make our products better and more advanced, there are always some unavoidable problems, or bugs that may appear, and factors such as poor external conditions that cause our product experience to decline. At these times, adding some animations appropriately can make up for the uncomfortable experience when these situations occur.

For example, the following:

1. Make the wait more pleasant

It often appears in loading, refreshing, sending and other interfaces, making waiting visual and even less boring.

#p#

Download Progress makes downloading no longer boring

App loader interesting loading animation

gear-powered Pull to refresh if you want to pull again

2. Animation of the failure interface

For example, refresh failure, page error, and offline prompts.

download Even if I fail, I still feel cute~

3. Increase the sense of continuity between interfaces

Interface jumps are inevitable, but if two originally independent interfaces or events have some kind of specific connection, it can be more interesting and no longer an abrupt jump.

When the iOS Animation Download interface jumps, some elements are retained to the next interface.

Filter Menu Keep the items you need and remove the ones you no longer use.

Elevate

3. Unnoticeable motion effects

I specifically mention this category separately because it is not easy to be found and ordinary users usually ignore their existence, but many times these small details make the interaction more interesting.

1. Silently increase feedback

Provide interesting positive feedback for user actions.

Twitter favorite click feedback

2. Remove elements that users no longer need

As users operate, some content is no longer of interest to them. At this time, they can be hidden.

CityHour Calendar Animated Interaction

Steller

Most of the examples above are quite distinctive, but in most actual situations, excellent motion design involves several points that are met at the same time. In general, motion effects serve the user experience, and motion effect designers should pay special attention to the interaction logic, so that your work not only looks handsome but also truly plays a practical role.

***The important thing to remind you is that you should never waste the user’s precious time to watch your purposeless animations.

The article summarizes some of my own ideas. If there are any shortcomings, I hope you can point them out.