Karin Schlegel (MDes)

Communication by Design

11 Lorenz Court

Athelstone SA 5076

karin@dove.net.au

Allan Christie

School of Physiotherapy

University of South Australia

Adelaide SA 5000

allan.christie@unisa.edu.au

Abstract

One of the most pressing issues faced by educators planning to deliver their educational materials on the World Wide Web is the question of how to structure them in a way that will support learning and how to visually represent this structure within the given limitations of the Web environment. Both structure and display have a great effect on the efficiency of a learning system and can be used to provide guidance to the learner: structural design can help learners develop a concept (or mental map) of the learning materials and interface design can make the organisation of these materials and their navigation more transparent and accessible.

Because the World Wide Web is as yet a very young medium for courseware delivery, educators are left with the task to develop their own methodologies for providing this type of guidance.

This paper will present EduWeb, a prototype educational Web site, that was developed to introduce educators to the Web as a learning environment and that exemplarises the use of structural design and visual display for providing guidance. The reasoning and methodologies used to create the site can act as a guideline for other educational sites.

1. Introduction

According to Norman (in Jonassen, 1989) and Alexander (1995) the essence of learning is to integrate new information into existing knowledge structures. In order to do this, learners will need to be able to relate to the knowledge structure they encounter and subsequently build a concept or mental map of it (Norman, 1995). It is this perception or mental map which then enables learners to match parts of their existing knowledge structure with the new one and begin the processes of integration and, hopefully, application.

The World Wide Web represents a learning paradigm which is different from the conventional classroom situation but similar to that of flexible learning (see Nunan, 1994): it gives learners the freedom of choice over the time, space, approach, pace and depth of learning but also makes them more directly responsible for their progress.

Accordingly, instructors can rely much less on the personal dynamics present in a classroom but, instead, have to focus more attention on the learning materials. To some degree, these have to take the role of the instructor in providing guidance to the learner. Moreover, the Web also represents a very dynamic and variable learning environment in which little can be taken for granted (see December and Randall, 1995: variables).

The design task posed by educational Web sites is thus twofold:

1. to structure and present the materials in a way that facilitates and encourages the learning process by providing a transparent mapping structure whose focus is on the contents, and

2. to present the materials in a way that offers enough flexibility to accommodate various learning styles (Nunan, 1994), levels of expertise (Carmel et al, 1992) and access variables (December and Randall, 1995) while at the same time encouraging not just a 'surfing' but a more immersive approach to the materials (Whalley, 1989; Lunenfeld, 1993; Alexander, 1995).

As described in Horn (1989), in hypertext environments the mental map or concept constructed of the information depends very much on the organisation and modularisation of the subject matter and the pathways taken through the information structure.

However, more than that, the ease of understanding of that structure depends to a large degree on the clarity and transparency of its visual representation (cf. Tufte, 1983 and 1990; Hartley, 1988; Marcus, 1992; Sano, 1996).

As a consequence, interface design is not just a pretty facade created as an afterthought but a discipline intimately intertwined with information design and equally important.

While there are various methods for providing guidance on the Web, ranging from on-line study guides, instructional design and guided tours to direct personal interaction, this project focuses on information- and interface design.

2. Objective

With more and more educational institutions entering the field of distance education and flexible delivery via the World Wide Web, there is a need for a unified on-line resource that helps educators understand not just the ins and outs of HTML (HyperText Markup Language) but also the nature of the medium, its structure and particulars and its limitations. This will then enable them to prepare their materials accordingly.

EduWeb at

http://www.netspot.unisa.edu.au/eduweb/

has been developed to provide such a unified resource to educators. It acts as a prototype educational site in two ways:

1. EduWeb's contents deal with four main aspects relevant to Web delivery: theory, practice, media and interaction.

The Theory section deals with issues such as Concepts in Learning, New Learning Technologies, Hypertext Concepts and Why the Web?, the Practice section with topics like Particulars of the Web, Designing a Web for Learning, Elements of Guidance and Building a Web: HTML. EduWeb's Media section tackles General Issues, Text, Graphics, Video and Sound and their respective applications and its Interaction section discusses options for Human-Machine and Human-Human Interaction and suggests a more profound involvement of the learner through Learner-Created Webs.

2. EduWeb also acts as a prototype solution for providing guidance by means of information- and interface design. Given its target audience, EduWeb does not contain tasks or assignments but rather allows self-paced interest-driven discovery without pressure. Visitors to EduWeb are interacting with the interface and its underlying structure and are thus experiencing guidance rather than reading about it. Accordingly, they have the opportunity to evaluate this solution for themselves.

As EduWeb's contents originate in a paper-based research report on design issues involved in delivering educational materials via the Web (Schlegel, 1995), the process described in this paper is directly applicable to the creation of other educational Web sites from existing content and its pages can be used as templates.

3. Design Philosophy

Given the very variable nature of the Web environment and the paradigm of flexible learning, EduWeb's main design philosophy is that of accessibility (cf. Fontaine, 1995)1.

Accessibility has different meanings in different contexts:

ï In terms of loading times, accessibility means short delays in the downloading of pages and thus a minimum of disruption of the 'learning flow',

ï in terms of access modes, it entails the catering for a variety of hard- and software constellations, modem transfer speeds and user preference settings,

ï with regards to navigation, it results in the need to cover different approaches to browsing (Carmel et al, 1992) and a way to overcome the limitations of the screen dimensions without getting the learner 'lost in cyberspace',

ï with respect to interface design it necessitates the virtues of clear, consistent and transparent design (cf. Edwards et al., 1989; Cooper, 1995), and

ï in terms of screen design the use of visual redundancy to cover differences in display capabilities (cf. Galitz, 1993).

In short, the aim is to be user-friendly.

4. Design Methodology

'The more information present in the environment, the less information needs to be maintained within the mind ' Donald Norman

The overarching themes of EduWeb's design were simplicity, transparency, consistency and redundancy. The aim was to keep the learning curve of the system very shallow so that much of the learner's effort could directly be devoted to the contents. Accordingly, a lot of effort was put into reducing the 'cognitive overhead' associated with hypertext and into easing the demands on the user's memory by not exceeding the capabilities of short term memory.

4.1. Development tools

The main development platform of EduWeb was a Power Macintosh 6100/60 AV with 250 MB hard disk space and 24 MB of RAM, a 17 inch Sony colour monitor which could be dynamically set to black and white, 8-bit, 16-bit and 24-bit colour and a 270 MB Syquest exchangeable cartridge drive for backup purposes.

Software packages used included Aldus PageMaker (version 5.0 native) for the original paper version of the contents and Adobe Illustrator 5.0 for the figures. In the conversion to HTML, RTFtoHTML converter, Adobe PageMill and HTML editor were used with a strong emphasis on HTML editor. Graphics were done in Illustrator and Adobe Photoshop 3.0 respectively with the addition of WebColor and communication software included Z-term, Fetch (FTP transfer to the NetSpot server) and NCSA Telnet.

After the final design of the Web pages, the contents were reconverted into PageMaker for optimal paper display and, with the help of the PDF writer, translated into the portable document format. Testing browser applications included Netscape 2.0 and 1.1N as well as NCSA Mosaic and Lynx.

4.2. Adaptation to hypertext

As EduWeb's contents were given by a paper-based research report, the aim was not to simply transplant the contents but to 'value-add' to them by exploring the opportunities of hypertext in general and the Web in particular.

The following main strategies were used:

ï a departure from the paper-based linear reading paradigm to free navigability of the subject matter. This was achieved through the division of the contents into fully self-contained blocks which add to each other but do not require 'prerequisite' readings,

ï the inclusion of external Web-based resources and readings as an opportunity to further investigate topics and explore the Web,

ï an interactive search page for particular items in this site and links to Web-wide search engines capable of finding related sites as well as a glossary with links to the occurrence of terms within the site, and

ï the provision of a 'point-and-click' graphical user interface that acts as an information map.

4.3. Information structure

A variety of techniques were applied to EduWeb's information structure:

ï the division of the subject matter into blocks of related content, following what seemed to be their natural topography (cf. Horn, 1989)

ï a symmetrical, one to one relationship between the external or physical structure of the information (folder hierarchy) and the visual structure,

ï a structural hierarchy of three levels (sectionñlocal contentsñcontent pages) which increases in detail and works as a mapping structure (global mapñlocal mapñdetail),

ï a small number of items at each level to avoid fragmentation,

ï an alternate or overlapping tree structure through the provision of a 'table of contents' for the entire site, and

ï the featuring of a short summary of contents at each of the higher levels of the hierarchy.

4.4. Navigation

The navigational structure of EduWeb is both simple and complex at the same time. It is simple in terms of the cognitive requirements from the user but complex because, in order to allow flexibility, a high level of redundancy was introduced.

The navigational strategies included:

ï the decision on an independent navigational structure, that is, one that works without the help of browser applications and such memory-intensive concepts as 'back' and 'forward',

ï the choice of a shallow tree structure or hierarchy that features few levels and few nodes at each level in order to allow simple navigation,

ï a conservative linking structure, that employs links only where necessary (navigation), useful (internal cross-referencing) or value-adding (external resources),

ï free navigability of the entire information structure from any level of detail,

ï redundant navigational structure to cater for differences in browsing behaviour and restrictions of browser applications,

ï the provision of a complete alternate tree structure caters for text-only and non-frame browsers,

ï text alternatives for graphical links in order to prevent loss of content, and

ï rich internal cross-referencing at the content page level. As all content pages exceed the display area of one screen, this makes internal jumps easy and reduces the need for scrolling.

4.5. Interface design

The success of an interface depends to a large degree on two factors: transparency and consistency. Transparency means that those functions of the system that are important to the user are visible and understandable, while underlying structural complexities are hidden from view. Consistency of the visual interface is important as it not only identifies the Web site but also helps the learner set expectations and predict outcomes of interactions with the interface (Norman, 1995; Sano, 1996).

In this context, the most important features of EduWeb's interface are:

ï the use of the frame environment as 'frames of reference'. While this particular feature only works with frame-capable browser applications, it has two significant advantages:

1. frames can be used to display different levels of the structural hierarchy in space rather than time, thereby flattening the hierarchy. They are thus very suited for mapping the contents out to the learner (cf. Sano, 1996),

Figure 2: Frames display information is space rather than time and thus flatten the hierarchy.

2. they provide a layout grid that can be separated into different functions

ï the positioning of frames according to proven graphical interface design guidelines (Marcus, 1992; Galitz, 1993), with the most stable subject matter along the top, a choice-dependent area along the left hand side and the most variable subject area enclosed by the two,

ï the use of colour coding to visually distinguish the different sections of the site and thus make the position of the learner with relation to the contents visible,

ï the use of patterns as a redundant coding (cf. Apple, 1989) to make visual distinction possible where colour coding fails (on b/w display),

ï the conservative and very targeted use of graphical elements and generally small graphics files which do not unnecessarily increase loading times, and

ï simplicity: a 'vanilla' approach to graphics which serves to enhance the contents and not the designer.

In a nutshell, the user interface adheres to what Cooper (1995) labels a 'canonical vocabulary': a tightly defined and restricted number of key elements that represent the key functions and an absence of unnecessary embellishments.

4.6. Labelling

Concise labelling was one of the most useful and pervasive strategies of the design process, from the structural organisation to the visual display and down to the level of HTML source coding:

Labelling in the structural organisation

ï sections are given concise one-word labels. This facilitates orientation and it also makes button design for the sections easier,

ï as the internal structure of the contents is reflected in the external one, the names of the folders and files reflect their content and the path names of the content pages their position in the structural hierarchy

ï links are labelled in different ways, according to their function:

1. The main sections are linked through graphical buttons which clearly look like buttons (with alternative one-word text links),

2. section contents are represented as textual links,

3. page-level cross-references are linked through single characters such as ~ (for jumps to the headings) and * (for references),

4. all headings feature an iconic up-link back to the page contents, and

5. external links are given their own new window to indicate their different authorship and displayed with their full URL visible, so no information is lost when the page is printed.

Labelling in the visual display

ï All sections and their parts are identifiable by their colour and pattern,

ï all followed links (white) are clearly distinguishable from un-followed ones (purple) by colour,

ï against popular trend graphic buttons do contain a link border so the colour will indicate whether or not a section has been visited, and

ï content paragraphs are indented with respect to their headings (<DIR> command in HTML) in order to make visual scanning easier.

Labelling in the HTML source code

ï each content page is identified at the bottom by its URL for easy reference (especially when printing directly from the browser),

ï the file names and paths conform to the 8.3 naming convention,

ï each content page contains a 'signature' with information about authorship, currency of contents and a feedback link to the author,

ï logical and physical tags are used for typographic differentiation between the different parts of the information structure, and

ï all anchors and links in the content pages' source code are 'legible' and easy to match up.

Summarily, good labels help identify and classify elements (cf. Horn, 1989) and, in a hypertextual screen-based environment in particular, concise labelling can facilitate navigability and reduce cognitive overhead.

4.7. Redundancy

Although defined in the Collins English Dictionary somewhat negatively as denoting 'superfluous', redundancy is another recurring theme in educational Web design. This is not so much redundancy in terms of contents - although some will occur due to the modular nature of hypertext - but in terms of structural and visual design. Properly applied, redundancy does not 'say the same thing twice' but rather communicates the same concept in alternate ways. Thus it not only serves to reduce ambiguity, it also offers more flexibility and likelihood for a successful communication, should one option fail (cf., Edwards, 1989). This is particularly true in a Web context, where, due to a large number of variables in the environment, flexibility is needed.

In EduWeb, redundancy was implemented in the following ways:

ï graphic elements have a textual alternative for non-graphical browsers or preference settings,

ï two complete tree structures of EduWeb exist, one for frames-browsers and one for non-frame and also non-graphical browsers,

ï alternate paths through the information structure are provided, depending on browsing behaviour: hierarchical, table of contents and targeted search,

ï the application of both distinct colour and pattern coding of the sections, and a careful choice of each, which would work with 8-, 16- and 24-bit colour displays as well as black and white, and

ï a full printable (pdf) and paper-optimised version of each content page accompanies the electronic one in order to give the learner a choice of reading preference and the option of a more permanent record.

As a consequence, not only does the implementation of these alternatives give users more flexibility, it also ensures a wider accessibility (cf. Fontaine) of the information structure.

4.8. Implementation difficulties

While there were several smaller and larger hurdles to overcome in the design of the site, three stand out as probably the most significant for future reference:

ï Hypertext management problems. These arise from the lateral structure of hypertext and are especially aggravating when implementing an overlapping and parallel tree structure. They result in a 'snowball effect' of any change in the organisation or the visual display on the entire site and necessitate testing and re-testing of the link structure and visual consistency.

ï Cross-referencing. The implementation of the intricate link structure on the content pages had to undergo several iterations as it was necessary that links target the logical spot for the user (the top of the paragraph/list in which the link occurs), not just the default for the browser (the line in which the link occurs).

As it also had to be avoided that all links back up change colour, once one link back up was followed, each of these links had to have its own target. This resulted in a very complex linking structure in the HTML source code.

ï Compatibility with 8-bit (256) colour displays significantly limits the colour palette and poses several difficulties with colour coding: colours need to be distinct in all displays with, hopefully, a minimum amount of dithering and colour shift (see Weinman, 1996).

Of these difficulties the latter two originated in EduWeb's dedication to accessibility, but, once solved, resulted in increased ease of use.

4.9. Testing

The testing of EduWeb was not done summarily at the end but was, in fact, an integral part of the design process that repeatedly saved a lot of wasted development time by revealing problems in their early stages.

Testing included:

ï structural design and navigability testing on different browser applications,

ï testing of the graphical interface on different display screens,

ï cross-platform compatibility

ï testing of the internal and external link structure, especially after iterations of the structural hierarchy,

ï 'debugging' of the HTML source code, and

ï user feedback. This was given by members of the World Wide Web development (wwwdev) mailing list dedicated to educational uses of the Web, who spontaneously gave their reactions to the site.

5. Evaluation

Jacob Nielsen (1995) suggests the following five criteria for evaluating hypertext systems:

easy to learn, easy to remember, efficient to use, few errors and subjectively pleasing.

EduWeb addresses them as follows:

ï easy to learn

- Through the use of frames in EduWeb, learners always have a visible map of the site present, which not only displays their location but also other possible destinations and indicates whether or not they have been visited.

- The visual structuring of the contents supports both a novice and an expert approach to browsing: it is equally easy to gain an overview as it is to find detailed information.

- All contents appear in self-contained units which allow for closure on the subject while - through their external links to references and resources - also allowing further exploration.

ï easy to remember

- Visibility and transparency of the key elements reduce the cognitive load on the learner.

- The navigational structure is straight forward and intuitive.

ï efficient to use

- As most content is contained in textual form, the loading times of EduWeb are comparatively small.

- A consistent layout grid and clear and concise labelling allow the learner to know what kind of information to expect when following a link.

ï few errors

- Since most errors in a hypertexture result from the linkages, this is one area where all sites will need to be regularly tested and updated.

ï subjectively pleasing.

- As its label suggests, this evaluation criterion is the most personal. Accordingly, each user of EduWeb will have to make up their own mind about it, with the opportunity to provide their feedback to the author. As a general guideline, the heading of 'subjectively pleasing' could include such areas as 'quality of content', 'performance' and 'aesthetics'.

6. Elements of Guidance

As the results of an extensive literature review on the topic in conjunction with the practical experience of designing an educational site, the following criteria emerge as being essential to guidance:

In structural design: the division of the subject matter into clearly defined blocks, proper labelling of blocks and links, and a simple navigational structure through the provision of a limited number of quality links.

In navigation: the labelling of structural elements in a concise and relevant way which will aid both novices and experts in their paths through the information structure and the provision of alternate access routes to accommodate different browsing behaviours.

In cognition, learning and understanding: the provision of a mapping structure for user orientation which will set expectancies and allow predictions.

In interface design: the use of a 'canonical' vocabulary of visible clues that provides a transparency of the system's functions and a conceptual framework of the learning materials. Furthermore, a simplicity and clarity of display that leave the user to focus a small amount of energy on learning the system, leaving a large amount for learning the contents.

In screen design: the use of location, colour and redundant coding in the visual presentation of the subject matter.

In HTML coding: the appropriate and consistent use of logical and physical mark-up tags and an indication of the relative and absolute location of the contents, their creation date and authorship.

In the application of media: the discrete use of media that most enhance and least disrupt the learning process.

7. Summary

The single most useful feature to educational Web design implemented in EduWeb are frames. Because they offer the opportunity to display various levels of detail at once and in space rather than time, they make the entire subject matter easier to oversee. However, one of their drawbacks is a physical one: each frame reduces the remaining display area in the already limited environment of the screen. Thus frames may only be suitable for contents whose depth of hierarchy does not exceed three levels and in each case, their advantages for the display of content matter has to be weighed against their limitations.

8. Conclusion

There is, naturally, always the question whether providing educational materials on the Web is any more useful, effective or productive than providing them in a conventional manner. This question is important to keep in mind, in particular, because designing a web for learning is, at this point in time, a very involved and time-intensive task.

Every site designed today, by the very nature of the delivery medium, is outdated tomorrow: the knowledge base increases or changes, better browser applications evolve, new and better sites become available and so on. Even in the comparatively short time of six months involved in the development of EduWeb, new versions of software programs and entire new applications have become available, which would have made its creation considerably easier. In this sense, creating a web for learning is what Nigel Cross (1994) terms an 'ill-defined' problem.

However, this built-in-obsolescence can affect conventional media as well. The advantage of Web delivery is, that it makes connections to other related topics and external resources very easy which is certainly one of its most value-adding factors. And perhaps the same changeable nature that results in its built-in obsolescence will be the very feature that is of most benefit to learners: sites need to be periodically updated.

Since the Web is a very fast-evolving environment, new features and potentials are added every day. While some of these may enhance learning, there is a good chance that they may tempt educators away from the canonical approach to guidance and infect them with 'featuritis' (cf. Nelson, 1990). As visibility, transparency and simplicity are prime ingredients of guidance, each new feature that becomes available needs to be carefully evaluated.

Providing guidance through cyberspace with the help of structural design and visual display can make the task of the learner a great deal easier: it determines and highlights important 'nodes' and makes learning materials more accessible in every sense of the word. Ultimately, however, guidance is a form of advice (cf. Collins' definition of guidance): it can only encourage and suggest an immersive approach but not guarantee it.

References

Alexander, Shirley (1995). Teaching and Learning on the World Wide Web. URL: http://www.scu.edu.au/ausweb95/papers/.

Apple Computer Inc. (1987). Human Interface Design Guidelines: The Apple Desktop Interface. New York: Addison Wesley.

Carmel, Erran, Crawford, Stephen and Chen, Hsinchun (1992). ëBrowsing in Hypertext: a Cognitive Studyí. IEEE Transactions on Systems, Man and Cybernetics, Vol. 22, Number 5, September/October 1992, pages 865ñ884.

Collins English Dictionary and Thesaurus (1993). Glasgow: Harper Collins.

Cooper, Alan (1995). About Face. The Essentials of User Interface Design. Chocago: IDG Books.

Cross, Nigel (1994, 2nd edition). Engineering Design Methods. New York: John Wiley & Sons.

December, John and Randall, Neil (1995). The World Wide Web Unleashed, 2nd edition. Indianapolis, Indiana: Sams.net Publishing.

Edwards, Alistair and Holland, Simon ed. (1989). Multimedia Interface Design in Education. Nato ASI Series, Heidelberg: Springer Verlag.

Edwards, Alistair (1989). 'Redundancy and Adaptability' in Edwards, A. and Holland, S. (1989) Multimedia Interface Design in Education. Heidelberg: Springer Verlag, p.145ñ155.

Fontaine, Paul (1995). Writing Accessible HTML Documents. URL: http://www.gsa.gov/coca/WWWcode.htm.

Galitz, Wilbert O. (1989). Handbook of screen format design, 3rd edition. Wellesley, Massachusetts: QED Information Sciences Inc.

Galitz, Wilbert O. (1993). User -Interface Screen Design. Wellesley, Massachusetts: QED Information Sciences Inc.

Hartley, James (1988). Designing instructional text, 2nd edition. London: Kogan Page.

Hicks, Richard and Essinger, James (1991). Making computers more human: designing for human-computer interaction. Oxford, England: Elsevier Science Publications.

Horn, Robert E. (1989). Mapping Hypertext. Massachusetts: The Lexington Institute.

Jonassen, David H. and Mandl, Heinz ed. (1989). Designing Hypermedia for Learning. Heidelberg: Springer Verlag, NATO Advanced Research Workshop.

Jonassen, David (1989). Hypertext/Hypermedia. Englewood Cliffs, New Jersey: Educational Technology Publications.

Lunenfeld, Peter (1993). 'Digital Dialectics: a hybrid theory of computer media'. Afterimage, vol.21, November 1993, pages 5ñ7.

Marcus, Aaron (1992). Graphic Design for Electronic Documents and User Interfaces. New York: ACM Press.

Nelson, Theodore H. (1990). 'The Right Way to Think About Software Design' in Laurel, Brenda ed. (1990). The Art of Human-Computer Interface Design. New York: Addison Wesley, pages 235ñ243.

Nielsen, Jacob (1995). Multimedia, Hypertext, the Internet and Beyond. Boston: AP Professional.

Nielsen, Jacob (1996). Top Ten Mistakes in Web Design. URL: http://www.sun.com/current/columns/alertbox/.

Norman, Donald A. (1995). Defending Human Attributes in the Age of the Machine, First Person CD-ROM, New York: Voyager.

Nunan, Ted (1994). Flexible delivery ñ a discussion of issues. University of South Australia: Distance Education Centre.

Sano, Darrell (1996). Large-scale Websites: A Visual Design Methodology. New York: John Wiley.

Schlegel, Karin (1995). Design Issues related to the development of a World Wide Web site for delivery of flexible learning materials: a preliminary study. University of South Australia, unpublished paper.

Tufte, Edward (1983). The visual display of quantitative information. Cheshire, CT: Graphics Press.

Tufte, Edward (1990). Envisioning Information. Cheshire CT: Graphics Press.

Weinman, Lynda (1996). Designing Web Graphics. Indianapolis: New Riders.

Whalley, Peter (1989), ëModels of Hypertext Structure and Learningí, in Jonassen and Mandl ed. (1989).Designing Hypermedia for Learning. Heidelberg: Springer Verlag, p. 61ñ67.

Wilson, Stephen (1995). World Wide Web Design Guide. Hayden Press.

Acknowledgements

Special thanks to the IKEA Stiftung of Switzerland, who have supported this work through a stipend.

Further thanks to Professor Cal Swann of Curtin University of Technology, Perth, for his involvement and support and to Dean Bruton, University of South Australia for his constructive criticism.