Website Planning

Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website.
Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will
be developed are extremely important.

[edit]Purpose

It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose
statement should show focus based on what the website will accomplish and what the users will get from it. A clearly
defined purpose will help the rest of the planning process as the audience is identified and the content of the site is
developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future
when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable
objectives should be identified to track the progress of the site and determine success.

[edit]Audience

Defining the audience is a key step in the website planning process. The audience is the group of people who are
expected to visit your website – the market being targeted. These people will be viewing the website for a specific
reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose
or goal of the site as well as an understanding of what visitors want to do/feel when they come to your site will help to
identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics
common to the users such as:

• Audience Characteristics
• Information Preferences
• Computer Specifications
• Web Experience

Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the
desired content to the target audience.

[edit]Content

Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of
the necessary content then organizing it according to the audience's needs is a key step in website planning. In the
process of gathering the content being offered, any items that do not support the defined purpose or accomplish
target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and
compare the offerings to the audience needs. The next step is to organize the basic information structure by
categorizing the content and organizing it according to user needs. Each category should be named with a concise
and descriptive title that will become a link on the website. Planning for the site's content ensures that the
wants/needs of the target audience and the purpose of the site will be fulfilled.

[edit]Compatibility and restrictions

Because of the market share of modern browsers (depending on your target market), the compatibility of your
website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be
limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024x768 display
resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1

1
and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox and Opera) users allow
for more W3C compliance and thus a greater range of options for a web designer.

Another restriction on webpage design is the use of different Image file formats. The majority of users can support
GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting
PNG's advanced transparency features, resulting in the GIF format still being the most widely used graphic file format
for transparent images.

Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain
a website will work on a particular platform is to test it on that platform.

[edit]Planning documentation

Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design
the site structure, content and interactions that are most suitable for the website. Documentation may be considered
a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested
changes, improvements and/or enhancements. This review process increases the likelihood of success of the
website.

First, the content is categorized and the information structure is formulated. The information structure is used to
develop a document or visual diagram called a site map. This creates a visual of how the web pages will be
interconnected, which helps in deciding what content will be placed on what pages. There are three main ways of
diagramming the website structure:

• Linear Website Diagrams will allow the users to move in a predetermined sequence;
• Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to
their destination;
• Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks
within sentences.

In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard.
In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and
they are linked together according to the most effective and logical diagram type. Depending on the number of pages
required for the website, documentation methods may include using pieces of paper and drawing lines to connect
them, or creating the storyboard using computer software.

Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or
comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout
design program. The wireframe has no working functionality, only planning.

2
Information Architecture Deliverables and Diagrams 12/2002

Examples of Wireframes, Site Maps, Story boards, Use Cases, Paper Prototypes

In my work as a web designer and IA I have come across many inconsistencies in the way Information Architects
and other Web professionals refer to Web information architecture deliverables and diagrams. In speaking with
various Web design groups I have heard multiple terms for the same deliverables. Information architecture is a
relatively new field which has yet to develop a consistent and universal set of deliverables, and terminology to refer
to those deliverables. I also haven't come across a central repository of IA deliverable and diagram documentation.
This document is an attempt to fill that void.

What are deliverables? What are the most effective deliverables? The answer depends on the situation, audience,
budget, time constraints, skill set of your team, and various other factors. Learning how to create these
deliverables is the easy part. Gaining an understanding of when to use them, and in what format, is the tricky part.

Part 2 - How to use Information Architecture Deliverables

The following are the most widely used IA deliverables. However, there are additional deliverables which some
consider to be the responsibility of the IA, while others would assign them to perhaps a PM or designer. The most
widely used name for the deliverable is listed with additional synonyms also displayed. Some information
architecture examples and samples are linked to.

1. Content Inventory (aka Content Survey, Audit)

A content inventory is intended to provide a consolidated snapshot of all the major sections, pages, and content on
a Web site. This would include text, graphics, and multimedia. Some even go as far as to break content down into
individual pieces or paragraphs of content. Sometimes a content inventory is performed on content that is not yet
part of a Web site. This would be helpful for an organization that is collecting content to be placed on a new Web
site. Card sorting would be helpful for organizing content in this situation.

Here a a couple exmples of Web content inventroy variations.

• Survey - A high level review of a site's main sections and pages. It enables you to develop an
understanding of the general site scope and major chunks of content.
• Detailed Audit - this is a comprehensive inventory of every page on a site. This inventory will list every
page's filename, title, URL, and possibly its file type and a description. It's also helpful to assign a unique
page ID that will correspond to the pages location on the Site Map.
• Content Map - This simply entails laying out the site content in a graphical format. I haven't seen this
used widely, and I'm not sure how much use it would serve. If you're performing a content inventory on a
current site, then an effective site map might nullify the need for a content map.

Sample content inventory (pdf)

3
Read more about content inventories for the Web

2. User Profile (aka Personas)

A user profileor persona is a realistic (but likely fictional) example of a target audience member. The profile
commonly takes the form of a one page piece that lists the user's name, occupation, education, demographic
characteristics, computer/web experience, and site goals or likely tasks. A stock photography picture is usually
used to give a face to the profile.

These profiles can be extremely useful in keeping the web team focused on the user's needs. These may not be
necessary for usability experts, designers, or information architects, all of whom should have a firm grasp of user-
centric design. But they can be beneficial for project managers, programmers, and clients. When making decisions
it's helpful to be able to say "John B. really would have trouble with this," or "Adding this link here would really
make life easier for Sharon." User profiles also help to reinforce the importance of an Information Architect. It is a
deliverable that documents the establishment of target audiences, a process that might have taken a considerable
amount of effort and research.

Read more about user profiles for the Web

3. Use Case (aka User Scenario, Task Analysis, User Flow)

Use cases are narratives that describe how a user might use a system or site. A use case illustrates a sequence of
events that an actor (external agent) might go through in order to accomplish their goal. A use case is similar to a
process flow.

• Essential Use Case - Narratives that remain relatively independent of a specific technology or
implementation.
• Real Use Case - Narratives that incorporate the current technology and/or site design. This is basically
the same thing as a Process Flow.

Sample use case (pdf)

Read more about use cases for the Web

4. Sitemap (aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)

Site maps are one of the most critical and widely used information architecture tools (along with wireframes). They
show the overall structure and hierarchy of a Web site. They can be used as the first step in laying out the
information architecture of a site, and will provide the framework upon which to base site navigation. When I set
out to understand the IA of a current site, or design an IA for a new site, I start by sketching out a ruff site map.
Site maps can be constructed in a wide variety of formats, but the general structure and principles remain
relatively consistent.

Sample Site Map (pdf)

Read more about Web sitemaps

4
6. Wireframes (aka Wire Frame, Page Architecture, Low Fidelity Mock-Up, Page
Schematic)

Information Architecture Wireframes (combined with Site Maps) are the bread and butter tools of information
architects. They are useful for conveying the general page structure and content requirements for individual pages.

Wireframes need to achieve a happy medium between being too precise and too loose. What I mean by this is that
a wireframe that is too precise or detailed may leave little creative room for the designer. A wireframe that is too
loosely defined can easily be misinterpreted by designers and developers. The format used should be dependent
upon the audience.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about
yet. They also help to keep a paper trail of functional and design decisions that are made. I sometimes use
wireframes to get people thinking and generate requirements. Wireframes will sometimes end up evolving into the
default requirements document for a Web site.

Sample Wireframes (pdf)

Sample Wireframes 2 (pdf)
Sample Wireframes 3 (pdf)

Read more about Web wireframes

7. Paper Prototype (aka Low Fidelity Prototype)

Paper prototyping involves using screen shots and/or hand sketched page diagrams to quickly elicit user feedback
and identify interface IA problems. Using a paper prototype involves conducting a usability test using a low fidelity
prototype. These prototypes can be created electronically using programs such as MS Word, Excel, Visio, or various
WYSIWYG editors. However, in many cases paper prototypes are nothing more than loosely hand-sketched designs.
The quicker these paper prototypes can be created, the greater the benefit. Paper prototypes shouldn't incorporate
specific design elements such as color, style, fonts, detailed graphics, etc.

You may be hesitent to present something that might resemble a 6th graders art project to a client. However, with
a bit of education the client will be appreciative of the time and money you are saving them.

8. Story Board (aka Storyboard)

It's debatable whether a storyboards are anything different than a set of wireframes, but they can tend to illustrate
more of a process than a wireframe does. However in many cases IAs add usage and process notes to wireframes.
I have also see storyboards (or something resembling them) refered to as Blueprint, Schematic, Grey Model,
Interaction, Interaction Wireframe, IA Requirements Document, Design Document

Story boards typically combine information from process flows, site maps, and other IA deliverables. They can be
used to illustrate a single screen or a whole system or site. They usually offer screen shots or some type of
graphical representation of the screens, combined with a narrative description. Storyboards help to document the
functionality of the site and describe how users will potential use the interface. These deliverables can be used by
programmers, project managers, upper management, and clients to ensure that everyone is on the same page.
Storyboards often turn into the initial requirements documents that programmers begin coding from. These

5
deliverables provide an excellent chance to get client buy in and sign-off on the proposed function laity and IA of a
site. Story boards can be similar to a detailed wireframe, and there is a lot of crossover between the two.

Sample Story Board 1

Sample Story Board 2
Sample Story Board 3 (pdf)
Sample Story Board 4 (pdf)
Sample Story Board 5 (pdf)

9. Style Guide

Style guides are used to document baseline design requirements for a site. They usually define font classes and a
wide range of various design conventions to be followed. This deliverable would generally be considered the
responsibility of a designer, but in some instances the Information Architect may be covering multiple roles (as is
the case with me). HTML Wire frames are a good solution to solve multiple needs; deliverables for clients or
management, and functional templates to start programming from.

Sample Style Guide (pdf)

Read more about Web style guides

Using Information Architecture Diagrams

In part 2 we take a look at the factors that influence using information architecture deliverables. Which provides
more information on using Wireframes, Site Maps, Story boards, Use Cases, Paper Prototypes, User Profiles, and
Site Maps and other information architecture examples.

6
Wire Frame Sample

A "wire frame" is a non-graphical layout of the proposed web page. When you are considering
website content, think in terms of all the text elements that are contained on a single webpage.
This will include such things as:

Introductory text
Tag lines
A "call to action"
Highlighted navigational elements
Client quotes
News & Events
View sample homepage wire frame View sample subpage wire frame

7
Project Life Cycle Guide

Site Design Goals: Our first step is to listen to your ideas and website preferences.
Together we will establish measurable goals for your site.

Research, Assessment & Design: We will review sites that you like as well as your
existing marketing materials to assist us in identifying your preferred website
design style. Reviewing samples of our web designs may be helpful at this stage.
Site Architecture & Content: We'll consider your content preferences and create a
site architecture map to visually demonstrate how the site content and structure
will be organized. We also use a wire frame to help you understand how web pages
work and where your content fits in.
Design: We design a proposed Web homepage, 2nd and 3rd level designs that define the
"look and feel" for the entire site. We will refine the designs to your specifications.

Content: In parallel with the design process, you will be gathering content for your new
website.

Web Programming & Site Build-Out: Upon approval of the final site design, and content,
we will incorporate any supplied photos and graphics you wish implemented and
complete the entire site at one time based on the approved site architecture.

Quality Assurance (QA) Testing: Upon completion of the website build-out, we will post
the website to our staging site for your review.

After launch: we recommend an aggressive search engine marketing campaign to get

you ranked high in the engines, and a monthly maintenance program to ensure your site
stays current and "fresh".

8
Website Architecture Map

A website architecture map is an extremely useful tool in the site design and development
process. One of the most important steps in that process is designing a logical navigation
paths for users to follow through the site. They should be intuitive and reduce the number
of clicks to a minimum.

The homepage should provide the "high level" overview of what your company
offers. Get to the point and state your message immediately!
Think logically and consider how your users will navigate through the site, then
tailor your content to them.
Your users should be able to access any page on the site with no more than three
clicks from the homepage. Don't forget that you can link within a page.
We always prepare a website architecture map to help our clients visualize the site before
we build it. Below is an example. Click here to see a larger view.

9
Improve Lead Generation

Improve Your Website's Lead Generation Capabilities — Start by Improving Your

Homepage

WHY SITE VISITORS ABANDON A HOMEPAGE:

1. Confusing layouts with unclear navigation.

2. Lacks a core message.

THREE THINGS THAT WILL MAKE THE BIGGEST DIFFERENCE TO YOUR AUDIENCE:

Does your homepage answer the Who, What, How

questions?
Learn more >
• Instantly recognizing who
you are and what products you offer.
• Conveying credibility. Can they determine who your clients are and how to reach you?
• Easy navigation. Can prospects easily find what they are looking for?

WHERE'S THE CALL TO ACTION?

BEFORE : Where is the product information? What action will lead to a sale?

AFTER: A Design modification provides a clear navigation path based on visitor needs.

10
Prospects Don’t Buy From The Homepage

— Pull them into the site.

— Don't rely on the navigation links.

QUESTIONS FOR SALES TEAM & MANAGEMENT:

1. How many leads have you received from the current website? How many have you closed?
2. In 25 words or less, how do you describe your main products during a phone call/meeting
with a new prospect? Create a list of customer objections that you have to sell into.
3. Ask your customers how your website could be improved.
4. What new features and content would you like to see added to the website to make your
selling job easier and improve lead generation?

QUESTIONS FOR IT AND ADMINISTRATIVE STAFF:

1. What are the top technical support questions you respond to?
2. What are the top administrative support questions you regularly respond to when
prospects email or call? Are they looking for directions to your office, or is there a request
to speak with a sales person?

3. How do you propose we address these questions on the website?

11
Basic information structures

Web sites are built around basic structural themes. These fundamental architectures govern the
navigational interface of the Web site and mold the user's mental models of how the information is
organized. Three essential structures can be used to build a Web site: sequences, hierarchies, and
webs.

Sequences

The simplest way to organize information is to place it in a sequence. Sequential ordering may be
chronological, a logical series of topics progressing from the general to the specific, or alphabetical, as
in indexes, encyclopedias, and glossaries. Straight sequences are the most appropriate organization
for training sites, for example, in which the reader is expected to go through a fixed set of material and
the only links are those that support the linear navigation path:

More complex Web sites may still be organized as a logical sequence, but each page in the main
sequence may have links to one or more pages of digressions, parenthetical information, or
information on other Web sites:

Hierarchies

Information hierarchies are the best way to organize most complex bodies of information. Because
Web sites are usually organized around a single home page, hierarchical schemes are particularly
suited to Web site organization. Hierarchical diagrams are very familiar in corporate and institutional
life, so most users find this structure easy to understand. A hierarchical organization also imposes a
useful discipline on your own analytical approach to your content, because hierarchies are practical
only with well-organized material.

12
Webs

Weblike organizational structures pose few restrictions on the pattern of information use. In this
structure the goal is often to mimic associative thought and the free flow of ideas, allowing users to
follow their interests in a unique, heuristic, idiosyncratic pattern. This organizational pattern develops
with dense links both to information elsewhere in the site and to information at other sites. Although
the goal of this organization is to exploit the Web's power of linkage and association to the fullest,
weblike structures can just as easily propagate confusion. Ironically, associative organizational
schemes are often the most impractical structure for Web sites because they are so hard for the user
to understand and predict. Webs work best for small sites dominated by lists of links and for sites
aimed at highly educated or experienced users looking for further education or enrichment and not for
a basic understanding of a topic.

13
User-centered design

Graphic user interfaces were designed to give people control over their personal computers. Users now
expect a level of design sophistication from all graphic interfaces, including Web pages. The goal is to
provide for the needs of all your potential users, adapting Web technology to their expectations and
never requiring readers to conform to an interface that places unnecessary obstacles in their paths.

This is where your research on the needs and demographics of the target audience is crucial. It's
impossible to design for an unknown person whose needs you don't understand. Create sample
scenarios with different types of users seeking information from your site. Would an experienced user
seeking a specific piece of information be helped or hindered by your home page design? Would a
casual reader be intimidated by a complex menu scheme? Testing your designs and getting feedback
from a variety of users is the best way to see whether your design ideas are giving them what they
want from your site.

Clear navigation aids

Most user interactions with Web pages involve navigating hypertext links between documents. The
main interface problem in Web sites is the lack of a sense of where you are within the local
organization of information:

Clear, consistent icons, graphic identity schemes, and graphic or text-based overview and summary
screens can give the user confidence that they can find what they are looking for without wasting time.

Users should always be able to return easily to your home page and to other major navigation points in
the site. These basic links should be present and in consistent locations on every page. Graphic
buttons will provide basic navigation links and create a graphic identity that tells users they are within
the site domain. In this site, for example, the graphic header appears on every page:

14
 www.fastcompany.com

The button bar is efficient (offering multiple choices in a small space) and predictable (it is always
there, at the top of every page), and it provides a consistent graphic identity throughout the site.

No dead-end pages

Web pages often appear with no preamble: readers can make or follow links directly to subsection
pages buried deep in the hierarchy of Web sites. They may never see your home page or other
introductory site information. If your subsection pages do not contain links to the home page or to local
menu pages, the reader will be locked out from the rest of the Web site:

Make sure all pages in your site have at minimum a link back to the main "home" page or, better yet, a
home page link along with links to the other sections of the site.

15
Direct access

Users want to get information in the fewest possible steps. This means that you must design an
efficient hierarchy of information to minimize steps through menu pages. Studies have shown that
users prefer menus that present at least five to seven links and that they prefer a few very dense
screens of choices to many layers of simplified menus. The following table demonstrates that you do
not need many levels of menus to incorporate lots of choices:

Number of menu items

listed
Number of nested 5 7 8 10
menus
1 5 7 8 10
2 25 49 64 100
3 125 343 512 1000

Design your site hierarchy so that real content is only a click or two away from the main menu pages
of your site.

Bandwidth and interaction

Users will not tolerate long delays. Research has shown that for most computing tasks the threshold of
frustration is about ten seconds. Web page designs that are not well "tuned" to the network access
speed of typical users will only frustrate them. If your users are primarily general public browsers
"surfing" the Web via dial-up modem connections, it is foolish to put huge bitmap graphics on your
pages — the average modem user will not be patient enough to wait while your graphics download
over the phone line. If, however, you are building a university or corporate intranet site where most
users will access the Web server at Ethernet speeds or better, you can be much more ambitious in the
use of graphics and multimedia. Many home computer users can now use high-speed DSL (digital
subscriber line) or cable modems to access the Web. However, industry observers expect that it will be
at least another five years before Web designers can count on most home users having access to high-
speed Web connections. In general, be conservative with Web graphics. Even users with high-speed
connections appreciate a fast-loading page.

Simplicity and consistency

Users are not impressed with complexity that seems gratuitous, especially those users who may be
depending on the site for timely and accurate work-related information. Your interface metaphors
should be simple, familiar, and logical — if you need a metaphor for information design, choose a
genre familiar to readers of documents, such as a book or a library. Highly unusual, "creative"
navigation and home page metaphors always fail because they impose an unfamiliar, unpredictable
interface burden on the user.

16
 www.amazon.com

The user interface for your Web site should follow the general navigation and layout conventions of
major Web sites because your users will already be used to those conventions. Users spend most of
their time on sites other than yours, so avoid highly unusual interfaces if you wish to attract and keep
a large audience.

The best information designs are never noticed. An excellent model of interface design is the Adobe
Corporation Web site. Graphic headers act as navigation aids and are consistently applied across every
page in the site. Once you know where the standard links are on the page header graphics, the
interface becomes almost invisible and navigation is easy:

www.adobe.com

For maximum functionality and legibility, your page and site design should be built on a consistent
pattern of modular units that all share the same basic layout grids, graphic themes, editorial
conventions, and hierarchies of organization. The goal is to be consistent and predictable; your users
should feel comfortable exploring your site and confident that they can find what they need. The
graphic identity of a series of pages in a Web site provides visual cues to the continuity of information.
The header menu graphics present on every page of the Adobe site create a consistent user interface
and corporate identity:

17
 www.adobe.com/type

Even if your site design does not employ navigation graphics, a consistent approach to the layout of
titles, subtitles, page footers, and navigation links to your home page or related pages will reinforce
the reader's sense of context within the site. To preserve the effect of a "seamless" system of pages
you may wish to bring important information into your site and adapt it to your page layout scheme
rather than using links to send the reader away from your site (be sure there are no copyright
restrictions on copying the information into your site).

Design integrity and stability

To convince your users that what you have to offer is accurate and reliable, you will need to design
your Web site as carefully as you would any other type of corporate communication, using the same
high editorial and design standards. A site that looks sloppily built, with poor visual design and low
editorial standards, will not inspire confidence.

Functional stability in any Web design means keeping the interactive elements of the site working
reliably. Functional stability has two components: getting things right the first time as you design the
site, and then keeping things functioning smoothly over time. Good Web sites are inherently
interactive, with lots of links to local pages within the site as well as links to other sites on the Web. As
you create your design you will need to check frequently that all of your links work properly.
Information changes quickly on the Web, both in your site and in everyone else's. After the site is
established you will need to check that your links are still working properly and that the content they
supply remains relevant.

Feedback and dialog

Your Web design should offer constant visual and functional confirmation of the user's whereabouts
and options, via graphic design, navigation buttons, or uniformly placed hypertext links. Feedback also
means being prepared to respond to your users' inquiries and comments. Well-designed Web sites
provide direct links to the Web site editor or Webmaster responsible for running the site. Planning for
this ongoing relationship with users of your site is vital to the long-term success of the enterprise.

18
Navigation

A rich set of graphic navigation and interactivity links within your Web pages will pull users' attention
down the page, weaning them from the general-purpose browser links and drawing them further into
your content. By providing your own consistent and predictable set of navigation buttons you also give
the user a sense of your site's organization and make the logic and order of your site visually explicit.
In this example the rich graphics and many links offered by the Salon technology and business page
immediately draw the reader into the site:

www.salon.com

Provide context or lose the reader

Readers need a sense of context, of their place within an organization of information. In paper
documents this sense of "where you are" is a mixture of graphic and editorial organizational cues
supplied by the graphic design of the book, the organization of the text, and the physical sensation of
the book as an object. Electronic documents provide none of the physical cues we take for granted in
assessing information. When we see a Web hypertext link on the page we have few cues to where we

19
will be led, how much information is at the other end of the link, and exactly how the linked
information relates to the current page. Even the view of individual Web pages is restricted for many
users. Most Web pages don't fit completely on a standard office display monitor (800 x 600 pixels), and
so there is almost always a part of the page that the user cannot see:

Web pages need to give the user explicit cues to the context and organization of information because
only a small portion of any site (less than a page) is visible at one time:

As the Web page designer it is up to you to provide these functional and context cues.

"Going back" and going to the previous page

All hypertext systems share a common feature that has no direct precedent in print media: going
"back" through a series of links you have previously visited is not the same as paging "back" through
the preceding pages of an ordered sequence of pages. When users click on a hypertext link in a Web
document they often are transported from one Web site to another, perhaps even from one country to
another. Once made, the hypertext link is bidirectional; you can "go back" to the Web site you just left
by clicking on the "Back" button of the viewer. Having hit the "Back" button, you can move to the new
Web site again by hitting the "Forward" button:

20
Button bars

For the information designer hypertext links are a mixed blessing. The radical shifts in context that
links create can easily confuse Web users, who need organized cues and interface elements if they are
to follow and understand hypertext links from one Web page to another. This is particularly true when
users need to be able to follow (or at least recognize) an ordered sequence of documents. Notice in the
diagram above that although the user has entered the second Web site at page 6, the site is an
ordered sequence of pages.

If the standard Web browser "Back" and "Forward" buttons are augmented with "Next Page" and
"Previous Page" buttons built into the page, the user will have interface tools to navigate through the
information in your site in the sequence you intended. Button bars can also display location
information much as running chapter headers do in printed books:

www.clemusart.com

Unlike the "Back" and "Forward" buttons, whose functions are relative only to the pages you have seen
most recently, "Next Page" and "Previous Page" buttons in a document are fixed links you provide to
associated documents. By providing paging buttons and links to local home pages and contents pages
you give users the tools to understand how you have organized your Web site information, even if they
have not entered your Web of pages through a home page or contents page. The buttons don't prevent
people from reading the information in whatever order they choose, but they do allow readers to follow
the sequence of pages you have laid out:

21
Button bars are also the most logical place for links back to your home page or to other menu pages
related to the current page. A button bar can be built with text-based links or a series of individual
button graphics at the top or bottom of the page:

www.dartmouth.edu/~sources

22