Navigation

Navigation is the set of menus a visitor uses to move around a site. It is the visible control sitting on top of your structure, and it is worth separating the two: the structure is the decision about what exists and how it relates, and the navigation is one way of showing that decision to somebody who has never seen your business before.

In short

• Navigation exposes the structure. It does not replace the decision behind it.
• A site has several navigations, and only one of them is the bar at the top.
• Labels are read in about a second, so they have to describe the destination.
• The phone menu is a different design, not a compressed version of the desktop one.

What navigation is and what it is not

A menu is an interface. The structure underneath it is information architecture, and no menu design rescues a structure that was never decided.

The distinction becomes obvious the moment a site is rebuilt. Businesses frequently commission a new design, receive a beautiful header, and find that visitors are just as lost as before, because the eleven unrelated items in the old bar became eleven unrelated items in a nicer typeface. What changed was the presentation. What confused people was the fact that nobody had grouped anything.

The reverse also happens and is more encouraging. A site with a sound structure and a plain menu works well. Nobody compliments the navigation, which is the correct outcome, because navigation is noticed almost exclusively when it fails.

The bars a site actually has

Most sites have four navigations and treat only one as a design problem.

• Primary. The main bar, present on every page. It carries the handful of choices that describe the whole business.
• Section. A menu inside a large area, such as the list of services shown on a services page. It exists so that the primary bar does not have to hold everything.
• Utility. Small links that are not about content. Language, login, search, a phone number. Usually set apart and smaller.
• Footer. The catch-all at the bottom, which is where the legitimate but minor pages live, along with a fuller version of everything above.

Deciding which bar an item belongs in solves most crowding. Terms and conditions, careers pages and privacy notices are real pages that almost nobody navigates to on purpose, and they belong in the footer, not competing with your services at the top of every page.

The footer deserves treating as a navigation, not as a dumping ground. It is where people look once a page has failed to answer them, which makes it the last chance to keep somebody on the site. A footer carrying the full service list, the contact details, the address and the legal pages does considerably more work than the three links most sites leave down there.

How many items belong in the primary bar

Between four and seven, and the reason is not a rule about attention spans. It is that a bar has to be readable as a set.

A visitor scans the primary navigation once, early, to find out what kind of business this is. Seven items can be taken in during that scan. Twelve cannot, so the scan is abandoned and the visitor falls back to reading the page in front of them and hoping it leads somewhere. When a bar has grown past that point, the cause is almost always the same: nobody was willing to decide which things were top level, so everything that mattered to somebody internally got promoted.

Grouping is the repair. Four services become one Services item with a page behind it that introduces all four properly. That page then does a better job than the menu ever could, because it has room for a sentence about each.

Ordering matters as much as counting. A bar is read left to right on a wide screen and top to bottom in a drawer, and the first and last positions collect noticeably more attention than the middle ones. Put the thing the business most wants looked at first, and put contact last, which is where somebody who has already decided will go hunting for it.

Labels a visitor can read

A menu item has roughly two words in which to say what is on the other side.

Write them as descriptions of the destination rather than as categories in your head. Aircon Installation is a label. Solutions is not. What We Do is not. Internal names for departments are not, and neither are the words your industry uses among itself when customers use different ones. The test is whether somebody outside the business could predict what the page contains before clicking, and if two people guess differently, the label is the problem.

The same wording is doing double duty. Menu links appear on every page of the site, so their anchor text is the most repeated description of those pages anywhere in your control. Vague labels waste that repetition. Descriptive labels spend it usefully, in the same direction, for visitors and search engines at once.

The phone menu is a different design

Most visitors in the Philippines will meet your navigation on a phone, and the drawer that opens there needs designing rather than inheriting.

• Everything becomes a vertical list. Columns and multi-level dropdowns have nowhere to go, so nesting has to be shallow or the list becomes a wall.
• Order matters far more. On a wide screen every item is visible at once. In a drawer, the fifth item requires scrolling and is seen by fewer people.
• Targets have to be large enough to hit. Menu rows placed close together produce wrong taps, and a wrong tap costs a page load on mobile data.
• The header should stay shallow. A tall sticky bar removes a permanent share of a small screen on every page of the site.
• The icon needs a label. Three lines with the word Menu beside them are understood by more people than three lines alone.

Test it the way a customer meets it. Open your own site on a phone, on mobile data, and try to reach your most important page from the front page without using the back button.

Words you will hear

• Primary navigation. The main menu shown on every page.
• Utility navigation. Small non-content links such as login or language.
• Hamburger. The three line icon that opens a menu on small screens.
• Mega menu. A large dropdown showing many links in columns at once.
• Sticky header. A header that remains visible as the page scrolls.

Good navigation is unremarkable. Decide the structure first, put four to seven honest labels in the primary bar, move the rest into the footer or into section pages, and support all of it with internal links inside the content, so that nobody has to return to the menu to continue.