Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 05:43, 7 May 2012 by hamishwillee (Talk | contribs)

Mobile Web Design : Mystery Meat Navigation

From Wiki
Jump to: navigation, search
Article Metadata
Created: mayankkedia (29 Jun 2009)
Last edited: hamishwillee (07 May 2012)

This design pattern is part of the Mobile Web Design series.



Depending upon the kind/intent of the website, the overall layout/navigation pattern should be customized. For instance if the site is a fun/game site, you should consider using interactive design elements to keep the user curious, while if the site is meant for business users, the site should have a formal look to it, with the information clearly displayed and the navigation structure straight forward.

One such navigation pattern which is ideally suited for fun sites is minesweeping aka mystery meat navigation pattern.

What is minesweeping

Much like the Minesweepersor the Minesweeping Computer Game,where the mines are hidden from the rovers, the information is hidden/abstracted from the user on the web page. They have to navigate/explore the page to unearth the information available on the page; this gives the webpage an overall element of curiosity and challenge of sorts at times. This navigation pattern hides the information from the user and they have to try and find it out by themselves in case of treasure hunt kind of games, while in other cases the visual clues on the web page are clearly marked so that the user doesn’t have to exert them.

Minesweeping navigation in image
Mystery meat 1.JPG

What is mystery meat navigation

Mystery meat navigation (MMN) on the other hand is a satirical term coined by web designer Vincent Flanders to describe a visually attractive yet inefficient/confusing web site page. In such cases it is very tough for the user to figure out where the hidden hyperlinks are on the main web page. Another common example of MMN is the use of un-meaningful icons/images which reveal meaningful text/content only when the user hovers their mouse/pointer over them. Since the user is not aware of the workings of such web sites sometimes it becomes very unfriendly from their perspective.

More details can be had from Mystery Meat Navigation

When to use

Minesweeping should be used as a navigation pattern only in cases where the intent of the site is not information seeking or the site is not meant for business users who have specific needs and are generally pressed for available time always. This pattern would make a lot of sense on fun sites meant for kids/adventure seekers, like gaming/virtual tour of fun parks/theme parks etc.

Minesweeping used in online treasure hunt game
Mystery meat 2.JPG

Minesweeping used in online treasure hunt game
Mystery meat 3.JPG

How to use

Even though the intention of minesweeping as a navigation pattern is to hide information/links from the users, at the same time it should not be so complicated that the user ends up abandoning the website.

  • The visual cues/links on the webpage should be clearly visible; in some case providing a different colored image/icon would also make sense.

Minesweeping used on news website
Mystery meat 6.JPG

  • It might also be a good idea to provide some clues to the user in the about section in case they are not able to figure it out on their own.
  • A timer implementation might be a good idea as well, where if the user hasn’t been able to uncover any links in ‘x’ time, a timeout should reveal the links to the user.

Some more examples :-

Minesweeping used on news website
Mystery meat 4.JPG

Minesweeping used on news website
Mystery meat 5.JPG

Final Word

A well implemented minesweeping navigation pattern gives the website a wow appeal, but if not done well it might end up being a totally useless exercise and end up being listed on Web Pages That Suck,so be extremely careful while using it and have valid reasons to do so too.


Mobile Web Design : Faceted Navigation

Mobile Web Design : Doormat Navigation

--- Added by Mayank on 29/06/2009 ---

42 page views in the last 30 days.