Phone Menus Three Levels Deep

Menus that open into menus

On a desktop the menu works. Hover over Services and a list drops down; hover over one service and a second list slides out to the side.

On a phone the same structure becomes a stack of nested lists, each opened by a small arrow beside the text, each pushing the rest of the menu further down the screen.

By the third level, the visitor has opened three lists, scrolled twice and lost sight of where they started.

Plenty give up there and go back to the search results.

Why hover does not carry over

Desktop dropdowns are built around a mouse pointer resting on a word. A phone has no pointer, so there is nothing to rest.

Depending on how the menu was built, tapping a parent item either opens its list or goes straight to its page, and the visitor cannot tell which until it happens.

On some sites the first tap opens the list and a second follows the link. On others, the parent page cannot be reached from a phone at all.

The small arrows added beside each item are meant to solve this. On a phone they are often a few millimetres wide, right next to a link that does something different.

Where the depth comes from

• Every service given its own menu entry.
• Locations nested under the services offered at each one.
• About pages split into history, team, careers and community.
• Old pages kept in the menu because nobody removed them.
• A desktop design carried over to phones unchanged.

The last is the root of the others. A desktop menu can hide thirty links in hover panels and still look tidy, but on a phone the true size of the structure shows, one tap at a time.

What phone visitors want first

Most people opening a local business site on a phone want one of a few things: the main services, prices or a quote, where you are, your hours, and how to call.

Those belong first in a phone menu, named in plain words. Everything else is secondary.

The order inside the menu matters as much as its length. The service that earns the most goes at the top, not wherever the alphabet put it.

Flatten to one level

The phone menu does not have to mirror the desktop one. It can show five to seven items, none of which opens another list.

Each item leads to a section page that does the job the dropdown used to do: a services page listing every service with a line and a link, a locations page listing each location.

Section pages are better than dropdowns anyway. They can explain the differences between options, show photographs and carry the phone number.

Secondary pages, such as careers, news, policies and the full team, can move to the footer.

A worked example

A modular home dealer with a display lot beside a highway sells about thirty models in four series, from one-bedroom cottages to two-storey family homes.

The desktop menu had Homes, with a dropdown for each series and a fly-out list of models under each, plus Financing, Delivery and Set-up, Display Homes, About and Contact, several with dropdowns of their own.

On a phone, the menu icon opened nine items with arrows. Tapping Homes went to a page of photographs instead of opening the list, and opening a series meant finding an arrow the width of a fingernail.

Fully expanded, the menu ran past forty links, with the phone number at the very bottom.

The phone menu was cut to six items: Models, Display Lot and Hours, Financing, Delivery, About and Contact. Models leads to one page showing every model with its bedrooms and floor area, grouped by series.

A call button now sits in the header beside the menu icon, and the desktop menu kept its dropdowns, trimmed to two levels.

The phone number stays outside

The person who wants to call should not have to open anything. A call button beside the menu icon, on every page, lets them dial in one tap.

Inside a long menu it is one more item to scroll past, and it usually ends up last.

Big enough for a thumb

Each menu item should be easy to hit with a thumb, with enough space between items that a slightly wrong tap does not open the wrong page.

Search Console's Mobile Usability report flags pages where touch elements sit too close together. It is worth a look before and after any change to the menu.

If a section must also open a short list, make the whole row open it, and put a link to the section page as the first item inside.

Showing where they are

Deep menus lose people. After three taps, many no longer know which section they are in.

A short trail at the top of each page, such as Models, then Two-Storey, lets them step back one level without reopening the menu.

A page heading that matches the menu label confirms they arrived where they meant to.

Testing with one thumb

Test on an actual phone, not a desktop browser narrowed to phone width. The difference is the thumb.

Hold the phone in one hand and try three tasks: find the main service, find the hours, call. Count the taps for each.

Then hand it to someone who has never used the site and watch without helping. Where they hesitate is where to fix.

The counter-case

Sites with many sections, such as a supplier with hundreds of products or a clinic with dozens of services, may genuinely need two levels on a phone. A search box usually helps them more than a third.

A well-built menu that expands in place, with large targets and clear labels, can carry two levels comfortably.

And the desktop menu can stay as it is if it works there; the phone version can be built separately.

Three levels is where a phone menu turns into a maze. Flatten it before that point.

The thumb test

1. Open your own menu on a phone.
2. Count the levels and the links.
3. Name the five pages phone visitors need most.
4. Build section pages to replace the dropdowns.
5. Move the phone number into the header.
6. Send the rest to the footer.
7. Watch someone else find three things.

Step four is what makes flattening possible. Without section pages, removing the dropdowns removes the routes; with them, every service is still two taps away and better explained.

Another layout that has to be rethought for a narrow screen is three service packages side by side.

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.