2

How to use motion for better UX

 1 year ago
source link: https://uxdesign.cc/how-to-use-motion-design-to-improve-the-ux-of-digital-products-42f40feab46f
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to use motion for better UX

We thrive to create the best possible experience for our users. But often designers forget about motion design, which can be a powerful tool to get there. Let’s see how to apply it properly.

Animated title image, introducing the topic of this article “UX & Motion Design”

by Martin Maczurek, Head of UX at Cheil Germany

No matter the purpose of your digital product: A good and pleasant user experience (UX) is the key to convincing your users and keeping them in the long run. One tool in user interface (UI) design that is often used thoughtlessly and only for decorative purposes is animation. Many overlook the fact that thoughtful and properly used motion design can significantly improve the UX of your product.

In this article, you’ll learn to understand the role of an interface in guiding the user to their goal and how motion design can help your users achieve those goals easier and faster. Through examples, you’ll see how other products take advantage of these benefits and what to consider when using animation for your product.

Animated section image, introducing the section “Basics”

The basics of good UX: Understand the goals of your users and make it as convenient as possible to achieve them.

A user always operates an interface to solve a task that will take them to their ultimate goal. In that sense, an interface is just a tool. Like a screwdriver that you use to turn a screw into the wall so that you can hang a picture on it.

If the screwdriver fits exactly, the screw can be tightened without any problems. You don’t need to think about the screwdriver or the screw, instead, you quickly and easily complete the task that takes you to your goal: to hang a picture.

But if the screwdriver doesn’t fit the screw properly, you keep slipping. You have to concentrate on holding the screwdriver in a certain way to carefully be able to turn the screw. You lose sight of the actual task because you have to pay attention to the correct operation of the tool you have to use. In the end, with a bit of luck, the picture still hangs on the wall, but it took much longer than planned and your nerves are shot. In the worst case, the screw breaks and you don’t even reach your goal. In both cases, one thing is certain: you won’t repeat that task anytime soon.

This analogy shows the relationship between user to interface and how frustrating it can be when the interface doesn’t properly support the user in solving the task. However, if it works intuitively and well, the user does not even have to think about how to use it. In the best case, the user even forgets that there is an interface between him and the task at hand.

You very likely became a victim of bad user experience somewhen in your everyday life. This article will painfully remind you of some of those moments.

But what does all this have to do with motion design?

Animated section image, introducing the section “Application”

Here are 5 tasks you can solve with motion design to make your user’s lives easier

You now know how important it is to know the goal of your users and what role the interface plays in that. Below are some real-world challenges and how animation can help you overcome them.

The list is based on Don Norman’s design principles from his book “The Design of Everyday Things”, the “10 Usability Heuristics for User Interface Design” by Jacob Nielsen, and the “Principles of user interface design” by Lucy Lockwood and Larry Constantine, the founders of “User-Centered Design”.

Note: Even though the most important use cases are covered here, they are certainly not all of them. It is a good practice to always question the exact purpose of an animation in a certain situation and to evaluate if it helps the user in any way to achieve their goal.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK