Site design and structure

The structures created by designers for web sites will vary greatly according to their audience and the site's purpose, but we can make some general observations about approaches to site design and structure and their influence on consumers. For example, Rosen and Purinton (2004) have assessed the design factors which influence a consumer (based on questionnaires of a group of students). They believe there are some basic factors that determine the effectiveness of an e-commerce site. They group these factors as follows:

• Coherence - simplicity of design, easy to read, use of categories (for browsing products or topics), absence of information overload, adequate font size, uncrowded presentation;

• Complexity - different categories of text;

• Legibility - use of 'mini home page' on every subsequent page, same menu on every page, site map.

You can see that these authors suggest that simplicity in design is important. Another example of research into web site design factors supports the importance of design. Fogg et al. (2003) asked students to review sites to assess the credibility of different suppliers based on the web site design. They considered these factors most important:

However, it should be borne in mind that such generalisations can be misleading based on the methodology used. Reported behaviour (e.g. through questionnaires or focus groups) may be quite different from actual observed behaviour. Leading e-retail sites (for example and and many media sites typically have a large amount of information and navigation choices available on-screen since the site designers know from testing alternative designs that consumers are quite capable of finding content relevant to them and that a wider choice of links means that the user can find the information they need without clicking through a hierarchy. When performing a real-life product search, in-depth information on the products and reviews of the product are important in making the product decision and are one of the benefits that online channels can give. Although design look is top of the list of factors presented by Fogg et al. (2003), you can see that many of the other factors are based on the quality of information.

In the following coverage, we will review the general factors which designers consider in designing the style, organisation and navigation schemes for the site.

Site style

An effective web site design will have a style that is communicated through use of colour, images, typography and layout. This should support the way a product is positioned or its brand.

Site personality

The style elements can be combined to develop a personality for a site.

We could describe a site's personality in the same way we can describe people, such as 'formal' or 'fun'. This personality has to be consistent with the needs of the target audience (Figure 7.9). A business audience often requires detailed information and prefers an information-intensive style such as that of the Cisco site (Figure 7.12) (

Design look

Information design/structure

Information focus

Company motive

Usefulness of information

Accuracy of information

Name recognition and reputation


Bias of information

Tone of the writing

Identity of site sponsor

Functionality of site

Customer service

Past experience with site

Information clarity

Performance on a test



46.1% 28.5% 25.1% 15.5% 14.8% 14.3% 14.1% 13.8% 11.6% 9.0% 8.8% 8.6% 6.4% 4.6% 3.7% 3.6% 3.6% 3.4%

A consumer site is usually more graphically intensive. Before the designers pass on their creative designs to developers, they also need to consider the constraints on the user experience, such as screen resolution and colour depth, browser used and download speed.

£] ffe Internet

Figure 7.9 A personality that appeals to a broad audience at

£] ffe Internet

Figure 7.9 A personality that appeals to a broad audience at

Graphic design

Graphic design of web sites represents a challenge since designers of web sites are severely constrained by a number of factors:

• The speed of downloading graphics - designers need to allow for home users who view sites using a slow modem across a phone line and who are unlikely to wait minutes to view a web site.

• The screen resolutions of the computer - designing for different screen resolutions is necessary, since some users with laptops may be operating at a low resolution such as 640 by 480 pixels, the majority at a resolution of 800 by 600 pixels, and a few at higher resolutions of 1064 by 768 pixels or greater.

• The number of colours on screen - some users may have monitors capable of displaying 16 million colours giving photo-realism, while other may have only 256 colours.

• The type of web browser used - different browsers such as Microsoft Internet Explorer and Netscape Navigator and different versions of browsers such as version 4.0 or 5.0 may display graphics or text slightly differently or may support different plug-ins (see the section in Chapter 9 on testing).

As a result of these constraints, the design of web sites is a constant compromise between what looks visually appealing and modern and what works for the older browsers, with slower connections. This is often referred to as the 'lowest common

Information organisation schemes

The structure chosen to group and categorise information.

denominator problem' since this is what the designer must do - design for the old browsers, using slow links and low screen resolutions. One method for avoiding the 'lowest common denominator problem' is to offer the user a 'high-tech' or 'low-tech' choice: one for users with fast connections and high screen resolutions, and another for users who do not have these. This facility is mainly seen offered on sites produced by large companies since it requires more investment to effectively duplicate the site.

Despite these constraints, graphic design is important in determining the feel or character of a site. The graphic design can help shape the user's experience of a site and should be consistent with the brand involved.

Site organisation

In their book Information Architecture for the World Wide Web, Rosenfeld and Morville (2002) identify several different information organisation schemes. These can be applied for different aspects of e-commerce sites, from the whole site through to different parts of the site.

Rosenfeld and Morville (2002) identify the following information organisation schemes:

1 Exact. Here information can be naturally indexed. If we take the example of books, these can be alphabetical, by author or title; chronological - by date; or for travel books, for example, geographical - by place. Information on an e-commerce site may be presented alphabetically, but it is not suitable for browsing.

2 Ambiguous. Here the information requires classification, again taking the examples of books, the Dewey Decimal System is an ambiguous classification scheme since the librarians classify books into arbitrary categories. Such an approach is common on an e-commerce site since products and services can be classified in different ways. Other ambiguous information organisation schemes that are commonly used on web sites are where content is broken down by topic, by task or by audience. The use of metaphors is also common, a metaphor being where the web site corresponds to a familiar real-world situation. The Microsoft Windows Explorer, where information is grouped according to Folders, Files and Trash is an example of a real-world metaphor. The use of the shopping basket metaphor is widespread within e-commerce sites. It should be noted though that Nielsen (2000b) believes that metaphors can be confusing if the metaphor isn't understood immediately or is misinterpreted.

3 Hybrid. Here there will be a mixture of organisation schemes, both exact and ambiguous.

Rosenfeld and Morville (2002) point out that using different approaches is common on web sites, but this can lead to confusion, because the user is not clear what mental model is being followed. We can say that it is probably best to minimise the number of information organisation schemes.

Site navigation scheme

Tools provided to the user to move between different information on a web site.


Flow describes how easy it is for users of a site to move between the different pages of content of the site.

Site navigation schemes

Devising a site that is easy to use is critically dependent on the design of the site navigation scheme. Hoffman and Novak (1997) and many subsequent studies (e.g. Rettie, 2001, Smith and Sivakumar, 2004) have stressed the importance of the concept of flow in governing site usability. The concept of 'flow' was first brought to prominence by Mihaly Csikszentmihalyi, a psychology professor at the University of Chicago. In his book, Flow: The Psychology of Optimal Experience, he explains his theory that people are most happy when they are in a state of flow - a Zen-like state of total oneness with the activity at hand. In an online marketing context, 'Flow' essentially describes how easy it is for the users to find the information or experiences they need as they move from one page of the site to the next, but it also includes other interactions such as filling in on-screen forms. Rettie (2001) has suggested that the quality of navigation is one of the prerequisites for flow, although other factors are also important. They include: quick download time, alternative versions, auto-completion of forms, opportunities for interaction, navigation which creates choices, predictable navigation for control and segmenting content by Internet experience.

It can be suggested that there are three important aspects to a site that is easy to navigate. These are:

1 Consistency. The site will be easier to navigate if the user is presented with a consistent user interface when viewing the different parts of the site. For example, if the menu options in the support section of the site are on the left side of the screen, then they should also be on the left when the user moves to the 'news section' of the site.

2 Simplicity. Sites are easier to navigate if there are limited numbers of options. It is usually suggested that two or possibly three levels of menu are the most that are desirable. For example, there may be main menu options at the left of the screen that take the user to the different parts of the site, and at the bottom of the screen there will be specific menu options that refer to that part of the site. (Menus in this form are often referred to as 'nested'.)

3 Context. Context is the use of 'signposts' to indicate to users where they are located within the site - in other words to reassure users that they are not 'lost'. To help with this, the web site designer should use particular text or colour to indicate to users which part of the site they are currently using. Context can be provided by the use of JavaScript 'rollovers', where the colour of the menu option changes when the user positions the mouse over the menu option and then changes again when the menu

NaVigation option is selected. Many sites also have a site-map option that shows the layout and

Navigation describes content of the whole site so the user can understand its structure. When using a well-

how easy it is to find designed site it should not be necessary to refer to such a map regularly.

and move between different information on Most navigation systems are based upon a hierarchical site structure. When creating a web site. It is . . . . . . . .

governed by menu the structure, designers have to compromise between the two approaches shown in arrangements, site Figure 7.10. The narrow and deep approach has the benefit of fewer choices on each structure and the page, making it easier for the user to make their selection, but more clicks are required to layout of individual pages. reach a particular piece of information. The broad and shallow approach requires fewer clicks to reach the same piece of information, but the design of the screen potentially

NaVig°ati()nd becomes cluttered. Figures 7.10(a) and 7.11 depict the narrow and deep approach and

Fewer 'ch'oices'more Figures 7.10(b) and 7.12 the broad and shallow approach. Note that in these cases the clicks to reach required approaches are appropriate for both non-technical and technical audiences. A rule of content. thumb is that site designers should ensure it only takes three clicks to reach any piece of

Broad and shallow information on a site. This implies the use of a broad and shallow approach on most

.navigation large sites. Lynch and Horton (1999) recommend a broad and shallow approach and

More choices, fewer note that designers should not conceive of a single home page where customers arrive rodent3 reac require on the site, but of different home pages according to different audience types. Each of the pages in the second row of Figure 7.10(b) could be thought of as an example of a home page which the visitors can bookmark if the page appeals to them. Nielsen

Jakob Nielsens teriri (2000b) points out that many users will not arrive on the home page, but may be for a user arriving at a site deep within its referred from another site or according to a print or TV advert to a particular page such structure. as He calls this process 'deep linking' and site designers should ensure that navigation and context are appropriate for users arriving on these pages.

As well as compromises on depth of links within a site it is also necessary to compromise on the amount of space devoted to menus. Nielsen (1999) points out that some sites devote so much space to navigation bars that the space available for content is

Figure 7.10 (a) Narrow and deep and (b) broad and shallow organisation schemes

Figure 7.10 (a) Narrow and deep and (b) broad and shallow organisation schemes"/>
Figure 7.11 Narrow and deep organisation scheme for consumers at Sainsbury's online groceries site (

Figure 7.12 Broad and shallow organisation scheme and professional style at

Done 1 fjjj Internet

Figure 7.12 Broad and shallow organisation scheme and professional style at limited. Nielsen (1999) suggests that the designer of navigation systems should consider the following information that a site user wants to know:

• Where am I? The user needs to know where they are on the site and this can be indicated by highlighting the current location and clear titling of pages. This can be considered as context. Consistency of menu locations on different pages is also required to aid cognition. Users also need to know where they are on the web. This can be indicated by a logo, which by convention is at the top or top left of a site.

• Where have I been? This is difficult to indicate on a site, but for task-oriented activities such as purchasing a product it can show the user that they are at the nth stage of an operation such as making a purchase.

• Where do I want to go? This is the main navigation system which gives options for future operations.

To answer these questions, clear succinct labelling is required. Widely used standards such as Home, Main page, Search, Find, Browse, FAQ, Help and About Us are preferable. But for other particular labels it is useful to have what Rosenfeld and Morville (2002) call 'scope notes' - an additional explanation. These authors also argue against the use of iconic labels or pictures without corresponding text since they are open to misinterpretation and take longer to process.

Since using the navigation system may not enable the user to find the information they want rapidly, alternatives have to be provided by the site designers. These alternatives include search, advanced search, browse and site map facilities. ( illustrates these features well.

Menu options

Designing and creating the menus to support navigation present several options, and these are briefly described here. The main options are the following.

1 Text menus, buttons or images

The site user can select menus by clicking on different objects. They can click on a basic text hyperlink, underlined in blue, by default. It should be noted that these will be of different sizes according to the size the user has selected to display the text. The use of text menus only may make a site look primitive and reduce its graphic appeal. Rectangular or oval buttons can be used to highlight menu options more distinctly. Images can also be used to show menu options. For instance, customer service could be denoted by a picture of a helpdesk. Whilst these are graphically appealing it may not be obvious that they are menu options until the user positions the mouse over them. A combination of text menu options and either buttons or images is usually the best compromise. This way users have the visual appeal of buttons or images, but also the faster option of text - they can select these menus if they are waiting for graphical elements to load, or if the images are turned off in the web browser. However, icons should have the advantage that their understanding is not language-dependent.

2 Rollovers

'Rollover' is the term used to describe colour changes - where the colour of the menu option changes when the user positions the mouse over the menu option and then changes again when the menu option is selected. Rollovers are useful in that they help achieve the context referred to in the previous section, by highlighting the area of the site the user is in.

3 Positioning

Menus can be positioned at any of the edges of the screen, with left, bottom or top being conventional for Western cultures. The main design aim is to keep the position consistent between different parts of the site.

4 Frames

Frames are a feature of HTML which enable menus to be positioned at one side of the screen in a small area (frame) while the content of the page is displayed in the main frame. Frames have their advocates and detractors, but they are still used on some sites (e.g. which require particular functionality. Detractors point to poor display speed, difficulties in indexing content in search engines and inflexibility on positioning.

5 Number of levels

In a hierarchical structure there could be as many as ten different levels, but for simplicity it is normal to try and achieve a site structure with a nesting level of four or fewer. Even in an electronic commerce shopping site with 20,000 products it should be possible to select a product at four menu levels. For example:


Psychologists recommend having a limited number of choices within each menu. If a menu has more than seven, it is probably necessary to add another level to the hierarchy to accommodate the extra choices.

Graphic Design for Beginners

Graphic Design for Beginners

Attention Future Graphic Designers... Discover Critical Information You Need to Know if You Want to Become an Elite Graphic Designers. Do You Know Exactly What Companies and Clients Are Looking for in a Graphics Designer?

Get My Free Ebook

Post a comment