Mystery meat navigation

Last updated
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. Moon by Helmut Adler.jpgCopernicusKeplerTychoKaukasusApeninnenAlpenPlato
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 information over practicality and functionality. [1] [2] The term was coined in 1998 by Vincent Flanders, author of the book and accompanying website Web Pages That Suck. [3]

Contents

Terminology

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; [4] [5] similarly, the destinations of links using mystery meat navigation are unknown by appearance alone. Using such a navigation has been likened to processed meat products as "you're not sure what meat you've got until you bite into it". [6] Flanders originally and temporarily described the phenomenon as Saturnic navigation in reference to the Saturn Corporation, whose company website epitomized this phenomenon. [7]

Practice

The practice of mystery meat navigation may be defined as "frivolously concealing navigation options through rollovers and other tricks. It is considered problematic on information-rich websites because it makes it difficult for users to recognise the destinations of navigational hyperlinks, or to discern where they are, and this increases the time a user takes to learn to use the site. [8] [9]

Iconographic navigation

Comparison of iconographic navigation schemes; in the upper example, the user must deduce the meaning of the pictograms or discover their implied target by progressively hovering the mouse cursor over each icon; in the lower example, each icon is explicitly labelled with a textual expression of the intended target. Iconographic navigation comparison.png
Comparison of iconographic navigation schemes; in the upper example, the user must deduce the meaning of the pictograms or discover their implied target by progressively hovering the mouse cursor over each icon; in the lower example, each icon is explicitly labelled with a textual expression of the intended target.

Website interface designers often decide to use iconographic navigation schemes as a way of reducing visual clutter and avoiding the need for language localisation. [10] The exclusive use of icons without explicit labels in a website navigation may not be considered intuitive because it relies on the designer's personal understanding of the meaning of each icon. [11] The provision of alt attributes or tooltips which are revealed on mouseover are not considered a satisfactory solution, as these techniques only introduce an element of exploration that has been likened to minesweeping ("let's roll over everything and see if any surprises pop up"). This practice has been identified as a common anti-pattern in interactive design. [6] [12] Technology writer Shelley Powers also notes that MMN often relies on JavaScript, and that this can be detrimental to usability if a browser's scripting is disabled, and to search engine optimization. [13]

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". [7]

"Click here"

Some technology commentators consider that the use of the popular phrase "Click here" as link text is a type of mystery meat navigation. It is thought to be problematic because the phrase does not indicate the content of the link target, which confuses the user. [10]

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. [14] [15] 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". [16] The text should also make sense when read out of context.

Furthermore, the phrase is inappropriate for users who are not using a mouse to navigate, e.g. using a keyboard or a touchscreen device. It also presents particular difficulties for blind and visually impaired users who make use of screen reader software that reviews a list of available links on a page. Pages would also suffer when printed. A further disadvantage given is that it hinders the search engine optimisation of a page. [10] [16]

See also

Related Research Articles

<span class="mw-page-title-main">Home page</span> Main page of a website

A home page is the main web page of a website. The term may also refer to the start page shown in a web browser when the application first opens. Usually, the home page is located at the root of the website's domain or subdomain. For example, if the domain is example.com, the home page is likely located at www.example.com/.

<span class="mw-page-title-main">Lynx (web browser)</span> Text-based, cross-platform web browser

Lynx is a customizable text-based web browser for use on cursor-addressable character cell terminals. As of 2023, it is the oldest web browser still being maintained, having started in 1992.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations. For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Usability Engineering is a professional discipline that focuses on improving the usability of interactive systems. It draws on theories from computer science and psychology to define problems that occur during the use of such a system. Usability Engineering involves the testing of designs at various stages of the development process, with users or with usability experts. The history of usability engineering in this context dates back to the 1980s. In 1988, authors John Whiteside and John Bennett—of Digital Equipment Corporation and IBM, respectively—published material on the subject, isolating the early setting of goals, iterative evaluation, and prototyping as key activities. The usability expert Jakob Nielsen is a leader in the field of usability engineering. In his 1993 book Usability Engineering, Nielsen describes methods to use throughout a product development process—so designers can ensure they take into account the most important barriers to learnability, efficiency, memorability, error-free use, and subjective satisfaction before implementing the product. Nielsen’s work describes how to perform usability tests and how to use usability heuristics in the usability engineering lifecycle. Ensuring good usability via this process prevents problems in product adoption after release. Rather than focusing on finding solutions for usability problems—which is the focus of a UX or interaction designer—a usability engineer mainly concentrates on the research phase. In this sense, it is not strictly a design role, and many usability engineers have a background in computer science because of this. Despite this point, its connection to the design trade is absolutely crucial, not least as it delivers the framework by which designers can work so as to be sure that their products will connect properly with their target usership.

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design, architecture and information science to the digital landscape. Typically, it involves a model or concept of information that is used and applied to activities which require explicit details of complex information systems. These activities include library systems and database development.

<span class="mw-page-title-main">Andy Hertzfeld</span> American software engineer and innovator (born 1953)

Andrew Jay Hertzfeld is an American software engineer and innovator who was a member of the original Apple Macintosh development team during the 1980s. After buying an Apple II in January 1978, he went to work for Apple Computer from August 1979 until March 1984, where he was a designer for the Macintosh system software. Since leaving Apple, he has co-founded three companies: Radius in 1986, General Magic in 1990, and Eazel in 1999. In 2002, he helped Mitch Kapor promote open source software with the Open Source Applications Foundation. Hertzfeld worked at Google from 2005 to 2013, where in 2011, he was the key designer of the Circles user interface in Google+.

<span class="mw-page-title-main">Processing</span> Free graphics library

Processing is a free graphical library and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.

<span class="mw-page-title-main">GNU Screen</span> Terminal multiplexer software

GNU Screen is a terminal multiplexer, a software application that can be used to multiplex several virtual consoles, allowing a user to access multiple separate login sessions inside a single terminal window, or detach and reattach sessions from a terminal. It is useful for dealing with multiple programs from a command line interface, and for separating programs from the session of the Unix shell that started the program, particularly so a remote process continues running even when the user is disconnected.

Findability is the ease with which information contained on a website can be found, both from outside the website and by users already on the website. Although findability has relevance outside the World Wide Web, the term is usually used in that context. Most relevant websites do not come up in the top results because designers and engineers do not cater to the way ranking algorithms work currently. Its importance can be determined from the first law of e-commerce, which states "If the user can’t find the product, the user can’t buy the product." As of December 2014, out of 10.3 billion monthly Google searches by Internet users in the United States, an estimated 78% are made to research products and services online.

<span class="mw-page-title-main">XMLHttpRequest</span> Web API to transfer data between a web browser and a web server

XMLHttpRequest (XHR) is a JavaScript class containing methods to asynchronously transmit HTTP requests from a web browser to a web server. The methods allow a browser-based application to make a fine-grained server call and store the results in XMLHttpRequest's responseText attribute. The XMLHttpRequest class is a component of Ajax programming. Prior to Ajax, an HTML form needed to be completely sent to the server followed by a complete browser page refresh.

<span class="mw-page-title-main">Website wireframe</span> Visual guide that represents the skeletal framework of a website

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually driven by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.

<span class="mw-page-title-main">Dojo Toolkit</span> Open-source modular JavaScript library

Dojo Toolkit is an open-source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004 and is dual-licensed under the modified BSD license or the Academic Free License.

Radmind is a suite of Unix command-line tools and an application server designed to remotely administer the file systems of multiple client machines.

User experience design is the process of defining the experience a user would go through when interacting with a company, its services, and its products. Design decisions in UX design are often driven by research, data analysis, and test results rather than aesthetic preferences and opinions. Unlike user interface design, which focuses solely on the design of a computer interface, UX design encompasses all aspects of a user's perceived experience with a product or website, such as its usability, usefulness, desirability, brand perception, and overall performance. UX design is also an element of the customer experience (CX), which encompasses all aspects and stages of a customer's experience and interaction with a company.

Web navigation refers to the process of navigating a network of information resources in the World Wide Web, which is organized as hypertext or hypermedia. The user interface that is used to do so is called a web browser.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

jQWidgets Software framework

jQWidgets is a software framework with widgets, themes, input validation, drag & drop plug-in, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support. It is built on the open standards and technologies HTML5, CSS, JavaScript and jQuery. This library is used for developing responsive web and mobile applications. Some developers consider jQWidgets one of the top alternatives to the open-source jQuery UI.

<span class="mw-page-title-main">Path Finder</span> File browser

Path Finder is a Macintosh file browser developed by Cocoatech. First released in 2001 simultaneously with the public release of Mac OS X 10.0 (Cheetah), it replicates or integrates most of the features of the Finder, but introduces additional functionality similar to that found in Windows's File Explorer, the defunct Norton Commander, and other third-party file browsers developed for a variety of platforms.

<span class="mw-page-title-main">Yelp (software)</span> Help documentation viewer for GNOME

Yelp, also known as the GNOME Help Browser is the default help viewer for GNOME that allows users to access help documentation. Yelp follows the freedesktop.org help system specification and reads mallard, DocBook, man pages, info, and HTML documents. HTML is available by using XSLT to render XML documents into HTML.

References

  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. Beaumont, Andy; Gibbons, Dave; Kerr, Jody; Stephens, Jon (11 November 2013). Constructing Usable Web Menus. Apress. p. 16. ISBN   978-1-4302-5358-7.
  5. Flanders, Vincent; Peters, Dean (2002). "8. Navigation and Mystery Meat: Mystery Meat Navigation is the Spawn of Satan". Son of Web Pages that Suck: Learn Good Design by Looking at Bad Design. San Francisco, CA : Sybex. pp. 163–165. ISBN   978-0-7821-4020-0 . Retrieved 24 January 2023.
  6. 1 2 Brinck, Tom; Gergle, Darren; Wood, Scott D. (2002). Designing Web Sites that Work: Usability for the Web. Morgan Kaufmann. p. 125. ISBN   978-1-55860-658-6 . Retrieved 23 January 2023.
  7. 1 2 Flanders, Vincent. "Web Pages That Suck learn good web design by looking at bad web design - Mystery Meat Navigation". Archived from the original on 1 July 2008. Retrieved 14 June 2009.
  8. Psychology of Web Design. Smashing Magazine. 2012. p. 84. ISBN   978-3-943075-24-3.
  9. Kalbach, James (28 August 2007). Designing Web Navigation: Optimizing the User Experience. O'Reilly Media. p. 149. ISBN   978-0-596-55378-4 . Retrieved 23 January 2023.
  10. 1 2 3 MacDonald, Diana (25 June 2019). Practical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience. Apress. p. 194. ISBN   978-1-4842-4938-3 . Retrieved 23 January 2023.
  11. Potts, Kevin (25 November 2007). Web Design and Marketing Solutions for Business Websites. Apress. p. 78. ISBN   978-1-4302-0262-2 . Retrieved 23 January 2023.
  12. Scott, Bill; Neil, Theresa (15 January 2009). Designing Web Interfaces: Principles and Patterns for Rich Interactions. O'Reilly Media. p. 90. ISBN   978-0-596-55445-3.
  13. Powers, Shelley (1 May 2008). Painting the Web: Catching the User's Eyes - and Keeping Them on Your Site. "O'Reilly Media, Inc.". p. 16. ISBN   978-0-596-55392-0 . Retrieved 23 January 2023.
  14. "Web Content Accessibility Guidelines 1.0". W3.org. Retrieved 2012-05-07.
  15. "Introduction to Web Accessibility". WebAIM. Retrieved 2012-05-07.
  16. 1 2 "HTML Techniques for Web Content Accessibility Guidelines 1.0". W3.org. Retrieved 2014-07-11.