The World Wide Web has evolved from a largely text-based medium into a system that includes images, audio, video, virtual reality, blogs, podcasts, RSS feeds, live chatrooms, and many other forms of interactivity. With all of these sensory possibilities, it is easy to lose sight of the notion that the Web was developed as a means to communicate information, not to show off a complex graphic design or the latest technology.
The inventor of the World Wide Web has stated: "The dream behind the Web is of a common information space in which we communicate by sharing information." - Tim Berners-Lee
When creating a website, developers and designers need to keep in mind that the Web is a communication tool. In order for users to make effective use of a website, the information on the site must be easy to find. Developing websites that adhere to usability guidelines will contribute to a World Wide Web that is truly a "common information space."
What Is Usability?
Usability is concerned with the quality of the experience that a user has when interacting with an item or a system, be it a microwave oven, a word processing package, or a website. Usability refers to extent to which any product (such as an application or website) supports its users in carrying out their tasks efficiently and effectively.
A website is said to be "usable" if it is intuitive, easy to navigate, and makes sense to the audience who is using the website. A website may make perfect sense to the people who designed it, but if the general population who use the site aren't able to find the information they are looking for, it is not a usable website.
Jakob Nielsen lists five characteristics of usability, summarized below from an article on the website ZDNet Developer:
1. How quickly can users learn the website interface so they can accomplish basic tasks?
2. Once users have figured out how to use the website, how efficiently can they accomplish tasks?
3. After using the website, leaving, and then returning later, can users remember enough about the system to use it effectively? Or do they have to start from scratch and learn the system over again?
4. Do users tend to make a lot of errors when interacting with the website? Are the errors severe? Is it easy to recover from these errors?
5. How much satisfaction do users get from using the website?
Why is Usability Important?
There are many reasons for producing websites that are usable. A website that adheres to usability standards will more likely have a high degree of user satisfaction, thus inviting "repeat business" from the positive user experience. A company's website has become an integral part of the image that a company conveys, and thus plays a large role in the overall impression people have about that company. This is especially true for a site that sells products through e-commerce.
How Are Information Architecture and Usability Related?
The line between the two disciplines is blurry; however, information architecture (IA) generally occurs before any HTML code is written or any designs have been rendered. While some components of usability also occur in the planning stages of a website, many of the guidelines are actually implemented while the site is being coded or the graphics are being created.
Information architecture is the process of creating a blueprint for a website that contains guidelines for all aspects of the site, including but not limited to mission and goals, target audience, type of content, server environment, technological constraints, and site maps.
Navigation
Navigation refers to the way users make their way around a website, linking from page to page or to content within a page. The navigation of a website is crucial to its usability. If users cannot easily find what they are looking for, or if it is difficult to tell where the current page fits into the scheme of the whole site, or if users cannot navigate to any portion of the website at any given timethen usability is dramatically reduced. For optimum usability, all navigation options should appear in the first screen view, and that users should not have to scroll to see all of the navigation. This is not always possible with the larger websites, but is a good guideline to keep in mind when creating smaller sites.
Structure
When designing the navigational structure for a site, designers need to remember that the users ultimately control how they travel through the sitethe developer will not be coaching users through the site. In addition, users can take paths never intended by the designer; the designer may assume that users will always be starting at "point A," but this is not always the case.
The navigation for a website must have a well-thought-out structure. The structure of the navigation consists of the major sections and subsections of the site and how they relate to one another. In addition, the structure will help define the organizational scheme for the navigation. For example, will all navigation options be available from all pages, or just the links to the main sections?
The process of creating the navigational structure will also have to define the labels that will be used on the website. The labels are the actual words that are used for the navigation. For example, will the page containing company location and phone be labeled "Contact Us" or "Locations"? A label should not leave a user guessing what information will be found there.
When designing the navigational structure for a website, it helps to ask the following questions:
What if a user ends up somewhere in the middle of the website as the result of clicking on a search engine link?
Will such people know where they are in the site hierarchy?
Will they be able to easily get to the homepage?
Will they be able to easily get to the top of the current subsection?
Will they be able to see other related links?
How many clicks will it take to get from point A to point B? The fewer mouse clicks, the better.
Users will likely be asking themselves the following questions:
Where am I?
Where have I been?
Where can I go?
Orphan pages
An orphan web page is one that is disconnected from the rest of the pages in the site. It has no structural context, and it does not contain relevant or accurate links to the first-level pages of the website. If a well-planned navigation scheme is implemented, orphan pages should not be a problem.
Ease of common tasks
The navigational structure of a website must consider which tasks users are likely to perform most commonly. The goal is to make the most common tasks easy to find and easy to execute.
A site search is a very common task on websites with high content volumes. For example, if the site contains a large amount of current or archived information, it would follow that the site search tool should be easily found from anywhere on the site.
Sitemap
A sitemap is a page that lists and describes top-level sections and subsections of the website in an easy-to-understand format. In addition, the sitemap provides links to the pages within each section. A sitemap provides an "at-a-glance" overview of a website. The larger and more complex a website is, the more crucial and beneficial a good sitemap becomes.
The best sitemaps are text-only. Text will load quickly, is easy to read and understand (no graphics to get in the way), is 100% accessible, and requires the least amount of work to maintain. For a sitemap to have maximum benefit, it must be accurate and up-to-date. Anytime a page is added or deleted, the sitemap needs to be updated to reflect these changes. An effective sitemap can greatly enhance the navigation of a complex website.
Search
A site search tool can be invaluable as a navigation aid. It's been said that there are two types of Web users those who surf through a site, clicking their way through the navigational structure, and those who immediately go to the site search tool, looking for whatever they are hoping to find.
Global and scoped
There are two types of search tools that can be placed on a website: global and scoped. A global search will search the entire website, and a scoped search will search only a defined subsection (such as archives). If a search is scoped, it needs to be absolutely clear that this is the case to keep users from thinking that they are searching the entire site.
Advanced searching
An advanced search allows the use of complex, Boolean search strings such as
Apple AND Orange
Chicken OR Steak
(Peanut Butter) AND (Jelly OR Jam)
Some search engines also support the use of search terms such as
Peanut NOT Butter
Peanut NEAR Butter
If advanced searching is available on a site, it should be separate from the main search. Generally, a link is provided to the advanced search options, with instructions and examples for how to construct complex search strings.
Availability of search functions
A global website search would ideally be available from every page on the website. It should be placed in the same spot on each page (remember the idea of consistency). And, like the navigation itself, the site search should be placed within the first screen view. Common placements for a website search feature are at the top of the page or along the left side.
Text Links
Even if your site employs ALT text with graphical navigation, you should also consider using text links. Often, text links to high-level pages are placed along the bottom of the web page. This is one of those Web conventions that many users have come to expect, and there are often other good reasons to use text links:
If the site is contained within frames, text links within the main content page will ensure that users will be able to navigate, at least minimally, if they end up on a page without the surrounding frames that contain navigation.
If the content on the page is longer than a few screens, users will not have to scroll all the way up to the navigation they can just click on a text link.
Text is often easier or faster to read than a graphic, providing an alternative to the graphic.
Text will be read by voicing browsers, widely used by vision-impaired Web surfers.
Selection Lists
Using drop-down menus, or selection lists, as a means to navigate a website has some of the same issues as graphics have. Remember that often the key to designing for usability is to provide options for critical information.
Because navigation is arguably the most critical information on a website, a drop-down menu should not be the only means of navigating a site. If there are that many levels of information in the navigation, perhaps a "cookie crumb" system would work.
In a "cookie crumb" system, the main navigation levels appear on the homepage. When a user clicks one, the resulting page has a new set of text navigational links for that topic. These links enable users to keep track of where they are in hierarchy, and they can follow their "crumb" trail forward or backward.
Browser "Back" Button
The "back" button on a browser is "broken" when the user clicks on it and is not taken back to the previous page. A broken back button usually happens for one of two reasons:
Clicking on a link opens up a separate browser window.
Clicking on a link brings a user to a page that contains an automatic redirect to a different web page.
In the first scenario, a user clicks on a link to a site that loads the site into a new browser window. Developers sometimes do this to keep the user from leaving their website. The problem is that often the user is not aware that a new window has been opened. When the user wants to return to the previous site, clicking on the back button of the new browser window will not take the user back. The only way the user can get back to the original page is to activate the browser window that contains that page.
In the second scenario, a user clicks on a link to a page that has been moved to a new location. The intermediate page that the link goes to contains coding that automatically redirects the browser to the new webpage, with the new URL. Clicking the back button from here takes the user to the intermediate page that redirects the browser again, thus sending the user into a hopeless loop, unable to get back to the starting page.
Separate Browser Windows
There are other times when developers may want to open a new browser window. This window could possibly display:
An enlarged version of an image
Informational details, perhaps about a calendar event
Helpful hints for filling out a form
The user's clicking on a link or image triggers these events.
A new browser window can also pop up automatically when a page is loaded. Most users see these types of windows as obnoxious and close them right away, without even reading what they say. These types of windows usually contain information about a current promotion, an advertisement, or a user survey. Developers must use discretion when deciding whether to implement separate browser windows, based on the target audience and also on what triggers the opening of the window.
Web developers control how the pop-up window will look through the coding. Some of the elements the developer can control are if the pop-up will have a toolbar, how big the window will be, whether it will have scroll bars, and whether the user can resize it. Some items to consider when creating separate browser windows:
Make it obvious how to close the window by including a "close window" button.
Consider very carefully if the user can resize the new window. Remember that users with a lower screen resolution may not be able to see the entire contents of the new window.
Related to this, consider enabling scroll bars so that users can scroll to see information.
Anticipate User Movements
Much of the discussion about designing Web site navigation revolves around this concept:
"Anticipate user movements."
Web developers and designers need to put themselves in potential users shoes, and think about how different users might approach their website.
What if" scenarios
A good way to anticipate user movements is to brainstorm as many "what if" scenarios as possible, as a means of troubleshooting your website. This process is as simple as generating a list of questions, the answers to which can provide insight on the steps necessary to mitigate potential problems.
For example, if the site involves filling out a series of forms or making an online purchase, check to see what happens if the user cancels or otherwise halts the flow of the transaction. Additional scenario questions might include the following:
What if
The user forgets his or her username or password?
A search term results in no matches? What will the resulting screen say? Will any tips be provided?
The user clicks on the members-only link but has not become a member yet?
These scenario questions will vary depending on the website. But remembering that a user will not always enter the website from the intended starting point and may navigate through a site in ways not foreseen is a good place to start.