What to Expect from Material Design 2?
A designer perspective of the upcoming evolution of Google Design guidelines
With the Google I/O happening in less than 2 weeks, a few Google apps redesigned, new apps with a revamped design, a redesigned Chrome and the first developer preview of Android P out there, we are pretty sure on something: there’s gonna be at least an update on Google’s Material Design guidelines.
After taking a lot of information from the last weeks on Twitter, I want to share my findings, expectations, and assumptions with you until we hear something official from Google.
Not just a change for the sake of change
As far as we can see from the leaks there will be improvements in details instead of the philosophy itself. The new elements and properties of the existing ones will probably receive a facelift maintaining the paper and ink metaphor. Most of this changes are probably based on research Google did to improve the guidelines and probably Android (and Chrome OS) itself.
Let’s get into the details.
Moaar white space
The first thing you will notice from every screenshots is a white interface. Previously Google suggested the use of color to express branding through interface. Now they are embracing content using colors just when is needed. They want MD to rely more on typography than colors to manage information hierarchy. Even shadows seem to be used in a less drastic way.
This makes the interface cleaner and focused on content but losing some personality in the way. This could be balanced with the expression of other elements that can rely on that personality, depending on the brand of course.
Bigger corner radius
Lots of elements now have corners radius of almost 16 dp. Not only cards, but we are seeing more “pills” text-boxes and circles as buttons. Some had discussed around the perception of an iOS-ish style. For a user-centered perspective round corners and other similarities between platforms will help users get more familiar with a new UI when switching from one to another. In the other hand, this changes make Android loose personality against iOS.
Another argument in favor of the round corners are the studies saying that round corners are friendlier to users.
The only sure thing is that round corners are here to stay, so we will probably need to accept and get used to if we don’t like them.
Some users also spotted rounder icons so it probably means a new set of icons but there isn’t too much on it yet so I will skip on this one.
Brighter and low-caps buttons
The most consistent element on every redesigned app are the new buttons. The most obvious differences from the near-to-be old buttons are the low-caps style and also the use of Product Sans instead of Roboto as the typeface.
My favorite new detail so far is the colored shadows depending on the color of the button. As you can see on the Chrome redesign guidelines when the button is blue, the shadow is blue, when is white, then the shadow is gray.
There are also rumors on a refinement color palette. We got a view on the settings menu from Android P DP1. There were also some leaked commits on the Chromium Gerrit mentioning new colors. The colors were close to what it is on DP1 but not perfectly matched so they are probably still tweaking them.
I’m very excited to see more bluish grays than yellows. In terms of usability, they will probably tweak the palette to work better for contrast.
As I mentioned before, the interface will rely more on this colors for contrast on a white surface.
Titles at the center of the toolbar
This is another change that resembles iOS.
We are seeing the title or logo in the toolbar going from the left to the center. You can see it on new apps like Google Pay and Google Tasks. I’m guessing it is because of the change in the position of elements on the status bar on Android P (probably because of the clock at the left). To maintain visual balance between all elements, the most prominent element needed to take to the center.
Bottom navigation pattern?
The only reference we have is on the new Google Tasks app but it’s probably one change we will see more. It resembles a lot to the old Holo days when we had action icons at the bottom of the screen.
In terms of ergonomics is perfect for the user. All the main actions at the bottom (also applied to bottom navigation bar) is a very friendly pattern to the fingers.
There’s also something weird about having two menus here. Yes, one is navigational (left) but it still not intuitive enough to differentiate one from the other.
Just like the FAB, obvious always win.
A new approach to FABs
Talking about the FAB. This is one is the trickiest and the funniest. We saw a lot of approaches on FABs in the latest years. We were very excited about this one. A big circle button showing the user what’s the main action on the screen? It obviously going to work!
But no, it wasn’t that obvious. First, if the user had other elements on the screen to play with, the FAB loses all the relevance. Then if the icon weren’t self-explanatory enough, the user get confused on what the FAB will end doing.
Lot’s of pain to the user for an ambiguous element so we should expect more defined rules on where, how and when to use FAB buttons. From all elements, this is the one I’m more excited to now more about.
Selected item from the menu
First spotted on Chrome OS, then on some Android apps. On menus, the selected element was previously just highlighted with a plain rectangle. Now, they also have a rounded side. It works pretty well on a aesthetic perspective. The rhythm of the list now merge better with the section itself without being drastically cut.
Segment controls for Android?
On the onboarding to the new Gmail, I spotted an element that is not showed anywhere else, some kind of selector far different from tabs on current MD but very similar to iOS segmented controls. This could be an exception and the Gmail team just added it because it doesn’t exist but it will be interesting to know what treatment and differences from tabs will have if it even exist.
Less width for tabs
The only aesthetic change without being specifically attached to a functionality is the new small tabs signifiers. The only main difference from the old ones is that they don’t cover the entire width of the tab target.
This was an approach that other products take but with the new Google personality, I think it fits better.
Product Sans everywhere
Last but not least, let’s talk about typography.
There are two main places where we see Product Sans on Google products: titles and buttons. Every other part of the UI still gets Roboto.
They will probably don’t suggest to use Product Sans for third-parties because it still have a limited license use. I will be a surprise if they free it in Google Fonts.
We can expect more rules on using and combining two different typography for third-parties.
I’m on the side that think is good for Android get closer to iOS in terms of feeling and usability. It has a lot of good things for the users. I wrote about it last year, both sides are getting closer and closer and we will get used to it at the end. Remember, is not about Google vs Apple, is about the user, it is always about the user.
We will see more when they explain us at Google I/O. The session I expecting more is the one they will show “how UX researchers helped test, refine, and evolve the latest Material Design guidance”.
There’s always a reason behind every decision and I’ll be happy to see them and also inspire them for my own work.
Thanks for reading!
If you want to contribute to the conversation or think I miss something from the leaks, feel free to comment.
All the info I get came from awesome tweets of the Android community on Twitter. I want to thank you all the guys that report every change on every Google product.
I will put all the links below if you want to read more.