Teaching and Learning Forum 95 [ Contents ]

Design principles for slides and overheads

Sue Wynn
Faculty of Business
Edith Cowan University

There is much research and literature available on the cognitive psychology of user-interface design; focusing on mental modes, language, highlighting information on complex displays and a conceptual approach to user interface design (Hicks & Essinger (1991), Gardiner & Christie (1987), Badre & Shneiderman (1982) and Ravden & Johnson (1989), but how does the average presenter or lecturer go about designing simple slides of text and graphics?

The Wharton School of Business has found that well designed electronic presentations can increase learning by up to 200%, increase retention by up to 38% and decrease the time taken for complex explanations by 25-40%. So what is good slide design?

This paper attempts to address the problems the average designer encounters - which is the most readable font for displayed text and for projected text; the implications of reading gravity; the use of colour; and special type effects.


Typography

One of the major problems with electronic presentations, from the audience's viewpoint, is the fact that the typography is often difficult to read. Whilst it is very common to use the same typeface for both print and electronic media, the variables between the two media make it worth while exploring some of the implications of typography. Some of the fundamental principles of print media can be transferred to electronic media, particularly the use of all capitals and the use of underscore. Many presenters consider that capitals are bigger and are therefore easier to read, but in fact, the exact opposite is true. All capitals are considered to be a typographic sin (Endersby, 1993) as they reduce reading speed by 12% (Marcus, 1992:35) and use up 30% more space than proportionally spaced characters. The major problem with capitals is that the shape and colour of the words become identical unlike the lower case forms. The illustration below from Williams (1990, p 31) demonstrates this concept.
Comparing all caps with lower case letters>
</blockquote>
Underscoring words is another convention that has been abandoned by professional typographers, but the novice user still loves the underscore to emphasise words and phrases. The underscore can get tangled up with descenders, which again will retard reading speeds (Williams, 1990), for example:
<blockquote>
<img src=
From this we can deduce that it is better to use lower case for the bulk of the type and to eliminate underscoring altogether replacing it with bold and italics for emphasis.

Serif v sans serif

Type is characterised by two main letter forms - serif faces and sans-serif faces. A serif face is one such as Palantino that has small ticks at the end of each stroke. Sans-serif typefaces do not have these ticks. In print based text it is usual to have a sans-serif typeface for headings and a serif face for the body of the text. The convention for projected images is the reverse (Talman, 1992:146). The serifs in a serifed typeface can cause confusion and clutter when projected and the thin arts of the strokes can virtually disappear. This can cause severe problems for visually impaired people (even those with slight astigmatism) and for the aging. Sans-serif faces, on the other had, tend to be of even weights and have more open counters (the white space inside the rounded characters, such as "0"s and "a"s giving them a bigger x-height). This makes them legible in poor ambient light conditions and when magnified many times through a projector. Although an entire page of sans-serif type can be boring, a slide set in sans-serif can be very effective (Parker, 1990:293).

Choosing typesize

The size of the type is also essential for legibility and there is a general rule of thumb that it should not be less than 18 pts, although 24 pts or 28 pts is certainly better and the heading should be the next incremental size up (Talman, 1992:149). When designing slides, you should consider how much text is going to be on the slides and try to cut out non-essential words and phrases.

Special type effects

Most screen presentation programmes come with many special effects to enhance the appearance of slides, but caution should be exercised. Too many effects and the slides will become annoying and readability will be seriously impaired. Some examples of special effects include the use of drop shadows, zooms, and transitions.

Transitions are perhaps the most overworked feature of presentation programmes such as Microsoft PowerPoint and Aldus Persuasion. A transition refers to the way in which the presentation moves from slide to slide and once discovered, presenters tend to try and cram every transition effect into one presentation. The biggest drawback with some of the transitions is that they can slow down the presentation (some are very time consuming) and can become a major distraction for the audience.

Colour

How to use colour effectively

The issue of colour tends to be rather confusing because of conflicting research on the subject. There is no question that coloured type reduces legibility dramatically and background colours inhibit comprehension, BUT there is an undisputed attraction value of colour. Colour appeals to the senses and creates associations with sight, sound, smell, touch and taste. The National Retail Merchants Association has found that if the object isn't familiar, colour will increase retention by 50% and our memory for colour is so strong that when we see black and white, we visualise colour. Hicks and Essinger (1991:107) also find that memory for colour attributes deteriorates less than memory for various shape attributes. This is important when attempting to exploit and display relationships between different things.

According to Shneiderman (1987 p337) colours soothe, attract, create interest, increase subtle discrimination, emphasise organisation and evoke emotional responses.

There is no question that working with colour is a highly subjective practice. Every culture sees colours differently and places different values on them (Brereton, 1994:48). Colour also effects our state of mind, from inducing depression to imparting a feeling of joy. (Birren, 1978:98). Studies have shown that people believe that colour enhances their learning, whereas the actual levels of performance may be quite different (Hicks & Essinger, 1991:107), although memory for colour information appears to be superior to black and white.

The challenge in designing a screen presentation, is to find colours that improve recognition, attract attention and communicate a concept. The key to this is to use simple colours and colour combinations. When planning the screen presentation, it must be remembered that the presentation is going to be projected, magnified many times, which may cause the colours to change, cause the saturation to weaken and can change the way the image looks completely. So what looks good on the computer screen may lose all impact when projected. The ambient lighting is also a strong factor. Most video projectors (most commonly RGB - Red Green Blue) and Liquid Crystal Display (LCD) projector panels require a low level of ambient lighting. This can change the way the colours appear.

Another consideration for the design process is to consider colour blindness. Approximately 8% of Caucasian males suffer colour blindness (Marcus, 1992:80) and as Hicks and Essinger (1991) discuss, colour blindness can take many forms, from the common red and green, green/blue confusions, through to total colour blindness, either through old age or congenitally caused.

When selecting colours, choose a minimum number. Hicks & Essigner show that the human mind has difficulty in maintaining more than five to seven elements in short term (active) memory simultaneously and Alessi & Trollip (1991, p 42) assert that more than four to seven simultaneous colours should be avoided, especially for beginning students. This is to reduce the cognitive load of new material. A good general rule, therefore, is to use a maximum of five colours plus or minus two. According to Marcus (1992:82) "this allows about an extra 20 seconds in short term memory which can store five words or shapes, six letters, seven colours and eight digits".

If too many colours are used, particularly bright colours, the eyes become tired trying to focus between them and reader productivity will suffer. Bright colours will have the same effect as they cause the pupil to contract and the action of dilating again when focusing on duller colours causes muscular tiredness.

Most presentation software comes with standard templates and the general background colour for slides is blue. The reason for this is that blue has a short wavelength and the eye's retina and fovea have few blue-sensitive cones making it a hard colour for the eye to focus on, and therefore making it an ideal background colour. (Hicks & Essinger, 1991:109, Marcus, 1992:83). From a practical perspective though, blue backgrounds tend to be dark and with an already reduced ambient light, the reflection from the screen can be negligible. For slide projection this tends not to be a problem because there is a very strong light being focused through a small piece of 35 mm film with rich colour, but for a data show or data projector, the colour tends to become diffused, the light source is not as strong and the general effect can be disappointing.

Red and green should be used in the centre of the visual field as the fovea (or eye focus) is more receptive to these colours and the peripheral vision of the eye is less receptive. (Marcus, 1994:83). A general rule is to use colours in the middle of the light spectrum as the focus colours and those at the extreme edges of the spectrum as peripheral or background colours.

Apart from these general rules, choose colours that work well together. An easy way to determine which colours go with which is to take the colour wheel resident in any Macintosh program and draw an equal angled triangle with the first point sitting on the main colour you wish to use. The other two points will fall on contrasting but harmonious colours (Brereton, 1994). This is an important concept because contrast will hold the attention of the reader and contrast should be aimed for when selecting a colour for type.

Screen layout

When designing screens of text and graphics, it is important to keep in mind the way people read. The reader's eye is attracted either to the most brightly or only coloured object on the page and will then follow reading gravity. That is, it will wander down the page roving between text and graphics. In order to not transcend reading gravity, it is important that the most important object (and therefore the most eye-catching) is placed in the top half of the screen. All other text and graphics will be placed in a "z-pattern" in the bottom two thirds of the screen.

Graphics

Graphics are another area where designers of presentations go overboard. There is now so much computer-based clip art available that designers feel they must include graphics on every screen or risk having boring looking slides.

It has been estimated that 75% of slides will be text based (Talman, 1992, p161) and the use of appropriate graphics can alleviate the visual monotony. The key words here are appropriate graphics because a common trap for the unwary to fall into is to put any graphic on the slide. This can be very confusing for the viewer because an immediate conflict between text content and the graphic occurs, and the main focus of attention becomes trying to solve the conflict and makes sense of the graphic, thereby overlooking important content. With the availability of digital cameras the reliance on clip art is no longer necessary and it is possible to include meaningful images in presentations.

Conclusion

Although there is a plethora of information available on designing for computer screens, there is relatively little on designing for projection. Much of what is available focuses on the cognitive psychology of design, and whilst this is tremendously valuable, the average presenter does not have the time to wade through it.

This paper attempts to provide a brief overview of the cognitive ergonomics of designing for electronic presentations with some (helpful) useful do's and don'ts for the unwary designer.

References

Alessi, Stephen M. & Trollip, Stanley R. (1991). Computer-Based Instruction: Methods and development. Prentice Hall, NJ.

Badre, A. and Shneiderman, B. (1982). Directions in Human Computer Interface. Ablex Publishing Corporation, New Jersey.

Birren, F. (1978). Color and Human Response. Van Nostrand Reinhold Co, New York, New York.

Brereton, K. (1994). Colour Sense. Desktop Magazine, September 1994, No 84.

Collier, D. (1993). Collier's rules for Desktop Design and Typography. Addison Wesley, Wokingham, England.

Gardiner, M. M. and Christie, B. (Eds) (1987). Applying Cognitive Psychology to User-Interface Design. John Wiley and Sons, Chichester.

Hicks, R. & Essinger, J. (1991). Making Computers more Human-Designing for human computer interaction. Elsevier Advanced Technology, Oxford, UK.

Kemp, J. E. & Smellie, D. C. (1989). Planning, producing and using instructional media. 6th Ed. Harper and Rowe, New York.

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

Parker, R. C. (1990). Looking Good in Print. Ventana Press, NC.

Ravden, S. and Johnson, G. (1989). Evaluating Usability of Human-Computer Interfaces. Halsted Press, New York.

Shneiderman, B. (1980). Software Psychology-Human factors in computer and information systems. Little Brown & Company, Boston, USA.

Shneiderman, B. (1987). Designing the User Interface, strategies for effective human-computer interaction. Addison-Wesley, MA.

Talman, M. (1992). Understanding Presentation Graphics. Sybex, San Francisco.

Williams, R. (1990). The Mac is not a Typewriter. Peachpitt Press, Berkeley CA.

Wynn, S. and Herrington, J. (1995). The Page in Print. Edith Cowan University, Perth, Western Australia.

Please cite as: Wynn, S. (1995). Design principles for slides and overheads. In Summers, L. (Ed), A Focus on Learning, p287-291. Proceedings of the 4th Annual Teaching Learning Forum, Edith Cowan University, February 1995. Perth: Edith Cowan University. http://lsn.curtin.edu.au/tlf/tlf1995/wynn.html


[ TL Forum 1995 Proceedings Contents ] [ TL Forums Index ]
HTML: Roger Atkinson, Teaching and Learning Centre, Murdoch University [rjatkinson@bigpond.com]
This URL: http://lsn.curtin.edu.au/tlf/tlf1995/wynn.html
Last revision: 19 Apr 2002. Edith Cowan University
Previous URL 11 Mar 1997 to 19 Apr 2002 http://cleo.murdoch.edu.au/asu/pubs/tlf/tlf95/wynn287.html