“Imitating paper on a computer screen is like tearing the wings off a 747 and using it as a bus on the highway.” (Ted Nelson, 1999) The final step of the planning process is a fundamental and critical one: choosing the packaging of the course.
There are a variety of elements that are important in this process including the general content structure, sequence, flow, and pacing. Presentation structure is also important, and includes considerations such as the tone and mood projected in the text and ‘feel’ of the site, including the coherence, consistency, navigation, aesthetic use of colours and graphics, and the text fonts used in the overall course site interface. The important components are discussed in the following section.
Units of Study
A uniform approach to presenting the units of study not only makes sense, but helps reinforce learning. A common mode of organization is a hierarchical module—sections—lessons—supportive activities approach. Within each learning activity, uniformity also helps to guide students through the content. One easy way to organize the units is from general to specific, beginning with units focused on basic principles then working up to unique and specific content topics. For example, a course on research design might begin with units focused on the general research process, literature searches and the like, then move on to specific research design processes such as experimental quantitative design or phenomenological qualitative methods.
Structure
A consistent structure should be used to present the units of study. Information, help, resource, and other sections need to be positioned in the same area of the page, across screens and sections. The generous use of white space helps to keep this structure accessible and visually appealing for the learners. The learning activities should also have a consistent structure. One common method is to use a lesson template including such headings as Overview, Objectives, In Preparation, Class and Individual Activities, Reflection, Enrichment Activities or Resources, and References.
The back-end structure that supports the learner environment should be carefully thought out as well. Folders or databases are needed for each group or cluster of files. A common practice is to group all images in an image database or folder; all multimedia in a multimedia database or folder; all audio in a separate folder, and so on. This not only helps the instructor find necessary components, but also facilitates upgrades and editing, and facilitates downloading and uploading of files from the course website.
Sequence
A plan to present all content and activities in a sequential flow is important to ensure learners have instant access to current and archived content, and do not miss critical pieces. Sequencing would follow the units of study and structure determined beforehand, moving from general to specific. This sequencing is best viewed as a specific menu or site map, where students can get a view of the entire course content on one screen.
Flow
Flow is achieved by presenting the sequential content in an intuitive yet logical manner. It is also boosted by clear, consistent navigation and positioning of screen elements. The learner should immediately know where to go next, without confusion or resorting to trial and error clicking on various navigation buttons or titles.
Pacing
It is best to keep the text areas small, so that the course content is presented in chunks, limiting the amount of text that is presented on each screen. Short lines of 40 to 60 characters each are best. The use of tables, charts, bulleted lists, and other organizers help to increase the visible appeal and reinforce learning. If possible, avoid long vertical scrolling pages; at all costs.
Tone
The design team should find ways to present help files, course content, and other textual prompts using an active voice, second person, present tense and a conversational tone in the course design. Language should be concise and consistent. It is also best to avoid language and examples that will inhibit the “shelf-life” of the site, such as “Now in 2008 …”.
Coherence
The design team should ensure that the layout of each screen is clear, pleasing to the eye, and conforms to the Western text layout of left-to-right, top-to-bottom text standards, since this is how learners usually read. It can be very confusing if their eyes need to dart all over the screen to understand what is before them: this can cause both dissonance and confusion.
Consistency
It is important to keep the general layout design of the course screens consistent in size, structure, colour, placement of elements and font usage. It is also important to make sure that the appearance and utility of the site is consistent across browsers (e.g., the site should look and act the same in Internet Explorer and Firefox). Efforts should be made to facilitate download and screen loading times across Internet access modes, including broadband and dial-up access. This means keeping the size of graphic, audio, multimedia, and text files compact and reasonable in size, and optimized for quick loading and downloading. As well, learners should be able to upload files to the course area within a few seconds, and without crashing their systems or freezing the web browser screen.
Navigation
Navigation online is like the nervous system of the human body. It connects all of the course elements, allowing movement and flow as the learners explore the course. The key to designing navigation is to pick one uniform method, and stick to it consistently throughout the course site. Navigation can be as simple as a set of uniform buttons placed strategically in the same place on every page. Or it can consist of Java based panels or animated Flash “hot spots” on an image map.
Graphical menus and navigational elements help to intuitively guide the learner through the course online environment. It is best to plan the navigation to give the learner control over what sections they can select for navigation but to also provide a “road map” with suggested navigation sequences. Navigational linked sections should somehow be distinguishable from static non-linked portions of the site (for instance, use a different colour, specific icons, underlining, or roll-over text changes). Consistency in navigation is important to reduce learner frustration and to maximize the learning experience. Navigation buttons should be clearly labelled, consistent across pages, and easy to view and access.
Colour
“Color is born of the interpenetration of light and dark”. (Sam Francis, 2003)
Colour is an important feature of effective course design. First off, it is best to choose colours that are included in the 216-colour cross-browser platform colour palette. Although this precaution is becoming less critical, since the majority of modern computers will support millions of colours, it is safe to stick to this rule to ensure that the learners will be able to access the general 256 colour palette common on most computers made within the past ten years or so.
Colours on the Web are always a mixture of R (Red), G (Green) and B (Blue). The R or G or B value can range from 0 to 255, with 0 meaning the colour value (e.g., the R) is off, and 255 meaning the value is fully on. Every screen colour has a value that tells the designer how much of the R, G, and B is showing or absent. In website development, red, green, and blue values are written as six-digit hexadecimal coding: a combination of numbers from 0 to 9 and letters from A to F. For example, pure blue has a hexadecimal value of 0000FF, and so on. To ensure that the colours are visible as intended, it is wise to stick to the web-safe palette of hues. This is because browser-safe colours don’t dither. Dithering is what happens when a colour is not available in the web palette, so the browser tries to compensate by combining pixels of other colours to substitute. Dithered colours look rough and spotty: browser-safe colours stay smooth and even looking.
Colour is also a very important consideration to set the mood, tone, and visual appeal of a course site learner interface. If it is possible to customize the colour scheme for each course, spend time as a team to visualize the landscape or metaphor that is suggested by the course content. For instance, a general biology course might suggest the use of greens offset with browns and white; while a course on metaphysics might suggest the use of purples, lilacs, rich blues offset with white. If you want to wake up your learner audience, to initiate action or stimulate emotions, a warm colour scheme works best. Reds, oranges, yellows all do the trick. If your intended mood is one of calm, leisure, or dignified refinement, use cooler colours—blues, purples, greens. If your statement is bold and to the point, sharp contrasting colours such as black and white or blue and orange work well.
Basic colour theory
Colour theory focuses on how colour manifests on the spectrum. Colour psychology goes one step further to assign common meaning or moods to specific colours. To apply these to the course design, the team should explore the meaning of primary, secondary and tertiary colours which are the most common colours used on the World Wide Web. Figure \(\PageIndex{1}\) illustrates the 12 basic colours of the colour wheel.
Figure \(\PageIndex{1}\): The colour wheel
Primary colours are the three pigment colours that cannot be mixed or formed by any combination of other colours. All other colours are derived from these three: red, blue and yellow. Each of these pure colours stir up different moods and feelings in a viewer. Figure \(\PageIndex{2}\) illustrates the primary colours.
Secondary colours are formed by mixing two of the primary colours together. These mixed colours also evoke particular moods. Figure \(\PageIndex{3}\) illustrates the secondary colours from the mixture of two primary colours.
Green (blue and yellow)—pastoral, spring, fertility, jealousy, novice, youth, hope, life, money
Orange (red and yellow)—warm, autumn, generous, strong, fruitful, appetizing
Purple (red and blue)—royal, mysterious, pride, luxury, wealth, sophistication
Figure \(\PageIndex{3}\): The secondary colours
Tertiary colours are formed by mixing the secondary colours with primary colours. The olour wheel, illustrated in Figure \(\PageIndex{1}\) gives examples of the six tertiary colours between the three primary and three secondary colours.
Yellow-orange
Red-orange
Red-purple
Blue-purple
Blue-green
Yellow-green
Analogous colours are any three colours which are side by side on a 12-part colour wheel. Complementary colours are any two colours which are directly opposite each other, such as red and green.
Of course there are also black and white, both very common colours used in course designs.
Figure \(\PageIndex{4}\): Black, white and gray
Black is the absence of red, blue, and green light while white is the purest saturation of all three. Black and white plus gray are known as non-chromatic hues.
Black represents style, dark, mystery, formal, powerful, authority.
White is clean, pure, chastity, innocence, cool, refreshing.
Gray is neutral, conservative, formal colour. Gray ranges from sophisticated charcoal gray to active, energizing silver. It also represents maturity, dependability, and security.
Fonts
Finally, text fonts and embellishments can be used to help improve the comprehensiveness, presentation and accessibility of the content. Use a consistent font (common ones include two sans serif fonts: Arial and Verdana, and two serif fonts, Times New Roman and Georgia) throughout the text. Figure \(\PageIndex{6}\) shows examples of these four common fonts. Use bold and italic embellishments for emphasis. Only use underlines for actual links. Avoid using all capital letters. A good rule of thumb is to use size 11 for general text font, 14 for subheadings, 16 for titles. It is best to avoid blinking text, as this can produce eye fatigue and may annoy the learners. As well, graphical dingbat fonts can be used to create icons, and other supportive graphics (Figure \(\PageIndex{5}\)).
Figure \(\PageIndex{5}\): Examples of dingbat font images created using the Wingding fontFigure \(\PageIndex{6}\): Examples of Arial, Verdana, Times New Roman and Georgia text fonts
