Mystery meat navigation: icons and labels visitors miss

Key takeaways

Mystery meat navigation is navigation that does not reveal where it goes until you hover or click: unlabelled icons, clever menu names such as 'Discover' or 'Our World', and images that turn out to be links. Nielsen Norman Group's research on icon usability found few icons are universally understood, so add a text label to every navigation icon.

• Add a visible text label to every navigation icon.
• Replace clever labels with plain ones: 'Services', 'Prices', 'Contact'.
• Never rely on hover to reveal what a link does.
• Only a handful of icons, such as search and home, are widely recognised.

What is mystery meat navigation?

Mystery meat navigation is a term for navigation whose destination is hidden until the visitor interacts with it. Like an unlabelled tin, you cannot tell what is inside without opening it. It covers icon-only menus, vague or clever labels, and links disguised as decoration.

• The most common business website design mistakes
• Website navigation best practices

Why do icons without labels fail?

Icons mean different things to different people. A star might mean favourites, ratings or featured; a lightbulb might mean ideas, services or tips. Nielsen Norman Group found that, beyond a few standards like search (magnifying glass) and home (house), icons need text labels to be understood reliably.

Why do clever labels fail?

Labels such as 'Explore', 'Our Craft', 'Journey' or 'Solutions' sound polished in a brand workshop. Visitors scanning for 'Kitchen fitting' or 'Prices' skip right past them. Use the nouns your customers use, and test labels by asking a few customers where they would click to find a particular service.

• Information scent: why visitors lose the trail on your site
• Tree testing: check visitors can find things before you build

Why does hover-only navigation fail?

Some designs reveal labels or links only when the cursor passes over them. Phones and tablets have no hover, keyboard users cannot discover them easily and visitors who do not move the pointer see nothing. If something is a link, it should look like one without any interaction.

• Button design: why visitors miss your website buttons

What about accessibility?

Icon-only links often have no accessible name, so screen readers announce 'link' or 'button' with nothing more. WebAIM's 2026 survey found empty links on 46.3% and empty buttons on 30.6% of top home pages. A visible text label fixes the problem for everyone at once.

• Website accessibility for UK businesses

When can you use icons safely?

Use icons alongside text, not instead of it. Widely known icons, such as a magnifying glass for search, a phone handset for call and a basket for shopping, can work alone in tight spaces like a mobile header, provided they also have an accessible name. Social media logos in the footer are generally recognised.

• Social media icons on your website: where they belong

What does this look like in practice?

A pattern we see: a homepage uses four circular icons as its main navigation, with labels that appear only on hover. On a phone the labels never appear. Adding short text under each icon makes the routes obvious on every device.

• See client work
• Website Design & Development for UK businesses
• Website design review: score your own site in 30 minutes

Navigation clarity checklist

• Add text labels to every navigation icon.
• Replace clever labels with customers' words.
• Make links look like links without hover.
• Give icon buttons accessible names.
• Test labels with a few customers.
• Use icon-only controls only for widely known symbols.

Next step

Read your menu labels aloud and ask: would a customer know exactly what is behind each one?