In our summary of what to look out for in 2017, we highlighted meaningful motion in web design. It’s a concept defined by Google, as part of Material Design.
I thought it would be useful to round up some examples of meaningful motion, so below are five examples which I’ve taken from Google’s Material Design guidelines, as well as the Material Design Awards 2015 and 2016.
There is a whole bunch of information in Google’s guidelines – on duration and easing, movement, transforming material, choreography and creative customization – so do go and check it out. The following simply serves as a taster.
And for more on this topic, check out these Econsultancy resources:
- Mobile UX (User Experience) & Marketing Training
- User Experience and Interaction Design for Mobile and Web
First, what is motion in web design?
Google gives us a very poetic definition, as it happens, stating that ‘something as simple as tapping a card to expand and reveal more information is made better by fluid animation’. Some other salient points:
- ‘..the user is given guidance with a clear focal point.’
- ‘[Motion] conveys energy, drawing inspiration from forces like gravity and friction.’
- ‘..material design aims for motion to feel natural..’
- ‘..motion should above all else help guide users, providing them with the right information at the right time.’
The following video from Google demonstrates some of the principles of Material motion.
Now for the examples…
1. Google Photos
The animation when you delete photos feels incredible natural, but Google has not taken the literal approach here, as it points out in its guidelines.
If every photo had slid along into the next position, ‘overlapping motion paths’ would have made the experience too messy. However, Google slides the whole grid to the left, for a smooth and simple transition.
2. Tumblr app
Tumblr’s app was the recipient of a 2015 Google Design Award for the way in which it uses motion to unite users with content.
There are smooth transitions, with ‘layers of detail loading progressively’ and pacing is determined by context.
One design feature is the transformation of a button’s icon when selected, with ‘create post’ icons transforming into a cancel action. The same technique is used in some Google services to transform menu icons into a back button, so users can return to a home screen.
This is actually a demo created by Google, which I’ve taken from its guidelines. It’s a really clear example of how content blocks can simply transition when tapped.
4. Google Duo
Google Duo is a video-calling app that launched in August 2016. It was updated in December 2016, to improve video quality and allow easier signup, and could well challenge established video calling services in 2017.
The video below shows a number of examples of motion, which Google says ‘proved harder than expected’ due to the spare nature of the interface, or what it calls ‘the lack of connective tissue within the interface’.
Durations are longer here, to ensure that transitions are meaningful, that the user knows what action they have performed.
5. Fabulous – Motivate Me
This app was awarded a 2016 Google Design Award with the judges praising ‘crisp state transitions and pleasing goal completion animations’.
There’s a video of the app in action on its app store page. I can’t embed it here, but you can watch it on YouTube.
Note that all these examples are apps, but that doesn’t mean these principles aren’t relevant to website design.
With mobile data input now arguably more important than desktop, marketers should be discussing motion with their tech teams.[“source-ndtv”]