HCI Lesson8 - Information Architecture and Web Navigation

Information Architecture and Web Navigation
Introduction
The Web interface is becoming increasingly important as Web sites become a larger part of
everyday life, and as many computer systems and devices use a Web interface to take
advantage of the ubiquity of the Web browser.
The HCI principles involved in user interface design were developed in the context of graphical
user interface (GUI) design, but they apply equally well to Web interface design. There are,
however, several features which are unique to Web interfaces.
Differences between Web and GUI interfaces:

 The Web is less secure and less private
 The Web is platform independent
 The Web has more dynamic content
 The Web typically has a broader audience
 Web browsers have compatibility issues
 Users expect to learn GUIs but to just use the Web
 Web sites have more than one entry point
 Web navigation is user controlled
The Web was originally created to provide access to information, and this is still a key function
of many web sites. Alongside this, applications have emerged for interactive web sites. Online
shopping sites are probably the most familiar example of this kind of interactivity.
Information Architecture
Information architecture is concerned with creating organizational and navigational schemes to
allow the user to move through site content effectively. Usually, the architecture of a site
involves organizing and creating a structure for content. It is concerned with the structural
design of information spaces.
For websites in particular it is how the pages relate to one another. It involves content analysis
and planning, defining the organization of pages, labelling of links and navigation design
Why is Navigation a Problem on the web?

– The web occupies space - You may travel in many directions.
– Keyhole effect - One can see one node at a time.
– Users have more choice and control therefore more opportunities for
disorientation.
Human Computer Interaction 1

– Cognitive Overload - Users become disorientated because they are doing several
things as once
Organization Schemes
We navigate through organization schemes every day. Telephone books, supermarkets and TV
programme guides all use organization schemes to facilitate access. Some, such as the white
pages of the phone book, are easy to use. Some are more difficult – finding particular items in
an unfamiliar supermarket can be very frustrating. One reason for the difference is that the
phone book uses an exact scheme – each item is in a single, well-defined category. The
supermarket has to use an ambiguous scheme – for example, bread could be on the shelf
beside either milk OR sausages. The categories in this scheme are not always clear-cut or
mutually exclusive.
Exact Organization Schemes
Exact organization schemes include:
Alphabetical
Often used for a lists of names or an index of site content.
Chronological
Widely used for news items, most recent first.
Geographical
Often used by companies with multinational presence to proved specific content for customers
in different countries or regions.
Ambiguous Organization Schemes
Ambiguous organization schemes include:
Topic
This is one of the most obvious and useful approaches. Most web sites provide some sort of
topical access to content. Examples include organization by subject type in a news site, by
department or course in a college site or by product type in a shopping site.
Task
Task-oriented schemes organize content into a collection of processes, functions or tasks. These
schemes are often found in interactive, ecommerce sites – note the tasks in this example form
from eBay:

Audience
Audience-oriented schemes break a site into smaller, audience-specific mini-sites, allowing
pages which present options of interest only to that audience.
Metaphor
We have seen examples previously of the use of metaphors in web sites. Metaphor-driven
“sitemaps” were popular in the early days of the web but are now rare.
Hybrid
Pure organization schemes suggest a simple mental model that users can quickly understand.
Users can easily recognize an audience-specific or topical organization. However, when you
start blending elements of multiple schemes, confusion often follows.
Metadata
Metadata literally means “data about data”. It can be used in information architecture to attach
information such as keywords (topic, date, author, etc.) and descriptions of content which are
stored with the information. This assists access to information by searching or querying in a
similar way to querying a relational database. In fact, many sites use content management
systems which do store information in a database.
Organization Structures in the web

1. Hierarchical structure: The most common site structure is a hierarchical structure, or tree
structure. Each page can have sub-pages which represent narrower concepts, e.g. Books-
>Computing Books->Computing Books about HCI.

2. Organic structures have no consistent pattern or sections. They can encourage free-form
exploration, as on some education or entertainment sites, but can make it difficult to find
information reliably.
3. Sequential structures are familiar in offline media (e.g a book). They are often used in web sites
for small sections, such as articles or tutorials, or in task based aspects. Web sites grow and
change over time. An effective structure is one which can accommodate growth and adapt to
change, by allowing the addition of new content within a section, or even new sections.
Navigation Systems
Most sites, other than very small ones, provide multiple navigation systems to allow the user to
navigate through the content in a variety of circumstances.
1. Global navigation

Allows the user to navigate to the key set of access points to get from one end of the site to the
other. The user can (eventually) get to anywhere from the global navigation. A link to the home
page is an example of global navigation.
2. Local navigation
Provides access to ‘nearby’ content. Local navigation is generally the system used most often.
3. Supplementary navigation
Provides shortcuts to related content, which is not easily accessible through the global and local
navigation.
4. Contextual navigation
Contextual navigation, or inline navigation, is embedded as hyperlinks in the content of the

page, and gives users immediate access to something relevant to what they are reading without
having to look for the correct navigation element. Supplementary and contextual navigation
provide similar paths through the site structure, but differ in the way they appear on the page.
5. Courtesy navigation
Provides access to items which the user does not need on a regular basis but which are
commonly provided as a convenience, such as links to contact information, privacy statements,
legal disclaimers, etc. Like the previous two systems, courtesy navigation provides links which
are not easily accessible through the global and local navigation.
6. Personalization and Social Navigation
Some sites track some aspect of a user to provide easy navigation to content which is of specific
interest. For example some shopping sites recommend products based on past purchases.
Social navigation is based on the idea that value for the individual can be derived from
observing the actions of others. Examples include lists of most popular resources, for example
“Top10 Downloads”, or collaborative filtering as used by Amazon.
Labeling Systems
Labels are the most obvious way to show users your organization and navigation systems. No
matter how good your organization or navigation design is, if the labeling is unclear or
inappropriate it will be difficult for users to achieve their goals when using your site. An
example of a label is “Contact Us” which is found on many web sites. This label represents a
chunk of information, such as telephone, fax and email information. The label works as a
shortcut which triggers the right association in the user’s mind. Successful labeling triggers such

associations and guides users to the appropriate part of a web site to find the information they
require.
Good labelling systems are:
 Consistent in style and presentation

 Consistent in syntax - do not mix verb-based, noun-based or question-based labels in a
single system (“Grooming your dog”, “Diets for dogs”, “How do you train your dog?”)
 Audience focused - do not mix technical and non-technical names for topics in a single
system (“lymphoma”, “tummy-ache”)
 Representative and clear
 User-centric (for example meaningful to the user, not using corporate jargon or other
terms which might only be meaningful to the site owner) Many labels in navigation
systems are familiar to most web users and can be used quite safely.
Navigation Aids
Navigation aids in web sites are used to provide the surface implementations of the navigation
systems. They include:
 Links
 Buttons, menus, navigation bars and icons
 Drop-down lists
 Site maps
 History trails
 Search engines
Links
Links can be within blocks of text, headlines, or groups of links organized to allow access to a
large number of locations in a small space:
Buttons, menus, navigation bars and icons

Menus and navigation bars are usually placed at the left or top of a page. Menus on the left are
often used for local navigation systems alongside global navigation at the top of the page. Pop-
up menus can be used to include a larger number of menu options in a small space.
Drop-down (or pop-up) lists

These provide a very compact way of providing access to a list of topics.
Site maps
Central collections of links to all areas of a web site. These support a user’s mental model of
using a map.

History trails
Show users the route they have followed – can help their route knowledge. These are
sometimes known as breadcrumbs.
Search engines
Allow keyword searches – can be a very efficient way of finding specific information or
products. Google is the most popular search engine. Others are Bing, MSN, etc.

HCI Lesson8 - Information Architecture and Web Navigation

Uploaded by

Copyright:

Available Formats

HCI Lesson8 - Information Architecture and Web Navigation

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HCI Lesson8 - Information Architecture and Web Navigation

Uploaded by

Copyright:

Available Formats

Information Architecture and Web Navigation

Differences between Web and GUI interfaces:

Why is Navigation a Problem on the web?

Human Computer Interaction 1

Exact Organization Schemes

Exact organization schemes include:

Ambiguous Organization Schemes

Ambiguous organization schemes include:

Human Computer Interaction 2

Organization Structures in the web

Human Computer Interaction 3

Human Computer Interaction 4

Contextual navigation, or inline navigation, is embedded as hyperlinks in the content of the

6. Personalization and Social Navigation

Human Computer Interaction 5

Good labelling systems are:

 Consistent in style and presentation

Buttons, menus, navigation bars and icons

Drop-down (or pop-up) lists

Human Computer Interaction 6

Human Computer Interaction 7

You might also like