Alternative text sizes can be used to capture the user’s attention (Figure 6.9).
Highlighting in bold or the use of a bright color can have the same effect.
Color
Inexperienced designers often make the mistake of designing Web pages using many different colors. It results in what is known as the “Christmas tree effect.”
Good design should not rely primarily on the use of different colors. Usually it is better to design in black and white to focus on layout and other features. The color can be built in where needed afterwards. When more than four or five colors are used in any Web page, there is a tendency to increase the cognitive load on the user.
A color scheme should be chosen that adds value to the design but does not become the overriding feature. Certain combinations of colors go well together; others contrast and are not aesthetically pleasing to the eye. Blue and dull white go together well, but purple and blue do not. Background and fore- ground colors need to be carefully chosen so that the text is easy to read. The background should not be too bright, such as a bright white, because it can strain the eye, but a dull white is a common background because black text shows up well against it.
Graphics and Use of Icons
Icons are used extensively in Web page design for a number of reasons. An icon can actually incorporate and convey a lot of information. The designer can use location (on the screen), color, space between icons, and the size, interior, and shape of icons to convey information to the user.
According to Lodding [3], three types of icons can be distinguished by their design and function (Table 6.2). An icon relates to an idea or concept on the basis of resemblance (picture), by analogy (symbol), or by being selected from a previously defined and learned group of arbitrarily designed images (sign). An iconic system is a structured set of related icons, and an iconic sen- tence is a spatial arrangement of icons from an iconic system. A visual language is a set of iconic sentences constructed with syntax and semantics [4].
7ways to
increase
your
Some problems and challenges have been documented in terms of iconic systems. Not all tasks can be easily represented by an icon. Ideally, the purpose of an icon should be communicated intuitively. Searching is an action for which it is difficult to design an icon; some software packages use a torch (flash- light) for this function. When a large number of functions are represented in iconic form, the user may find it difficult to differentiate between the icons.
Metaphors
Metaphors have played a significant role in software design. Metaphors help us understand and experience one type of thing in terms of another and so help us relate to often difficult or abstract concepts. The abstract example of love is often described by the metaphor of a journey along a path and so we say things like “We are at a crossroads,” or “This relationship is a dead-end street” [5].
In the software world, the desktop metaphor has been the most notable.
Metaphors can be used at various levels of the interface. They can be a unifying model for the entire design or metaphors can be used at the icon level. Strong metaphors can make a system successful, but they are difficult to find. Erickson [6] provides a starting list of criteria for evaluation of metaphors and this list has been extended here:
• Amount of structure. If the metaphor has some potential for detail those aspects may be useful.
• Applicability of structure. How much of the metaphor is relevant to the problem?
• Representability (visual). Is the metaphor easy to represent?
• Suitability (obvious). A metaphor can satisfy all other criteria, but if it fails here it is not suitable.
• Extensibility. Do the metaphors have the potential to expand and grow?
• Conciseness. Are aspects of the metaphor likely to mislead?
Table 6.2 Icon Types
Design Function
Representational Picture
Abstract Symbol
Arbitrary Sign
• Directly manipulative. Making both actions and objects into features of the system that can be directly manipulated makes metaphor generali- zation difficult.
• Coverage. How much of the problem domain can be covered by the metaphor?
Navigation
A Web site is an information space that is divided into pages. The designer must provide a mechanism for navigating around the Web space. Hyperlinks are used to move from one page to another, but they are normally placed as menu items or on icons. Key words in the text can also be hyperlinks to connect to a page somewhere in the system. In a large Web site with many pages these links form a complex network of paths.
A Web site map (Figure 6.10) shows the relationship of the neighbor- hoods and pages and may even show the main links. Wherever the user is in the
Entry page
Core page
Exit tunnel
Exit page Neighborhood 1
Neighborhood 2
Neighborhood 3
Neighborhood 4
Help and FAQs
About the site
Figure 6.10 A simplified site map.
system, he or she should be able to return to the home page or the main page of a neighborhood and to the previous and next pages.
Form Design
A form consists of questions or prompts and text input boxes. Designing an effective form involves the following:
• Logical sequencing of questions and input boxes;
• The use of meaningful prompts or questions;
• Avoidance of jargon and abbreviations;
• Alignment of prompts and input boxes for ease of data entry;
• Providing the facility to make corrections and cancellations;
• Providing access to help menus to aid users in completing the form;
• Correctly sizing input boxes for viewing data;
• Minimizing keyboard input as much as possible;
• Using drop-down lists for restricted options;
• Providing validation of input;
• Providing informative error messages;
• Grouping related input boxes.
Input boxes should be left aligned and text can be displayed above the text input box or to the left and aligned to the right or left. If text prompts are aligned to the left, then big gaps might occur before the input box if there are long prompts in the group.
Figure 6.11 shows a design for a fill-in form. The prompts are aligned to the left and are not abbreviated. Essential input boxes are labeled “Required.”
The password must be input twice to check for user typing errors. The input boxes are left aligned to give a clean edge. There are several drop-down list boxes and radio buttons to minimize typing. The input boxes are logically ordered. The first three fields related to creating a personal ID and password are grouped and separated from the personal details. The register button is placed at the end of the form.
Evolution of Web Site Designs
The conventions used in the design of Web sites have undergone considerable evolution during the Web’s brief history. Siegel [7] refers to first-, second-, and third-generation Web sites to explain the improvements in design. It is worth- while explaining the features that characterize the three generations since no
Figure 6.11 An input form.
developer wants to put his or her name to a first- or second-generation design because they have design flaws.
First-generation sites were characterized by a simplistic functionality.
They tended to have text across the full width of the screen and in continuous paragraphs on one page. They had often been constructed by technical people whose main goal was to convey a simple message.
Second-generation sites took advantage of extensions to HTML. Images and graphics replaced some of the text and the pages were organized in simple hierarchies. If you surf the Web, you will find that many first- and second- generation sites are still available.
Design is a multifaceted concept with harmony and balance at its core.
Third-generation sites demonstrate quality of design. Technical features are not the overriding factors. Design is evident in the structure of the Web site, the navigation mechanisms, the metaphors used, and the detailed design and lay- out on each page. Few sites can be classed as third generation.
Site Structure
The structure of a third-generation site should consist of an entry point, a cen- tral area, and an exit point. The entry point to a site is like a front door to a house: it is a way in and provides an indication of what is to come without overloading the user. This page should play a leading role in presenting a company’s image and in the branding of the site. Importantly, it should load quickly, otherwise potential visitors will be lost. Initial pages in a Web site can also be used to highlight giveaways and competitions to get the user interacting with the organization. From the entry point the user may take an entry tunnel to the central area. These tunnels can be used to build anticipation or to pro- vide background information that may be useful later. However, entry tunnels are the exception rather than the norm.
The central area consists of one or more core pages. These direct the user to the various neighborhoods in the Web site. A balance needs to be struck on these pages between providing enough information to encourage the user to go further and avoiding information overload that could make the visitor leave the site.
The exit point should be clearly displayed. The user will be less likely to just leave the site by typing a URL if the way out is obvious. In addition, the exit point can also be used for gathering information on the Web surfer.
Third-generation sites are constantly changing so that surfers are lured back and their interest level remains high. Some developers argue that chang- ing a Web site on a monthly basis will have little effect on the number of visitors returning [7]. Changes on a weekly or even on a daily basis should have
a significant impact on the number of returning visitors. Building dynamic, interactive, and interesting Web sites requires that senior management put the Web site strategy high on the corporate agenda.
Design in Action
Many major companies have invested heavily in their Web sites. They have employed some of the most experienced Web designers to work on the applica- tions. This does not always mean that they have the best designed sites. All sites have weaknesses! In this section of the chapter some Web sites are reviewed and their strengths and weaknesses discussed. Remember these are major corporate initiatives and as such are large team efforts, so the individual designer should not feel daunted by these standards, but take comfort from the fact that even the best sites can be improved!
Microsoft’s Web site, as you would expect, consists of many functions and features. The home page (Figure 6.12) is clearly zoned with two menus along the top of the page. The right of the page is categorized for different users: business, developers, education, IT professionals, and so on. The main
Figure 6.12 Microsoft’s home page.
part of the page is dedicated to news and press releases. This can communicate special events, latest products, and trends. This area changes frequently and plays a role in showing visitors, including returning visitors, how dynamic the company is. In the top left corner is an icon for Internet Explorer. This must be one of the main reasons people visit the site, so by providing a link on the first page it creates a shortcut to the free download page.
Overall the page has a lot of white space and is simply laid out to pro- vide an uncluttered appearance. There are few graphics, which helps the page download quickly to the browser. In fact, the site is designed throughout for functionality and clarity with few graphics, simple text, and lots of white space.
Figure 6.13 shows the home page of esi, an electronic share information service. People can subscribe to the service for 5 pounds sterling per month.
The home page is clearly and simply designed with a menu on the left and login options across the screen. The prominent area below the title is dedicated to advertisements. A link provides a quick tour of the site, and the left side of the screen provides free market information. People may be attracted to the site because of the free information. There is plenty of white space and the pages from the site are generally fast to download.
Figure 6.13 The esi home page.
The Tate Gallery in England holds British and international art (Figure 6.14). The home page with a black background and a photograph of an exhibit provides an entrance to the site and sets an artistic tone. The next page provides menus to the neighborhoods in the site and also provides information about the organization and upcoming events. Around 8,000 works of art can be viewed online.
Evaluating the Web Site Design
Web site designs need to be evaluated. Prototypes can be developed that can be used to demonstrate the site to users. The main reasons for this are that even a team of designers can omit key requirements, develop inappropriate design themes, and need to fine-tune the detailed design features. Designers can improve their own designs to some extent, but at some point they need feedback from the users.
The evaluations can take a variety of forms. The designers can refer back to the requirements and check that they have been met in the design of the Web site. Each option or link on the Web site can be checked to determine if it has been correctly implemented.
Heuristic Evaluation
The Web site can be evaluated heuristically. Heuristic evaluation is a usability inspection method in which a group of experts in the field produces a list of usability problems in an interface [8]. Initially, this method was used to deter- mine usability features that deviated from accepted principles. Later work has extended the method to cover estimates of the severity of the problems. Nielsen and Phillips [9] have extended the method even further to cover estimates of actual user performance. They propose that the same method can be used for assessing system learnability. In this heuristic interface evaluation, the more expert evaluators that are used (up to 15), the more problems found [10]. On average, however, just five experts detected 75% of the usability problems with an interface, so this is seen as a cost-effective number. There are literally hundreds of individual usability heuristics, but they have been condensed into nine key usability heuristic principles by Nielsen and Molich [8]. These are listed next with an example of how the principle can be applied to Web site evaluation.
1. Design for simple interaction. A simple set of simple navigation paths through the Web site is desirable.
Figure 6.14 Three pages from the Tate Gallery site.
2. Use the terminology of the user. Avoid technical jargon and abbrevia- tions that are not obvious to the user.
3. Minimize user memory load. Provide adequate instructions whenever they are required.
4. Be consistent. Be consistent in terms used, color, and layout.
5. Provide feedback. When users have selected options or have completed forms, be sure to provide feedback.
6. Provide clearly marked exits. This is necessary so that the user knows how to return to the home page, find key pages, or exit altogether.
7. Prevent errors. Design a way to validate input and minimize input with choice boxes, radio buttons, and so on.
8. Provide shortcuts. For example, provide a shortcut to return to the home page.
9. Good error messages. When input is incorrect, inform the user of exactly what is required.
The advantages of having experts evaluate Web pages are that it is rela- tively inexpensive and can provide the developers with most of the weaknesses in the system, especially if three or four people have been used. The disad- vantages with the approach are that it may be difficult to find three or four usability experts with experience in Web design. Weaknesses may be identified without methods of correcting them, and the method may work better with standard designs rather than innovative designs that may be outside the experi- ence of the experts.
Evaluations With Users
Software can be evaluated with users in a number of ways depending on the goals of the evaluation and the stage the software is at in the systems develop- ment life cycle. The main ways to involve users in evaluation are discussed next.
Start by observing users using the system in the typical work environ- ment. This method would highlight ambiguities in the design and the major problems users face. Of course, this method is time consuming and requires a robust and completed system before it can be done.
You can also monitor users through software logging because details of which Web pages are accessed frequently or not accessed may highlight design problems. Another option is to obtain users’ opinions through interviews and questionnaires. Users can complete a questionnaire at the end of a trial session, answering questions that focus on satisfaction levels and subjective feelings in
relation to the design. User acceptance of a system from a subjective satisfaction perspective is an important measure of a system’s success. Although a system may be evaluated favorably on every performance measure such as speed and number of mistakes made, the system may not be used very much because of user dissatisfaction with the interface.
Experiments can be conducted to determine how well users perform when working with the Web site. A number of tasks are constructed to test key features of the system. Users attempt to complete the tasks and are monitored during the process. Data is gathered on the time taken to complete each task and the number of mistakes made. The data can then be analyzed to determine if the system can be amended to improve user performance.
An adequate sample size for an experiment is needed to effectively evalu- ate a software interface. Generally, the more users evaluating the system, the more reliable the results. However, practical problems are often associated with working with a large number of participants; this is especially true if users are required to have specialized skills or prerequisite knowledge.
Overall, design evaluation methods take a holistic approach. They attempt to evaluate the software designs in their entirety rather than one feature at a time. As DeSanctis, Snyder, and Poole [11] comment:
Feature-at-a-time evaluation is not only tedious to conduct, it is conceptu- ally inconsequential because “features” have the repeating composition problem; there are features within one feature (e.g., menus within menus, or icons within icons), making it difficult to isolate one system “feature”
from another.
They also add that because systems vary so much in the presentation of their features, information based on features alone makes comparison of systems vir- tually impossible.
Skills Required by Web Designers
HannaHodge is a design firm that avoids using recruitment firms and instead advertises positions itself by e-mail. One e-mail I received direct from Hanna- Hodge is shown here. It illustrates some of the skills required by Web designers.
This company is looking to attract someone with the ability to develop innova- tive designs and fit in with other employees in a relaxed, creative environment.
Of course, not all design companies are the same. Those that have contracts with large banks and blue chip companies often have a much more formal work environment and hence require people to fit into this.