Mystery meat navigation

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
Mare ImbriumMare TranquillitatisMare SerenitatisMare CrisiumMare FecunditatisMare NectarisMare FrigorisMare FrigorisMare FrigorisOceanus ProcellarumOceanus ProcellarumMare HumorumMare NubiumMare CognitumMare VaporumSinus AestuumCopernicusKeplerTychoKaukasusApeninnenAlpenPlatoMoon
This image map is an example of mystery meat navigation. For example, finding where to click on Mare Humorum is difficult without hovering over every place (which is not possible on devices that have no cursor, such as tablets). Also, it may not be readily apparent that the image is a clickable map instead of a simple picture of Earth's Moon.

Mystery meat navigation (also known as MMN) is a form of web navigation user interface whereby the target of each link is not visible until the user points their cursor at it. Such interfaces lack a user-centered design, emphasizing aesthetic appearance, white space, and the concealment of relevant information over basic practicality and functionality.[1][2] The term was coined in 1998 by Vincent Flanders, author and designer of the website Web Pages That Suck.[3]

The epithet "mystery meat" refers to the meat products often served in American public school cafeterias whose forms have been so thoroughly reprocessed that their exact types can no longer be identified by their appearances; similarly, the destinations of links using mystery meat navigation are unknown by appearance alone.

Flanders originally and temporarily described the phenomenon as Saturnic navigation in reference to the Saturn Corporation, whose company website epitomized this phenomenon. Flanders writes, "The typical form of MMN is represented by menus composed of unrevealing icons that are replaced with explicative text only when the mouse cursor hovers over them".[4]

Click here[edit]

The W3C's Web Content Accessibility Guidelines, as well as organisations such as WebAIM, recommend against the use of phrases such as "click here" as link text.[5][6] According to the W3C, "Good link text should not be overly general; don't use 'click here.' [...] link text should indicate the nature of the link target".[7] The text should also make sense when read out of context. It is also pointed out that a mouse might not be available on the target device (e.g. because of a touchscreen), and that screen readers may review a list of available links on a page. Pages would also suffer when printed.[7] A further disadvantage given is that it hinders the search engine optimisation of a page.


  1. ^ Ward, Mark (2002-11-04). "Why websites are getting easier to use". BBC News. Retrieved 2014-07-11.
  2. ^ Kingsley-Hughes, Adrian (2010-05-11). "iPad apps bring back mid-1990s "mystery meat" user interface problems". ZDNet. Retrieved 2014-07-11.
  3. ^ Flanders, Vincent (1998). Web Pages That Suck: Learn Good Design by Looking at Bad Design. San Francisco: Sybex Inc. ISBN 978-0-7821-2187-2.
  4. ^ Flanders, Vincent. "Web Pages That Suck learn good web design by looking at bad web design - Mystery Meat Navigation". Retrieved 2009-06-14.
  5. ^ "Web Content Accessibility Guidelines 1.0". Retrieved 2012-05-07.
  6. ^ "Introduction to Web Accessibility". WebAIM. Retrieved 2012-05-07.
  7. ^ a b "HTML Techniques for Web Content Accessibility Guidelines 1.0". Retrieved 2014-07-11.