Written by Carrie Cousins

Google’s Material Design is here to stay. The design concept is becoming more and more a mainstream tool. More apps are adopting the aesthetics and, maybe more importantly, the interaction patterns associated with Material Design.

image00

Photo Credit: Yahoo! Mail App

In October, Yahoo! updated its mail app with a Material framework for all device platforms. Will the search engine’s website be next?

Chances are that it will be. Material Design is quickly evolving to include websites across multiple platforms and devices. There’s even a Material Design Lite kit to help designers use the design framework and patterns in a jiffy. Here’s what you need to know to use it for any digital design project, regardless of whether it’s for an Android device.

Focus on Interactions

image02

Photo credit: Pocket

Material Design distinguishes itself through its focus on interaction as the core function within a design system. And that’s precisely why more designers are embracing Material Design.

From Google:

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

This definition from the Material Design docs … well, defines how interactions should work. Interactions should be intuitive and relate to how a user would expect them to work in the physical world. Quite simply, you feel the design and know how it works without really looking at it.

Think About Physics

image04

Photo credit: Compstak

When it comes to movement and interaction, physics plays a large role in the inner-working of Material Design. (This is the one area where many interfaces with a Material appearance fall short.)

Google specifies that motion and interaction of elements should happen as they would if the elements were physically touchable. They should have weight and mass, should move with a smooth flow that is fluid and life-like and should “respond” according to user touch (or click). Any and all motion should mirror that physical action.

While that may seem like an overwhelming bit of information, it comes down to a single concept: everything in Material Design should appear real. Users should see interactions as a physical thing and feel like they made an action on the screen happen with absolute intent.

Create a Layered Interface

image05

Photo credit: Material Design Lite

Material Design interactions are part framework and part design aesthetic. While the way these websites and apps work is of utmost importance, what distinguishes them are the  visual components. Layered interfaces are one of those design elements.

As we discuss in the e-book Mobile Design Trends 2015-2016, layering involves stacking multiple elements, like a deck of cards, to create a single, unified experience that is both functional and aesthetically pleasing.

Think of this as having multiple sheets of paper that are stacked together to create a framework for how everything within the design works. These sheets are a little different from physical sheets of paper in that they can change shape and form — such as stretch or bend — but work in a way that is seemingly realistic.

Layering establishes the relationship and function of content within a design. (Each container often has one job, such as a link or video player.) This approach also establishes depth, as elements in other containers are layered, creating a nearly three-dimensional world.

image03

Photo credit: Dropbox

Even something as simple as Dropbox’s circular editing icon includes a bit of layering. Look at the positioning of the icon on the open document. It appears to almost float above the open window with a shadow that extends into the document’s open window. This subtle layering is precisely what Material Design encourages.

The look of layered interfaces is an extension of other design techniques that have been growing in popularity for several years, including flat design and minimalism. What makes them different now is the pairing with more physical interactions and movements.

Animation Must Communicate Meaning

image06

Photo credit: Alchemy Digital

When it comes to creating Material interactions that matter, animation is a key component. But it is a lot more than a dancing baby on the screen.

Use animation to tell users what to do and what to expect. Animated elements should lead users from Point A to Point B without them really having to think about the steps along the way. Although, they can certainly still add a little delight to a page, as seen in the image above.

And they are all reality-based. Here’s an example from Google: “Transitions, or actions triggered by input events, should visually connect to input events. Ripple reactions near the epicenter occur sooner than reactions further away.”

Meaningful Micro-Interactions

image07

Photo credit: Slack

Sometimes the smallest parts of the design are the most important. Micro-interactions – those tiny parts from alarms to text messages to notifications of almost any kind – are a vital part of our everyday lives. Designing them in the roots of Material Design can help you understand the why and how of creating something that users want to interact with.

Micro-interactions tend to do, or help you do, several different things:

  • Communicate a status or bit of feedback
  • See the result of an action
  • Help manipulate something

While micro-interactions are everywhere, Material Design, nails the concept, spelling out that any responsive interaction proads people to go deeper.It can still be delightful and surprising, but a microinteraction should encourage users to explore further.

What it all boils down to is user appeal. The guidelines – specifically in the authentic motion section – help you visualize and create animations that feel lifelike. While all micro-interactions are animations, it is becoming increasingly so.

Takeaways

image01

Photo credit: Blue Bottle Coffee

So what does all this mean if you are planning to use Material Design for a project – Android or not? Study the documentation and design for usability.

It all comes down to something that simple.

What makes Material Design work and why it’s appealing to designers is that the rules are pretty clearly detailed. They make sense. It’s hard to argue with the logical of how Material Design should work from a user standpoint.

So even if you hate the aesthetics – and we know some of you do – the interaction guidelines are worth taking another look at. There’s bound to be something in there that you can come away with and use.

If you find this article useful, check out our free e-book on the Mobile Design Trends of 2015 and 2016,  with dozens of case studies from companies like Slack, Nike, Google, Apple, Buzzfeed, Spotify, Waze, Tinder and more.