Theory of website navigation

What different techniques are provided by interaction designers with the users in mind?

Website navigation in theory shouldn't be a difficult task; users shouldn't have to concentrate on how to navigate their way around complex websites. It should be as easy as possible; the user should be able to navigate without any hassle and with the simplest of ease.


Breadcrumbs are another tool used to allow users to navigate a website. However, unlike most of the other navigation tools, breadcrumbs have a quite unique characteristic: they allow users to easily see their current position in a website relative to other areas of the website. Users can go back to previous locations in the website by following the breadcrumbs trail created by their actions.

In general, breadcrumbs serve two purposes: 1) they provide information to the user as to where they are located within the site, and 2) they offer shortcut links for users to "jump" to previous categories in the sequence without using the 'Back' key, other navigation bars, or the search engine. Breadcrumb paths give location information and links in a backward linear manner. Navigation methods, such as search fields or horizontal/vertical navigation bars, serve to retrieve information for the user in a forward-seeking approach.

Breadcrumbs have evolved to an important navigational aspect of the web, so we need more precise concepts and terminology in order to effectively use breadcrumbs in different situations.

Breadcrumbs, in general, are a list of elements (links) separated by some character or graphic. The separator (characters) is most often '>' but ':' and '|' are common characters as well. The most common graphic is an arrow pointing to the right. The design intent of breadcrumbs is usually stated as twofold: to convey information to the user (about the site structure or the path they have taken), and to also give users a way to select links from the breadcrumb (in order to go "up" in the site hierarchy or to re-trace their steps).

A generalized example using '>' as the separator:

First Element > Second Element > Third Element > Last Element

The First Element usually represents the site home page. Depending on the type of breadcrumb, the second and third elements can be subcategories or selections the user has made to get to the current page. The Last Element usually represents the name of the current page; sometimes this is (erroneously) a link to the current page.

Breadcrumbs usually go from left to right on the same line, but some go right-to-left and sometimes the elements are arranged vertically. Breadcrumbs are usually placed near the top of the page, with the most common placement being at the top of the "white space", below the top global navigation and to the right of the local navigation on the left.

There are three types of web breadcrumbs: Firstly, Location breadcrumbs are the most common and they show the single location of a webpage within the website. Secondly are, path breadcrumbs, which are becoming a trend with database-driven sites, these show the specific path the user takes to get to a webpage within in the website. Thirdly, Attribute breadcrumbs are meta-information within the site that is represented in a breadcrumb-like fashion.


Location breadcrumbs convey the position of the page within the site hierarchy. It is the simplest and the most used because its implementation is extremely simple. It shows users their current location in relation to the website structure, but not how they got there. It is the most popular Web representation and was used in the examples above mentioned. In other words, the page has always the same breadcrumb, no matter how users get there.


Path breadcrumbs represent the original metaphor of the term and reveal the path in which the user has taken to through a website to reach the specific webpage. It is the more adequate representation of the name "breadcrumb". The element is necessarily the path the user chooses, and not the pre-determined presentation of a possible path. In other words, same results found through different browsing paths have precise breadcrumbs showing the last visited pages. This is only possible in dynamic sites.


The Attribute breadcrumb represents the classification of a certain matter searched by the user in a determined directory organization, based on its information architecture. According to Instone (2002), a page of an e-commerce website can have many breadcrumbs, representing several possible locations of the product in its directory. So, this type of breadcrumb, that can be used in other categories of websites, like the search ones, display information showing different trails representing several possible paths to reach a page. Google for example, uses Attribute breadcrumbs in searching results (Figure 2).


Due to the fast evolution of the Web, it is easy to find new forms of using old concepts. Some sites use Title breadcrumbs, but they are not so popular. They are identical representations of the Location breadcrumbs, however, they are applied in the browser's heading (Figure 3).


The single most significant aspect to a website is almost certainly navigation. It shows the visitor where they are, where they can go, and where they have been. It's pertinent and extremely important for websites to have navigation facilities, in order to enable the user too navigate around the site. The provision of good navigation necessitates a good quality website organization, because good navigation depends on a sense of place that good quality website organization facilitates. The navigation facilities that appear on a webpage of a website could be divided into two categories: i) Location (keeps users aware of their current location) and ii) Controls (provides routes or path to other places).


Navigation controls are controls that take the user between webpages on the site (links). Navigation controls has a tendency to be arranged similarly on each page in order to be easily found.

Location: -

Stresses the importance of each page on a particular site and how it needs to let users know where they are within the logical structure of the site. Complicated websites lose users easily when they lose track of their place without clear information. Also, some users may enter the site at an inner page and will need to gather some bearings of where they are currently.

Location details

Every page of the website should have location information. This displayed information should also have the user's location on the website completely specified. Otherwise, some users may become confused and lost, using unusual routes to arrive at a page.

Location should be constant

In order for users not get lost, it's an ideal practice to have location information available on all pages of the website. The information should also be in the one constant position on each respective webpage, and also in the same format/style, so that users are able to recognize and comprehend it.

Location should be complete

In most cases the location information should be complete, what this means is that, the user's location must be completely specified within the site.

Unusual access routes

Users often navigate too various pages of a website using unusual routes and in many cases not through the normal navigation, thus making location information particularly important. Since this is the Web, users might also reach any page in a website directly, from either a search engine or a link from a completely different website. Wherever the user enters a website, they should be able to navigate through it quickly, and clear location information aides this process.


Controls on a webpage (normally are simple links) permit users to navigate through a website and obtain the webpage they desire. When designing controls the ability for users to get where they want to go as quickly and easily as possible should be taken into serious consideration.

Navigation controls are divided into two categories: i) Primary navigation (navigation controls that are present on most pages) and ii) Secondary navigation (navigation that provides easier or more direct access; normally seen on front pages, contents pages etc. where the main part of the page is given over to navigation).

Primary navigation: -

Primary navigation controls are those which are present on most pages of a site in a regular format, these controls should allow users to get anywhere on the site. And they have the following characteristics:

  1. Positioning
  2. These controls are often present in a sidebar to the left, right, or top of a page. Using this convention can make a website easier to use because it's following a common standard (de-facto) on the Web. The same rules which apply to location information apply to primary navigation controls; it's of utmost importance that these controls are in a standard position on every page of the website, so that users can find them quickly and easily.

  3. Combining with location
  4. Navigation controls and location information are regularly joined. If the location information includes the name of the section which a page is in, then clicking on that section will normally take users to the main page of that section. Again, this is common to many websites so it can making it easier to use.

  5. Navigation to where?
  6. Access to upper levels should be provided by primary navigation controls of the site. It should be made possible to jump to the main page of a current section, or to the homepage of the entire website. If users are lost or if they arrived at the website from a search engine, etc... users would need this option. In some cases primary controls include links to other pages at the same level of the website, for quick and easy access. Along with a sidebar, a common technique is to include "Next" or "Back" controls as standard within each webpage.

Secondary navigation: -

Most sites use their homepage for navigation (such as, a list of contents) and there may also be contents pages for sections of the site. These pages are referred to as secondary navigation. This type of navigation is not on all pages but only a few specific pages. However, it is usually the main focus of the page in which it is contained.

It should be duly noted that "secondary navigation" isn't less important to the users than "primary navigation" but simply the main distinction is that it doesn't occur on all pages of the website.

The most common form of secondary navigation is contents pages. Other examples include site maps, indices, and search pages.

Importance of secondary navigation

The importance of secondary navigation lies in the fact that, unlike sidebars, it appears in the main section of the page that users direct the most attention to. Since there is more space it often gives detail about the contents of each section or subsection of the website, assisting users in making sensible choices about where to go. Another asset of secondary navigation is that it provides fast routes to information. For example, a site might highlight the most recent new content on the front page, so that regular visitors can go directly to it.

Site Maps

Site Maps are visual representations or textually organised models of a website's content that permits users to navigate through a website to locate the information they're looking for, similar too the process that helps people find places/locations using traditional geographical maps in the real world. Offering a visual representation of the information space in an attempt to aid users comprehend their navigational options is one of the oldest hypertext usability principles. Such visualization is provided by site maps by offering a helpful supplement to the primary navigation features on a website.

Sitemaps can be thought of as a sort of interactive table of contents, which have listed items and item links directly to its counterpart sections of the website. A sitemap performs similar functions too that of layout maps in large shopping malls: with no sitemaps, it's quite possible to explore a complex site by process of trial and error. But you can avoid the hassle and be sure of what you're looking for, by using the most efficient method to do this, which is to consult a model of the resources available. This is site map's main benefit, which is giving users an overview of the site's areas at a single glance. It executes this by dedicating an entire page to a visualization of the information architecture (IA) of the website. When well-designed, this overview includes several hierarchy levels, and yet not be too big that users lose the grasp of the map as a whole. Small, uncomplicated websites don't necessarily need sitemaps.

Typical site maps are hierarchically organized, deconstructing the website's information into increasingly specific and related subject areas. The definition of a site map is a page intended to act as a website guide. Site maps take a various forms, including alphabetical site indexes, dynamic diagrams, and two-dimensional lists. The term "site map" here thus encompasses a wide array of features, appearances, and names, including "guide," "overview," "index," and "directory." There're a various numbers of sitemaps: organizational chartsite maps are fairly alike in appearance to traditional table of contents; others, based on a perceptive view of the website, and are represented in 3D models with individual pages upright (like index cards) arranged in sections and linked by lines.

Site Map Usability

Some usability guidelines for site maps include: i) Static design use, users interactive site maps shouldn't have widgets. A quick visualization of the website should be available without requiring further interaction (except scrolling, if necessary). After all a site map is a map; it shouldn't be a navigational challenge. ii) Create a link called "Site Map" and use it consistently link to the site map throughout the website.

A site map's goal is to give a single overview of the information space to users. Any work to reveal different parts of the map users must do, automatically loses the benefit of site maps.

Site maps should be simple, compact layouts of links, and should display everything in a solitary view.

Multi-column site maps work better than single-column site maps because users need fewer scrolling to get an outline of the website's structure. Users are more likely get misplaced using long, scrolling site maps. A multi-column site map makes it easier for users to swiftly look at all categories and subcategories, and thereby get a general idea of the website before going further.

Benefits of Site Map

Site maps aid users in understanding a website and what it offers.

Site maps are recommended because it's the only navigation technique that gives users a proper overview of the website. It's an arguable point that a site's navigation executes the same function, e.g., drop-down menus as a form of navigation that displays the options accessible in each of the site's sections. But these menus permit users too only see one section of content at a time.

All available content areas within a website are displayed on one page for users via site maps, as well as, the ability to have instant access to those webpages is another benefit of site maps. Cluttered websites usability can improve with the implementation of a site map, a clean simple view of the user interface and the available content can assist users find their respective relevant information. However, site maps aren't the answer to cluttered websites. Site maps can't fix problems built into a website's structure, such as, poor navigational organization, poorly named sections, or poorly coordinated sub-sites.

Site maps are only as good as the website

The quality of a site's information architecture (IA) is determinant of the quality of said website's site map. Site maps assist users in getting around odd mechanics of menu designs (a user referring to a site map instead of an annoying menu that spins and animated onto each page). The site map for websites possessing content redundancies or poorly sorted information become more apparent and bewilders users. Well structured websites ought to be reinforced by site maps, and not serve as patchwork for a poorly structured site.

Inferiorities to avoid in site map design and construction

Avoiding these flaws would assist in the process of creating a relatively high-quality site map:-

  • Very long, linear list to scroll through
  • Dense, with irrelevant words to filter out or redundant content
  • Cluttered, with inadequate spacing between sections or words
  • Tiny, unreadable text or poor background contrast
  • Little difference between section headings and subcategories or sublinks
  • Added manipulation needed to reveal information
  • Failure to include content from key website sections


Wayfinding as described by Jan Carpman and Myron Grant. Evans & Co, "Wayfinding is a fancy word for the series of things people know and do in order to get from one place to another, inside or out. Wayfinding can be a snap or onerous take, depending on the person, the environment, and the situation." Furthermore, wayfinding is described as a process that involves knowing where you are, having a destination or a goal in mind and being able to achieve the goal, reaching the destination. Once the destination is reached the person must have the ability to find a way back. Proper wayfinding should provide orientation as to where the user is, where they have been and where they can go within an environment.

Before understanding how wayfinding techniques work in the digital world we must first understand how it works in the physical world. Wayfinding can be viewed in the physical world as the shape of signs, maps, lights, colours, carpet, etc. and provide visual cues as to where a person is within an environment. For example, a private area of a building might have an entrance that uses a different style door or contains different coloured carpeting and lighting. Visual cues allow people to effortlessly distinguish different areas within their surroundings.

The virtual world uses some of the same methodologies. Within the virtual world navigational cues usually take place in the form of linear hyperlinks. A web site has different sections which could be colour coded to separate different areas. An example of this is Nike uses colours, fonts, and other visual differentiators to divide its corporate site from its public or marketing sites.

People normally associate their location in the environment with reference to a landmark. Therefore, it's vital for landmarks to differentiate themselves and remain constant in an environment, such as, websites. Home pages and key category pages become landmarks within websites. An example of this is, if a user is looking for a specific type of shoe they may recall that they were within the shoe section of the website. They might remember that the webpage having a certain colour or look that distinguished itself from other webpages. Once the user is able to find this webpage they're more likely to retrace their steps and find the product they were seeking. Also, allowing users to set favourite places is also seen as effective landmark strategy. Users can bookmark pages within websites from which they can journey from and locate other key pages of interest.

People usually leave some form of breadcrumb when navigating through an environment, e.g., when people walk through forests they leave a trail of footprints. This indicates that there is a temporary means to indicate where the person has been and how they can get back if needed. In websites colour is used to attain is. An example of this is when a user travels from page to page of a website the visited parts of the site map or navigation changes colour. Breadcrumbs are normally used in webpages to show the webpages that were visited in a historical linear fashion.

The book "The Image of the City (1960), by Kevin Lynch" coined the term "wayfinding" to describe his concept of environmental legibility, which is, the elements of a built surrounding that allows us to navigate successfully throughout intricate spaces such as cities and towns. The most fundamental underlying metaphor of the World Wide Web (WWW) is navigation through a space populated by places we call "websites", and thus the wayfinding metaphor is perfect for thinking about web navigation.

Four core wayfinding components:

  1. Orientation: Where am I am right now?
  2. Route decisions: Can I find the way to where I want to go?
  3. Mental mapping: Are my experiences consistent and understandable enough to know where I've been and to predict where I should go next?
  4. Closure: Can I recognize that I have arrived in the right place?

Wayfinding principles in web sites:

  • Paths: Create consistent, well-marked navigation paths.
  • Regions: Create a unique but related identity for each site region.
  • Nodes: Don't confuse the user with too many choices on home and major menu pages.
  • Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented.


Web sites paths are the consistent, predictable navigational links that appear the similar way throughout a website. Paths are sometimes just in the user's mind, as in everyday navigation through much-loved site. Paths can also be clear site navigation elements such as breadcrumb trails that illustrate where you're relative to a website.


The golden rule of interface design and wayfinding is consistency, but a paradox exists at the heart of consistency: if everything seems similar, there aren't any boundaries. How are you enlightened about where you're or when you've shifted from one region to another? Well-designed site navigation systems are built on a consistent page grid, terminology, and navigational links, but it also incorporates the visual flexibility to construct identifiable regions inside the larger space (fig. 4.3).

Tag clouds

Tag clouds first widespread use was on the photo sharing website Flickr, created by Flickr co-founder and interaction designer Stewart Butterfield. The implementation was based on Jim Flanagan's Search Referral Zeitgeist, a visualization of website referrers. Tag clouds have become very popular and are used in modern-day websites, based on alike identity between users (people often search the same things). Recently tag clouds have gained even more fame due to their role insearch engine optimizationof webpages. Once implemented properly tag clouds make a website appear to search engine spiders more interlinked which tends to improve its search engine rank.


Tag clouds are sets of related tags with corresponding weights. Typical tag clouds have between 30 and 150 tags. Weights are usually symbolized using font sizes or other visual clues. Histograms or pie charts are mainly used to represent approximately a dozen varying weights. Hence, tag clouds have the potential to represent many more weights, but with less accuracy. Tag clouds are usually interactive: tags are sometimes hyperlinks naturally permitting users to drill down on the data.

Types of Tag clouds

Tag clouds could be implemented a varying number of ways. Some methods are more popular than the other ones, but the majority of tag clouds are primarily sorted alphabetically.

  • Tags are sorted alphabetically. The most essential or common terms are highlighted via an appropriate font size.
  • Tags are arranged alphabetically. All terms have the same font size and weight. Terms which are more important are highlighted with a font colour or a background colour.
  • Tags are arranged in accordance to their importance or frequency. Both font-size and colours are used to stress the importance of terms.
  • Tags that aren't sorted. Font-size, font-weight and colours are used heavily.
  • Tags are sorted in accordance to their similarity. Similar terms are arranged next to each other, and an assortment of visual formatting could be applied.

Navigation Techniques & Older Users

The World Wide Web is now being used to enrich many seniors' lives, but the majority of today's websites violate usability guidelines, making the websites hard for seniors to use. Currently, using a website is twice as hard seniors than for the remaining demographic. This issue is being compounded due to the fact that the world's population is increasing in longevity with an unbalanced number of people soon to be considered elderly in comparison to any other period in human history.

Many European countries and elsewhere have put in place legislation addressing the needs of the elderly and other disadvantaged groups. Particularly, they've agreed to "address the needs of older workers and elderly people by ... exploiting the full potential of the internal market of information and communications technology services and products for the elderly, amongst others by addressing demand fragmentation by promoting interoperability through standards and common specifications where appropriate" [EC 2006].

Who're older users?

The American Association of Retired Persons' (AARP) 2004 study found that previous studies of elderly people and their use of the Web used a variety of definitions, from 50+ years through to 65+ years [Redish & Chisnell 2004]. Bailey [Bailey 2002] [Bailey 2004] reviewed a number of studies and journals and proposed the following classification:

  • Young: 18-39 years
  • Middle-aged: 40-59 years
  • Older: 60-74 years
  • Old-old: 75+ years

The AARP itself considers 'older adults' to be those over 50 years, while many western countries (including the USA) consider the retirement age to be 65 years.

What do older users use the Web for?

Evidence from studies prove that the online activities of elder folk are the same online activities as any other age groups, namely, communication and information searches in addition to using online services.

How many older users use the Web?

Functional limitations older users experience

Generally accepted limitations that frequently arise during the normal ageing process are:

  1. Vision decline
  2. Hearing loss
  3. Motor skill diminishment
  4. Cognition effects

The ageing process can often result in elderly people experiencing multiple functional limitations.

Navigation techniques aimed at older users

Redish and Chisnell (2004) [Redish 2004] reviewed a large number of articles, books, presentations, Web sites and papers published between 2000 and 2004 relating to web design for older adults. They were seeking broad usability issues for older users; they commented that older adults are actually less homogenous as an age-group than younger adults. Redish and Chisnell grouped their findings into four aspects of design: interaction, information architecture, visual design, and information design.

Some of the issues they highlighted include:

  • Interaction design:
    • Design convention such as underlined links should be followed
    • Scrolling and other mouse activities are a learned behaviour and becomes more difficult with age making pull-down menus, scrolling lists, and scrolling pages difficult for some users
    • Understanding, and accessing, what is clickable can be problematic for some elderly users
    • Feedback in multiple modes (visual and auditory) may be beneficial
  • Information architecture:
    • Clear labelling (of links, headings and menu items) seems to be more important for older users than younger users
    • Breadth vs. depth - shallow information hierarchies seemed to work better for older users
    • Redundant links - the studies they reviewed leant both ways
  • Visual design:
    • Experienced older users can scan pages as well as younger users, but newer elderly users can find busy pages and pages with irrelevant material (such as adverts) distracting
    • Older users generally prefer larger text - naturally
    • Older adults with vision deficits need to be accommodated with suitable contrast along with headings to help them narrow their visual search
  • Information design:
    • Skimming and scanning is common across all age groups and vision abilities
    • Content development, plain language and 'writing for the web' are critical

Redish and Chisnell conclude by suggesting that older adults should be included more in usability studies of Web design.

From the evidence above using Redish and Chisnell research along with the functional limitations of older users we can conclude that a visual website navigation technique is most suitable for older users. Visual design as an aspect of design in Redish and Chisnell study is the second most populated aspect, this aspect is heavily linked to wayfinding and thus wayfinding is the most usable and appropriate website navigation technique for an increasingly large population of older users.

Assessment and Critique

From doing this assignment I've become more aware and more knowledgeable of the various techniques employed by website designers. Before doing this assignment the various techniques were taken for granted and not appreciated or even acknowledged even though I interacted with them on a daily basis. What's more, was the fact that I was also able to familiarize myself with the technologies available to create a very user-friendly website.

This can be applied and help me in other areas of study outside of website design, for example, program and application designing. My report could have been improved had I been able to access more material on the given subject matter, especially those techniques which were omitted.


The following sites and articles were used to obtain some of the information presented in this assignment:


Please be aware that the free essay that you were just reading was not written by us. This essay, and all of the others available to view on the website, were provided to us by students in exchange for services that we offer. This relationship helps our students to get an even better deal while also contributing to the biggest free essay resource in the UK!