Mobile Web Design : Mystery Meat Navigation

From Forum Nokia Wiki

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

Introduction

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

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

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

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

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.

Links

Mobile Web Design : Faceted Navigation

Mobile Web Design : Doormat Navigation

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

Community: Wiki