If you wanted to buy a new hammer from a hardware store, imagine how you would go about doing this:

• Option 1: You can either look through the store —  there are aisles with department names on top, and within a department, there are signs at the end of each aisle.
• Option 2: You can find the nearest clerk and just ask them where they keep the hammers.

It could be a mixture of the two as well — you may try to navigate a bit to see how easy it is, and if you don’t find what you’re looking for, you may ask a clerk.

If you think about it, this is exactly how we use websites as well. We go looking around for a bit (Navigation), and if we cannot find what we came looking for, we hit the Search functionality. These are the two most critical components of your site, and minor usability flaws here can cause major annoyance to your users.

Let’s start with the Navigation.

Why do we need Navigation?

Unlike our hardware store example, a website is not a physical space. It is different from a hardware store in three ways:

1. A website does not provide the user with a sense of scale
2. A website does not provide the user with a sense of direction
3. A website does not provide the user with a sense of location

When we want to return to something on a website, instead of relying on a physical sense of where it is, we have to remember where it is in the conceptual hierarchy of the website and then retrace our steps.

Navigation puts this conceptual hierarchy up-front and center, and should ideally be a part of every page. It tells us what’s on the website and how to use it, making it a critical part of the User Experience of your site.

How should you design the navigation?

Persistent navigation is the set of elements that appear on top of every page. They follow certain conventions, and unless we have a substantial reason, we should stick to them:

• Site ID on the top-left: This tells the user which site they are on (the Apple logo in the screenshot above.)
• Sections on top: A way to get around various parts of the site, with the current section highlighted to indicate where you are. (Mac, iPad, iPhone… sections in the screenshot above.)
• Tabs (optional): Tabs, when done right, are self-evident, hard to miss, and slick. An active tab should be a different color and physically connect with the space below it so it “pops” to the front.
• Utilities like “My Account”, “Track Your Order”, “Stores” etc. Don’t put more than five of these — the rest can go in the footer navigation.
• Breadcrumbs: This is another set of “You are here” indicators, like the highlighted section on top. Make breadcrumbs small and at the very top of a page, where they don’t interfere with the primary navigation. Best way to go about it is to use > between levels, and boldface the last item (the item you’re currently on, and since you’re on it, it should not be a link)

• A page name: Which page are you on? Every web page should ideally have a name that matches the words clicked to get there. It needs to be prominent and in the right place. In the visual hierarchy of the page, it should appear to be framing the content that is unique to this page.
• Local navigation on left sidebar (optional): These are the options available at the current level.
• Footer Navigation: This is where all other utilities go.

One of the most critical elements of navigation is a link to Homepage, usually served by the Site ID (logo). It’s what the users click if they get lost — it’s the anchor that lets them return to the starting point if they want to start over.

Making search easy

Very simply, make the search box a simple box with no options, but allow limiting the scope of the search on the page of results.

Also, if scoping a search, add the word “for” so it reads like a sentence: “Search _ for _.” Here is a fantastic example where the placeholder text indicates that the search is scoped to just the publication:

When the search is scoped to just the publication, the search area indicates so.

How to know if you did a good job with the navigation: The trunk test

Here’s a great test to run on your friends to see if you did a good job with the navigation. Leave them on a random page somewhere deep in your website and make sure they are able to answer these questions quickly, and without hesitation:

• What site is this? (Site ID)
• What page am I on?
• What are the major sections of this site?
• What are my options at this level?
• Where am I in the scheme of things?
• How can I search?

In the next tutorial, we will see how to design a good Homepage.