What science can teach you how to design good graphical user interface animations?


What science can teach you how to design good graphical user interface animations?

When we create the imitation of the real world the graphical user interface (GUI), our users can easily understand and use them, just according to their (and us) in the physical world Shared experience can be used to predict the behavior of the GUI. One way to mimic the physical world is to use animation to show how objects are changed and moved on the GUI. Here, we’ll show you how people understand the basic cognitive science of the physical world, and illustrate how the software giant Google applies cognitive science to material design. Mastering this knowledge means that you will be able to design GUI animations that are equally easy to understand, because they correspond to the laws of physics that govern the phenomena around us. This way, regardless of the topic or business nature of your users, your users will know what your GUI expects.

If you have an understanding of the basic knowledge of animation, you can make better design choices without covering the ideas that you want to implement. This means that as long as you keep the discipline in place and carefully consider the smallest details of what you want to design, you can really reach the sky here. There should be no reason not to make real innovative animations and to attract users’ attention on many levels.

Animation and the physical world – the imitation movement.

The user has an internal understanding of the properties of physical objects; So, as long as we let the graphical user interface mimic the physical world, users will find it easy to understand. One of the properties of objects in the physical world is that they can move in three dimensions. On the GUI, we use animation to show the user how the object moves or moves. We also use motion – to show the sequence of changes – to provide users with information about the occurrence of a GUI object. As an example, consider the movement you see when you minimize or close a window in many user interfaces. The window gets smaller until it disappears in the dock or taskbar when you first open it. On a personal computer, when you open multiple Windows and start closing them, you notice that the width of the remaining window tabs increases – until you open five Windows. This effect reflects the real world phenomenon where objects are expanded or squeezed together in order to take advantage of (or “enjoy”, or even) available space.

When you minimize the Windows on the MacBook, a short animation display window minimizes to the dock.

Even if you’re moving fast, it will give you a basic idea of what just happened. From a technical point of view, minimizing Windows doesn’t need to be moved; You’re not making a physical object. However, from the user’s point of view, the idea of getting smaller before disappearing is easy to understand. Copying physical objects means that the user knows what to expect from the GUI, because he/she can rely on his/her experience in the physical world.

“As infants, we learn and build models of world physics. What happens when we start to touch pixels with software? The same parts of the brain are trying to understand: “what is the physics of the world?” . First of all, there’s nothing like a world of inconsistent physics worse, because it means that you keep learning – constantly learning, constantly learning, because everything is new, a surprise, does not agree, you can never settle into effective optimization “.

-谷歌 materials design vice President Matias Duarte.

Here, you will learn about user (if they are humans) understand the basic cognitive science of physical object, so you can design a GUI animation, the animation is also easy to understand, because they correspond to the world of physics. We’ll also give you some examples of how GuGe USES our understanding of the physical world in the material design guide. Before we get into cognitive science, let’s start with a few careful points that use animation.

Use the rule of thumb for animation.

If we don’t use animation, they become trouble rather than help. They will take up too much time and attention. This may seem common, but you might be surprised how easily confused or trapped in a seemingly magical idea can happen. To avoid this situation, you need to take a few steps to see the big picture. In other words, always consider the following rules of thumb for GuGe animation guidelines:

Always start by thinking about what the user wants to achieve and then help him/her to do that.

Use animation when they can help users and provide information; 99% of the time, you shouldn’t use animation just because they look good.

The animation movement should make sense. Think about how you want to tell the user by using animation and design the movement accordingly.

Animations should be subtle and don’t take up more time. The user’s time is as valuable as any other user.

Now that we’ve learned, let’s look at how users understand the properties of physical objects and how to use their understanding to create excellent animations.

How do users understand physical objects?

Object knowledge is the basic part of how humans understand the world. Elizabeth speyer grams (Elizabeth Spelke), renee, baratheon root (ReneeBaillargeon), and other researchers for many years of careful investigation shows that physical objects and their characteristics of infants and young children period we have a basic level of understanding.

From infancy, we form expectations of physical properties and how we interact with them.

Babies expect objects to behave in some way and are surprised when they do something different than what they expect. Some of the things we understand are:

Objects can be masked – but they still exist.

Objects can be moved – but they are not moved by external forces.

Objects will not suddenly disappear and reappear elsewhere. Instead, they move the smooth path.

Objects move when they are in contact. An object can move another object if it hits another object, but they do not affect each other.

If an object is released in mid-air, it will fall.

Smaller objects may fit larger objects, but not the other way around.

If an object moves itself, it has some form of internal energy or intention, in which case the behavior may deviate from the behavior of the inert physical object.

As you can see, in the list of principles and fundamental physics is very similar, even so, from the character and object interaction in the process of how to experience the behavior of the object, and not the actual physical point of view, even more so. You don’t need to know the physics behind gravity, when you put down your phone, it falls to the ground.

Our experience of objects is deeply ingrained and has a profound effect on how we interpret and predict the adult world. It is vital to keep this understanding in mind; Imagine if the object did not conform to these laws, or if we, for whatever reason, had to keep it, how terrible the world would be to relearn what to expect. Most guis are designed to be an object system. GUI objects are easy to understand because we can use our expectations of physical objects when we interact with them. When we see an application icon that looks like a physical object, we expect it to behave like a physical object. It makes sense for us to drag and drop GUI objects, because that’s what physical objects do. If I were to place an application on another app on apple’s iPhone, I would expect other applications to move to one side, just as a physical object would bump into each other. We can design some object properties as static graphics, but many object behaviors and interactions are things we can enhance with animation.


Please enter your comment!
Please enter your name here