Mystery Meat Navigation

In a conversation I had earlier this week, I used the term "Mystery meat navigation" and my colleagues showed me with their confused looks that I'm old. They didn't know what the phrase meant or why I would use it.

I must admit, when I heard it first somewhere end '90s it baffled me too. Not being familiar with the US high school system and their warm lunch at school. The students get served the daily offer which would include meat, but no one could really tell what it was. Hence: mystery meat.

Now what has this got to do with webdesign ? UX wasn't a term, let alone a profession back then. Usability was.

The term mystery meat navigation was coined in 1998 by Vincent Flanders, author and designer of the website Web Pages That Suck, a site that highlighted abominable user interfaces, dumb ideas or decisions and abysmal design.[wikipedia https://en.wikipedia.org/wiki/Mystery_meat_navigation]
It was also highly entertaining while educational at the same time. [http://www.webpagesthatsuck.com/]

Mystery meat navigation was used to describe a form of navigation where it wasn't clear what to do, what a certain action would do, or even that the navigation itself was hidden from view. Often with abstract shapes which would inform the user only of that they were in fact buttons but only showed themselves or the navigation item as such when the user hovered them.

It kind of has the same vibe as hamburger icons nowadays that show better conversion when accompanied by text, e.g. MENU. And that a lot of people saw the hamburger icon, when it got introduced as a means to deal with smaller mobile viewports or to limit visual clutter in the header, merely as three horizontal stripes. I guess nowadays more people know what they stand for and what to do with them. But even still, that's just an assumption. Watch kids or elderly people navigate the web and you'll often be surprised what you consider common knowledge, in fact, isn't.

So, back to the conversation. In the brainstorm we had, the idea of an illustration, a tree in this case, would show the progress (growth, hence the tree concept) of a user in fulfilling tasks. A mix between showing progress and some gamification which would fit the overall idea of the application's purpose. There are multiple views on whether this is the best choice but it certainly is a fitting one. The idea was also that the leafs on various branches would display the growth in a specific area.
It became problematic when the suggestion was offered to have the tree itself serve as navigation between the various task categories. That meant that hovering or clicking a branch would give the user an opportunity to dive deeper into the tasks completed or the tasks they could choose to pick up next.

Hence: mystery meat navigation. How can a user possibly know that the tree branches are buttons ? You could label them yes, but that would make it ugly, plus some labels could be longer than expected since they're generated by the application admins.

This is an ongoing exploration, various better ideas were thrown up and the whole idea of a tree might even get scrapped, but I thought this was a good opportunity to elaborate on the term "mystery meat navigation" and educate people of mistakes that were made in the past. Cuz, that too, was an assumption from me that everyone knew.

Also, I'd often said I'd start blogging and writing again, so this was a small first go at it.