What’s on the menu? Mystery Meat.
Back in the early days of the web, web designers played with many of the unique features of HTML and CSS. Many of those features allowed really cool designs. But we as a community, we also produced some dumb ideas that have somehow stayed with us. I am going to talk about Mystery Meat Navigation.
Wikipedia defines the term as: “a form of web navigation user interface whereby the target of each link is not visible until the user points their cursor at it” https://en.wikipedia.org/wiki/Mystery_meat_navigation. The term was created by Vincent Flanders as part of a book/website called Web Pages That Suck. Fantastic book, by the way.
You would have thought that equating a design technique with processed “meat” served in lunch cafeterias would have deterred some UI designers from using it. But apparently that is not the case. More troubling is that this UI practice has been quietly jumping from web browsers onto desktop systems and smartphones. There is, of course, another explanation. Maybe the mystery meat served at the cafeterias in Silicon Valley is secretly filet mignon and the designers that work there think “mystery meat navigation” is a complement. Could be.
Nevertheless, examples of Mystery Meat Navigation keep appearing all over the place. But the two most recent ones and ones that truly annoy me (enough to make me write this) occur in the latest OS X update, Big Sur, and in our favorite communication tool, Zoom. These two are examples of a current common practice to hide options, menus, and buttons basically when the user is not looking. Because these are not links and are not technically speaking for navigation, I call them Mystery Meat Menus. Here are the two examples.
Big Sur
OS X for a long time has shown the icon for documents in the title bar. The icon serves as a proxy for the document displayed. You could drag that little icon and use it in any action you could do with the real icon on the file system. The image below is from Apple’s Human Interface Guidelines showing the icon that appears in the title bar.
I use that little icon A LOT. You can drag that icon and move the file to another location in your drive. You can even drag the icon onto a web form for uploading files, or to a iMessage chat message to share a file or to a GMail email message to add an attachment, etc. When I download a PDF from the web, it goes in the Downloads folder. I typically open it to look it over. Then I drag the icon from the title bar to the folder where I want to save the document and viola. The file is moved, Preview continues to display the file, I can even annotate it and all works wonderfully. And if you are a developer and use Terminal, you can drag that icon to a terminal window and it inserts at your current cursor location the path to the file.
Here comes Big Sur… and where did my little icon go? The designers have hidden it. See Preview below.
Mind you, once I put the mouse over the title area, wait a brief moment, the icon and the down caret show up (see below). I present to you a Mystery Meat Menu.
By now, I know how to use this. I move my mouse and wait patiently for the few microseconds that are needed for it to show up. But think of new users that have not used OS X before or users who did not know you could use that little icon as a proxy for the file it represents. They are not going to know of this mysterious hidden feature (sinister music played in my head as I wrote this sentence).
This is not new. First the scrollbars became Mystery Scrollbars. Many iOS applications hide the controls (e.g. see any browser) as if getting those extra few pixels makes a bigger difference in how I experience the interface. Have you seen people repeatedly poking their phone trying to get those controls to show up again? It is almost like the designers are ashamed of showing the “utilitarian” nature of a Back button and instead want you stare and marvel at the beauty of the front page of a newspaper rendered in a few thousand pixels. Please.
Zoom
But the worst offender is Zoom. Zoom not only features a significant instantiation of Mystery Meat Menu but it also fails another well know principle of UI design, the visibility of the system status (e.g. https://www.nngroup.com/articles/direct-manipulation/).
Above is a screen-shot of a meeting in Zoom. The bottom bar of Zoom shows the microphone, camera, participants, etc. All of these buttons give access to functionality in Zoom; functionality that is crucially important while you are in a meeting. The bar disappears after a few seconds (see image below) becoming a Mystery Meat Menu (did you hear the thunder or was it just in my head?).
Think of the thousands of times you have been in meetings, half asleep and someone says “Manuel what’s your take on this?” (you can replace Manuel with your name to make it more realistic) and you scramble to sit up, look attentive and attempt to provide a reasonable answer to an unknown question. You launch into a long monologue about the virtues of good things and how we should avoid bad things… only to be told “Manuel, you are muted” (again, put your name in there for better results).
Of course I spoke while muted because the visibility of the system status is hidden. Making the system status visible is what the Nielsen/Norman group calls the “first usability heuristic” (e.g. https://www.nngroup.com/articles/ten-usability-heuristics/). Zoom’s Mystery Meat Menu has mercilessly violated that heuristic. I knew I was muted but at the moment of my reaction, my brain formulated a plan that was concerned with my eloquence and showing my “take on this”. Pressing the invisible little muted microphone was not among the steps on my plan, particularly when said button was INVISIBLE. The system didn’t reinforce the status (I was muted) because I had not moved the mouse for the last few seconds. It did not even provide an affordance (“here is the mute button”) to aid my plan generation. Thus the system (Zoom) failed on it’s mission to help me formulate my plan of action given the current state of the system. Basic UI design concept foiled by an evil Mystery Meat Menu (wow, now I heard loud organ music).
And curiously, notice that others in the meeting rarely say “Manuel, we can’t hear you” (use Joey instead of Manuel if that is your name). No, they clearly say “you are muted.” Why? Oh, because when I talk, I am spotlighted on the other side and THEY see the status of MY system easier than I do. People listening to me can easily see that I am muted but I can’t see it when I am trying to talk. Congratulations Zoom, you have made collaborative action work by requiring others to shame me into finding the hidden icon.
Why?
Why do designers like to torture us? It is almost like they view their interface designs as a piece of art that must be displayed in some art gallery with a sign underneath that reads DO NOT TOUCH. If you don’t want me to touch it, stick to application icon and T-Shirt designs. I can’t believe I have to say this, but interactive systems are built to interact. And if you hide the menus and options needed for interaction, then you are preventing the collaborative nature of a joint activity from taking place.
Don’t get me wrong, I appreciate a nice looking interface, but if that “niceness” hides the functionality and the utility from me, it is no better than Mystery Meat (said in a deep voice with an echo that fades away).
