This week I read “On Mystery Meat Navigation and Usability,” published on Gigi Labs in 2015.
Mystery Meat Navigation is a term originally coined by Vincent Flanders of Web Pages That Suck fifteen years ago. The term describes a web navigation menu made entirely of icons, creating a mystery for any user, especially new users. Oftentimes these menus reveal their actions when the user hovers over the icon. The article uses an interesting metaphor to fully explain this: a mystery meat navigation menu is akin to a road sign that appears blank until you are about to drive past it; it doesn’t provide the necessary information until the last minute.
Even fifteen years after the initial introduction of the phrase into the web development lexicon, mystery meat menus are still seen across the web. The issue is that the menu is not clear enough to the users, and it requires the extra step of hovering over the icons to fully understand the menu options. And often the icons are not a perfect representation of the pages they link to, although the only perfect representations would be text.
What makes mystery meat navigation so bad? Users get frustrated when they have to click around to figure out something that should be obvious and intuitive. People already have a short attention span (of about 7 seconds), so this frustration with a menu could easily cause a user to abandon the site. This article concisely describes the importance of clear navigation menus, “A website should give a clear indication of how it is structured, without the user needing to interact with it just to get an idea.” Navigation is the backbone of any website, it needs to be a strong one. The article continues to describe mystery meat navigation as, “a slap in the face of usability.”
Mystery meat navigation is an important lesson of what not to do in user experience and user interface design, it breaks the core usability principles, especially the principles of consistency and visual hierarchy. Using icons as navigation items seems to align with the usability principle of simplicity, but I believe it does not. Sure it seems more visually simple than text, but it not more simple when it comes to user interaction: it adds a couple more steps into the user’s process. The user now has to think about what the icons mean, and then test to see if they are correct by hovering over the icons. Bottom line: mystery meat navigation is the worst way to introduce a user to all of the pages your site has to offer.