Material Design and the Mystery Meat Navigation Problem
Teo Yu Siang
2.4K69

To say Google’s MD guidelines are perfect would be about as silly as using iOS as a standard for user-centered design. But you’re missing the big story that Google wanted Material Design to represent for the mobile product community: Content, context, and immersion are more critical than ever.

It’s of no little significance that “mystery meat navigation” was coined almost 20 years ago. Digital products have come a long way since 1998. The experience of applications and the average user’s expectations of them have matured and normalized considerably. Most users don’t need everything spelled out for them. In fact, over-explaining the everyday aspects of an app’s interactions can actually increase cognitive load by simply adding too much visual overhead. You leave less room for the things that do need to be spelled out.

Tinder is the sweetheart of the minimalist app world. It works because users are willing to figure it out. And once they figure it out (after mere moments of use), the experience is totally immersive.

But there is one little control that still causes users to pause in my tests. And it is ironically prominently featured in one of the “good” examples from your idols at Apple …

Which way is on?

The mystery toggle. 
What does this thing do? 
Everyone knows by now, right? 
Do they?

In my tests, this simple little thing makes a large percentage of reviewers pause. And it’s been that way for years now. I started testing it out of curiosity when Apple first intro’d it to show off how “swipey” their controls were. Put that touch-tastic control against the same one with icons explaining it’s states (e.g., ✓ vs ✕) and most users know what to do at a glance. In fact, they stop fussing with swipes altogether and just tap the state they want.

Oh, I get it!

I don’t just bring it up because Apple won’t let that silly control go. It’s also an excellent example of how icons alone can add a lot of value, in context. In this case, it adds a little visual overhead, but only just enough to get the job done. Would labels make it more clear? Probably. Is it worth adding that much to the UI? Probably not.

Conceptually, the team behind Material Design understood that (and a whole lot more). The system they designed, when used intelligently and backed by solid UX evaluation, works exceptionally well for mobile products.

Material Design (again, used well) isn’t good because the team was brilliant. They were curators of other people’s work, with some added flair to unify the framework. They assembled the pieces of mobile design that had successfully evolved over the early years of the industry. And they dropped some things that didn’t.

Apple actually fell far behind at this point. Both MD and (dare I say it) Windows Mobile did a better job of fine-tuning the mobile experience. So Apple had to play catch up. That’s when iOS 7 came on the scene. Apple made some desperate moves to look cool again by overdoing it with spindly icons and fonts and got drunk on transparency and gaussian blur. Fortunately, they’ve toned it down since and iOS has gotten much better for it.

No one has gotten it completely right, but be careful not to throw the controls out with the framework.