Professional Documents
Culture Documents
Directed Study
Curtis Kelly
International Cluster
Warren H. Groff
March, 2001
Introduction
The ability to create a good website entails far more than just knowing how to write
and the context it appears in, must be structured to optimize its conveyance. Therefore,
a science of website design has arisen. Many of the principles for website design have
been adapted from print, software, and video design, but others are unique to this
medium. The following literature review will examine the theories, principles, and
Most novices jump right into page construction with only a vague notion of a plan,
which Nielsen (2000) considers one of the two great errors in site design. As with any
educational or media design project, the first step in website design is to decide on a
planning model. The most comprehensive model comes from Using Dreamweaver 4,
Goals
As for the first step, determining goals, Lynch and Horton (1999, p.1) offer a series
Neither Nielsen (2000) nor Lynch and Horton (1999) discuss how to set goals, but
Nielsen's insightful list of the fundamental flaws in most website designs (p. 15) reflects
a poor consideration of goals. The list is included here in its entirety. As Nielsen points
out, In every one of these cases, the natural way people go about doing web projects
Information architecture: structuring the site to mirror the way the company
is structured. Instead, the site should be structured to mirror the users' tasks
and their views of the information space.
Page design: creating pages that look gorgeous and that evoke positive
feelings when demo'd inside the company. Internal demos do not suffer the
response time delays that are the main determinant of web usability;
similarly, a demo does not expose the difficulties a novice user will have in
finding and understanding thc various page elements. Instead, design for an
optimal user experience under realistic circumstances, even if your demos
will be less "cool."
Content authoring: writing in the same linear style as you've always written.
Instead, force yourself to write in the new style that is optimized for online
readers who frequently scan text and who need very short pages with
secondary information relegated to supporting pages.
Linking strategy: treating your own site as the only one that matters, without
proper links to other sites and without well-designed entry-points for others
to link to. Many companies don't even use proper links when they mention
their own site in their own advertising. Instead, remember that hypertext is
the foundation of the Web and that no site is an island.
Target Audience
The second step in the Macromedia model, choosing a target audience, is one of the
most important. As Nielsen (2000) stresses throughout his book, a key point of usability
is designing the site from the user's perspective, not that of the owning organization.
Therefore, it is critical to know what kinds of users will most likely visit the site. Part of
this information can be gathered through normal market analysis and needs
assessment, but since the medium of contact is the internet, other factors related to
Lynch and Horton (1999, pp. 2-3) suggest three types of users, each with particular
needs: (a) web surfers, (b) novice users, and (c) expert users. The first type, web surfers
are particularly influenced by home page design, and for this audience, all links should
attempts to prevent users from going offsite: Such strategies are contrary to the spirit of
the Web, which emphasizes user control and free navigation. The second type, novice
and occasional users, tend to respond to unambiguous structure and simple overviews
on how the information is organized, while the third type, expert & frequent users want
to obtain accurate information as quickly as possible. They tend to be the most sensitive
Lynch and Horton (1999) and Nielsen (2000) discuss the needs of two other types of
users as well: international users and users with disabilities. International users need
simple English without jargon (Lynch and Horton) and in some cases, options to
particularly sensitive to site design that is friendly to users with disabilities. Text
alternatives should be provided for users with hearing impairments, and enlarged text
or audio options provided for users with visual impairments. Disability laws are one
reason to consider the needs of users with disabilities, but Nielsen suggests others as
well: 30 million Americans, a huge market, have a disability that makes it difficult for
them to use traditional input or output devices (p. 298). We should also contemplate
that as the rest of us age, there is a good chance we will also develop a minor disability.
Whereas only 14% of Americans under 65 have disabilities, the number shoots up to
The first, and almost only, concern Niederest (1999) suggests in relation to site
planning is to determine what kinds of browsers the target audience will be using.
There are far more browsers out there than just the big two, Internet Explorer and
to version and platform. She lists 28 browsers and versions in her book (p. 8), but
suggests looking at special websites that keep up-to-date statistics on browser types.
(Niederest 1999)
The best of these sites, at the time of writing this report, is Browser Watch, at
browsers used to access all 14 channels in the Internet.com network. Visitors to these
sites represent a wide range of people interested in all aspects of technology: from bots,
to Linux, to Windows 2000. The statistics on the top ten browsers on February 1, 2001,
shown below, show that current versions of Explorer and Netscape represent 94%, of
------------------------------------------------------------------------
Top 10 Browser Types Visiting Internet.com
Browser Value Percent
Microsoft Internet Explorer 5.x 254691049 72%
Microsoft Internet Explorer 4.x 42613129 12%
Netscape 4.x 35488809 10%
Unknown User Agents 6558431 1%
Netscape Compatible 5693823 1%
Microsoft Internet Explorer 2.x 1944480 0.55%
Netscape 3.x 1183842 0.34%
Microsoft Internet Explorer 3.x 1100529 0.31%
Mozilla 5.x 992747 0.28%
Opera x.x 663642 0.19%
Updated February 1, 2001
------------------------------------------------------------------------
design, Nielsen (2000) suggests that screen size should take priority. This difference in
priorities is probably related to Nielsen's book being published a year later, when (a) it
was becoming obvious that Explorer would gain dominance; and (b) and the sales of
PDAs, net TV, internet-accessible mobile phones, and other devices with non-standard
Whatever the case, optimizing the use of display space is a critical factor in good
Web design, and all the authors reviewed (Lynch and Horton 1999; Niederest 1999;
Nielsen 2000) dedicated much of their discussion to the analysis of proper page sizes for
different types of monitors. All agree that width is a more important issue that height,
since users are willing to scroll vertically, but not vertically and horizontally. Nierderst
writes that minimum live space should be calculated on the basis of all browser
options, such as buttons, scroll bars etc, being visible; while maximum live space
calculated on the basis of them being turned off (p.17). She provides extensive data
tables but does not recommend any one particular size. Nielsen, argues for using
variable rather than standard widths, but also recommends staying under 600 pixels to
fit the most common type of 640 pixel screen, with the extra 40 pixels being taken up by
scroll bars, etc. (p. 174). Lynch and Horton note that page dimensions are determined
by two factors: common screen dimensions (14 15 or 640 x 480 pixels) and letter/A4
size printouts (p. 57). In both Explorer and Netscape for Mac or Windows, the best size
for printers is 535 (w) x 295 (h) pixels (2 cm. shorter than screen), and the best size for
Designers have more freedom in determining page length, according to (a) the
relationship between page and screen size; (b) document content; (c) the user's intention
to browse or print/download the page; and (d) user bandwidth (Lynch and Horton
1999), but, with the exception of documents, two screens worth should be the maximum
(Lynch and Horton 1999; Nielsen 2000). Longer pages should have titles or back to
Accommodation strategies
Niederest (1999) describes four strategies for handling differences in user browser
capabilities, that could be applied to differences in screen size, connection speeds, and
other technical aspects of Web use. The lowest common denominator design strategy
(p.9) means designing a Web page accessible to everyone. Therefore, she suggests that
more recent embellishments of HTML, such DHTML, Java, Javascript, and style sheets,
should be avoided. Another minority, using the current version design strategy goes
to the other extreme, and these developers only design for the latest versions of
browsers, with little concern for site performance for other users. After all, they argue,
higher level browsers are available for free. This approach is more successful for
intranet designs or specific audiences. Far more designers go for a middle approach, or
pages that degrade gracefully (p.10). These designers use cutting edge technologies
but implement them in a way that the pages are still functional without the related
support. The ALT command is useful for this purpose. The Georgia Web Group in their
compatibility without compromise (DeSimone and McRae 2000). The final approach
is to create multiple versions of the site aimed at different levels of users. Navigation to
these sites can either be determined by the user, or by the site code itself, through
Javascript (p.11).
To accommodate both browser and monitor variations, Nielsen (2000, p.37-38)
suggests using Semantic instead of Presentation encoding, thereby allowing the user's
browser, rather than the site, determine the most appropriate font and font size.
Semantic encoding, while giving less control to the designer, makes the page more
likely to fit more browsers. Nielsen also suggests writing resolution-independent pages
that adapt themselves to the users equipment by encoding tables, frames, etc. with
variable pixel widths, rather than fixed pixel widths (p. 29).
argument against opting for semantic coding in relation to font use, color use, graphics
and speed. Whereas Nielsen (2000) and the other authors cited give the engineering
point of view (Nielsen), Siegel gives the design point of view. From his perspective,
good graphic design is the primary requirement, and to ensure that a well-designed
page comes out the way the designer intended it to, control should be taken away from
the user and the users browser. Appearance is the prerogative of the author, not the
viewer. In a compelling argument for form over function, he recommends using fixed
line widths, dithered colors not in the web safe list, and pushing the limit in relation to
page size. He also supports the use of splash screens, metaphor, pouring text into
HTML tables to make columns, and other third-generation website design features
criteria. Nielsens (2000) and Lynch and Hortons (1999) books are, in themselves, each
a compendium of website design criteria, but a list form an online source is more
succinct list. In The Seven Cs of Webservice Design (DeSimone and McRae 2000), The
Georgia Web Group from the University of Georgia suggest these seven criteria:
Courtesy over Coolness - The length of time required for a page to load useful
information is reasonable.
team set specific goals for the refreshment of their own university website. The criteria,
* Easier to navigate
* Easier to maintain
* More customer-oriented
Nielsen provides one single criterion for website design that is eloquent and all-
encompassing, usability (2000, pp. 8-15). His argument for this single criterion is
powerful and logical, and requires a paradigm shift in consumerism. Whereas in the
consumption of traditional products, users buy first and experience usability of the
product is later, the web reverses that equation. Users experience usability first and
then decide to whether or not invest time or money. Therefore, unlike traditional
products, usability determines the decision to commit, and since competitors are just a
click away in this ultimate customer-empowered environment, sites with poor usability
lose customers in seconds, while sites with good usability keep them. In short,
content, contextual signs as to location, and once again, speed. He goes on to say that
there are essentially two approaches to design: the artistic ideal of expressing yourself
and the engineering ideal of solving a problem for a customer (p. 11). Seeking usability
means favoring the latter, and Nielsen has conducted numerous usability studies with
users that show strong preferences for good engineering over good art.
Lynch and Horton (1999) provide a good model for site design similar to the second
half of the Macromedia model, but also including site maintenance (pp.4-9):
In the first stage, site definition and planning, the developer must collect details on
architecture, or what Nielsen (2000) calls content design (p.98), an inventory of the
content must be taken, it must be chunked and organized, and a prototype of the site
must be made. The third step, site design, involves determining the graphic standards
for the site, setting up the look and feel, making graphics, and writing content. Stage
four, site construction, should be avoided until previous stages are completed. Beta
testing should be done in this stage as well. For the fifth stage, site marketing, the
authors offer a number of useful suggestions, including hosting local BBs, listservs,
library announcements, etc., and putting the URL on every product and correspondence
sent out from the organization. Acquiring information for the final stage; tracking,
evaluation, and maintenance; can be done through the site itself, in server logs. The
webmaster should be instructed to keep detailed site logs on browser types, popular
pages, location of users, etc. Links should also be periodically checked to make sure
Nielsen (2000) does not offer procedures as such, but rather categorizes site design
into three topical areas: (a) Page design, (b) Content design, and (c) Site design. Due to
their simplicity, these categories have been adopted to organize of the rest of this
literature review.
Page Design
As Nielsen says, Simplicity should be the goal of page design. (Nielsen 2000, p.
97). The first advantage from adhering to this criterion is speed, the number one
priority identified by users. In every usability study Nielsen has conducted since 1994
increasing speed was the most frequent request, and page speed was always chosen
over page aesthetics (p. 42). How fast is fast enough was discovered in a classic 1968
study by Robert Miller (cited in Nielsen, p. 42-43), in which his findings set clear
standards for the maximum amount of time acceptable for computer operations:
lag of 0.1sec maximum limit for feeling the system is reacting automatically
(i.e., maximum time lag for keystrokes)
lag of 1 sec - limit for users flow of thought to remain uninterrupted (i.e.,
maximum time lag for page change)
Page download time can be made faster by using fewer graphics, smaller tables,
multiple copies of same graphic (buttons, arrows, etc). Loading order is also important
(Nielsen 2000, p. 50). Some information should be presented right away according to the
following suggestions: (a) put key information at top of the page, (b) load text before
graphics, (c) use ALT text attributes to show text links before image downloads, and (d)
break complex tables into simpler smaller ones. The table below shows page download
1 sec 10 sec
modem 2 KB 34 KB
ISDN 8 KB 150 KB
T1 100 KB 2 MB
Therefore, to conform to Millers findings on lag limits, pages should be less than
34KB per page. This calculation is supported by a study on bailout rates by Claire
Amundsen at Proven Edge Inc. (cited in Nielsen, 2000 #230, p. 48). 32-33 KB pages had
7-10% bailout rate whereas 40 KB pages had 25-30% bailout rate. It probably also
explains why major sites like Yahoo are almost devoid of graphics. Naturally, as
The criterion of simplicity can also be applied to page aesthetics. Lynch and Horton
(1999), Siegel (1997), and Weinman (2000) stress the importance of using the principles
established in graphic design for page layout. The primary task of graphic design is to
create a strong, consistent visual hierarchy in which important elements are emphasized
and content is organized logically and predictably (Lynch & Horton, p. 53). To create a
visual logic, Lynch and Horton suggest using contrast to establish hierarchy,
consistency in the layout grid both within and across pages, and use of a graphic theme.
Lynch and Horton (1999), Weinman (1999), and Nielsen (2000), all point out that
information above the fold, in the first screen view of the page, is much more likely to
be viewed than anything below. Nielsens 1994 and 1995 studies showed that only 10%
or so users would scroll past the first window, unless they found a particular article
they were looking for. Nielsen also recommends that since users go to sites to get
information, except for the home page, 50%- 80% of page should be devoted to content
and only 20% or less used for navigation aids (p. 20).
In Designing Web Graphics, Lynda Weinman (2000) discusses color aesthetics for
web page design. Understanding the color relationships (p. 158), between primary,
warm versus cool colors; aids a designer in coordinating colors. Color choices
communicate relationships in and the hierarchy of the content. She suggests designing
in grayscale first (p.161) to determine which objects or text to make darker, and thus
more prominent, and then color them later. Siegel (1997) also provides extensive
discussion on the use of graphics (pp. 35-61), including an argument for going beyond
the basic browser colors, techniques for making colors come out better, and techniques
Using color to maintain legibility is also important. Nielsen (2000) suggests using
background colors that contrast with text colors; avoiding red-green combinations for
the sake of colorblind readers; using plain color backgrounds or subtle patterns instead
of intricate ones, since these make text hard to read; avoiding tiny fonts; and using sans-
serif fonts like Verdana for smaller type sizes like 9 points, but serif fonts for larger
sizes. Legibility is also improved by using left justification, by not using moving text,
Nierderst (1999), Nielsen (2000), and Weinman (2000) all argue for careful and
sparse use of graphics. Misuse increases download time, and some newer formats
cannot be processed by older browsers. Siegel (1997) also recommends keeping page
sizes small, but argues for heavy use of graphics for the sake of design. As for animated
text and graphics, Nielsen cites a number of his own usability studies that show that
animations are powerful, but most users say they are annoyed by them (p. 143).
Especially hated are moving text and scrolling marquees. Nonetheless, animation is
multiplexing the display as in using the same space for multiple images,
such as words that pop up when a cursor moves across a map
Links, the heart and soul of the World Wide Web, also call for simplicity, but clarity
as well. There are three types: (a) Structural navigation links to get around the site; (b)
Associative links within the content, such as underlined words that lead to more
information about the word; and (c) See Also links that lead to additional references,
often off-site (Nielsen 2000, p. 51). It should be clear what each link does. The key to
good hypertext linking is to maintain context, so that the reader stays within the
narrative flow and design environment of your site (Lynch and Horton 1999, p. 103).
Avoid click here (Nielsen, p. 55) or current issue (Nielsen, p. 59) type links;
the link words should contain content instead.
Links should be composed of only a few words, because users tend to process
links by scanning, not reading (Nielsen, p. 59).
Links are a distraction, so rather than fill the body of your text with linked
words, just use a few salient links. Put other minor links at the bottom of the
text (Lynch & Horton, p. 104).
Standard link colors should be used for visited and unvisited link words. A
study by Jared Spool (cited on p. 64) found a relation of r=0.4 between using
standard link colors and user success, meaning color alone accounted for
16% of variability of users abilities to do things in sites.
Use Javascript pop up link titles to describe the destination before user selects
the link (Nielsen, p. 60). Link titles should be less than 80 characters in
length (Nielsen, p. 62).
Link title information can be the name of site the link leads to, the name of the
subsite, the type of information offered, or warnings of possible problems
(Nielsen, p. 62)
For links that take your user to another site, use the TARGET = main
argument to open a new browser window for that site (Lynch & Horton, p.
103).
Since the Web is the Great Equalizer (Nielsen 2000, p. 92), establishing the
credibility of the institution is critical. Since the page itself is the only contact the user
has with the organization, its appearance is the main influence on how the organization
Content Design
Content is number one (Nielsen 2000, p. 100); it is the reason users go online. It is
no surprise then that usability studies indicate a fierce content focus on the part of
users. Therefore, good content architecture will increase information flow and
usability, making it more likely users will stay on site. The Web is an attention
economy, where the ultimate currency is the users time (p. 160). In traditional media,
staying put has advantages, but on the Web, the equation is reversed: the cost of going
to another website is very low and yet the expected benefit of staying at the current site
is not very high. Thus Web users must be given immediate benefits or they will go
elsewhere.
In organizing content, a designer should start by asking what the audience wants.
Lynch and Horton (1999, p. 24) provide 5 steps for organizing information:
screen space usage, uniformity, and hyperlink reasons (Lynch and Horton 1999).
Chunking is especially necessary because users tend to scan rather than read (Nielsen
2000). A Nielsen & Morkes study found 79% new users just scanned pages rather than
read them word-by-word (p. 101), probably due to the click-oriented nature of the Web,
the difficulty of reading from screens, and the gross availability of other sites (p. 106). A
full text paste of non-chunked prose, or shovelware (p.119), is almost useless. Instead,
text should be chunked into sections with subtitles and prose on the same page or with
As for the hierarchy of the content, depth is an important factor (Lynch and Horton
1999). Avoid hierarchies that are too shallow (too many menu choices) or too deep (too
many menus before content). Nielsen (2000) suggests shallowness for popular pages
and depth for more specialized pages, meaning that higher levels should only have
Common site information structures are: pages that must be followed in a set
sequence (good for training sites), grids (databases), hierarchies, and webs (Lynch and
Horton 1999, p. 27-28). Training sites tend to be sequential, linear, and with few out-
going links. For teaching sites, links are important, and printing should be possible.
Reference sites should aim for efficiency, tend to be text heavy, and should be equipped
users tend to scan, and require more explicit organization than with paper media. Four
1. Be succinct use only 50% of the text you would use for print.
2. Write for scannability use subheads, bulleted lists, etc (p. 101); use 2-3
levels of headlines (p. 105); use objective, meaning oriented, not cute or
tempting, headings (p. 106); and use highlighting and emphasis on
important words to catch the user's eye (p. 106).
Usability studies show users prefer some, but not too much, humor and attitude in
Web pages (Nielsen 2000, p. 101), but due to the wide range of possible readers, plain
language should be used. Web writing has its own standards, which are as follows:
Start each page with a conclusion with the most important material up front (inverted
pyramid). Scanning users tend to just read the first few lines, so start paragraphs with
topic sentences, and keep the one idea per paragraph rule. Limit use of metaphor and
humor since these might be taken literally. Do page chunking with short sections on
separate pages connected by links. Finally, as Lynch and Horton (1999) point out, keep
in mind that web pages are grossly different from print pages, and must be free
standing.
Writing good page titles is also an important web writing skill. Writing for the
Web is often writing to be found (Nielsen 2000, p. 123). Use search accessible HTML
page titles, 2-6 words in length. Furthermore, headlines have two main differences
from print headlines: (a) they are often displayed out of context after a search, and (b)
they have less contextual support from text, photos etc. Therefore, a headline must be
clear and informative so that it can stand on its own. A headline should clearly explain
what article is about, be written in plain language with no puns or cleverness. Teasers
are particularly irritating to users, because they make the reader have to wait for a page
To emphasize the importance of these suggestions, Nielsen estimates the cost in lost
time a single poorly written headline on intranet home page would cause (p. 100). For
company of 10,000 employees, the cost in lost time would be almost $5000.
In addition, leading articles in page and e-mail titles should be left out in order to
accommodate alphabetized lists, but they should be included in titles embedded within
a page. Instead, use the important information carrying word the first word in the title
in order to improve hits through scanning, searching, and alphabetizing. For the same
reason, page titles should not all start with same word, because this makes it harder to
Studies found users were generally disappointed with web video quality since their
expectations were based on television broadcast quality (Nielsen 2000, p. 150). Since
video and audio segments take a long time to download, they should be limited to one
minute in length; and marked with an HTML link that next to a sample still
photograph, a short summary, and the file size. Longer video files should be chunked
segmented into parts under separate headers in order to maintain user control.
Kilobyte-heavy photographic, or high resolution graphic files should not be put on
higher level pages, because a user should not be forced to wait out their long download
times before indicating a concrete interest in them (Nielsen 2000). Instead, thumbnails
how to use GIF, JPEG, MPEG, Flash, and other high compression file formats to reduce
file size. Nielsen suggests using a combination of scaling and cropping, which he calls
relevance-enhanced image reduction (p. 135), to reduce file size. The image is scaled
because they are hard to read. So should virtual reality gimmicks, such as walk-
Site Design
Good site design follows logically from good content design and communicates the
relationships between the different content areas. Even in major, relatively well-
designed sites, users have trouble getting the information they need. Two studies cited
by Nielsen (2000, p. 164) show a high rate of failure in relatively simple tasks. The first
study, by Jared Spool, found that when users started at a home page and were given a
simple problem to solve, they could only find the correct page 42% of the time. In the
second study, by Hurst & Nielsen, success rates were even lower. The users were given
a slightly more difficult task, finding a job opening an applying for it, but only 26%
could do so. Neither site was particularly bad; the problem lie in the huge decrease in
usability once the user leaves the home page and starts navigating through a site.
Poor information architecture will always lead to poor usability (Nielsen 2000, p.
198). Therefore, the site design must be oriented towards clear navigation from the
users perspective. Lynch and Horton (1999, pp. 14-16) offer these user-centered design
criteria: (a) clear navigation aids, (b) no dead end pages, (c) direct access (a flat design),
(d) speed, (e) simplicity and consistency, (f) design integrity and stability (the site
works), (g) opportunity for feedback (webmaster contact), (h) allowances made for
disabled users (ALT tags), (i) ability to handle older computers, and (j) location context
(markers that show where the user is). Nielsens criteria are stated in two basic rules:
(a) have a structure, and (b) make it reflect users view of the organization (products,
Each page should give the following information (Lynch and Horton 1999, p. 12-13):
In other words, each page needs an informative title, author or institution, revision
date, link to homepage, and the home URL on the major menu pages. These authors
Nielsen (2000, p. 202) argues for a hierarchical structure too high level categories
that go to deeper levels that, if possible, show the current location within all the levels
of the navigation user interface. Basically, navigation interfaces need to help users
answer 3 questions:
scheme. On the other hand, a left strip showing main services links can also be good for
navigation and branding the site, but at a high price, 20% of interior page real estate.
Truncation Cut off all but initial information and add More button
Usability studies show that problems occur with links using any other form than
simple underlined text, so pull-down menus or graphics should be used with care
they do not change color (Nielsen 2000, p. 195) after being visited. In general, usability
studies also show that users complain bitterly whenever they are exposed to sites with
overly divergent ways of doing things (p. 217), since the Web itself sets the standard,
not the designer. He also believes metaphorical navigation systems should be avoided
because they are hard to match to real world attributes and tend to give user goals
second priority. The ubiquitous shopping cart metaphor is a good example of both the
Site components
The Web sets the standard in site components as well. Lynch and Horton (1999) list
sub-menu pages (& alt homepage) - often used for returnee users
table of contents, indexes, site map pages - site maps have limitations and
costly to keep up to date
Search features
Contact information and user feedback - including phone, fax, snail mail
addresses, and maybe, maps, travel directions, parking etc.
FAQ pages
Nielsens (2000) list focuses more on function than content, and while shorter, is
more informative:
Home page. The main goals of the home page are to tell users where they are and
what the site can do for them, so the company or site name, and purpose, must be
prominent (p. 166). In general, home pages have three other features: (a) a directory of
the sites main content areas, (b) a summary of important news or promotions, and (c) a
search feature. Of these, the most important purpose is to provide a list of links to the
main subsites that are organized and prioritized to user needs, (p. 168). The home page
also sets the visual format for rest of the site. Finally, Nielsen argues vehemently
against splash screens, which are annoying and slow users access to content. Splash
screens must die (p. 176); users tend to click off them as soon as possible. Siegel (1997)
provides an opposing argument that well designed splash screens lure users in.
Interior pages. Agreeing with Lynch and Horton (1999), Nielsen (2000) says the
site name should be repeated on all pages, but the main focus should be put on content.
referral fees are paid (p. 179), but is against forcing users to enter only through the
home page.
Search. Search boxes should be easily available on every page and limited to
searching that particular site only. He warns against scoped search, limited to just a
part of the site, unless the scope is stated and an alternative search box exists for the
entire site (Nielsen 2000, p. 225). Nielsens usability studies found slightly more than
half of all users are search dominant (meaning that they will go to the search button as
soon as they enter a website), about a fifth are link dominant, and the rest exhibited
mixed behavior (p. 224). Boolean search operators, such as AND, are almost always
misunderstood and should be avoided (p. 227). Being able to enter more words leads to
better search results, so text boxes should be big. In one study, students entered an
average of 2.8 words per query in a small box, but 3.4 when the box was enlarged (p.
233).
URLs. Links from other websites are third most common way people find sites
(after search results and email recommendations), so orient the site towards attracting
in-bound links. (Nielsen 2000. p. 249). Avoid linkrot caused by moving pages or
killing URLs. If content changes on a regular basis, such as on a news page, use
temporary URLs that can be bookmarked, although the same content might be archived
under a permanent URL as well. Os and 0s in URL names should also be avoided, since
they are often confused; allow for URL guessing (typing in a word and adding .com
to it); and allow for URL butchering (cutting off the end to go to a higher level) (p. 248).
checkbook managers (Nielsen 2000, p. 256); whereas content Applets are tightly
integrated into content of a web page (p. 258). Content Applets should be displayed on
the page they are related to, but Functionality Applets should be displayed in a separate
Style Sheets. Style sheets ensure visual continuity across site (Nielsen 2000, p. 81).
Cascading Style Sheets are style sheets that set style parameters for entire site, and
allow for easy modification of it. They can be linked as separate file or embedded in the
Web page. Linking is generally the better approach, since it makes modifications easier
and results in faster downloads. Suggestions for using style sheets include (84-85):
Make sure page works if style sheet is turned off by users browser.
Do not use more than two fonts and have long list of alternatives.
Use relative font sizes, in percents, rather than absolute font sizes.
Avoid use of the !important command that overrides the users browser
settings.
In using multiple style sheets, use the same CLASS names for the same
concepts.
Frames. Although Lynch and Horton (1999) suggest the use of frames in some
instances, Nielsen (2000) is strongly opposed to their use. To quote: Frames: Just Say
No(p. 95). Frames cause problems in linking, bookmarking, printing, and break
Berner-Lees original unified model of the Web. The only exception is using the
TARGET = top attribute for long scrolls within a page, or for metapages that
Definitions
Web Site. "A set of linked documents with shared attributes, such as related topics,
Server Side Includes (SSI). Special placeholders in HTML documents that the server
will replace with actual data just before sending the page (Niederest 1999, p. 251).
Cascading Style Sheets (CSS or CSS2). Style sheets that set style parameters for
entire site, and allow for easy modification of entire site. They can be linked as separate
Quicktime. A system extension developed by Apple that allows audio and video
Moving Pictures Experts Group (MPEG). Multimedia standards for audio, video
and streaming that allow for high compression with little loss of quality (Niederest
1999, p. 353).
Graphic Interchange Format (GIF). A popular graphic file type that excels at
Link titles. Short explanations that pop up when a mouse is moved over a link
Subsites. Content-related pages within a site that are structured like a separate site
allows animation, interactive graphics, audio, and video with small file sizes (Niederest
1999, p. 359).
Dynamic Hypertext Markup Language (DHTML). Web pages that combine HTML
3.2, Javascript, Cascading Style Sheets, and DOM to create pages that move, animate, or
Joint Photographic Experts Group (JPEG). A file format that uses a compression
scheme that maximizes full color images, like photographs, for the Web (Lynch and
DeSimone, A. and W. McRae (2000). The seven c's of webservice design. Georgia
Web Group. http://www.uga.edu/design/ (3 Feb. 2001).
Hanscom, V., K. Diezel, et al. (2000). Using Dreamweaver 4. San Francisco, CA,
Macromedia Inc.
Lynch, P. and S. Horton (1999). Web style guide. New Haven, CN, Yale University
Press.
Directed Study
Curtis Kelly
International Cluster
Warren H. Groff
March, 2001
Introduction
The ability to create a good website entails far more than just knowing how to write
and the context it appears in, must be structured to optimize its conveyance. Therefore,
a science of website design has arisen. Many of the principles for website design have
been adapted from print, software, and video design, but others are unique to this
medium. The following literature review will examine the theories, principles, and
Most novices jump right into page construction with only a vague notion of a plan,
which Nielsen (2000) considers one of the two great errors in site design. As with any
educational or media design project, the first step in website design is to decide on a
planning model. The most comprehensive model comes from Using Dreamweaver 4,
Goals
As for the first step, determining goals, Lynch and Horton (1999, p.1) offer a series
Neither Nielsen (2000) nor Lynch and Horton (1999) discuss how to set goals, but
Nielsen's insightful list of the fundamental flaws in most website designs (p. 15) reflects
a poor consideration of goals. The list is included here in its entirety. As Nielsen points
out, In every one of these cases, the natural way people go about doing web projects
Information architecture: structuring the site to mirror the way the company
is structured. Instead, the site should be structured to mirror the users' tasks
and their views of the information space.
Page design: creating pages that look gorgeous and that evoke positive
feelings when demo'd inside the company. Internal demos do not suffer the
response time delays that are the main determinant of web usability;
similarly, a demo does not expose the difficulties a novice user will have in
finding and understanding thc various page elements. Instead, design for an
optimal user experience under realistic circumstances, even if your demos
will be less "cool."
Content authoring: writing in the same linear style as you've always written.
Instead, force yourself to write in the new style that is optimized for online
readers who frequently scan text and who need very short pages with
secondary information relegated to supporting pages.
Linking strategy: treating your own site as the only one that matters, without
proper links to other sites and without well-designed entry-points for others
to link to. Many companies don't even use proper links when they mention
their own site in their own advertising. Instead, remember that hypertext is
the foundation of the Web and that no site is an island.
Target Audience
The second step in the Macromedia model, choosing a target audience, is one of the
most important. As Nielsen (2000) stresses throughout his book, a key point of usability
is designing the site from the user's perspective, not that of the owning organization.
Therefore, it is critical to know what kinds of users will most likely visit the site. Part of
this information can be gathered through normal market analysis and needs
assessment, but since the medium of contact is the internet, other factors related to
Lynch and Horton (1999, pp. 2-3) suggest three types of users, each with particular
needs: (a) web surfers, (b) novice users, and (c) expert users. The first type, web surfers
are particularly influenced by home page design, and for this audience, all links should
attempts to prevent users from going offsite: Such strategies are contrary to the spirit of
the Web, which emphasizes user control and free navigation. The second type, novice
and occasional users, tend to respond to unambiguous structure and simple overviews
on how the information is organized, while the third type, expert & frequent users want
to obtain accurate information as quickly as possible. They tend to be the most sensitive
Lynch and Horton (1999) and Nielsen (2000) discuss the needs of two other types of
users as well: international users and users with disabilities. International users need
simple English without jargon (Lynch and Horton) and in some cases, options to
particularly sensitive to site design that is friendly to users with disabilities. Text
alternatives should be provided for users with hearing impairments, and enlarged text
or audio options provided for users with visual impairments. Disability laws are one
reason to consider the needs of users with disabilities, but Nielsen suggests others as
well: 30 million Americans, a huge market, have a disability that makes it difficult for
them to use traditional input or output devices (p. 298). We should also contemplate
that as the rest of us age, there is a good chance we will also develop a minor disability.
Whereas only 14% of Americans under 65 have disabilities, the number shoots up to
The first, and almost only, concern Niederest (1999) suggests in relation to site
planning is to determine what kinds of browsers the target audience will be using.
There are far more browsers out there than just the big two, Internet Explorer and
to version and platform. She lists 28 browsers and versions in her book (p. 8), but
suggests looking at special websites that keep up-to-date statistics on browser types.
(Niederest 1999)
The best of these sites, at the time of writing this report, is Browser Watch, at
browsers used to access all 14 channels in the Internet.com network. Visitors to these
sites represent a wide range of people interested in all aspects of technology: from bots,
to Linux, to Windows 2000. The statistics on the top ten browsers on February 1, 2001,
shown below, show that current versions of Explorer and Netscape represent 94%, of
------------------------------------------------------------------------
Top 10 Browser Types Visiting Internet.com
Browser Value Percent
Microsoft Internet Explorer 5.x 254691049 72%
Microsoft Internet Explorer 4.x 42613129 12%
Netscape 4.x 35488809 10%
Unknown User Agents 6558431 1%
Netscape Compatible 5693823 1%
Microsoft Internet Explorer 2.x 1944480 0.55%
Netscape 3.x 1183842 0.34%
Microsoft Internet Explorer 3.x 1100529 0.31%
Mozilla 5.x 992747 0.28%
Opera x.x 663642 0.19%
Updated February 1, 2001
------------------------------------------------------------------------
design, Nielsen (2000) suggests that screen size should take priority. This difference in
priorities is probably related to Nielsen's book being published a year later, when (a) it
was becoming obvious that Explorer would gain dominance; and (b) and the sales of
PDAs, net TV, internet-accessible mobile phones, and other devices with non-standard
Whatever the case, optimizing the use of display space is a critical factor in good
Web design, and all the authors reviewed (Lynch and Horton 1999; Niederest 1999;
Nielsen 2000) dedicated much of their discussion to the analysis of proper page sizes for
different types of monitors. All agree that width is a more important issue that height,
since users are willing to scroll vertically, but not vertically and horizontally. Nierderst
writes that minimum live space should be calculated on the basis of all browser
options, such as buttons, scroll bars etc, being visible; while maximum live space
calculated on the basis of them being turned off (p.17). She provides extensive data
tables but does not recommend any one particular size. Nielsen, argues for using
variable rather than standard widths, but also recommends staying under 600 pixels to
fit the most common type of 640 pixel screen, with the extra 40 pixels being taken up by
scroll bars, etc. (p. 174). Lynch and Horton note that page dimensions are determined
by two factors: common screen dimensions (14 15 or 640 x 480 pixels) and letter/A4
size printouts (p. 57). In both Explorer and Netscape for Mac or Windows, the best size
for printers is 535 (w) x 295 (h) pixels (2 cm. shorter than screen), and the best size for
Designers have more freedom in determining page length, according to (a) the
relationship between page and screen size; (b) document content; (c) the user's intention
to browse or print/download the page; and (d) user bandwidth (Lynch and Horton
1999), but, with the exception of documents, two screens worth should be the maximum
(Lynch and Horton 1999; Nielsen 2000). Longer pages should have titles or back to
Accommodation strategies
Niederest (1999) describes four strategies for handling differences in user browser
capabilities, that could be applied to differences in screen size, connection speeds, and
other technical aspects of Web use. The lowest common denominator design strategy
(p.9) means designing a Web page accessible to everyone. Therefore, she suggests that
more recent embellishments of HTML, such DHTML, Java, Javascript, and style sheets,
should be avoided. Another minority, using the current version design strategy goes
to the other extreme, and these developers only design for the latest versions of
browsers, with little concern for site performance for other users. After all, they argue,
higher level browsers are available for free. This approach is more successful for
intranet designs or specific audiences. Far more designers go for a middle approach, or
pages that degrade gracefully (p.10). These designers use cutting edge technologies
but implement them in a way that the pages are still functional without the related
support. The ALT command is useful for this purpose. The Georgia Web Group in their
compatibility without compromise (DeSimone and McRae 2000). The final approach
is to create multiple versions of the site aimed at different levels of users. Navigation to
these sites can either be determined by the user, or by the site code itself, through
Javascript (p.11).
To accommodate both browser and monitor variations, Nielsen (2000, p.37-38)
suggests using Semantic instead of Presentation encoding, thereby allowing the user's
browser, rather than the site, determine the most appropriate font and font size.
Semantic encoding, while giving less control to the designer, makes the page more
likely to fit more browsers. Nielsen also suggests writing resolution-independent pages
that adapt themselves to the users equipment by encoding tables, frames, etc. with
variable pixel widths, rather than fixed pixel widths (p. 29).
argument against opting for semantic coding in relation to font use, color use, graphics
and speed. Whereas Nielsen (2000) and the other authors cited give the engineering
point of view (Nielsen), Siegel gives the design point of view. From his perspective,
good graphic design is the primary requirement, and to ensure that a well-designed
page comes out the way the designer intended it to, control should be taken away from
the user and the users browser. Appearance is the prerogative of the author, not the
viewer. In a compelling argument for form over function, he recommends using fixed
line widths, dithered colors not in the web safe list, and pushing the limit in relation to
page size. He also supports the use of splash screens, metaphor, pouring text into
HTML tables to make columns, and other third-generation website design features
criteria. Nielsens (2000) and Lynch and Hortons (1999) books are, in themselves, each
a compendium of website design criteria, but a list form an online source is more
succinct list. In The Seven Cs of Webservice Design (DeSimone and McRae 2000), The
Georgia Web Group from the University of Georgia suggest these seven criteria:
Courtesy over Coolness - The length of time required for a page to load useful
information is reasonable.
team set specific goals for the refreshment of their own university website. The criteria,
* Easier to navigate
* Easier to maintain
* More customer-oriented
Nielsen provides one single criterion for website design that is eloquent and all-
encompassing, usability (2000, pp. 8-15). His argument for this single criterion is
powerful and logical, and requires a paradigm shift in consumerism. Whereas in the
consumption of traditional products, users buy first and experience usability of the
product is later, the web reverses that equation. Users experience usability first and
then decide to whether or not invest time or money. Therefore, unlike traditional
products, usability determines the decision to commit, and since competitors are just a
click away in this ultimate customer-empowered environment, sites with poor usability
lose customers in seconds, while sites with good usability keep them. In short,
content, contextual signs as to location, and once again, speed. He goes on to say that
there are essentially two approaches to design: the artistic ideal of expressing yourself
and the engineering ideal of solving a problem for a customer (p. 11). Seeking usability
means favoring the latter, and Nielsen has conducted numerous usability studies with
users that show strong preferences for good engineering over good art.
Lynch and Horton (1999) provide a good model for site design similar to the second
half of the Macromedia model, but also including site maintenance (pp.4-9):
In the first stage, site definition and planning, the developer must collect details on
architecture, or what Nielsen (2000) calls content design (p.98), an inventory of the
content must be taken, it must be chunked and organized, and a prototype of the site
must be made. The third step, site design, involves determining the graphic standards
for the site, setting up the look and feel, making graphics, and writing content. Stage
four, site construction, should be avoided until previous stages are completed. Beta
testing should be done in this stage as well. For the fifth stage, site marketing, the
authors offer a number of useful suggestions, including hosting local BBs, listservs,
library announcements, etc., and putting the URL on every product and correspondence
sent out from the organization. Acquiring information for the final stage; tracking,
evaluation, and maintenance; can be done through the site itself, in server logs. The
webmaster should be instructed to keep detailed site logs on browser types, popular
pages, location of users, etc. Links should also be periodically checked to make sure
Nielsen (2000) does not offer procedures as such, but rather categorizes site design
into three topical areas: (a) Page design, (b) Content design, and (c) Site design. Due to
their simplicity, these categories have been adopted to organize of the rest of this
literature review.
Page Design
As Nielsen says, Simplicity should be the goal of page design. (Nielsen 2000, p.
97). The first advantage from adhering to this criterion is speed, the number one
priority identified by users. In every usability study Nielsen has conducted since 1994
increasing speed was the most frequent request, and page speed was always chosen
over page aesthetics (p. 42). How fast is fast enough was discovered in a classic 1968
study by Robert Miller (cited in Nielsen, p. 42-43), in which his findings set clear
standards for the maximum amount of time acceptable for computer operations:
lag of 0.1sec maximum limit for feeling the system is reacting automatically
(i.e., maximum time lag for keystrokes)
lag of 1 sec - limit for users flow of thought to remain uninterrupted (i.e.,
maximum time lag for page change)
Page download time can be made faster by using fewer graphics, smaller tables,
multiple copies of same graphic (buttons, arrows, etc). Loading order is also important
(Nielsen 2000, p. 50). Some information should be presented right away according to the
following suggestions: (a) put key information at top of the page, (b) load text before
graphics, (c) use ALT text attributes to show text links before image downloads, and (d)
break complex tables into simpler smaller ones. The table below shows page download
1 sec 10 sec
modem 2 KB 34 KB
ISDN 8 KB 150 KB
T1 100 KB 2 MB
Therefore, to conform to Millers findings on lag limits, pages should be less than
34KB per page. This calculation is supported by a study on bailout rates by Claire
Amundsen at Proven Edge Inc. (cited in Nielsen, 2000 #230, p. 48). 32-33 KB pages had
7-10% bailout rate whereas 40 KB pages had 25-30% bailout rate. It probably also
explains why major sites like Yahoo are almost devoid of graphics. Naturally, as
The criterion of simplicity can also be applied to page aesthetics. Lynch and Horton
(1999), Siegel (1997), and Weinman (2000) stress the importance of using the principles
established in graphic design for page layout. The primary task of graphic design is to
create a strong, consistent visual hierarchy in which important elements are emphasized
and content is organized logically and predictably (Lynch & Horton, p. 53). To create a
visual logic, Lynch and Horton suggest using contrast to establish hierarchy,
consistency in the layout grid both within and across pages, and use of a graphic theme.
Lynch and Horton (1999), Weinman (1999), and Nielsen (2000), all point out that
information above the fold, in the first screen view of the page, is much more likely to
be viewed than anything below. Nielsens 1994 and 1995 studies showed that only 10%
or so users would scroll past the first window, unless they found a particular article
they were looking for. Nielsen also recommends that since users go to sites to get
information, except for the home page, 50%- 80% of page should be devoted to content
and only 20% or less used for navigation aids (p. 20).
In Designing Web Graphics, Lynda Weinman (2000) discusses color aesthetics for
web page design. Understanding the color relationships (p. 158), between primary,
warm versus cool colors; aids a designer in coordinating colors. Color choices
communicate relationships in and the hierarchy of the content. She suggests designing
in grayscale first (p.161) to determine which objects or text to make darker, and thus
more prominent, and then color them later. Siegel (1997) also provides extensive
discussion on the use of graphics (pp. 35-61), including an argument for going beyond
the basic browser colors, techniques for making colors come out better, and techniques
Using color to maintain legibility is also important. Nielsen (2000) suggests using
background colors that contrast with text colors; avoiding red-green combinations for
the sake of colorblind readers; using plain color backgrounds or subtle patterns instead
of intricate ones, since these make text hard to read; avoiding tiny fonts; and using sans-
serif fonts like Verdana for smaller type sizes like 9 points, but serif fonts for larger
sizes. Legibility is also improved by using left justification, by not using moving text,
Nierderst (1999), Nielsen (2000), and Weinman (2000) all argue for careful and
sparse use of graphics. Misuse increases download time, and some newer formats
cannot be processed by older browsers. Siegel (1997) also recommends keeping page
sizes small, but argues for heavy use of graphics for the sake of design. As for animated
text and graphics, Nielsen cites a number of his own usability studies that show that
animations are powerful, but most users say they are annoyed by them (p. 143).
Especially hated are moving text and scrolling marquees. Nonetheless, animation is
multiplexing the display as in using the same space for multiple images,
such as words that pop up when a cursor moves across a map
Links, the heart and soul of the World Wide Web, also call for simplicity, but clarity
as well. There are three types: (a) Structural navigation links to get around the site; (b)
Associative links within the content, such as underlined words that lead to more
information about the word; and (c) See Also links that lead to additional references,
often off-site (Nielsen 2000, p. 51). It should be clear what each link does. The key to
good hypertext linking is to maintain context, so that the reader stays within the
narrative flow and design environment of your site (Lynch and Horton 1999, p. 103).
Avoid click here (Nielsen, p. 55) or current issue (Nielsen, p. 59) type links;
the link words should contain content instead.
Links should be composed of only a few words, because users tend to process
links by scanning, not reading (Nielsen, p. 59).
Links are a distraction, so rather than fill the body of your text with linked
words, just use a few salient links. Put other minor links at the bottom of the
text (Lynch & Horton, p. 104).
Standard link colors should be used for visited and unvisited link words. A
study by Jared Spool (cited on p. 64) found a relation of r=0.4 between using
standard link colors and user success, meaning color alone accounted for
16% of variability of users abilities to do things in sites.
Use Javascript pop up link titles to describe the destination before user selects
the link (Nielsen, p. 60). Link titles should be less than 80 characters in
length (Nielsen, p. 62).
Link title information can be the name of site the link leads to, the name of the
subsite, the type of information offered, or warnings of possible problems
(Nielsen, p. 62)
For links that take your user to another site, use the TARGET = main
argument to open a new browser window for that site (Lynch & Horton, p.
103).
Since the Web is the Great Equalizer (Nielsen 2000, p. 92), establishing the
credibility of the institution is critical. Since the page itself is the only contact the user
has with the organization, its appearance is the main influence on how the organization
Content Design
Content is number one (Nielsen 2000, p. 100); it is the reason users go online. It is
no surprise then that usability studies indicate a fierce content focus on the part of
users. Therefore, good content architecture will increase information flow and
usability, making it more likely users will stay on site. The Web is an attention
economy, where the ultimate currency is the users time (p. 160). In traditional media,
staying put has advantages, but on the Web, the equation is reversed: the cost of going
to another website is very low and yet the expected benefit of staying at the current site
is not very high. Thus Web users must be given immediate benefits or they will go
elsewhere.
In organizing content, a designer should start by asking what the audience wants.
Lynch and Horton (1999, p. 24) provide 5 steps for organizing information:
screen space usage, uniformity, and hyperlink reasons (Lynch and Horton 1999).
Chunking is especially necessary because users tend to scan rather than read (Nielsen
2000). A Nielsen & Morkes study found 79% new users just scanned pages rather than
read them word-by-word (p. 101), probably due to the click-oriented nature of the Web,
the difficulty of reading from screens, and the gross availability of other sites (p. 106). A
full text paste of non-chunked prose, or shovelware (p.119), is almost useless. Instead,
text should be chunked into sections with subtitles and prose on the same page or with
As for the hierarchy of the content, depth is an important factor (Lynch and Horton
1999). Avoid hierarchies that are too shallow (too many menu choices) or too deep (too
many menus before content). Nielsen (2000) suggests shallowness for popular pages
and depth for more specialized pages, meaning that higher levels should only have
Common site information structures are: pages that must be followed in a set
sequence (good for training sites), grids (databases), hierarchies, and webs (Lynch and
Horton 1999, p. 27-28). Training sites tend to be sequential, linear, and with few out-
going links. For teaching sites, links are important, and printing should be possible.
Reference sites should aim for efficiency, tend to be text heavy, and should be equipped
users tend to scan, and require more explicit organization than with paper media. Four
1. Be succinct use only 50% of the text you would use for print.
2. Write for scannability use subheads, bulleted lists, etc (p. 101); use 2-3
levels of headlines (p. 105); use objective, meaning oriented, not cute or
tempting, headings (p. 106); and use highlighting and emphasis on
important words to catch the user's eye (p. 106).
Usability studies show users prefer some, but not too much, humor and attitude in
Web pages (Nielsen 2000, p. 101), but due to the wide range of possible readers, plain
language should be used. Web writing has its own standards, which are as follows:
Start each page with a conclusion with the most important material up front (inverted
pyramid). Scanning users tend to just read the first few lines, so start paragraphs with
topic sentences, and keep the one idea per paragraph rule. Limit use of metaphor and
humor since these might be taken literally. Do page chunking with short sections on
separate pages connected by links. Finally, as Lynch and Horton (1999) point out, keep
in mind that web pages are grossly different from print pages, and must be free
standing.
Writing good page titles is also an important web writing skill. Writing for the
Web is often writing to be found (Nielsen 2000, p. 123). Use search accessible HTML
page titles, 2-6 words in length. Furthermore, headlines have two main differences
from print headlines: (a) they are often displayed out of context after a search, and (b)
they have less contextual support from text, photos etc. Therefore, a headline must be
clear and informative so that it can stand on its own. A headline should clearly explain
what article is about, be written in plain language with no puns or cleverness. Teasers
are particularly irritating to users, because they make the reader have to wait for a page
To emphasize the importance of these suggestions, Nielsen estimates the cost in lost
time a single poorly written headline on intranet home page would cause (p. 100). For
company of 10,000 employees, the cost in lost time would be almost $5000.
In addition, leading articles in page and e-mail titles should be left out in order to
accommodate alphabetized lists, but they should be included in titles embedded within
a page. Instead, use the important information carrying word the first word in the title
in order to improve hits through scanning, searching, and alphabetizing. For the same
reason, page titles should not all start with same word, because this makes it harder to
Studies found users were generally disappointed with web video quality since their
expectations were based on television broadcast quality (Nielsen 2000, p. 150). Since
video and audio segments take a long time to download, they should be limited to one
minute in length; and marked with an HTML link that next to a sample still
photograph, a short summary, and the file size. Longer video files should be chunked
segmented into parts under separate headers in order to maintain user control.
Kilobyte-heavy photographic, or high resolution graphic files should not be put on
higher level pages, because a user should not be forced to wait out their long download
times before indicating a concrete interest in them (Nielsen 2000). Instead, thumbnails
how to use GIF, JPEG, MPEG, Flash, and other high compression file formats to reduce
file size. Nielsen suggests using a combination of scaling and cropping, which he calls
relevance-enhanced image reduction (p. 135), to reduce file size. The image is scaled
because they are hard to read. So should virtual reality gimmicks, such as walk-
Site Design
Good site design follows logically from good content design and communicates the
relationships between the different content areas. Even in major, relatively well-
designed sites, users have trouble getting the information they need. Two studies cited
by Nielsen (2000, p. 164) show a high rate of failure in relatively simple tasks. The first
study, by Jared Spool, found that when users started at a home page and were given a
simple problem to solve, they could only find the correct page 42% of the time. In the
second study, by Hurst & Nielsen, success rates were even lower. The users were given
a slightly more difficult task, finding a job opening an applying for it, but only 26%
could do so. Neither site was particularly bad; the problem lie in the huge decrease in
usability once the user leaves the home page and starts navigating through a site.
Poor information architecture will always lead to poor usability (Nielsen 2000, p.
198). Therefore, the site design must be oriented towards clear navigation from the
users perspective. Lynch and Horton (1999, pp. 14-16) offer these user-centered design
criteria: (a) clear navigation aids, (b) no dead end pages, (c) direct access (a flat design),
(d) speed, (e) simplicity and consistency, (f) design integrity and stability (the site
works), (g) opportunity for feedback (webmaster contact), (h) allowances made for
disabled users (ALT tags), (i) ability to handle older computers, and (j) location context
(markers that show where the user is). Nielsens criteria are stated in two basic rules:
(a) have a structure, and (b) make it reflect users view of the organization (products,
Each page should give the following information (Lynch and Horton 1999, p. 12-13):
In other words, each page needs an informative title, author or institution, revision
date, link to homepage, and the home URL on the major menu pages. These authors
Nielsen (2000, p. 202) argues for a hierarchical structure too high level categories
that go to deeper levels that, if possible, show the current location within all the levels
of the navigation user interface. Basically, navigation interfaces need to help users
answer 3 questions:
scheme. On the other hand, a left strip showing main services links can also be good for
navigation and branding the site, but at a high price, 20% of interior page real estate.
Truncation Cut off all but initial information and add More button
Usability studies show that problems occur with links using any other form than
simple underlined text, so pull-down menus or graphics should be used with care
they do not change color (Nielsen 2000, p. 195) after being visited. In general, usability
studies also show that users complain bitterly whenever they are exposed to sites with
overly divergent ways of doing things (p. 217), since the Web itself sets the standard,
not the designer. He also believes metaphorical navigation systems should be avoided
because they are hard to match to real world attributes and tend to give user goals
second priority. The ubiquitous shopping cart metaphor is a good example of both the
Site components
The Web sets the standard in site components as well. Lynch and Horton (1999) list
sub-menu pages (& alt homepage) - often used for returnee users
table of contents, indexes, site map pages - site maps have limitations and
costly to keep up to date
Search features
Contact information and user feedback - including phone, fax, snail mail
addresses, and maybe, maps, travel directions, parking etc.
FAQ pages
Nielsens (2000) list focuses more on function than content, and while shorter, is
more informative:
Home page. The main goals of the home page are to tell users where they are and
what the site can do for them, so the company or site name, and purpose, must be
prominent (p. 166). In general, home pages have three other features: (a) a directory of
the sites main content areas, (b) a summary of important news or promotions, and (c) a
search feature. Of these, the most important purpose is to provide a list of links to the
main subsites that are organized and prioritized to user needs, (p. 168). The home page
also sets the visual format for rest of the site. Finally, Nielsen argues vehemently
against splash screens, which are annoying and slow users access to content. Splash
screens must die (p. 176); users tend to click off them as soon as possible. Siegel (1997)
provides an opposing argument that well designed splash screens lure users in.
Interior pages. Agreeing with Lynch and Horton (1999), Nielsen (2000) says the
site name should be repeated on all pages, but the main focus should be put on content.
referral fees are paid (p. 179), but is against forcing users to enter only through the
home page.
Search. Search boxes should be easily available on every page and limited to
searching that particular site only. He warns against scoped search, limited to just a
part of the site, unless the scope is stated and an alternative search box exists for the
entire site (Nielsen 2000, p. 225). Nielsens usability studies found slightly more than
half of all users are search dominant (meaning that they will go to the search button as
soon as they enter a website), about a fifth are link dominant, and the rest exhibited
mixed behavior (p. 224). Boolean search operators, such as AND, are almost always
misunderstood and should be avoided (p. 227). Being able to enter more words leads to
better search results, so text boxes should be big. In one study, students entered an
average of 2.8 words per query in a small box, but 3.4 when the box was enlarged (p.
233).
URLs. Links from other websites are third most common way people find sites
(after search results and email recommendations), so orient the site towards attracting
in-bound links. (Nielsen 2000. p. 249). Avoid linkrot caused by moving pages or
killing URLs. If content changes on a regular basis, such as on a news page, use
temporary URLs that can be bookmarked, although the same content might be archived
under a permanent URL as well. Os and 0s in URL names should also be avoided, since
they are often confused; allow for URL guessing (typing in a word and adding .com
to it); and allow for URL butchering (cutting off the end to go to a higher level) (p. 248).
checkbook managers (Nielsen 2000, p. 256); whereas content Applets are tightly
integrated into content of a web page (p. 258). Content Applets should be displayed on
the page they are related to, but Functionality Applets should be displayed in a separate
Style Sheets. Style sheets ensure visual continuity across site (Nielsen 2000, p. 81).
Cascading Style Sheets are style sheets that set style parameters for entire site, and
allow for easy modification of it. They can be linked as separate file or embedded in the
Web page. Linking is generally the better approach, since it makes modifications easier
and results in faster downloads. Suggestions for using style sheets include (84-85):
Make sure page works if style sheet is turned off by users browser.
Do not use more than two fonts and have long list of alternatives.
Use relative font sizes, in percents, rather than absolute font sizes.
Avoid use of the !important command that overrides the users browser
settings.
In using multiple style sheets, use the same CLASS names for the same
concepts.
Frames. Although Lynch and Horton (1999) suggest the use of frames in some
instances, Nielsen (2000) is strongly opposed to their use. To quote: Frames: Just Say
No(p. 95). Frames cause problems in linking, bookmarking, printing, and break
Berner-Lees original unified model of the Web. The only exception is using the
TARGET = top attribute for long scrolls within a page, or for metapages that
Definitions
Web Site. "A set of linked documents with shared attributes, such as related topics,
Server Side Includes (SSI). Special placeholders in HTML documents that the server
will replace with actual data just before sending the page (Niederest 1999, p. 251).
Cascading Style Sheets (CSS or CSS2). Style sheets that set style parameters for
entire site, and allow for easy modification of entire site. They can be linked as separate
Quicktime. A system extension developed by Apple that allows audio and video
Moving Pictures Experts Group (MPEG). Multimedia standards for audio, video
and streaming that allow for high compression with little loss of quality (Niederest
1999, p. 353).
Graphic Interchange Format (GIF). A popular graphic file type that excels at
Link titles. Short explanations that pop up when a mouse is moved over a link
Subsites. Content-related pages within a site that are structured like a separate site
allows animation, interactive graphics, audio, and video with small file sizes (Niederest
1999, p. 359).
Dynamic Hypertext Markup Language (DHTML). Web pages that combine HTML
3.2, Javascript, Cascading Style Sheets, and DOM to create pages that move, animate, or
Joint Photographic Experts Group (JPEG). A file format that uses a compression
scheme that maximizes full color images, like photographs, for the Web (Lynch and
DeSimone, A. and W. McRae (2000). The seven c's of webservice design. Georgia
Web Group. http://www.uga.edu/design/ (3 Feb. 2001).
Hanscom, V., K. Diezel, et al. (2000). Using Dreamweaver 4. San Francisco, CA,
Macromedia Inc.
Lynch, P. and S. Horton (1999). Web style guide. New Haven, CN, Yale University
Press.