Principles of Effective Web Design

Transcription

1 Principles of Effective Web Design Presented at Learning for elearning Talkfest Hamilton, New Zealand Abstract Grant Warren Sherson August 2002 The use of web pages to support and deliver learning is founded on an understanding of effective web site design where even small changes can have a large effect on quality. This presentation is a summary of existing views of best practice and identifies key principles based on human computer interface and web design guidelines. Applying these principles can help turn a website into a more effective web based communication channel whether the material is developed using a web editor or a within a learning management system. Introduction As an ex-schoolteacher I have always been interested in the importance of effective communication. My specific interest in Human Computer Interface design goes back to 1986 when I received an Apple Software Development Award and began software development as a hobby. Through involvement in another Apple project in 1989 I began developing HyperCard software. My project involved the development of an interactive adventure game for schools, incorporating Marae protocols, called "The Adventure of the Lost Tiki". The development process included considerable peer review and extensive reading about human-computer interface design. (figure 1). On the basis of this HyperCard experience I subsequently developed and published a further nine internationally distributed software packages for education. In each case I carefully considered interface and usability issues.

2 Figure 1. Some of the software titles developed in HyperCard. Over subsequent years I was involved in developing computer animation, touchscreen digital video projects, and CD-I (Compact Disk Interactive) development, all of which required an understanding of human-computer interface design built up over that time. I was fortunate to have spent so much time looking at principles of navigation, layout, and interaction before I encountered the Internet or Web pages. Having a software development background and a teaching background provided a good foundation for Web development and I was involved in developing a wide range of on-line activity when I started at UCOL (then Manawatu Polytechnic) including fully on-line courses. This experience led to an invitation to present a paper at the national Technology for Learning '98 conference at Massey University. The focus of that paper was the development of an on-line environment suitable for learning. As part of a Victoria University of Wellington, Master of Communications degree I also researched and wrote a paper on Semiotics of Web Design, that comments on communication components in human-computer interface design. The theme of the paper is the art of quality user interface design, which is seemingly forgotten with the advent of browseable web pages. Education and the Internet The field of education is entering an information world that De Diana and Aroyo (1999) term educational infospace where networked education with all related processes is taking place. According to a New Zealand Education Review Office (ERO) report (1997), change driven by information technology is having a significant impact on every aspect of life and is an increasingly critical issue for education. Page 2 of 8

3 The importance of the Internet to New Zealand education can be identified by the high number of schools and children with Internet access. Ninety-nine percent of secondary schools in New Zealand have some form of access to the Internet in the school, and eightynine percent of lower secondary students, enrolled in schools that use computers, are able to access and the Internet (ERO report, 2000). The adoption of the Internet has been quick and in many ways too quick. One difficulty arising from the rapid growth of the Internet is that many websites have been developed with a focus on the needs of the institution rather than the needs of the users. The institutional goals have often been very different from what is actually needed on its website. In the rush to establish a cyberplace in cyberspace some of the design work has been left to the technical or academic staff who do not have the design skills to build an effective website interface. The site is technically sound or contains quality content but the user interface is weak. As George puts it (1998), the user interface is often (especially in academic exercises) an afterthought. Research When I needed to come up with a research topic for my Masters Degree I decided to look into the issues of best practice design in relation to website development. The objective of the research was to collect and collate existing views of best practice in web design and add value by identifying key principles. There were three areas that the research focussed on. Human Computer Interface guidelines Internet Marketing guidelines Web Design guidelines. Human Computer Interface Most computer-based activity involves aspects of communication between humans and computers. Although seemingly simple, the user interface has to create a virtual world for the user where they feel comfortable, engaged, and in control. User interface areas that can be controlled by website designers to create this virtual reality include the way the user is expected to move from place to place within the website (navigation), how well the site assists them to achieve their goals (usability), and how effectively the site communicates visually (semiotics). Page 3 of 8

4 Navigation The concept of navigating within a website is a little misleading. What actually happens when a link is clicked is that the web page referred to in that link is transferred from a computer somewhere on the Internet to the computer the user is operating. The user is not moving around in a website, but is getting various parts (web pages) of the site to appear on the computer they are sitting at. Nevertheless the use of a navigation metaphor does provide a concrete view of a rather abstract concept. The perceived ability to move around in virtual space requires familiarity, signposts, and landmarks in a similar way to how they are needed for a physical space. When designers get caught up in the look of a site and overlook the navigation needs the user can begin to feel lost and go somewhere else. One research report on e-commerce found that 39 percent of test shoppers failed in their buying attempts because sites were too difficult to navigate (Speigel, 1999). If over a third of the people viewing a website don t even find what they are looking for, an assumption can be made that good navigation is a key requirement of successful web design. As Lohse (1999) says, No amount of sparkle in the presentation of products can overcome a site design with poor navigation features. Usability Usability is a concept involving the consideration of who the users are and providing help for them to achieve their goals. Sweden Canada Link (2001) put it this way: Usability is about making the visit to your website as effective as possible for the users. The focus of usability is on enabling users, whatever their interests and needs, by removing barriers and making the system as easy to use as possible. Abrahamson (2000) suggests that, Prospective students who find a Web site disappointing are quick to associate their e-experience with the quality and functioning of the institution itself and may terminate all inquiries about the college. Semiotics Semiotics can be considered as the study (or theory) of signs. Page 4 of 8

5 As computer systems have become more capable and images more prevalent, quality graphic design has enabled systems to achieve their potential to communicate (Marcus, 1995, p. 425). One example of the application of semiotics is the way that communication is improved by the use of metaphors. Some research has shown that the application of metaphors can improve the speed of learning a system, even with naive users, by making it easier to preserve a mental model of what is happening (van der Veer 1990, p. 146; Gardiner 1987, p. 229). Basically the semiotics of a web page includes the way that the text, graphics and layout communicate to the user. After all, most visitors come to a website to obtain information and not to admire the fancy design (Sweden Canada Link, 2001). Internet Marketing All web pages, including on-line course pages are part of the marketing process of any institution. Recent marketing trends focus on developing a relationship with current and potential clients. Boon and Kurtz (1999) put it this way: Relationship marketing, involves long-term, value-added relationships developed over time with customers and suppliers. (p. 14) Web Design Web design is an umbrella term for a range of areas. The focus of web design is comparable to semiotics in that it concentrates on the visual message but it also relates to the hidden message such as the way that the eyes are drawn to particular colours or blank spaces and follow the contour of graphics. Web design has a key role, similar to the way that posters are designed to motivate a reader, improve readability, and to draw the reader s eye to the key content. Web design issues involve improving the clarity and form more than its intended function. Strategies for web design include guidelines in areas such as graphic design, typography, and layout. Graphic Design and Typography The book Graphics: A New Zealand Approach, states that, excessive or inappropriate use of colour can defeat its purpose and turn the viewer away (Coulson 1998, p 9). On a web Page 5 of 8

6 design page the same sentiment is echoed: Also, too much color on a web page can be distracting and counterproductive (Grantastic Designs, 2001). Any aspect of the look of a page that encourages the viewer and simplifies reading has a role to play in web design. Layout Layout is another design issue for quality website development and simplicity seems to be one of the keys. Carter (1999) puts it this way, but the important thing learned by GUI designers from the Web is that screens do not have to be complicated to be useful - if the form solves a need and is easy to use, then people will use it. Simple layout requirements such as white space and composition are based on the way people react to visual stimulus that can motivate or discourage interest. White space provides a visual balance for successful design (Coulson, 1998, p. 97) and balanced composition improves the visual attraction of a page (Swann, 1989, p. 65). The Results Documents containing human computer interface guidelines, Internet marketing guidelines, and web design guidelines were reviewed to identify assessments of best practice relating to the design of institution websites. From these documents close to 1,200 quotes were collected, collated using a database, and refined to identify key principles. Figure 2: Documents used to indicate best practice. The principles cover layout, navigation, users, site design, and content. Also developed as part of this research is a searchable on-line database containing the collected quotes that provides another useful resource for website developers. The first step in looking into this topic involved identifying existing research and opinion on interface design, marketing, and web design. Page 6 of 8

7 Locating this material involved Internet searches, journal searches, book searches, and the searching of on-line journal databases (see Figure 2). The various searches looked for content that mentioned graphic user interface design, GUI design, software design, user interface design, usability, usability guidelines, internet marketing, web marketing, marketing education, graphic design, web development, web development guidelines, website design, principles of web design, web page evaluation, and web navigation. Each of the several hundred resources was skimmed to identify its potential. Web page documents showing potential were saved on computer. Where possible books and journals were borrowed from libraries or else sections were photocopied to allow for subsequent analysis. Each of these collated documents was carefully read and content that was not relevant to the principles of web site design was removed. The result was a collection of quotes that contained relevant principles. Each of these quote collections were further analysed, and each quote was assigned to one or more categories. The resultant database was converted to a browser based (searchable) version published on the Internet. The principles Each quote was further analysed to identify common principles. The principles had to be general enough to encompass quotes with a similar meaning and yet specific enough to be able to have significant value. The list of principles identifies keys for development, design, and marketing. Bibliography Abrahamson, T. (2000, Summer). Life and death on the Internet: To web or not to web is no longer a question. Journal of College Admission, 168, p. 6. Boon, L. & Kurtz, D. (1999). Contemporary marketing. Orlando FL: The Dryden Press. Carter, P. (1999). A brief history of GUI. [On-Line] Available URL: (Accessed, May 2001). Coulson, K. (1998). Graphics: A New Zealand approach. Auckland, NZ: Addison Wesley Longman New Zealand Ltd. Page 7 of 8

8 De Diana, I. & Aroyo, L. (n.d.). Knowledge management for networked learning environments: applying intelligent agents. [On-Line] Available URL: (Accessed, May 2001). Education Review Office Report. (1997, October). The use of information technology in schools. [On-Line] Available URL: (Accessed, May 2001). Education Review Office Report. (2000, June). The implementation of information and communications technologies (ICT) in New Zealand schools. [On-Line] Available URL: (Accessed, May 2001). Gardiner, M. (ed.). (1987). Applying cognitive psychology to user-interface design. Portsmouth: Wiley. George, S. (1998). User interface design considerations and guidelines. [On-Line] Available URL: (Accessed April 2001). Grantastic Designs. (2001). Print design vs. web page design - part 1. [On-line] Available URL: (Accessed April 2001). Lohse, G. (1999, December). Internet retail store design: How the user interface influences traffic and sales. Journal of Computer-Mediated Communication, 5 (2). [On-Line] Available URL: (Accessed, May 2001). Marcus, A. (1995). Principles of effective visual communication for graphical user interface design. In Baecker, M., Grudin, J., & Buxton, W. (Eds.) Readings in human computer interaction: Toward the year 2000 (2nd ed.). Speigel, R. (1999, October). Mistakes could cost e-tailers $6 billion this holiday season. E- Commerce Times. [On-Line] Available URL: (Accessed, May, 2001). Sweden Canada Link, The. (2001). Website audits and accessibility. [On-line] Available URL: (Accessed, December 2001). van der Veer, G. (1990). Metaphors and metacommunication in mental models. In Cognitive ergonomics : understanding, learning and designing human-computer interaction. P. Falzon (Ed.) Suffolk: Edmunster Press. Page 8 of 8