All web designers and digital web agencies out there will know that material motion is currently one of the key trends in web design. But even those of us who are not specialised web designers yet have a website as an integral part of our digital marketing strategy, and so need to be aware of meaningful motion. So what exactly is it?
The phrase was coined by Google, who define the concept as: “Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.” The basic idea of meaningful motion is that the user controls the experience rather than being a passive observer.
They no longer need to be dependent on a pseudo button on a digital screen to navigate around, but there should be a single environment. Any interactive objects that are used should maintain continuity as the experience changes.
The use of motion in this way provides guided focus between views. The user is not left hanging, wondering what is going to happen next, but the motion is happening while things like fetching content or loading the next view are going on behind the scenes. This leads to continuity and synchronicity between different stages of the experience.
Meaningful motion also builds on a user’s intuitive use of a website or app, with sufficient hints as to available options and logical relationships between elements. The overall effect is much more seamless and enjoyable than more traditional hierarchical navigation.
Google outlines the following advantages of material motion:
- Responsive: Material is full of energy. It quickly responds to user input precisely where the user triggers it.
- Natural: Material depicts natural movement inspired by forces in the real world.
- Aware: Material is aware of its surroundings, including the user and other material around it. It can be attracted to elements and respond appropriately to user intent.
- Intentional: Material in motion guides the user’s focus to the right spot at the right time.
Reading the above, it makes sense to adopt the principles of material motion – but like all things, if you are going to use material motion it needs to be done well! Here are some tips from Google on how to achieve this.
Be quick: An interaction shouldn’t keep the user waiting longer than necessary.
Be clear: Transitions should be clear, simple, and coherent and should avoid doing too much at once.
Be cohesive: Material elements are unified by their speed, responsiveness, and intention.
So, how moving is your website? If it’s not, then now is the time to get things moving in every sense of the word. Not to keep moving forward in the digital world does not just mean standing still but going backwards! So whether you are a web designer, digital web agency or marketer, the clear message is that material motion is the way to go in 2017!
Author: Robert Walker
