DESIGNING WEB NAVIGATIONBy: James Kalbach

Ashley Musselman

WEB NAVIGATION DEFINED Theory and practice of

how people move from page to page.

Process of goal-directed seeking and locating hyperlinked information.

Encompasses all links, labels etc that provide access to pages and help people orient themselves while interacting with a given site.

Essentially, all concerned with linking.

NAVIGATION… Shows location: Gives a sense or orientation,

“Where am I, what is here, and where can I go from here?”

Shows the “aboutness” of a site: Shows what can be found there, and creates an overall, meaningful coherence of subject matter of the site.

Reflects brand: A company’s values and character can be exemplified through design, font, logos etc.

Gives site credibility: How believable is this site? Shouldn’t have any vague categories, abbreviations, misspellings etc.

UNDERSTANDING NAVIGATION

Seeking information is a driver of using the internet, and people seek information three different ways:

Directed browsing Semi-directed browsing Undirected browsing

EMOTIONS IN INFORMATION SEEKING

Relative to design, emotions are: Quick Situational A human trait

BREADCRUMB TRAIL

People need to navigate back along a path previously taken, this shows a person’s path through a site.

Also shows their current position within a site, and provides shortcuts to previously viewed pages.

MECHANISMS OF NAVIGATION:

Paging navigation: typically found on a search results page showing details about result set. This is repeated until all results are represented. A page count is included.

MORE NAVIGATION TECHNIQUES

Site map: A representation of a site’s structure offering a top-down overview of the websites content. Visitors of the website have the luxury of directly jumping to any page listed.

TAG CLOUDS

A more recent addition to navigation strategies, the links are listed alphabetically, and the more a link is frequented the larger it becomes.

DROP DOWN MENUS

Selecting an option on the drop down bar brings the user to a new page.

THREE TYPES OF NAVIGATION

Most types of navigation falls into 3 categories:

Structural Associative Utility

STRUCTURAL NAVIGATION

Further subdivided to include main and local navigation.

Main navigation represents the top-level pages of a sites structure, links expected to lead to pages within a site in a consistent manner.

Provides an overview and answers for important questions one has when first visiting a website.

Allows people to switch topics, people can get to other sections of a site efficiently, or they can start over with ease.

Helps when users get interrupted while navigating.

STRUCTURAL NAVIGATION: MAIN

STRUCTURAL NAVIGATION: LOCAL

Local navigation is used to access lower levels below the main navigation.

Generally shows other options at the same level of a hierarchy, as well as options below the current page.

LABELS AND NAVIGATION

Ambiguous jargon and labels leave visitors confused, and if they go down the wrong navigation path, they may get lost or give up. Good labels avoid frustration, and attributes of effective labels include:

Speaking the language of the user (avoid company lingo, technical terminology, clever labels and abbreviations, and use the appropriate tone of voice.)

Descriptive labels (provide clues to the content the label represents to entice visitors.)

Mutually exclusive labels (the meaning of one label might affect the interpretation of others in a series.)

LABELS CONT.

Labels don’t exist on their own, they are a part of a system of headers, titles etc. that direct people to the information that they want. These labels must be cohesive to effectively achieve good navigation. Examples include:

Browser titles:

BROWSER TITLES CONT.

People don’t necessarily pay attention to the browser titles, but they are imperative for bookmarking, tabbed browsing, printing and search results.

Page titles and URL’s are also key to successful navigation. Initially when visiting a website people tend to use the URL (http://www.npr.org), before bookmarking it etc. so they can get to it faster.

QUALITIES OF SUCCESSFUL NAVIGATION Balance- The fewer the navigation items, the deeper the

structure, the more navigation items, the fewer the levels of hierarchy.

Ease of learning- People don’t expect/want to learn how to use a website, don’t make them have to.

Consistency/Inconsistency- Links appearing in a steady location, standardized labels, behave predictably etc. Balance in some inconsistencies such as a change in page layout from home to landing page to engage visitors.

Feedback- Visitors should be informed about what is going on, and to better locate themselves, having rollovers (technique that highlights a tab or something by making it larger, changing the color etc so one knows this is what they are clicking on) is critical to orientation.

Efficiency- The paths to information should be efficient. Clear labels Visual clarity- First impressions are everything!

EVALUATION OF NAVIGATION

Method Pros Cons

Heuristic Evaluation Inexpensive, quick to conduct.

Subjective results, requires experienced reviewer.

Checklist review Inexpensive, quick to conduct, doesn’t have to be done by expert.

Findings may not give “big picture”, subjective results.

Navigation stress test

Inexpensive, extremely quick, no experts necessary.

Limited in generalizations that can be made across site.

CONT.

Method Pros Cons

Usability testing Navigation put in context with other aspects of site, rich data for broad conclusions.

Costly, time-consuming, requires experienced professionals.

Metric analysis Reflects navigation behavior and patterns, yields numbers and percentages that management likes.

Unreliable data, hard to show cause and effect relationship.

BUSINESS GOALS AND NAVIGATION

As a web designer, you have to understand the overall goals of the business before and effective website can be created. Web designer must comprehend the vision, mission and brand.

In order to create a unique market position, it is also imperative that a web designer do research on competitors products and services.

Very crucial to “become fluent in the language of the information you will be organizing and understand the general subject matter.”

NAVIGATION AND RICH WEB APPLICATIONS

Rich web applications- more sophisticated web applications that behave similarly to software programs. Compared to normal web pages, they are rich in interaction, content, and functionality.

Instead of waiting for reloads in between each click, a single page model, where updated information is quickly brought to the page is available.

RICH WEB APPLICATIONS CONT.

Page reloads and transitions done in one of two ways:

Load the data all at once- Filtering, sorting, manipulating doesn’t require a reload. Done within the browser without a call to the server. Initial delay but offers quick interaction with information.

Load parts of the page incrementally- Do it without reloading the whole page. Some navigation areas remain static so there is no reorientation. Google Maps uses it.