How Meaningful Movement Improves Engagement and User Experience
As UX professionals, many of us are often faced with a choice. This choice entails us to choose amongst the unending gallery of UI elements and their stimulating movements. But where must we draw the line? How much movement in a web experience is necessary and how much of it is stifling? Let us discuss the considerations to keep in mind while designing a website and weaving movements, which can elevate User Experience to a world where all interactions are seamless, inspired intuitively.
Time it well.
The biggest factor in any movement is the sense of time. It can play an integral part in deciding whether a movement works for or against a website. It’s so subtle and elusive that it is rather a challenge to understand how it can impact our perception and even change the meaning of our actions. While a prompt response will return instantaneous positive feelings, but a carefully architected delayed response will comprise a game-changing ingredient: anticipation. Plan the time of motion effects in unique settings and test them with prospective Users, before introducing them to stakeholders.
Use animations cautiously.
By balancing the transitions within a website Users can be led to an immersive experience. It can intrigue the visitors and promote engagement with the content. Some motion effects, from JQuery libraries such as effects of appearing/filling in/ scaling/ popping etc., create the perception of reality, which can increase understanding and enjoyment. However, when overused, the users can quickly feel disoriented. Find a blend of motions, which do not override the purpose of the site.
Keep it real.
Creativity is often labeled as ‘out of the box’ thinking. However, when it comes to animations, users tend to disregard artistic licenses. When any movement defies the physical laws or takes place in an unfamiliar manner, it can often be the reason for disorientation and site bounce offs. For example, physics has taught us to understand that what goes up must come down. With the same logic, when designing a website’s hamburger menu for a phone, when accessed, should open and close the same way, avoiding unexpected movements.
Repeat movements. Build user learning.
A familiar and consistent animation and movement experience keeps users engaged. Websites should aim to make the users accustomed to the animations. Smooth transitions, fluid changes in device orientation, and physics-based scrolling are some examples of subtle animations. These animations should be repeated through the site to establish familiarity with the interface. The users can know what to expect when they are interacting with an UI element, hence reducing learning times drastically. Remember, if you are looking to add a new animation, keep it close to the existing animations, as much as possible, to inhibit user fatigue.
Adopt the UI material library as the basis of movement.
Consider a UI element to be grounded in tactile reality, yet technologically advanced and open to inspiration and creativity. Surfaces and boundaries of this element can deliver visual hints that are easily identifiable from our sense of everyday life. Balancing familiar tactile attributes with new affordances that remain within the realm of natural laws can spice up any routine web interaction. Reimagine these elements from your existing knowledge of fundamentals of light, surface, and movement. This can govern how objects move, interact, and exist in space both individually and in relation to one another.
Tips and tricks
Though definitely not exhaustive, these guidelines can help deliver exceptional results for both the stakeholders and the users. But, before I sign off, some words of caution as you dive in to create your own beautiful animations:
Less is more. Keep your animations subtle and real.
Always provide a static version of your UI elements without animation, to account for accessibility criteria.
Avoid pauses at the points of interaction and user feedback, such as while clicking, swiping or scrolling.
Test these animations in the real world with prospective users.
Do not reinvent the wheel. Introducing new animations can lead to user fatigue, hence stick to what works and what is familiar.
This industry is ever changing. In no time the transitions, will make way for gestures, opening the vistas to a new world of website experiences. Remember to mind the future.