Users need to be stimulated to interact with navigational elements


Show graphical elements that upon mouse-over reveal their meaning

From www.orange.co.uk

Use when

The site you are designing is one where Fun is more important that a purely Information Seeking. The site is not information rich but more visual or theme related. Such site can often benefit from elements that invite users to interact more with the site and explore its possibilities.


The graphical elements that have this "minesweeping" behavior must be easily recognizable. In some cases it may help to mark the objects very strong, e.g. by a blinking border or other animation. When the users move their mouse over the object, a label is shown that tells the users more about the item's meaning. Alternatively, the item merely changes shape in order to achieve the same meaning. Clicking on the item is identical to following a normal navigational link.


Although minesweeping actually hides information from the users, it can be an effective means to attract and stimulate interaction. For some users, especially young users, such stimulation is part of the perceiving something as "being fun". All in all, use this pattern with extreme care!!!

More Examples

plml logo


3 comments have been added to this pattern

Nancy Gift, 1st August 2007
The link to www.orange.co.uk goes to a 404 Page not found error.
Dave Bowers, 9th October 2007
Also known as 'Mystery Meat Navigation' (as coined by usability specialist Vincent Flanders). Only ever to be used on sites where time-wasting is the whole point.
EPK, 20th August 2008
Actually, if the "mystery" being navigated over has some meaning, rather than just eye-candy, this pattern can be used very effectively to provide a comprehensive and concise view of information across a broad topic. For instance: http://marumushi.com/apps/newsmap/newsmap.cfm and http://windirstat.info/images/windirstat.jpg use this method to give the user a landscape view of the environment, with detailed information only a hover or click away.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below