Mystery Meat Navigation

In 1998, Vincent Flanders, author of the perennially amusing Web Pages that Suck, coined the phrase Mystery Meat Navigation (or MMN) for web pages which didn’t make clear the destination of a link before it was clicked on. As you’ll already know if you went to a public school in America (I didn’t), “mystery meat” is a term for food which has been processed so much that it’s no longer clear which animal it came from. You have to try it to find out. In the same way, mystery meat navigation emphasises design over functionality. It purposefully conceals some information because it gets in the way of being pretty.  Abstract buttons replace text. I think we can agree that’s a bad move. Website navigation should be clear without the user needing to interact with it to find out where everything goes.

Classically meaty navigation, curated by

Classically meaty navigation, curated by

The End of Mystery Meat?

For a while, it looked like Vincent Flanders had won his battle. Examples of MMN slowed down online. Then, mobile responsive web design and apps appeared on the scene. With a lack of space and love of minimalistic design, there are many apps and mobile operating systems popping up which designers accuse of using MMN. Unlike the early blunders of inexperienced web designers, these navigation choices were the product of world class designers working for major tech companies. Here’s a classical example from Android’s 2014 Lollipop OS which opts for using geometric shapes:

Believe it or not, these icons are for back, home and overview.

But many other mobile responsive sites and operating systems don’t fair much better, relying on difficult to decipher pictographs:

Could you work out what all of these buttons do just by looking at them?

Learning designers watch design tends across the technology sector closely. It can be tempting to borrow design elements from mobile responsive systems. I think it’s important that we remember that elearning is not a mobile operating system. We don’t have the same constraints and we don’t have the same purpose. Here are my tips to consider if you want to make sure that your navigation is easy to use.

Don’t reinvent the wheel. Use established symbols for navigation.

Although the abstract buttons of the Android Lollipop were a mystery the first time they were encountered, users of the phone quickly learned what the buttons did. Industry leading tech companies use their symbols as part of their brand, training users to become used to their systems no matter how unintuitive they are. Users taking part in an elearning course, however, don’t have the luxury of time to experiment. Instead of putting effort into absorbing the course contents, the user might end up putting effort into learning how to use the interface.  This should especially be avoided in microlearning, where users need to get straight down to business. The solution? Leave the task of teaching people new symbols to the mainstream software developers. Make sure that you are using well known icons that your users are likely to have encountered before, taking into consideration the demographic they fall into. For example, the standard set of media control icons date back to reel-to-reel tape recorders and are familiar to a wide range of users.

Old favourites, dating back to the 1960s.

The menu “hamburger” icon, on the other hand, is a new upstart which appeared on the scene in 2009. Younger or tech-savvy users are more likely to recognize it.

Three lines which mean Menu

Skeuomorphism is your friend.

What if you really want a text free navigation system, but you don’t know an established symbol for the concept that you are trying to convey? The designers of user interfaces often rely on the concept of skeuomorphism to give people a helping hand. Skeuomorphic design translates abstract things from the digital sphere into something familiar to everyday lives. Here are some examples you are probably already aware of. A house can represent the main screen of a course, a base of operations. The ability to tweak the settings of an app becomes represented by cogs, a throwback to looking behind the facade of a device so that you can make alterations. Apple’s web browser, Safari, uses a compass to remind the user that it is a navigation tool. If you’re having to make a symbol for a new concept, think about what everyday object or item might best convey it visually.

An 11 sided polygon which means Home

There’s nothing wrong with text

Last but certainly not least, remember that there is no shame in adding text labels to your navigation. This quickly, clearly and easily lets your users know what buttons do. If you pick a font which fits well into your course design, you can maintain your stylish look and keep your user interface easy to grasp. Perfect! If you’re interested in more navigation tips and tricks, check out this blog post from the GLAD archives. We’re always ready to build bespoke courses with great navigation. Contact us to find out more

Share This