Usability Overview
or how people really use a web page
While most site designers would like to believe that the average web visitor will be looking at their site as something unique and interesting the truth of the matter is that most site visitors when arriving at a page will quickly skim it for anything that catches their interest. If something catches their eye, then they'll stick around and read a bit. If not, more likely than not they will head back where they came from to try their luck elsewhere.
This is sometimes likened to the way we look at billboards when going 60 miles an hour down the highway. To me a better analogy is a newspaper or magazine cover. If you see a headline, image or caption that interests you then you'll locate it in the publication and find it on the internal pages. This is particularly true of the front page section of a newspaper. If the reporter has done the job correctly you'll see enough of the story to get you interested enough to go to page A33 column 5. If your interest is only in financial new, sports or maybe the comics the newspaper makes it easy for you to find those section. Once there your eyes scan the page looking for headlines on individual topics that interest you. Find them and you start reading then you may see more things that interest you and stay in that section, drift over to something else or quit the paper altogether but you will have found what you were looking for. If you keep that experience in mind when you plan your website it will help you create a usable site.
Planning Your Navigation
Create a Clear Hierarchy
This may sound self evident but the many sites plan their top level navigation then just tack sublevels on as needed. Instead think of your website as an outline. The most important thing on the page is your site identification. Whether a company logo or name it should be prominent on every page.
Main sections should be next on the outline. Then nest things that are related under each section. Think of the cover of your favorite magazine, you have a masthead that tells you at even the quickest glance what magazine you are looking at.
Conventions
Conventions all started out as someone's bright idea that became a convention because it works.
While you may believe that the client came to you because they wanted something 'new' and 'different' most site owners really want visitors to like their site and return frequently. To the visitor there is something very reassuring about being able to tell at a glance that the tabs on the top are the main sections, the colored area on the left contains useful links organized under colored subheads.
Define Areas of the Page
Breaking your page into clearly defined sections helps the visitor decide very quickly which parts of the page have information they can/want to use. For the home page let's go back to the magazine analogy.
The magazine cover doesn't list the sections but I've noticed a tendency to put the articles on the same topic in the same location on the cover from issue to issue. In Cosmopolitan there is always something to do with men/sex on the upper left just below the masthead. In Sports Illustrated that spot seems to be occupied by a celebrity profile.
On a typical website your page areas would be site identification (banner area), navigation area (usually either under the banner area or in the left column), main content (usually second column) optional third column, footer area with all the boring copyright notices, etc. but may also contain text links if the site uses images or script for the main navigation areas.
These areas should be consistent from page to page within your site so the visitor knows what to expect.
Make Your Links Obvious
Conventions says to underline hyperlinks primarily based on the default styling for links. When you ignore conventions you confuse visitors. Which of the following are links and which are not:
NEW! New! New!If visitors can't tell what is or is not a link they get very frustrated and either leave or if they are really interested click everything in site. It shouldn't come as a surprise that the most often used link on the web is the 'back' button of the browser.
Clear Consistent Navigation
There are two basic types of navigation, organized and chaotic. Okay, that's a bit of an over simplification because few sites are completely disorganized but you've been to sites that have links scattered here and there with no consistent presentation from one page to another.
We started with the basic principle that sites should be structured in a hierarchical manner. That holds true because it meets the expectations of the majority of web users. They look for signs that they are going in the right directions from the general to the specific. This assumes the visitor enters from the site's homepage which isn't always the case. Visitors may arrive at any page in the site if they come from a search engine or bookmark.
When a visitor enters the site directly to a page other than the home page what they need to be able to tell at a glance is:
- What site am I visiting?
- What page am I on in this site?
- What are the major sections of the site?
- Where am I in relationship to the rest of the site?
- Where can I go from here?
- Can I search this site?
What do I need to provide the visitor go give them the information above?
- Site identification - usually site name or company logo
- Name of the page
- Main navigation sections and link to home
- "You are here" indicator or breadcrumb trial (Home > Presentations > Navigation > Page 1)
- Local navigation (other pages in the same section)
- Search form in a consistent location on each page
Do I need all the above on every page?
The answer is as it so often is "it depends".
- For a small site you may only have sections and no sub pages so 1-3 is all you need.
- On the home page you don't need a link to home.
- On a form page you may not want full navigation menus because it takes up too much of the page or you don't want to distract your forms user.
- Search Function
- Depending on your site contents you may not choose to have a search function.
- In large sites a search function may not be optional especially if you have items that could appear in more than one section or category.
KISS Principle
Keep choices clear and unambiguous, don't make the user try to guess what you needs to be done to get the result they want. You visitor shouldn't have to stop and think about how to get to where they want to be on your site.
If I wanted to purchase a book on tape do I look under "book", "audio" or something else? Maybe it would be simpler to do a search? What is the right keyword? What if I only have a partial title or author name or do I need the 'reader'. If I need a new computer do I need a 'home' or 'office' system? What is the difference? Why do I need to choose? Let me try this, or that, or maybe somewhere else.