Interactive Instructional Material
Research and Resources

The Human-Computer Interface
General Principles

A good interface will fade into the background
and the user will focus on the task at hand.

General principals to follow when designing any programme.

A. Human Issues

Baeker and Buxton (pg. 40) state that the "beliefs and expectations with which she (the computer user) sits down at her terminal or personal computer are a direct result of her concept of what the computer is like and what the computer has become.", thus Hansen (cited in Shneiderman, 1986) states that one should "know the user". This includes all aspects of the user's experience of computerized systems as well as their personal preferences.

Previous computer experience and design expectations.

For example a user who has only had experience in the windows environment is unlikely to benefit from a DOS look and feel, even if the programme is functionally adequate for all their programming needs. This is vitally important when one remembers that the computer, for most users, is simply one of an array of tools that can be used to perform a certain task. If the tool is not readily accessible and easy to use it will be discarded in preference of another.

Cultural Issues

Certain images, graphics and language may be offensive to one group of users, and care must be taken to avoid inadvertently offending any one on the basis of culture, race, creed, gender or sexual orientation. Muslim users may be offended (or alienated) by popping champagne bottles, whilst indirectly comparing a Zulu user to an animal (cartoon of a monkey) would equally offend and alienate this group. Language should be inoffensive, and gender neutral.

Differently abled users

Any computer programme may be used by people with physical challenges e.g. the blind and deaf. Even in areas where it is unlikely for the physically disabled to be accepted, there may be occasions when a user is temporarily disabled and still needs access to the equipment. For instance if a hand is in plaster cast would the user still be able to access the information. Sound should include textual alternatives, and visual graphics should have descriptions.

Colour Vision Deficiency (Colour blindness) is more prevalent that one realizes, make sure that any important colour coding and contrasts take this into account. Table 1 outlines the more common discrimination confusions in fairly technical terms whilst Fowler and Stanwick (1995 pgs. 309, 310) state that "Color blindness or weakness has four basic varieties.

  • Green blindness - individuals confuse greens, yellows, and reds (6.39 percent)

  • Red blindness - individuals confuse various shades of red (2.04 percent)

  • Blue blindness - individuals confuse blues (0.0003 percent)

  • Total color blindness, which affects no more than 0.005 percent of both sexes."

The Macintosh Human Infterface Guidelines also warns against this problem stating "people with color-deficient vision wouldn't recognize the use of color to indicate selection. Therefore, you shouldn't use color as the only means of communicating important information. Color should be used redundantly. It shouldn't be the only thing that distinguishes two objects; there should be other cues, such as text labels, shape, location, pattern, or sound." and suggests that all images should be developed in black and white first. (For more infomation about the use of colour see the section heading "Colour".)

Learning Time

Nelson (cited in Baeker and Buxton, 1987) stated that "any system which cannot be well taught to a layman in ten minutes, by a tutor in the presence of a responding set-up, is too complicated". Factors that lead to the shortening of the learning time include familiarity, consistency and the use of an accessible metaphor. If a user can visualize the structure of a system and is able to predict the outcome of interactions, they will have more confidence with quicker interactions and a lower error rate.

Menus and selection objects

Menu systems and graphical iconic symbolization are not necessarily universally understood. Various authors point to the following guidelines when creating selection items:-

  • All graphic representation should have textual descriptions.

  • Consistency of terminology should apply to all options throughout the system.

  • Avoid the use of jargon and keep phrasing concise.

  • Keywords should be scanned by the user first.

  • Group similar items in a menu map, or if this is not possible use other instinctive alternatives such as alphabetic order.

  • Avoid multiple screen transversals for selection purposes.

  • Avoid ambiguity.

  • Consistency throughout is vital.

Icon Tips

Pictorial literacy is not a given. Interpretations of graphics are often dependant on culture, experience and exposure to a specific medium (see Amory and Mars, 1994 and Andrews, 1994). One pertinent example is that arrows are not a universal symbol of direction. It is for this reason that most authorities in Interface design recommend that all buttons, icons etc be labeled.

Fowler and Stanwick (pages 57, 58) suggest that there are two standard sizes for icons, 16 pixels square and 32 pixels square, They quote William Horton's book "The Icon Book" as suggesting that "Design is easier if the grid has an odd number of pixels along each side. This is because an odd number provides a central pixel around which to focus design". They go on to state that each icon should have a label, which should be the same as (or an abbreviation of) the title of the corresponding window.

Navigation Issues

Navigation issues vary between Multimedia and Webpages but the common issues include links to the first screen/page, next screen/page, backtrack facilities and every system should have a quick exit button. See the section on the use of metaphor for commonly used buttons.

All applications should have short cuts for expert users.

Sound

All aspects of design should adhere to the concept of adding meaning, if there is no enhancement of accessibility for the user, then there is no need for the information, graphic or media to be added. Similarly sound should only be inserted if it enhances meaning and it should not distract the users attention.

Where ever possible allow the user interactive control to play, stop, rewind and pause. It is also useful to be aware that some users may be disturbed by a faceless voice. Many applications display a picture or video of a person when a voice recording is played.

Mixed Media

When using a combination of media e.g. sound, text, animation and video, be careful that the users attention is not distracted by one or other of the media. e.g. animation and sound can work well together, but animation and text presented simultaneously is likely to be distracting.

Messages and Status reports

Concise, brief, unambiguous, clearly visible and consistently placed on screen.

Feedback

Immediate, positive and instructional

Tone

Respect for the user and subject material is imperative. Avoid slang, misplaced humour and potentially offensive insinuations.

Screen Layout and Design

The layout of the screen is a controversial issue; what is aesthetically pleasing to one person may be considered dull and boring or, conversely, garish to another. The following locally designed pages may best illustrate this:
http://146.230.128.52/biology/
http://www.und.ac.za/und/ccms/index.htm

Novice designers should aim for elegant simplicity and consistency.

It helps to divide the screen into a grid where similar types of information are consistently placed. This helps the designer form a visual sense of balance across screens, and the consistency will aid the user to quickly locate the important information.

Users typically suffer from "cognitive overload" from too much information and too many diverse media used simultaneously.

Font should be legible, and care must be taken to ensure that the users machine is likely to have a similar font to the one selected so that there is a level of predictability in the final display. A mixture of too many fonts detracts from legibility, rather use a maximum of two fonts and vary the size and weights to change the emphasis or draw attention to different areas of information.

All screens should be titled, and the titles should match the names of the interaction that brought the user to the screen.

White space consistently used can separate the screen into logical groups of information and make it more legible.

Colour

Most people involved with the development of interactive course material cannot afford the expertise and skills of a graphic design artist. This is often obvious in the end results and if at all possible it is recommended that a graphic artist be included in a team of developers. However, for those that are in the unfortunate position of a "do or die" scenario the following advise may assist.

  1. Most authors suggest the use of a maximum of four colours.

  2. Use colours to colour code similar items, but remember that colour coding is only useful if the user knows the code (red=stop, green=go); the metaphor should be a familiar one to the users otherwise lengthy explanations are necessary and counter productive. Also colours are often used to depict various items (e.g. in medical illustrations red is used to depict arteries and yellow to depict nerves), switching or changing these colours could be confusing for the user.

  3. In dense screens colour coding can assist the user to identify grouped material - choose your colours carefully so as to accommodate people with Colour Discrimination Deficiencies as far as possible.

  4. If material is to be printed by the user, remember to design graphics with patterns as well as colour coding. Most people only have access to black and white printers.

  5. Consider contrasts carefully. If you have a dark background, use light foregrounds (this combination is good for long-distance viewing such as slide shows or projected computer screens). Use light backgrounds and dark foregrounds for situations with high ambient light e.g. overhead projectors.

  6. Note that different wavelengths of colour come into focus at different points in the eye (See Figure 1). It is difficult for people to focus on red and blue simultaneously.

The use of metaphor in the interface design

Imposing a metaphor on a virtual world, allows the user to be better able to predict the outcomes of new interactions. It also allows the designer to work with a model which will guide the development in a consistency of interactions and representations. Obvious metaphors are those of the "desktop" for office automation software, and the "paint brush and easel" for graphics packages. Care should be taken that the analogy is familiar to the users' experience of the "real world" and similar enough to be incorporated without excessive explanation.

Another common metaphor for navigational buttons is the VCR or tape deck buttons, which are familiar to most users. e.g.

Forward Back Fast forward Rewind Stop

Interactivity

Interactivity has be lauded as the most promising development in CAL since the euphoria of AI collapsed. However, interactivity should be more than a simple point and click senario. Truly interactive systems based on a constructiveness approach would include drag and drop, text entries and other forms of interaction to develop a users knowledge of the subject material.

Learning Styles

Individuals typically have their own preferences in the way that they perceive, collect and process information. These methods are referred to as "Learning Styles". The Academic Skills Center at Western Michigan University offers the following breakdown of learning styles:

  • Print - learns through reading (Allow printouts for these students).

  • Aural - learns by listening - will enjoy audio tapes and listening to what other learners have to say. (Voice overs will assist these users.)

  • Interactive - enjoys discussions with other students on a one-to-one basis or in small groups. (CMC would assist many of these students).

  • Visual - learns by looking at pictures, graphs, slides, demonstrations and films. (Colour coding will work well with these types of students.)

  • Haptic - learn through the sense of touch. (Drag and Drop interactions could help here.)

  • Kinesthetic - learns through movement. (Animation could help students with this type of preference).

  • Olfactory - uses the sense of smell in learning. (Any ideas?)

Learners will not typically use only one of the above list but a combination of them, favouring one method over another e.g. some learners work well in a group environment using visual and interactive learning styles whilst others prefer to learn on their own, but still use a visual style.

Many, although not all of the above can be used in the development of Interactive Multimedia Course Material.

Instructional Events

Gagne (1973, p. 303) states that "control of the external events in the learning situation is what is typically meant by the word 'instruction'". He then lists these events as:

  1. Gaining and controlling attention.

  2. Informing the learner of expected outcomes

  3. Stimulating recall of relevant prerequisite capabilities.

  4. Presenting the stimuli inherent to the learning task.

  5. Offering guidance for learning.

  6. Providing feedback.

  7. Appraising performance

  8. Making provisions for transferability.

  9. Insuring retention.

(ibid, p. 304).

B. Technological Issues

under construction symbol
but don't hold your breathe

Colour

Different colour graphic adapters may interpret colour coding differently. As far as possible make sure that this does not adversley affect your display.

under construction - Please refer back to this site at a later date if you are interested in these issues

C. Organizational Issues

under construction symbol
but don't hold your breathe

The introduction and use of CAL and CMC does not happen in a vacuum. There are often organizational issues, inter office politics and management policies that can have repercussions for the effective implementation of such a medium.

under construction - Please refer back to this site at a later date if you are interested in these issues


Other Resources

References

  • Amory, A. and Mars, M. (1994) Evaluation of Efficacy of Multimedia Learning: Project development and strategies. In: Papers delivered at the international conference on Computer-Assisted Education and Training in Developing Countries. Alexander, P.M. (ed.) pages 1 - 6, University of South Africa, Muckleneuk, Pretoria.
  • Andrews, S.J. (1994) Some Cultural and Perceptual Implications of Courseware Development and the Use of Technology within a Multi-cultural, Multilingual Society (a cautionary tale). In: Papers delivered at the international conference on Computer-Assisted Education and Training in Developing Countries. Alexander, P.M. (ed.) pages 7 - 13, University of South Africa, Muckleneuk, Pretoria.
  • Baeker, R.M. and Buxton, W.A.S. (eds.) Readings in Human-Computer Interaction: A multidisciplinary approach. Morgan Kaufan, Los Altos, California, 1987.

  • Fowler, S.L. and Stanwick, V.R. The GUI Style Guide. Academic Press, London, 1995.

  • Gagne, R.M. The conditions of learning (2nd Edition). Holt International, London, 1973.

  • Shneiderman, B. Designing the User Interface: Strategies for Effective Human-Computer Interaction. Addison-Wesley Publishing Company, Reading, Massachusetts, 1986.

   
 

previous page

first page

next page

     
 

Text Index

Classroom: Tutorials, HTML
Development Resources: Clipart, Management, Evaluation, Facilities, Authorware FAQ
Issues and Debates: HCI, Copyright, Articles, CAL, Access, Ed. Theory
Examples: Live Courses, Syllabi.

  Last updated by Kathy Murrell on Wednesday, February 03, 1999