Common Misconceptions of Material Design

Material UI Kit

I recently attended Google’s Material design workshop, a 1-day quasi-bootcamp focused on the principles of Android’s design language. As ACD at Y Media Labs, I always stress the importance of knowing the ins and outs of each platform that you design for, so for me this served as a nice refresher. Here are the main takeaways from my day with Google.

Look & Feel

The first and most important lesson the folks at Google stressed is that Material design is flexible, more so than you think. A common misconception is that in order to adopt Material design principles, your app has to look like a Google app. This is actually not the case. You can think of Material design more of a guide rather than a strict set of rules. When it comes to colors, Material design promotes a bold and vibrant palette, but this is merely a suggestion and might not fit your brand. You should use whatever colors your brand or app necessitates.

The same goes for the visual style of your app. Flat, illustrative, and colorful is definitely the cornerstone of Android’s visual style, but it doesn’t fit every use case. Also, when it comes to diffuse shadows, less is definitely more in my book and should only be used to highlight main actions or elements.

Navigation

One of the biggest points of uncertainty I’ve found with Material design is the question of navigation. Do I use a side-drawer (hamburger) menu? What about a segmented control? Or a bottom tab bar? Wait, I thought that was only for iOS? Well you better check the material guidelines again because it’s officially a-okay to use the bottom navigation bar. You can also check Instagram’s Android app if you don’t believe me. So back to the question of what navigational paradigm to use. The answer is: whatever suits the needs of your app. Material design is intentionally flexible to accommodate whatever your app needs when it comes to navigation. There is no one solution fits all, so design your app according to whatever makes the most sense.

Floating Action Button

Okay, what about the FAB (floating action button)? I’ve seen many instances of the FAB being wrongly used. Here’s what not to do:

1. Don’t use the FAB as a means for navigation. Having a navigational menu pop out of a FAB might sound like a cool idea, but you should only be using the FAB for main actions like search or posting a photo.

2. Don’t try and reinvent the wheel by using the FAB in new and weird ways. Just check out VSCO’s Android app and tell me if you intuitively knew how to interact with their FAB. Snapchat is also weird but everyone loves Snapchat so they get a pass.

3. Don’t use multiple FABs on a single screen. But wait, Google maps has more than one FAB, one to get directions and one to center your location. Well, this is a special use-case in a mapping app, plus it’s designed by Google so they also get a pass.

Interaction & Animation

Let’s talk interaction and animation. This is probably the best thing that Material design has done, which is promoting richer and more interactive experiences through motion and animation. And it’s not done nearly enough by third party apps. When you tap on an element, there should be a touch interaction of ripple to give the user feedback. When you tap on a FAB it should expand fluidly into the next screen. Elements and screens should transition fluidly from one another. These are all things that are often overlooked by both designers and developers. I myself am a huge proponent of motion and interaction design so I want to stress this point even more: Make sure you design for interaction states and don’t let developers ignore this. This is the difference between a stellar app and one that’s merely mediocre.

Make sure you design for interaction states and don’t let developers ignore this.

Conclusion

Just to recap, here’s the main takeaways that I learned:

  • Android has a very loyal following and creating an experience tailored to this community can increase engagement and loyalty for your brand
  • Material design is less about making it look “Androidey” and more about leveraging the design system to suit your needs
  • This might seem obvious but using iOS specific design elements in Android is a no-no (ie: right-hand carrots, thin line icons, etc.)
  • There is no “one solution fits all” paradigm for Android. Their design system is flexible enough to accomodate whatever your design necessitates
  • The bottom navigation bar is now considered okay for Android, whereas previously it was not encouraged
  • Study the material design guidelines. It is hands down the most comprehensive and best put-together out of all mobile platforms
  • Material design is much more focused on interaction design, specifically touch interaction, motion, and animation (more so than iOS)

Let me know if you guys found this write up helpful in any way.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.