Imperial Infosys

Other than the visual design, determining how a user will navigate a website is one of the more challenging creative tasks that you’ll face as a web designer. The main goal is to make people feel in control of the site and capable of getting around quickly and efficiently. Nothing is worse than a user feeling lost in your site.

To help people get around and stay oriented, your navigation scheme must be a road map of the entire site, complete with “you are here” signs.

Global navigation for websites

Remember the famous line from the 1970s TV commercial: “How many licks does it take to get to the center of a Tootsie Pop?” With candy, the more licks, the better. On the web, however, the opposite is true: Users won’t find anything tasty about navigating through gobs of pages. Your goal is to get users as quickly as you can to their desired content.

The best way to reduce the number of clicks is to provide your primary, secondary, and tertiary navigation sets on each page of the site. This strategy, called global navigation, enables people to quickly navigate from one main section to the next without needing to retrace any steps. Additionally, it’s important that these navigation sets are always located in the same place and do not change what they offer (swapping navigation options in and out). This consistency provides a mental anchor for the user.

Credit: © Apple, Inc.

Apple’s global navigation system allows users to stay oriented and to quickly traverse from one section to the next.

Section navigation

After users select a category from the primary, secondary, or tertiary navigation group, they’re transported into a section. Assuming that the section has a few levels of content within it, you need a way to navigate through it. A typical practice is to reveal a set of section navigation choices on the page. These choices are unique to their section, but the region you select to display them is the same region used to display section navigation for other areas of the site.

This section navigation design reveals the first level of pages in the Products area of the website.

This section navigation design reveals first- and second-level pages in the Products area.

Alternatively, you can display the section navigation fully opened. The advantage is that users can quickly see all the first- and second-level content with a section. The disadvantage is that the navigation can take up a lot of room and may look cluttered and overwhelming to the user.

Section navigation is often shown as a drop-down menu as well as on the page itself.

Typically, just the first level of pages is shown, but flyout menus can provide quick access to second-level pages. It is okay to have redundant section navigation, showing it both on the page and including it as a drop-down menu in the global navigation system.

Leaving a trail of bread crumbs

If Hansel and Gretel can use a trail of bread crumbs to find their way back through the forest, just think of what a digital version of bread crumbs can do for visitors to your website. Bread crumbs, as they’re actually called in the web-design industry, are text links you leave in a trail that marks your steps as you go deep into a section.

This bread-crumb trail provides a convenient way to retrace your steps in a site.

Bread crumbs are helpful to navigate sites that have navigation that goes more than two levels deep within a section. For example, if you use the section navigation to go down to a page that has even more links on it, you are now diving into a third or fourth level of the section’s hierarchy. It’s just not practical to display third- and fourth-level navigation on the page. So the bread crumbs can simply record your steps and get longer and longer as you dive deeper (hopefully no more than four levels or you’re getting into the catacombs of the site!).

Each bread-crumb link provides a quick way to retrace your steps back up the hierarchy. You don’t have to follow the links in sequence; you can click any link in the trail to jump quickly back to a different level in the hierarchy. The trail also gives you a good idea of where you are in the site. Unlike with a global navigation scheme, however, you cannot jump across to another section; you can only jump back to a level within a section. Think of a bread-crumb system as the browser’s Back button on steroids.

Graphically, the design convention for a bread-crumb interface is to show each previous step as an active text link followed by a character (arrow, colon, or pipe), all in a simple row. The last entry at the end of the trail represents the current page you’re on, so it should not be a link — and it should look different. If it were a link, it would simply reload the page — not the ideal user experience.