Previewing Material Design 2.0
I could (and probably should), wait a couple of weeks until Google I/O before publishing this post where I anticipate we’ll be hearing a lot about MD 2.0. However, that wouldn’t be fun, would it?
As someone who’s in the process of redesigning an Android app, I’ve been keeping a very close eye on various different apps and websites Google’s launched ever since the first rumors of Material Design 2.0 emerged a few months ago.
First, a quick summary of products Google has either released or revamped in the last six months which I have been studying for pointers:
- Google Play Games
- Google Pay
- Gmail
- Google Tasks mobile apps
- Google I/O Schedule
- Bulletin (early preview)
- Android P (Developer Preview)
This list isn’t exhaustive, but gives a good foundation for the rest of the post. But before jumping right in, it’s important to understand how design teams at Google are structured, and clarify a common misconception: the Material Design team is not in charge of all of design at Google.
Instead, the Material Design team’s focus is purely on the guidelines, which constantly evolve. Individual products have their own design teams that use these guidelines. They might choose to not follow certain specifics if they felt the need to break away, such as the use of bottom tabs before they were “made official” by the Material team. This allows individual products to have their own character and ethos while living inside the general constraints recommended by the Material team.
Now, getting to the preview of Material 2.0 itself. I’m going to break things down in to themes that I have seen and what we can take away from them.
Guidelines, Not Rules
The most common criticism that Material Design received over the past few years from the design community was that it felt prescriptive. As a result, the argument held that Material Design apps all looked the same, and brands felt they weren’t able to express their own individuality as a result.
For a while, the Material Design team and Google’s Design Advocates have been trying to dispel this belief, something I mentioned at Chicago Roboto last year as well. The differences that can be seen in the design of the products I mentioned above goes on to highlight this.
Each of the apps show a degree of consistency and branding (in particular with the use of Google’s Product Sans font) and yet each of them is different from the others. This is why I contend that “Guidelines, not rules” is very much part of Material Design 1.x, I believe they will be emphasizing it when they announce 2.0.
Key navigation and action elements move to the bottom
When the Material Design team gave their official blessing to the bottom navigation, there was an outcry from the community who had argued with their teams for a long time that they were iOS-y. The rationale behind them, though, is simple: as devices get bigger, primary navigation needs to move down to make it easier for one-handed use.
The problem has only gotten compounded since as devices are now getting taller as bezels become a thing of the past. We’re now seeing a lot more 2:1 aspect ratio devices as a result. The 2.0 refresh seems to encourage bringing down even the actions that traditionally were part of the app’s toolbar to the bottom.
Google Tasks and the I/O Schedule app show these in practice. Additionally, the new Material Components library has a BottomAppBar which you can preview in this excellent post by Joe Birch. They have gone the extra length to create patterns by which these action items and the floating action button can co-exist.
Many forms of floating action buttons
The round, icon-only button had become a prominent face of Material Design. So much so that it could be argued that the button was often misused — something that I attributed to a lack of understanding — as many apps added one in places they didn’t really need it.
What we’re seeing with some of the products I mentioned above is that the appearance of the floating action button is being separated from it’s intent. If an app has a contextual need to promote a certain action (such as “Add a new task”, “Filter”, “Favorite”, “Play” or “Compose”), the goal of the designer is to create a button that would do so. The appearance is up to the designer.
In each of the screens, how visible an action is depends upon it’s importance. Add a new task is clearly important for a To-do app, and it gets the most prominence on a screen. Google Pay doesn’t need one on this screen, so there isn’t one there. Google I/O has a filter icon on the home, while favoriting is important but not enough to take away focus from the content behind. For Games, the play button needs to be associated with a game, so it’s kept near the description. And finally, for Gmail, the compose button is kept where the previous one used to be to ensure continuity for the older Gmail users, instead of replicating Inbox’s.
Bold and Graphic, when the context calls for it
The final thing I’d like to highlight is the whitespace, since pretty much everyone seems to have taken note of it already. “Bold, graphic and intentional” was one of the key principles behind Material Design right from it’s launch.
While the apps looked great with their bright colors and animations originally, there’s been a trend away from such designs for some time now called Complexion Reduction. The purpose of this trend has been to ensure that the use of colors on the screen don’t take away from the content and actions itself.
Material Design 2.0 doesn’t seem to go entirely into the realm of Complexion Reduction, but instead seems to emphasize a part of the original principle: Bold, Graphic, and Intentional.
Let’s break down the Google I/O app into three states to study this: the home screen with all sessions listed out, the home screen with a filter applied, and the session details screen.
Without a filter, it can be argued that there is an information overload on the user. This is the filter button is promoted, and so is the bottom navigation.
Once a filter is applied, however, we are now aware that the user is more interested in seeing the sessions with the applied filter. This means we can take away the filter button and the bottom navigation, and focus on the session list itself.
As for the Session detail page, while the option to favorite a session and share it are helpful, the user is more likely to be interested in consuming the written description. This is why the screen is mostly white, much like Medium and other reader apps. The share and favorite buttons are easily reachable, but blend in.¹
In summary, what I’ve taken away so far is that Material Design 2.0 isn’t a major change at the fundamental level. In fact, I’d argue the principles behind Material Design 1.0 are still very much the principles behind 2.0, and the key to understanding material design remains understanding the properties of “Material”.
Instead, I anticipate a few key takeaways to be highlighted at I/O
- Pay close attention to a user’s context and intent
- Design components in your app based on these context and intent, and do not limit yourself to the official components
- Express your brand without getting in the way of the user (through fonts, colors, animations, etc)
It’s going to be fun to see whether or not I was accurate with this preview, and if I missed anything along the way.
[1] Personally, I wouldn’t keep a toolbar for the share button, but the app is often used as a reference from a development perspective. My assumption here is that it’s use is to demonstrate the Material Components library.
