Material Design and the Mystery Meat Navigation Problem

When Google unveiled Material Design in 2014, it was heralded as a bold new design language that would unify the look and feel of apps across Android devices. With its bright colors, large typography, and fluid animations, Material Design represented a significant upgrade over the rather dull and utilitarian design of earlier Android versions.

At its core, Material Design aims to create intuitive and aesthetically pleasing user interfaces based on the physical properties of paper and ink. UI elements should appear tactile and graspable, with clear affordances that invite user interaction. Animation plays a key role in providing meaningful feedback and guiding users between contexts.

On the surface, Material Design appears thoughtfully crafted to balance form and function. However, in the quest to achieve aesthetic minimalism and consistency, Material Design has stumbled into a major UX pitfall known as mystery meat navigation.

What is Mystery Meat Navigation?

The term "mystery meat navigation" was coined in 1998 by usability expert Vincent Flanders to describe user interface elements, particularly icons and buttons, that are unlabeled or poorly labeled. Like mystery meat in a cafeteria, the purpose and function of these elements is ambiguous and unidentifiable at first glance.

Mystery meat navigation places the burden on the user to decipher the meaning of cryptic icons. It‘s a common symptom of designers prioritizing slick minimalism over clarity and usability. The negative impacts are numerous:

• Increases cognitive load as users have to think harder to figure out UI elements
• Slows down task completion time
• Causes hesitation and confusion that interrupts the user‘s flow
• Can lead to errors if the user misinterprets an icon‘s function

As a developer, it‘s important to recognize that design is fundamentally about communication. Good design should facilitate user tasks and make functionality self-evident. Mystery meat navigation does the opposite – it obscures and obfuscates.

Sadly, Material Design, in a number of high-profile instances, has ignored this core usability principle in service of clean aesthetics. Let‘s take a technical look at some of the biggest offenders.

Exhibit A: The Android Navigation Bar

With the launch of Android 5.0 Lollipop in 2014, Google revamped the persistent navigation bar to match Material Design‘s geometric aesthetic.

The old navigation bar used familiar icons like a left-pointing triangle for "Back" and a circle with an angled arrow for "Home" on a black background. While not particularly pretty, the icons were easily recognizable at a glance.

The new Lollipop navigation bar replaced those tried-and-true icons with an equilateral triangle, circle, and square on a white background:

<android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary">

  <ImageButton
    android:id="@+id/back_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_arrow_back"/>

  <ImageButton 
    android:id="@+id/home_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"  
    android:src="@drawable/ic_circle"/>

  <ImageButton
    android:id="@+id/overview_button" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_square"/>

</android.support.v7.widget.Toolbar>

While certainly more aesthetically minimal and pure, the geometric shapes are too abstract to clearly signify "Back," "Home," and "Overview." The equilateral triangle could arguably pass for a back button, but a circle and square have no inherent navigational meaning to the average user. First-time upgraders to Lollipop had to engage in trial-and-error tapping to deduce the purpose of each icon.

In a study of Lollipop users, Nielsen Norman Group found that many were confused by the new icons, with some thinking the square was a minimize button. Users with lower tech skills were especially prone to getting lost due to the mystery icons.

In the push for aesthetic minimalism, Material Design traded intuitive icons for inscrutable ones on a core system interface used by millions daily. For developers, it‘s a cautionary lesson that form should not trump function, especially on critical navigation.

Exhibit B: Ambiguous Floating Action Buttons

The floating action button (FAB) is a signature element of Material Design. It‘s a circular button containing an icon that floats above the UI, typically in the bottom-right corner. The FAB should represent the primary action a user can take on a screen.

Implementing a FAB is fairly straightforward:

<android.support.design.widget.CoordinatorLayout 
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <!-- Main content -->

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/ic_add" />

</android.support.design.widget.CoordinatorLayout>

Because the FAB can only contain an icon, it‘s especially susceptible to mystery meat navigation if the icon is unintuitive. Unfortunately, Google‘s own Material Design spec showcases many examples of ambiguous FAB icons:

The problem is, many of these icons have multiple plausible interpretations:

• The chat bubble icon could mean "send message", "open chat", or "leave a comment"
• The person icon could mean "open contacts", "view profile", or "share with a friend"
• The map marker icon could mean "get directions", "view on map", or "save location"

Even the seemingly obvious "+" icon, which is extremely prevalent in Material Design apps, has an ambiguity problem. A "+" usually signifies addition, but addition of what? Without a text label for context, it could mean almost anything.

An analysis of 25 top Material Design apps found that 22 of them (88%) used the "+" icon for their FAB. But the actual action taken varied widely, from composing an email, to adding an alarm, to creating a new drawing.

Crucially, the Material Design guidelines do not require FABs to include a text label. This does a huge disservice to usability. No matter how "obvious" an icon seems, it will always be ambiguous to a certain proportion of users.

As a developer, you can vastly improve the usability of your FABs with one simple addition – a text label:

<android.support.design.widget.FloatingActionButton
  android:id="@+id/fab"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom|end" 
  android:layout_margin="16dp"
  android:src="@drawable/ic_add"
  app:fabSize="normal"
  app:backgroundTint="@color/colorAccent"  
  app:rippleColor="@android:color/white"/>

<android.support.design.widget.FloatingActionButton
  android:id="@+id/fab_label"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom|end"
  android:layout_marginBottom="70dp"
  android:layout_marginEnd="16dp"
  android:visibility="invisible"    
  app:fabSize="mini"
  app:backgroundTint="@android:color/white"
  app:rippleColor="@color/colorPrimaryDark"/>

Then use this code to show/hide the label on hover:

fab.setOnHoverListener(new View.OnHoverListener() {
  @Override 
  public boolean onHover(View view, MotionEvent motionEvent) {
    switch (motionEvent.getAction()) {
      case MotionEvent.ACTION_HOVER_ENTER:
        fabLabel.setVisibility(View.VISIBLE);
        break;
      case MotionEvent.ACTION_HOVER_EXIT: 
        fabLabel.setVisibility(View.INVISIBLE);
        break;
    }
    return false;  
  }
});

A simple text label goes a long way to clarifying an otherwise ambiguous icon. For primary actions, err on the side of clarity, not mystery.

Exhibit C: Unlabeled Bottom Navigation

Perhaps most egregious of all is the bottom navigation component Google added to Material Design in 2016. It‘s a thin strip that runs along the bottom of the screen, containing three to five icons for quickly switching between top-level app views.

For bottom navigation with three actions or fewer, Google recommends including both an icon and text label to describe each action. So far so good – giving each icon an accompanying label clears up potential ambiguity.

However, for bottom navigation with four to five actions, Google inexplicably suggests dropping the text labels and using icons only. Note the "Selected" and "Unselected" states:

This is the very definition of mystery meat: a series of abstract icons with no labels describing their purpose. The user is left playing a guessing game to figure out what each icon represents.

What‘s strange is that both iOS and Android have long had tab bars (the iOS equivalent of bottom navigation) that manage to fit 4-5 labeled icons in the same amount of space:

There‘s no practical reason Material Design can‘t accommodate labels on bottom navigation. The decision to omit them in the 4-5 action case seems born purely out of an aesthetic preference for icon minimalism over comprehension.

As a developer, you thankfully have the power to overrule the design spec and provide labels anyway:

<android.support.design.widget.BottomNavigationView
  android:id="@+id/bottom_navigation"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  app:menu="@menu/bottom_navigation_menu" />

With the menu resource:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  <item
    android:id="@+id/action_favorites"
    android:enabled="true"
    android:icon="@drawable/ic_favorite"
    android:title="Favorites"
    app:showAsAction="ifRoom" />
  <item
    android:id="@+id/action_schedules" 
    android:enabled="true"
    android:icon="@drawable/ic_access_time"
    android:title="Schedules" 
    app:showAsAction="ifRoom" />
  <item 
    android:id="@+id/action_music"
    android:enabled="true"
    android:icon="@drawable/ic_audiotrack"
    android:title="Music"
    app:showAsAction="ifRoom" />
  <item
    android:id="@+id/action_settings" 
    android:enabled="true"
    android:icon="@drawable/ic_settings"
    android:title="Settings"
    app:showAsAction="ifRoom" />
</menu>

Always opt for clarity over cleverness. Navigation is not the place to make users guess.

Balancing Form and Function

The common thread in Material Design‘s mystery meat mishaps is a willingness to sacrifice clarity for visual cleanliness. Time and again, Google‘s guidelines advocate for unlabeled or poorly labeled icons, even in prominent navigation elements used constantly.

As designers and developers, we‘re often drawn to sleek, minimalist aesthetics. And it‘s true that a clean, uncluttered interface is more pleasant to use. But we must be cautious not to strip away clarity in the process.

Icons are not a magic bullet for intuitive interfaces. Despite their popularity in modern UI design, icons are actually much harder to understand than plain text. In usability studies, the Nielsen Norman Group has repeatedly found that icons alone have poor comprehension rates:

• A test of common toolbar icons found that even the best understood icon (an envelope for email) was only recognized by 88% of users. The average recognition was just 60%.

• A later study of icons used in business apps found the average recognition rate was a mere 54%.

• Testing of unlabeled "hamburger" menu icons revealed that only 52% of users understood what they did.

The fact is, most icons are highly ambiguous without supporting text. Their meaning is too dependent on prior experience, cultural background, and context. Yet tech companies like Apple and Google continue to push for all-icon interfaces in the name of aesthetic simplicity. It‘s a worrying trend.

As developers, we‘re often at the mercy of design decisions handed down from above. But we also have a responsibility to advocate for the user whenever possible. If a design seems likely to cause confusion, we should push back and propose alternatives.

Some tips for avoiding mystery meat navigation in your own apps:

1. Always provide a text label with icons used for important actions and navigation. No icon is universal.

2. For less important icons, add a tooltip on hover/focus that shows a text description.

3. Conduct user testing early and often to catch comprehension problems. Don‘t assume your interpretation of an icon is shared by others.

4. Argue for consistency in icon meaning across your app. Don‘t use the same icon to mean different things in different places.

5. Question designs that prioritize form over function. Sometimes a bit of visual clutter is preferable to inscrutable minimalism.

At the end of the day, our job is to create software that is both beautiful and usable. Finding the right balance is a constant challenge, but one that‘s worth fighting for. Mystery meat navigation may trim the visual fat, but it does so at the expense of user sanity.

Intuitive always trumps clever. Favor clarity, not mystery. Your users will thank you.