The design process takes the purpose, objective, specification,
audience, and domain information and produces a HTML-independent
description of the web. Developers must try to keep the following
principles in mind;
During the design process, developers must also make the decision
about which information space to use. Do they use FTP, Telnet,
Gopher, HTML or a combination to actually implement their information?
December describes methods which are taken into account during
the design process;
Packaging
Users can only absorb a certain amount of information at a time,
therefore designers must take care not to overwhelm the users
with a mass of information.
"At most the number of items of 'chunks' we can remember
at any one time… is about seven" (Preece et al, 1994)
This is why designers must make an attempt to package information
into a number of the right sized chunks.
December suggests a practical method for packaging
information. Briefly, this consists of;
- Start with the objective statement, and identify each noun
or concept, and illustrate these in a diagram.
- Cluster these concepts into groups related by topic, or by
process, based upon which the user will find most usable.
- Cluster these groups, forming nested groups.
- Continue clustering until there is a single group left, showing
that no further clustering can be done.
This diagram can now serve as a map to break down the web into
packages. One simple transformation is to consider each group
a package, which may consist of information or a set of links
to information. These packages can then be transformed into pages,
being careful not to overload any page.
Another good idea is that designers make use of reusable pages.
If each page a designer creates accomplishes one specific purpose,
it can be a useful link throughout the entire web. This reduces
redundancy, and the possibility of inconsistent information.
Linking
Once accurate, well-designed pages have been created, the next
stage is to decide how they are linked together. There are several
methods of doing this;
- Hierarchical linking. Pages are linked together using
a hierarchy, which can be derived from the nesting of packages
shown in the cluster diagram. The benefit of this approach is
that the hierarchy of pages guides the user through the information.
The downside is that the user may have to navigate through many
pages to reach a page.
- Total linking. This method consists of creating only
the leaves of a web, and linking every one to every other one.
This creates a non-hierarchical web, which may work quite well
for small webs. For large webs, however, the number of links will
grow very rapidly as the number of pages increase. The benefit
is that each page is just one link away, but there is no information
hierarchy to guide the user through the web.
- By need. Test users to see which order they access
pages in order to obtain a specific piece of information. Based
on these observations, link the pages together based on minimising
the number of links a user must traverse to obtain information.
- By association. Ask users to rank how closely each
of the pages relate to each other and provide extra links between
pages where associations are strong.
Another technique designers may use is to provide an index page
for every page in the web. For large webs, this may have to be
hierarchical in nature, but the concept is to provide a central
point for the user to locate a page they know is in the web, but
can't remember how to get to. A web-site search engine would also
be of help in this area.
Usability and Navigation
Cues
This whole methodology is user-centred, and the user wants to
get their job done correctly and efficiently. One of the fundamental
questions any user will ask when presented with information is
"What is this?" This is where information cueing
is important.
Cueing consists of information cues ("here is what this is"),
and navigation cues ("here is how you get from here to there").
Information cues
Information cues help the user know the page's purpose, intended
audience, contents, and objective. In other words, information
cues orient the user - they help the user know what the page is
for and what it concerns. Techniques of information cueing include;
- Document title. This is the title that appears in the
document title bar at the top of the browser window, as well as
the most prominent title which appears at the top of the page.
"A meaningful title that conveys the purpose, audience,
and objectives for that web page serves well to orient the user."(December et al, 1995, pp851)
- The sponsor. Who has this web been created by? Is it
an official organisation, or a page created by an individual.
- The web elements. This can be derived from the purpose,
objective statements and audience statements arrived at during
the planning stage. Placed at the major entry points, it is a
very good way if informing the user of "what this is".
- Headings. Using concise, well-worded headings enables
the user to quickly scan the page, to seek specific information
or to get a general overview of the web. December also suggests
that these headings be specific, e.g. "An Overview of Vegetarian
Cooking" as opposed to "Sections 1". He
also suggests that they are phrased in a consistent, 'parallel'
fashion, For example, "Cooking Carrots", "Making
Pastry", "Preparing Salads" all begin with a -ing
word, as opposed to "Cooking Carrots", "How to
Make Pastry", "Salad Preparation", which lacks
consistency and is required more thinking on the part of the user.
- Maintainer. Providing the maintainers email address
allows user to ask questions, report errors, or give other forms
of feedback. This aids the iterative development process as well
as generating the feeling of a more "human" page.
Navigation Cues
Navigation cues help the user understand where the page fits into
the larger web. They also teach the user how to leave the page
or web, as well as how to obtain further information. Techniques
of navigation cueing include;
- Links to home pages. Links to the home or top page
of the web help the user get back to the start if they get lost.
These are especially important for users who have entered the
web at a point other than the top page.
- Links to associated pages. Hypertext allows the contextual
linking of information, and this should be made full use of. A
well-chosen set of links to other pages inside or outside the
web gives the page this extra "associative dimension"
(December et al, 1995, pp852)
- Links to indexes or help pages. This helps the user
understand where they are in the web and what other information
is available.
- 'Expert' links. These can be considered to be 'fast
track' links, which are used by users already familiar with the
web to make a quick jump to a certain page. These pages can be
identified by looking at the access logs.
This aspect of the design process is concerned with specifying
an archetypal template which dictates the look and feel of the
overall web. Developers should aim to give the user an impression
that all the web pages reflect a common organisation or subject.
The pages should also be aesthetically pleasing, and should strike
a balance between simplicity and completeness. Techniques to enable
the designers to do this include;
- A Universal Grid. This is a diagram which sets out
the function and arrangement for text, cues and links on any given
page. Its purpose is to give each page a uniform appearance, allowing
the user to know what cues to expect where on each page.
- Use Repeated Icons. Again, this provides the user with
a consistent look and feel, and these may be included in the universal
grid. Developers may also wish to research standard icons, such
as the 'home page' icon.
Texture
It is at this stage that December introduces the notion of "information
texture"
"Information texture refers to the medium in which information
is encoded, the structure of the information, and the connections
to and from the information... The information texture sets up
user expectations about what has been found and how
to deal with it" (December et al, 1995, pp849, 850)
Information texture refers to;
- Media type. Within what type of media is the following
data encoded? Flagging the media type using symbols is a good
way of informing the user. Another consideration is whether to
categorise information by meaning or by media type.
- Information Structure. How should chunks of information
be structured and presented to the user? Methods include;
- a narrative paragraph, which conveys much contextual information,
but is perhaps a little long-winded;
- a list of items, which is very much to the point but perhaps
unfriendly;
- a hierarchy, which would allow the user to quickly find the
information they are looking for, but may require more technical
skill on the part of the user.
- Connections. When does the user need the information?
How can developers put pages at exactly the right locations, so
that it's meaning is contextually enhanced by the links to it?
For example, developers should place help information so that
it is easily available at the major web entry points.
Problems
In brief, designers must watch out for the following hazards;
- No context or cues. Designers must remember that their
web page will reach a global audience. It is therefore very important
to explicitly state facts such as purpose, creator, organisation
and document title. Otherwise the user will have no idea "what
this is".
- Overloaded page. A page with too many graphics, links,
information and other effects will overwhelm the user. If the
information is not chunked, then the user is obliged to sift through
all the information, even though much of it is not what they wanted.
The download time may also be unacceptably long.
- Multimedia overkill. When not needed, multimedia can
lead to the same problems as the overloaded page. The user may
not even have the required technical facilities. Another, related,
problem is using the same multimedia file in different places
in the web without linking it to the same URL. This means that
the browser must download it each time, rather that using the
local version stored in its cache.
- Uneven page. This is caused by using incremental development
or not packaging pages correctly, and results in a page of unrelated
links, some being very general and some being highly specialised.
- Meaningless links. These are links which unrelated
for one reason or another;
- the link takes the user to an contextually unrelated page,
- the link has a badly-worded or incorrect underlined hotspot,
e.g. "You can get more information." is better
than "Click here for more information". 'More
information' relays much more meaning than 'here',
- the link is trivial, for example, this
link is a link to a dictionary definition of the word 'this'.
