The Mobile Menu Nobody Can Find

Everything behind three lines

On plenty of small business websites seen on a phone, the top of the screen holds a logo and a small icon of three stacked lines. Everything else on the site is behind it.

The services, the prices, the contact page, often the phone number. A visitor who never taps the icon sees one page and nothing else.

Designers call it the hamburger. It spread because it solves a designer's problem: a full menu does not fit across a small screen.

It does not solve the visitor's problem, which is finding the one thing they came for.

Why hidden means unused

People use what they can see. A link in plain view gets considered; a link behind an icon has to be remembered, guessed at, and then looked for.

Many visitors know the icon by now, but knowing it is there is not the same as opening it. Many scroll the page they landed on, find nothing useful, and leave.

Some never recognise it at all. Visitors who rarely browse on a phone can read three short lines as decoration.

And on a large phone held in one hand, an icon in the top corner sits in the hardest place on the screen to reach.

What never belongs inside it

• The phone number, which belongs in the header as a tap-to-call link.
• The main action, such as book, order or request a quote.
• Opening hours, on the first screen for any business people visit.
• The address or service area, for anyone checking whether you serve them.
• A shop's cart, which needs to stay visible once something is in it.

The first is the costliest to hide. Somebody looking for a phone number on a phone has already decided to call, and every extra tap is another chance to give up.

Label it Menu

The simplest improvement costs nothing: put the word Menu beside or under the icon.

It removes the guessing for people who do not recognise the symbol, and it makes the target bigger and easier to tap.

Restaurants are the exception worth thinking about, since menu there means food. A visible button saying Food menu avoids sending hungry visitors into a list of pages.

Make the icon and its label large enough to hit with a thumb, with space around them, not squeezed against the logo.

Limit what goes inside

A desktop menu with four dropdowns and twenty links becomes, on a phone, a long list of small text with arrows that open more lists.

Six or seven top-level links is plenty. Each should be a page people actually look for, named in their words: Services, Prices, Areas we serve, About, Contact.

Nested lists should go one level deep at most, and the arrow that opens them should be a generous target rather than a sliver beside the text.

Anything that does not earn a place can live in the footer, which works as a second, quieter menu at the bottom of every page.

Let the figures choose

Deciding what stays is easier with numbers than with opinions.

In Universal Analytics, the all pages report with the mobile traffic segment applied shows which pages phone visitors actually open. The top six usually pick themselves.

Pages near the bottom of that list are candidates for the footer or for merging. A page nobody opens on a phone rarely needs a place in the phone's menu.

A worked example

An independent bicycle shop on a suburban high street had a site that looked tidy on a desktop and bare on a phone.

The phone version showed a logo, a three-line icon and a large photograph of a bike on a repair stand. The phone number sat in the footer, below a long section about the shop's history.

Booking a repair meant opening the menu, opening Workshop, and finding Book a tune-up as the ninth link in a nested list.

The rebuild put a tap-to-call button and a Book a service button in the header on every page. The icon gained the word Menu, and the menu went from fourteen links to six.

The history moved to its own page, linked from the footer. The owner had always opened the site from a bookmark on his desktop, and saw the phone version properly for the first time during the review.

Headers that stay put

Keeping the phone number in view as people scroll helps, provided it does not take over the screen.

A slim header that stays at the top, or a bar along the bottom with Call and Book, keeps the main actions one tap away without scrolling back up.

Keep either one thin. A fixed bar that takes a large slice of a small screen, or covers the text people are reading, trades one problem for another.

Test it on an actual phone, upright and sideways, before deciding.

Desktop screens that hide it too

Some sites now use the same icon on a full desktop screen, where there is plenty of room for the main links.

That hides the site's structure for no reason. Wide screens should show the main links in plain text across the top, and save the icon for screens that need it.

The counter-case

The icon itself is not the problem, and not every site needs to change.

A site with three or four pages can often show every link openly across the top of a phone screen, with no icon at all, which is better still.

A large site with many sections genuinely needs a menu that folds away, and a search box may help its visitors more than any menu.

And a page reached from a booking confirmation, where the visitor already knows what to do, depends less on the menu than on the page itself.

Wherever there is a menu, keep the phone and the main action outside it, label it, and keep it short.

On your own phone

Do this on a phone, not on a desktop browser made narrow.

1. Open your home page on your own phone.
2. Find the phone number without opening the menu.
3. Find the main action without opening it either.
4. Add the word Menu beside the icon.
5. Count the links inside and cut to seven.
6. Move the rest into the footer.
7. Watch someone else try to find your prices.

Step two is the quickest test there is. If the number is not on the first screen, every caller arriving on a phone is being asked to hunt for it.

The same reluctance to choose what matters most produces a homepage slider nobody waits for.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.