Not that you’ve been living under a rock or anything, but last week Google introduced Material Design. Its goal is to,
“Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.”
Yeah, I just typed that sentence.
Let me boil that marketing-speak down for you. Google Material Design represents a huge leap forward in the thoughtful design between screens.
They’re taking the metaphor of paper, with all its familiar visual cues from the physical world like light, shadow and movement, and adding what they’re calling “magic” to the mix. This magic is simply imaginative extended metaphor that provides context and drives your eye.
This is very exciting, and all about animation. You push a button and not only does it execute a task related to the glyph you just mushed, but now moves elements on screen to drive your eye to the next phase of the task. It informs what you’ve done, gives hints as to how to undo it, and encourages play.
Software’s been doing something like this for decades, but now Google has established considerable thought leadership on the topic.
Here are the STANDOUT examples provided in the Google Material Design introductory document that make this a BIG deal for us at Raizlabs.
1. Floating Actions
This is a thoughtful addition to the designer’s toolkit that aims to promote a single task on a screen. Where long ago we used to have heavily rendered buttons to promote an action, we now have thumb-tap-sized flat circles overlapping seams in a very distracting way. You can’t miss them. They’re placed in jarring cross sections right above where content meets other content. And colored in a hyper-saturated happy hue.
The best part about these is their tendency to animate on contact into the primary container or hero element of the content and task on deck. They’re very cool eye drivers and if used responsibly, can really streamline and signify a great deal to a user. We’re really looking forward to exploring their potential.
2. Meaningful Transitions
Special care and focus is placed more and more on how elements rearrange themselves in time and space. These animations—whether introducing new “paper” elements, removing elements, or rearranging the current ones from screen to screen—all move in such thoughtful choreography that fewer persistent on-screen signifiers are needed to convey capabilities. It’s really special and the future of good app design. Check out these examples below or get the whole story here.
The contact in this transition never leaves sight. Once it’s selected, it stays visible as we transition to the next view through the z-index.
The photo in this transition stays in the view as we transition and reveal the controls to Play/Pause the track. In both examples the transitions keep the context visible and drive your eye to the action items.
3. Heavy Focus on Z-Index
They’ll be adhering to some interesting principles around the placement of screen elements in the z-index (depth) to provide hints as to where the user is — system-level versus App-level — and what they’re supposed to be doing. They’ve even gone so far as to publish best practices on shadow values to indicate the level at which z-index objects reside in.
This is a little heavy-handed and worrisome in my opinion, particularly because it outlines rules and shadow values for 5 levels deep. And the shadow on a 5th level up element appears as though the object is sitting off the “paper” about a quarter of an inch. I can’t think of screen that would require such a button. And I doubt I’ll ever need depth past the third.
Regardless, this is something we here at Raizlabs have been exploring for some time now. Experimenting with the z-index saves a lot of real estate and affords us much cleaner designs without losing context. It’s good to see Google espouse similar beliefs by putting together some serious guidelines on the concept. We’re completely on board for this one.
4. Image Loading
This is often overlooked. But Google just did a wonderful job devising a way to present a user with a newly uploaded images and image transitions in three beautiful stages. It takes about a half second but the results are awesome. For me, it gives the impression that the content and device is a living breathing thing. And the pace is much like watching somebody blink their eye in slow motion. Or a time lapse of a flower blooming.
It’s not abrupt or robotic. It’s a gentle flow that evokes a calm and comforting feeling. These are the details that do a ton for people subconsciously. Check out the example below.
The image transitions through three phases: opacity, exposure, and saturation.
The Color Concern.
Things have been looking like a box of neon crayons of late. Google’s choices here again push further and further into the realm of over-saturated, no possibility of ever occurring in nature, trying too hard to appear techie colors.
I get it. It looks great. It pops off of the seas of texts and shades of light gray that fill every screen we see, and it helps drive your eye. If done with purpose and restraint it’s a win. But it’s going to be a problem for me. And possibly for users down the road too.
Here’s why: software isn’t just built by the likes of Google and Raizlabs. And every brand in the world making something is coming to the table with their own box of crayons. And not all of these companies have a design team that wins the color fight. Let’s admit it. Sometimes marketing folks derail usability.
Heck. I’ve had “brand police” breathing down my neck for seven years in the interactive space actively throwing user experience under the bus in the name of “branding.”
It won’t stop and that’s bad. Because I see a risky mixture evolving here. Encouraging this color palette and not regulating the quality of product that makes its way onto the Play Store, paired with the omnipresent brand police of the world, could make for some garish, possibly unusable software.
And at the very least some very colorful meetings about said software.
I just hope these new powers are used responsibly.
Tell us what you think about Google Material Design in the comments.
Want to help? Raizlabs is hiring designers.