Material Design: An Experience Report by Andy Detskas

Today at lunch at Pivotal Labs, our designer Andy Detskas talked with us about some of the things he has learned about material design for Android Marshmallow.

If you’d like to see more details on the presentation than the rundown provided here, or if you’d like to follow some links to useful resources on designing for Android, you can see the slides right here.

The Basics (Android peeps, you may already know these parts):

1. Get a Marshmallow-friendly device

2. Key resource: (think HIG for Android)

3. Use inVision and Scala preview for prototype screens

4. Look for examples of material design in the default Android apps: calendar, Youtube, et cetera

What is the idea behind material design?

It is, at its core, skeuomorphismthe design concept of making items represented resemble their real-world counterparts.

The idea is to simulate physical space. To do this, the rules of material design attempt to mimick the laws of physics that we have become accustomed to experiencing in the physical world. For example, things with higher “elevation” in a layout will appear on top of things with a lower elevation. For another example, card views’ colors mimick the way light and shadow falls on physical cards under ambient light. Animations like scrolling include acceleration and deceleration that mimick the motion one might see while scrolling, say, a physical contact wheel. Although this might be a bit anachronistic for 2016, the animation still looks and feels very cool.

If you’ve been skimming this post, start paying closer attention now.

Things to keep in mind:

1. The app bar stays on top. Become familiar with the App bar, and learn its anatomy. That’s the navigation bar at the top of the app that allows users to navigate around it. You can include buttons, menu items, a title, and various buttons on there. These are powerful tools for helping people get around.

2. Know the difference between BACK and UP. The BACK button goes back to where a user has been—it removes the most recent screen and shows the one before it. The UP button, however, is intended to move up the hierarchy of navigation of the app—say, to an overview page from a detail page.

3. More menu: The “more” menu lets you spread out your navigation options throughout the app in context—as opposed to jamming them all into a menu button, out of context. It tells the users where else they might sensibly want to go from here. Dev note: its animation is fun to watch.

4. Floating Action Button: The floating button in the right-hand corner of the app is, at its core, the implementation of a design manifesto: an app should do one thing, and one thing well. Use this button to make it do the thing.

5. Navigation Drawer: this is a global app menu that often becomes a junk drawer (see “jamming everything under the menu button.”)  It can be used as another tool to solve the giant, out-of-context global menu problem.

6. Cards: these containers for content receive the visual offsets of light and shadow. Good for calling out a piece of info.

7. Dialogs: these stop the user flow and force the user to answer a question. Use wisely.

8. Tabs: These allow users to slide horizontally from page to page. They are nice for showing users where they are and where they can go at the same time, and the filing-cabinet skeuomorph here is incredibly clear (due as much to software predecessors  like Excel as to actual filing cabinets). Dev warning: these are not super fun to test. For help, see this blog post.

Seriously, please pay attention to this part

When designing, unless the users’ needs explicitly justify a diversion from material design, use material design as a guide for how it should look and feel. Yes, you are a unique snowflake with brilliant ideas, but Google has the ability to user test, debug, and update material design at a rate that far outstrips an individual product with a small design and development team. By using built-in material design tools, you can accelerate the design and the development process.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s