What Science Can Teach You about Designing Great Graphical User Interface Animations

When we create graphical user interfaces (GUIs) that mimic the physical world our users can easily understand and use them—simply by predicting how the GUI will behave based upon their (and our) common experiences in the physical world. One way to mimic the physical world is to use animations to show how objects change and move on the GUI. Here, we’ll show you the basic cognitive science behind how people understand the physical world and give you examples of how software giant Google applies cognitive science in their Material Design. Grasping this knowledge means you’ll be able to design GUI animations that are equally easy to understand because they correspond with the laws of physics that govern the phenomena around us. That way, your user will know what to expect from your GUI, whatever its theme or the nature of the business.

Thank you for reading this post, don't forget to subscribe!

When you have a fundamental grasp of what makes animations easy to understand, you can make better design choices in situations where design guidelines do not cover the idea you want to realise. This means—as long as you keep a firm hold of the discipline while casting a careful eye over even the smallest details of how you want your design concept to appear—you can really reach for the sky here. There should be no reason you can’t produce truly innovative animations that grab users’ attention on many levels.

Animations and the Physical World – Mimicking Movement

Users have an inherent understanding of the properties of physical objects; so, whenever we make GUIs mimic the physical world, users will find them easy to understand. One of the properties of objects in the physical world is that they can be moved in three-dimensional space. On GUIs, we use animations to show the user how objects move or can be moved. We also use movements—sequences showing change—to give the user information about what is happening to a GUI object. As an example, think of the movement you see when you minimize or close a window in many user interfaces. The window becomes gradually smaller until it disappears at the dock or taskbar where you first opened it. On a PC, when you have numerous windows open and start closing them, one by one, you’ll notice the width of the remaining window tabs increasing—until you’re down to about five open windows. This effect mirrors the real-world phenomenon of items’ spreading out or squeezing together so as to make use of (or ‘enjoy’, even) the available space.

When you minimize a window on an Apple MacBook, a brief animation shows the window minimize to the dock.

Even though the movement is quick, it gives you an instant, basic understanding of the action that just took place. From a technical point of view, minimizing a window does not require making a movement; you are not making a physical object smaller. However, from the user’s point of view, the idea of an object’s becoming smaller before disappearing is very easy to understand. Mimicking the behaviour of physical objects means that the user knows what to expect from the GUI because he/she can rely on his/her experience with the physical world.

Read Full Article

Leave a Reply

Your email address will not be published. Required fields are marked *