Blog about architectural and design psychology

Put your design in motion

What is exciting about our environment is that it constantly moves and changes. The same applies to digital worlds. Purposeful animation of software and websites can significantly improve their user experience.

Modern software offers ever new interaction possibilities and interfaces develop their own life through sensors and algorithms. They move, react to users, roll up and down, flash up. It makes users totally forget about the fact that they are really looking at a screen consisting of thousands of pixels and interacting with digital program code. It almost feels like you were pushing real buttons, turn controls and push around tiles.

This is also possible due to successful motion design. To determine how an interface should react and move has become an artisanship on its own. But which advantages come with animated user interfaces compared to still ones? And when does animation turn into a disturbing factor? There are various answers to these questions in Psychology.

Movement catches attention

Movement is related to attention in different regards. Principally, alterations in our visual field attract our attention. Besides movement this can also be changes of brightness or color. Constant movement, however, we often do not perceive as alteration. For example, we might not pay attention to a ceiling fan moving at a steady pace. Yet if it suddenly stops, we might notice immediately.

From an evolutionary perspective, this may be some sort of protective mechanism. As our attention is limited, it has to be distributed economically. Changes in our environment signify a new situation. Thus, we automatically center our attention on it in order to evaluate whether it is relevant for us.

In the cinema, we are riveted by moving images on the large screen.

In the cinema, we are riveted by moving images on the large screen.

In addition, our attention is attracted more by moving images compared to still ones. According to various studies, a television program arrests our attention more strongly if there are moving objects in the scene or if the video is zoomed or panned. Also, we attend a program more closely if there are frequent cuts between scenes. This technique is often used in trailers or advertising films.

Accordingly, a user interface that changes and moves is likely to increase the attention of its users. However, many examples show that this effect should be handled with care. Banner ads and pop-ups can distract users of a website or software and frustrate them. The Microsoft avatar Clippy is another example. The intention of the cute office supply originally was to assist users and provide them with helpful advices. Yet, by constantly appearing on the screen and catching peoples attention, it threw them for a loop. The attention of users should therefore be directed towards the content that is most relevant to them, like a blinking cursor does it.

Movement explains relations

Our environment is not rigid. Movement and alteration form an important basis for us to understand the world. Amongst others, Gestalt theory deals with this idea. One of the Gestalt laws is the Principle of Common Fate. Roughly speaking, it describes that we perceive elements as coherent that move in the same way. We consider cars driving on a heavily trafficked, multilane highway not only as individual vehicles, but also as a consistent flow of traffic. Indeed, depending on the context at hand, it can make sense to think about traffic this way, as it has its own laws and modes of operation that cannot completely be explained by looking at its parts. An example is the emergence and disappearance of congestion.

We perceive cars on the streets not only as individual vehicles, but also as part of a traffic flow.

We perceive cars on the streets not only as individual vehicles, but also as part of a traffic flow.

In design, relations between objects can be made clear with movement, too. For instance, if a user performs a certain activity on an interface, related elements could be highlighted. This might be helpful for drag and drop interactions: While a user is dragging an object across the screen, areas could light up in which the object can be dropped.

In addition to such overarching relations, movement also helps to identify elements and there distance from us. If you are driving on a street yourself, you will observe that objects in your environment apparently roll past with a different pace. Traffic signs at the edge of the road suddenly pop up only to disappear shortly thereafter. In contrast, your can see the hills on the horizon for quite a long time. They thus seem to move slower than the traffic signs. In psychology, this effect is referred to as motion parallax.

This effect has already been applied for example in the interface design of smartphone home screens. If users flip through the different pages on their home screen, in some operating systems the background image slightly moves, too. This creates the impression that the background is a bit more distant than the app icons. Besides being an interesting visual effect, this can make the icons and their labels more perceptible.

Movement creates meaning

If a teacher explains something to their students, they might gesture, write something on the chalkboard or show short video clips. Movement can help understanding complex processes and correlations more easily. High transparency and intelligibility are also basic requirements for usable interfaces. Purposeful animation can help explaining the user the structure and functionality of an interface without the need for reading long texts or interrupting the current workflow.

Using real-world metaphors can be a great method in order to achieve a motion design that contributes to the intelligibility of the interface. If software looks and reacts like something that users already know from their environment, they intuitively know how to interact with it. For example, an interface may work like a book, a stack of boxes or a blackboard. Yet metaphors can also be much more abstract. The so-called Image Schemata show how people’s experience with the real world can be dissected into smaller components that can be used as a guidance for user interface design. We will deal with this topic in more detail in one of the next articles.

Sudden changes on a graphical user interface are often not comprehensible. If a user tries to move an object into a folder and the object suddenly disappears, her or she cannot be sure if the object was actually successfully transferred into the folder. However if the object visibly moves towards the folder and disappears there, the interaction is more transparent. Such an animation happens for example in the MacOS when the user downloads a file from the internet. The file then jumps from the website into the Downloads folder in the dock.

AttentionToast

What is more, movement allows to enhance the meaning of design elements. A frequently used element in interaction design is a toast. This is a little banner that usually appears at the top or bottom of the screen and contains a certain message to the user. The way how such a toast appears can communicate meaning that goes beyond the actual text. An important message may pop up more vehemently and distinctly. However, if the toast for instance asks the user to sign up for a newsletter or to fill out a questionnaire, if might appear more friendly or even playfully.

HelloToast

Movement is fun

A user interface that is responsive and changes its appearance invites to test it and play around. This becomes clear when looking at computer games such as Angry Birds. Here, the challenge is to let birdy fly into constructions of different material in order to completely destroy them. The rationale is the same as with can knockdown. The noise of cans crashing down is a major part of the game. Motion design – and in this case also sound design – thus has the potential of greatly increasing the fun factor of an interface.

If they are not created for a computer game, animations should be design in a way that they do not interfere with the main tasks. Especially in situations, when certain actions need to performed quickly after one another, animations should be kept short. The app Tinder is an example of how good motion design might look like. Users can indicate whether they are interested in another person by swiping a card on the screen in either one or the other direction. As users tend to do this in quick succession, the animation should be short. However, as this is a key feature of the app, it highly contributes to its user experience.

The solution is that the cards react to subtle differences in the user interaction: Depending on how exactly the user swipes the card, it slides off the screen in a slightly different way. This gives the cards a very realistic feeling and the swiping of cards is extended by a playful aspect. Anyway, the animation only takes a few hundred milliseconds and thus does not impede the user.

In addition, it is also important that motion design fits the respective area of application of the software. Animation should be used more sparingly in interfaces that are made for very precise or security related contexts. Yet even in such cases, motion design can improve the intelligibility of the interface and increase peoples attention. Irrespectively of whether a software is used for entertainment or if it is a business application, it thus makes sense to implement a thoughtful motion design.

Tags

Digital
Interface Design
Motion Design
Software
UX