“A web page should be self-evident. Obvious. Self-explanatory.“ - Steve Krug, (2005).

What would logic and common sense look like when designed for effective website usability? Good and logical website navigation equates to good usability. When you think of usability, think Apple. Apple’s grand success is absolutely rooted in usability. Every item from MacBook to IPod can be figured out within seconds. You don’t need a manual – all you need is your own common sense and common logic to guide you.

As the title of the book confirms, Steve Krug tells us that the first and foremost rule of usability, is that it shouldn’t make people have to think. For the designer, this means that the slightest indication of a questions mark in the navigation process is a fail. Why? Question marks pile up, take up mind space, cause frustration and distract us from the task at hand.

Navigation leads users to what they are searching for, and it reveals your content to them in the process. If this is not a good enough reason to pay special attention to designing navigation for the purpose of convenient usability, I don’t know what is.

Hierarchical structuring at the foundation

The navigation structure of your website must be hierarchical, like a spider graph, branching out to those things less and less important than the central ones. Remember this term, hierarchy, because it is the root of all web structuring. Every page, section, drop down menu, everything must be organised into an order of importance and relevance.

Consistencies and conventions

Consistency in navigation is proven to be reassuring to us users. This means that the central navigation pane should be the same for every webpage. Slight difference here and there won’t cause too much of a stir, and should be included where necessary. A site should include these important consistencies:

•    The site ID:
The site name or logo should appear on every page as a part of the frame.

•    The home button:
The home button is a way to start over when we get lost in a virtual world. Site IDs should double as a home link by convention. The home button should be the same on every page.

•    The search bar:
The search bar should be the same for every page as a back-up plan if browsing links prove unsuccessful. One generic search bar for an internal search is good enough. Do not create search options unless it is highly necessary. Options that are unfamiliar and time consuming to fill in, is a drag! As an exception to the rule, for example, real estate sites need a basic few options such as, buy or rent, price class, number of bedrooms etc. These are important elements in this specific website’s search.

•    The menu bar:
Those most often used links must be present in the menu bar on every page in order to have the basic navigations at hand in any phase of our browsing path.

The only exception to the rule of consistency is landing pages with forms to fill in. The rule of thumb with landing pages, is that there should be few distractions and ways to navigate away from the form. Why? You want users to fill in the form!

Format your website according to conventions. Web designers are prone to design and develop new things – but conventions are conventions because they work. Good web conventions, to only name a few, are having the site ID in the top left corner, the menu bar horizontally at the top, and content links should be in a different colours to the rest of the text.

It is only ever a good idea to veer away from conventions, if that item replacing the convention is completely self-explanatory, or ads so much value that it is worth having users think over it for a second or two.

Links and clicks

The way we navigate through a website, is by clicking links. Firstly, we have the conventional menu bar. The menu items should be selected under the criteria of items most often used in hierarchical order from left to right. Menu items will have relevant second and third level sections. These should be carefully structured in a hierarchical and logical order.

We then have all the other clickables on the page, consisting of buttons, text links, image links, etc. Important factors to consider when building such links for usability, is that you should invite users to click on text and button links, for example, “for x, click here!”. The second is to indicate that a link has been clicked by changing its colour or highlighting it.

Having to click ten links to get to the webpage that you are looking for can be frustrating. Yet what is more important than the amount of clicks is making the clicking process an effortless and mindless routine. Most users wouldn’t mind to click 6 times to reach a page if the clicking through is a quick and simple process.

“Following what Jared Spool calls “the scent of information,” I think the rule of thumb might be something like “three mindless, unambiguous clicks equal one click that requires thought.”– Steve Krug, (2005).

Choosing names

Every page should have a name. The name should be presented consistently at the top of the page, prominent, clear and in simple language. The less time spend trying to figure out on which page you have landed, the more time is allowed for the actual page contents to be overviewed.

The name of the link must be exactly the same as the name of the page that you get for clicking it. A mismatch equates to a panicky or frustrated click on the “back” button. User trust is broken in an instant. What they click should be what they get – period!

In a navigation plan, the naming of items need to be as clear as possible and in a simple vernacular. Avoid ambiguous terms at all cost, because confusion disrupt the navigation rhythm.  There is a time and a place for the use of crafty titles that arouse curiosity, but not when the task at hand is webpage usability.

Your company jargon is gibberish to a web user. Even acronyms and abbreviations that seem to be common sense, will still lead to a certain amount of puzzling over before it’s figured out. You don’t want browsers spending time and patience on figuring out what your abbreviations and acronyms stand for.

Use “search” for search boxes, not “find” or “quick find”.  The reason is simple; we are scanning for the “search box”, so stick to the most popular terminology when naming items such as these.

Structure and visual order

Structure according to priority: Important=prominent.

Elements on a webpage should not be competing for our attention. Visual clusterphobia is when this competition is on. This overwhelms users. There is only so much of our tolerance budget that can be spent on clutter and complexity.

Prioritizing and grouping the components on your page means that users don’t have to do it for you. Group the appropriate titles together. Make it clear that corresponding components are placed in such a way as to reveal their relationship – such as in drop down menus or listings below a heading or copy links within a paragraph of writing. You could also group through design elements or through placing on the page.

Nagging your visitor

We should never feel under pressure to buy something or pressured to subscribe to something. The option should be there, yet toned down to a strong suggestion instead of a pressuring demand.

There are few things more annoying than being pressured by something that you can’t yell at.

Example: I wanted to buy a print of a famous painting from an ecommerce site. From the first page, it was suggested that I view the framed version of the print. I already had a frame so I rejected the offer. I added the print to my basket, checked out, arranged the delivery, but before I could reach the step of paying for the item, it was suggested to me three times more to buy it with the frame. I got so irritated that I left the site to never return.

Writing for the web

Website writing is the opposite of creative writing. When writing for the web, what you need to keep in mind is to refrain from writing to impress and express, but to write for clarity and quick reading. Too many words on a webpage are unnerving to the user. You want to keep your pages short, minimize the clutter of useless items, and make scrolling down unnecessary where possible. And last but not least, self-promoting blabber is usually irritating, and most of us will only read it until we discover that it is in fact self-promoting blabber.

Steve Krug’s “Acid Test”

This is Steve Krug’s “acid test” for good website navigation. The instructions are simple; you should be able to answer the below questions without thinking twice, as a matter of fact, you shouldn’t have to think about it even once.

1.    What site is this?
2.    What page am I on?
3.    What are the major sections of this site?
4.    What are my options at this level?
5.    Where am I in the scheme of things?
6.    How can I search?

Testing with statistics

Website statistics tools, such as clickstream, make it possible for you to see how users are navigating through your website from the back-end. A clickstream is a record of a user's activity on your website. From the first three clicks you should have an idea of what the visitor intended to find. Tracking the paths that users follow, you will be able to see at which points do users give up and leave the site, where do they take the wrong turn, where do they get confused and click “home” to try a different path.  Take this information and go have a look at the weak links in your site navigation. You might want to rethink these. Web statics is not only ever used to reveal the rotten spots in your website. Through tracking browser routes you will also be able to spot the number of users who complete tasks in comparison to those who just browse and leave. Revisit the steps taken by task completing users. Chances are that your navigation design is especially good on those pages.

Feeling grounded in space

Good logical sensible navigation builds credibility. The best impression you can make is through providing good and clear navigation. Contrary to popular belief, usability does not mean step by step intensive guiding; users know to click search after entering text into the search bar. Usability is keeping the browsing procedure simple, self-evident and self-explanatory. In a virtual world where it is so easy to get completely lost, good navigation puts ground under our feet.

Search: