How Motion adds Emotion

Motion: A Feedback Mechanism

Think about the last time you entered a password incorrectly. How did you know the password had been rejected? Did the screen shake? Did the colour of any of the buttons change? Were there any visual changes to the text cells? If you answered yes to any of these questions, then you have already encountered one of motion design’s most important applications: providing the user with feedback. This feedback is extremely important, as it indicates to users which elements of a site are functional, and helps users predict what those elements are likely to do. We achieve this feedback by adding small and subtle visual changes to elements of a website that respond to the user’s action, otherwise known as micro-interactions. Micro though they may be, you should not discount the power of these interactions. Experienced motion designers can use these small cues (often as simple as a change of colour, size, position, and rotation) to create a seamless and highly usable site that visitors can navigate through with ease.

Grasping Attention, Guiding the User

Motion designers, in other words, seek to populate a website with a set of subtle, visual signposts that guide a user throughout a website and focus their attention on specific elements that the designer wants to highlight. Sometimes these signposts appear as the micro-interactions that we have been discussing so far. But these are not the only ways to improve a website through motion. Motion designers also use decorative moving elements and animations to direct the user’s attention to a specific object. As an example, imagine that the diagram below is a set of buttons that a user can use to navigate.

Consider further that you know that a particular user needs to reach a specific portion of your site. By doing something as simple as adding a couple of pixels of motion to the element you want the user to interact with, you can both grasp the user’s attention in a way that feels natural (the eye cannot resist movement, after all) and seamlessly direct their attention towards the information they require.

Focusing and directing user attention, we must point out, is particularly crucial, as websites often contain a large amount of information, content, and functionality. While we often cannot escape the need to populate websites with so much ‘stuff’, we also cannot escape the fact that users base their decision to become a customer on the first 3-5 seconds they spend on a page. Motion design that quickly grasps and directs user attention is therefore vital to a successful modern website.

Decreasing Distraction

Another way motion designers seek to grasp and keep hold of user attention is by preventing its opposite: user distraction. This task is in some sense already accomplished through a website that has been effectively signposted with visual cues. Sites with a large amount of content and functionality, however, often take a period of time to load and become ready for the user. While these load times are relatively small, we know that users make decisions based on seconds-long encounters with a site’s UX. To avoid the distraction that comes with waiting for a site to load (and the risk of the user leaving the site before it has finished), motion designers often use animations to mask these load times and prepare users for their encounter with a website. As an example, we use a loading animation for our own website that both directs user attention and previews the work we do at Studio Vi.

This concept can equally be applied to transitions between two on-site pages that require loading times. In both cases, animations work to hold user attention while relevant information and content is being prepared for them.

While animations can be an effective tool for decreasing user distraction, it is important to point out that motion designers must walk a fine line when using motion for this purpose. A little motion, it might be said, goes a long way; and too much can send users in the completely opposite direction (running away from your page!). Human beings are prone to notice all motion, with the result being that motion design must be delicate and restrained. Otherwise, animation quickly becomes distracting and overpowers the user’s attention. When we design a visual cue for a button that leads to the checkout page, we want users to be aware of the location of that button. What we do not want is for users to be so distracted by the animation that they forget to complete their purchase entirely! All of this is to say that when it comes to motion design, subtlety is the name of the game.

Narrative and Storytelling

So far, we have discussed how motion design can be used to reinforce the ‘roadmap’ that users employ to navigate a website (for other ways of drawing this roadmap, see our discussion of Information Architecture). But this is not the only way that motion design can be used to help users make sense of a website.

Motion can also act as a storytelling device that helps tie the website together as a complete narrative in line with the story that a brand wants to tell. Let’s use as an example a website that Studio Vi recently completed that has motion design at its core. Kennermerduin Duincampings is an organisation that runs three campsites situated in the Dutch sand dunes. Working with Kennermerduin, Studio Vi was able to create an interactive ‘Christmas card’ that details through motion everything the organisation has to offer.

The website brings you along a journey through the Kennermerduin campsites as if you were in the bus that travels across the page as you progress through the site. All the graphical elements that populate the site were animated in Adobe After Effects then exported with Lottie. To create a 3D effect, Studio Vi used layers of animations that move at different speeds as you scroll. All these efforts came together to create a page where motion effects tied together an immersive, narrative experience for the user. This immersiveness is itself a strong marketing tool – according to our own internal data, over 25% of the users that visited the Kennermerduin site went on to visit one of the three campsites featured on the website.

Mood, Personality, and Brand Affinity

Motion can also be used to bring a website in line with a brand’s personality. Animations, even in their simplest forms, can effectively convey emotions that range from joy to sorrow, from dread to elation, and from fear to bravery. The ability of motion to add emotion allows designers to build websites that look, feel, and perform in ways that spark feelings in their users. Motion can thus reinforce the psychological attributes that a brand most wants to associate itself with. Having a website that has affinity with a brand at such a fundamental level both makes a website unique and creates a more enjoyable user experience.

To take another example from our portfolio, we recently completed a project for the European Academy of Allergy & Clinical Immunology (EAACI) where we worked to completely revamp their web presence. As EAACI is an organisation dedicated to fighting allergy through the sharing of research, we elected to use an animation of connecting circles that represent the ever-growing network of scholarly research that EACCI uses to improve allergy treatment. As our work with EACCI demonstrates, motion can be effectively used to create and emphasize brand affinity, all while simultaneously improving user experience and, as a consequence, the performance metrics of a particular site.

Case Study: Zandbeek

As a final example of the power of motion design, let’s examine another of Studio Vi’s recent projects. Zandbeek is a content marketing agency that works with various brands and helps them tell their story through various content production strategies. Wanting to rebrand their own web presence, Zandbeek came to Studio Vi and partnered with us to create a suitable website. Key to their rebranding was a change in their tone of communication that needed to be reinforced in the visual aspects of their website. Zandbeek seeks to be concise in their communication and use of images and direct all their content production according to the mantra: “show, don’t tell”.

To reinforce this, we integrated fluid scrolling throughout the website and added motion to the images that populate it. We additionally changed the direction of the website’s scroll, and thus created a cinematic effect that allows users to navigate through the website smoothly and seamlessly. By adding motion to their website, we were able to both elevate the site’s user experience and match it with the identity Zandbeek most wanted to communicate.

Conclusion

Motion plays an essential role in enhancing user experience. Its ability to give feedback that directs the way users navigate through a site is a crucial tool in the UX designer’s toolkit. Moreover, animations allow motion designers to breathe life into websites in a way that both makes them unique and increases brand affinity. Finally, and no less importantly, motion gives designers a powerful visual storytelling tool that they can use to further support brand personality and direct user attention.

Of course, motion must be used in moderation. A subtle touch is vital, as too much can be counterproductive and scare users away. This caveat should not discourage you from using motion on your site. Measured and practised motion design is a UX/UI design strategy with exponential benefits, and it is one that every website should make use of.