Web Project notes

Introduction

The ability to create a good website entails far more than just knowing how to write the code. As in all any medium of communication, the information to be delivered, 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 practices recommended for website planning and creation.

Adopting a design strategy

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,” a Macromedia software manual:

1. Determine your goals (p. 96)

2. Choose a target audience (p. 96)

3. Create sites for browser compatibility (p. 97)

4. Organize site structure (p. 98)

5. Create design look (p. 100)

6. Design navigation scheme (p. 100)

7. Plan and gather assets (p. 101)

Goals

As for the first step, determining goals, Lynch and Horton (1999, p.1) offer a series of questions to be considered, similar to those used in strategic planning:

What is the mission of your organization?

How will creating a Web site support your mission?

What are your immediate goals for the site?

What are your long term goals for the site?

What Web-related strategies will you use to achieve those goals?

How will you measure the success of your site? (Lynch and Horton 1999)

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 based on their non-web experience turns out to be wrong."

Fundamental errors on all levels of web design:

• Business model: treating the Web as a Marcon brochure instead of a fundamental shift that will change the way we conduct business in the network economy.

• Project management: managing a web project as if it were a traditional corporate project. This leads to an internally focused design witl1 an inconsistent user interface. Instead, a website should be managed as a single customer-interface project.

• 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 internet user styles must also be considered.

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 be directed inward, It should be noted, however, that Nielsen (2000) discourages 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 to how much time it requires to load and navigate the site.

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 navigate to mirror sites written in their native language (Nielsen). Nielsen is 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 50% of those over 65.

Browser and monitor compatibility

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 Netscape Navigator/Communicator, and even these two change in potential according 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 http://browserwatch.internet.com/. Browser Watch keeps monthly statistics on 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 the visitors, with Explorer dominating the field. (Browserwatch 1)

------------------------------------------------------------------------

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

------------------------------------------------------------------------

Whereas Niederest (1999) concentrates on browser types as a critical factor in 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 screen size were on the increase.

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 screens is 595 (w) x 295 (h) pixels.

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 top” navigation aids for each 640 x 480 pixels.

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 site at http://www.uga.edu/design/, also support this approach, which they call “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).

In Creating Killer Websites, however, David Siegel (1997) presents a powerful 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 user’s 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 firmly rejected by HTML-oriented, “second-generation” website designers like Nielsen.

A third-generation site is wrought by design, not technological competence. Third-generation sites give visitors a complete experience, from entry to exit (p. 15).

Criteria for website design

Using a development research method for site design requires the generation of criteria. Nielsen’s (2000) and Lynch and Horton’s (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 C’s of Webservice Design” (DeSimone and McRae 2000), The Georgia Web Group from the University of Georgia suggest these seven criteria:

Comprehensiveness - Complete institutional coverage with respect to organization and functions as provided at the closest possible point of knowledge.

Currentness - Accuracy of static information enhanced by the currentness of changing information.

Client-Orientation - Responsiveness to requests from the viewing audience by providing e-mail connections.

Clarity over Coolness - Simplicity of page design and directness of hyperlink pathways take precedence over visual techniques that clutter or compromise presentation.

Courtesy over Coolness - The length of time required for a page to load useful information is reasonable.

Compatibility without Compromise - Sensitivity to and support of different browser environments.

Cross-Linking and Validation - Multiple access paths to the same information with a method in place to check the validity of site-wide links.

As for criteria to be used in website redesign, a University of Delaware Web design team set specific goals for the refreshment of their own university website. The criteria, available at http://www.udel.edu/webmedia/goals.html, are:

Goals of the Web Refreshment

* Easier to navigate

* Easier to maintain

* More customer-oriented

* More compelling, more interesting, more fun

* Representative of an appropriate level of UD technology

* Simple, clean, no information overload

* Clearly identified as UD; clearly representative of UD in spirit and style

* More intelligent pages and navigation help (team 2000)

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, “usability rules the Web” (p. 9).

His book might be grossly summarized as defining the main characteristics of usability: speed, simplicity, easy navigation, a user perspective, scanning-oriented 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.

Site design model

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):

1. Site definition and planning

2. Information architecture

3. Site design

4. Site construction

5. Site marketing

6. Tracking, evaluation, and maintenance

In the first stage, site definition and planning, the developer must collect details on production, technology, web server support, and budgeting. Next, in information 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 they are still viable.

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 user’s flow of thought to remain uninterrupted (i.e., maximum time lag for page change)

lag of 10 sec is limit for keeping users attention focussed on dialog/task without turning to another task (i.e., maximum time lag for home page or object download)

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 times at common connection rates (p. 48):

response times table of page sizes

1 sec 10 sec

modem 2 KB 34 KB

ISDN 8 KB 150 KB

T1 100 KB 2 MB

Therefore, to conform to Miller’s 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 broadband technologies become more common, this standard will change.

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. Nielsen’s 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, secondary, tertiary colors; or complementary, split complementary, analogous colors; or 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 for reducing file size,

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, and by not using all caps.

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 good for 7 purposes:

• showing continuity in transitions – when one object is shown in two or more states, an animated change is better than an instantaneous one

• indicating dimensionality in transitions –as in flipping book pages back and forth for example, or zooming

• illustrating change over time – as in the deforestation of a rain forest

• 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

• enriching graphical representations – such as illustrating an action

• visualizing three-dimensional structures to show that it has dimensions

• attracting attention – but for a key heading or information, a one-time, non-looping animation is best (pp. 143-149)

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). These authors make the following recommendations:

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).

When names are used as links, they should be connected to a biographical information rather than open a window for e-mail, since the latter violates user expectations (Nielsen, p. 66).

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 is perceived. Thus, good page design is critical. An amateurish or sloppy page, or typing errors, portrays an amateurish or sloppy company. Another way to establish credibility in the age of spamming, is to give a clear explanation as to how sensitive data provided by the user will be used.

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 user’s 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:

1 Divide your content into logical units

2 Establish a hierarchy of importance among the units

3 Use the hierarchy to structure the relations among units

4 Build a site that closely follows your information structure

5 Analyze the functional and aesthetic success of your system

Dividing content into logical units means chunking information for cognitive, 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 subtitles linked to prose on separate pages (p. 112).

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 links to pages users frequently go to.

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 with search boxes.

A Writing Style for the Web

Since reading from a screen is 25% slower than from paper (Nielsen 2000, p. 101), users tend to scan, and require more explicit organization than with paper media. Four guidelines for online writing are:

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).

3. Use hypertext to split long information into multiple pages.

4. Hire Web editors since errors reduce credibility.

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 download to find out what they mean.

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 differentiate between them.

Video, audio, and photographic content

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 should be linked to larger versions. Niederest (1999) offers extensive information on 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 to a thumbnail size of 10% and then cropped to one-third size.

3D graphics should generally be avoided, especially in relation to navigation, because they are hard to read. So should virtual reality gimmicks, such as walk-through shopping malls (Nielsen 2000).

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 user’s 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). Nielsen’s criteria are stated in two basic rules: (a) have a structure, and (b) make it reflect user’s view of the organization (products, tasks), not the organization's view (departments, etc.) (p. 198).

Each page should give the following information (Lynch and Horton 1999, p. 12-13):

Who? (who is speaking?)

What? (Clear titles)

When? (timestamps)

Where? (institutional connection & homepage link)

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 suggest use of buttonbars.

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:

Where am I? – relative to Web as whole, and relative to site (p. 189)

Where have I been? – do not change standard link colors (p. 191)

Where can I go? – embedded links (underlined text), structural links

(tabs, site), & associative links (see alsos) (p. 195)

Nielsen (2000), himself, prefers a “breadcrumbs” (p. 206) navigation support 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. Other methods to reduce navigational clutter are (p. 221):

Aggregation – showing a single unit that represents a collection of smaller ones

Summarization – abstracts, reduced size images

Filtering – show only things others have found useful

Truncation – Cut off all but initial information and add “More” button

Example representations – just show one or two items, not all

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 pluses and minuses of using metaphors (p. 180).

Site components

The Web sets the standard in site components as well. Lynch and Horton (1999) list these (p. 36-37):

home pages - functions: posting news, menu, audience segregation paths, splash screens (risky, except for attracting aesthetic users)

sub-menu pages (& alt homepage) - often used for returnee users

resource lists & related sites pages

table of contents, indexes, site map pages - site maps have limitations and costly to keep up to date

What’s new pages

Search features

Contact information and user feedback - including phone, fax, snail mail addresses, and maybe, maps, travel directions, parking etc.

bibliographies & appendixes

FAQ pages

Custom Server error pages

Nielsen’s (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. He encourages the use of deep links, as in e-commerce affiliates programs in which 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). Nielsen’s 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).

Applets. Functionality Applets are mini applications in their own, such as 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 non-browser window devoid of navigation controls.

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 user’s 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 user’s 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-Lee’s 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 comment on other pages.

Definitions

Web Site. "A set of linked documents with shared attributes, such as related topics, a similar design, or a shared purpose" (Hanscom, Diezel et al. 2000, p. 95).

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 file or embedded in Web page (Nielsen 2000, p. 81).

Quicktime. A system extension developed by Apple that allows audio and video clips to be viewed by computers (Niederest 1999, p. 351).

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 compressing images with flat colors (Niederest 1999, p. 265).

Frames. Methods of dividing a browser into subwindows that can display separate HTML documents in each (Niederest 1999, p. 206).

Link titles. Short explanations that pop up when a mouse is moved over a link (Nielsen 2000, p. 60).

Java Applets. Self-contained, mini-executable programs embedded in a web page written in Java, an object-oriented programming language developed by Sun Microsystems (Niederest 1999, pp. 370-371).

Subsites. Content-related pages within a site that are structured like a separate site in themselves (Nielsen 2000, p. 222).

Flash. A ground-breaking multimedia format developed by Macromedia that allows animation, interactive graphics, audio, and video with small file sizes (Niederest 1999, p. 359).

Javascript. “A client-side scripting language that adds interactivity and conditional behavior to web pages" (Niederest 1999, p. 579).

Hypertext Markup Language (HTML). A language using special instructions (tags) to tell a browser how to display a web page (Niederest 1999, p. 67).

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 respond to the user (Niederest 1999, p. 429).

Extensible Markup Language (XML). A markup language that allow complex information transactions on the internet. Whereas HTML is good at sending content to a browser, XML is good at sending information to other devices, such as printers (Niederest 1999, p. 445).

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 Horton 1999, p. 119).

REFERENCES

Browserwatch (2001). Browser watch. Internet.com. http://browserwatch.internet.com/ (10 Feb. 2001).

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.

Niederest, J. (1999). Web design in a nutshell. Sebastopol, CA, O’Rielly.

Nielsen, J. (2000). Designing web usability: The practice of simplicity. Indianapolis, IN, New Riders.

Siegel, D. (1997). Creating killer websites. Indianapolis, IN, Hayden Books.

University of Delaware Design Team. (2000). UD website refreshment. University of Delaware. http://www.udel.edu/webmedia/goals.html (3 Jan. 2001).

Weinman, L. (2000). Designing web graphics. Indianapolis, IN, New Riders Publishing.