CET HomeSupportContact UsCustomer LoginCET ProductsMultimedia GalleryTraining Services
The Process
Needs AnalisysThe members of the team

A number of principles need to be applied in order to avoid problems and ensure the effectiveness of the learning program.

Alignment

When designing Training packages consideration must be given to alignment. Alignment means that all elements on a screen or page are lined up with each other. Strong alignments create invisible bonds between elements thus making it clear where information is linked. Alignment also makes things easier to read because the eye does not have to wander or jump around the page. Alignments should not be mixed - for example if some elements on the screen are left justified and some are centred the alignments will be weak, resulting in a messy and unprofessional looking page. Strong alignments promote clear communication.
  • Try to create strong alignments
  • Where possible avoid mixing alignments
  • Don't align screen objects too close to the top or edge of the page
  • Align horizontally as well as vertically

Contrast

Contrast, together with placement between elements on a page, creates a hierarchy of importance. The largest, brightest and boldest elements on a page are where our eye is first drawn. If everything is similar then we tend to focus on the top left-hand corner of the screen and start from there. If we have a page consisting solely of body text (hopefully not!) then this would not be a problem. If elements on a page have a different function then the contrast between them should be obvious. For example if headings are always Arial 16 point red and the body text is always Times New Roman 12 point black then the user will always know what is a heading and what is informational text. Strong alignment and proximity will ensure that the user understands how the headings and body text are related.
  • Use contrast to create a hierarchy of information
  • Use contrast to separate unrelated elements

Repetition (visual consistency)

Repetition is an important part of any Training package. Without it the package will look disjointed, feel uncomfortable, and it will be difficult for the user to find their way around. There should always be repetition in the form of overall style, colour, backgrounds, typeface, style of graphics and placement of repeated elements.

Stick to one background colour or pattern until you have some experience. It is possible to vary the colour or pattern between sections in a Training package but there must always be some continuity. Select one size, colour and type of font for your main text and keep to it. For headings, help text or captions use a different font, font size or font colour to that of the main text but again be consistent.

If the placement and style of repeating buttons is consistent throughout the package the user will get used to the package very quickly. The same goes for other repeating elements such as digital audio or video controls.

Try to keep to one style for graphical elements where possible. For example if on one page a point is illustrated using a simple cartoon graphic and on the next page a related point is illustrated using a full colour photograph then some continuity will be lost.
  • Stick to one background colour or pattern
  • Be consistent with font, font size and font colour
  • Placement and type of repeating buttons should be the same.
  • Style of graphics should be consistent where possible


Proximity

It should always be clear to the user which elements on the screen are related to each other and it is quite simple to do this by using the principle of proximity. Elements that are close to each other, like those that are aligned have strong relationships. Large gaps between paragraphs and headings, graphics and photographs with poorly placed captions all serve to promote poor communication.
  • Keep related elements close together
  • Avoid leaving large gaps between headings and related text.
  • Ensure that the user does not have to "guess" which caption relates to which diagram.

Text & Fonts
A whole book could be written around fonts, but here we can only give some very basic information. Understanding the importance of selecting the correct font will ensure that you avoid making major mistakes and that your Training package will look elegant and present information in a way that is easy to read and easy to understand (Williams 1994).

Fonts can be categorised by type. In general it is a good idea to stick to one type of font for your main body of text, with a contrasting font or font colour for other type, such as headings or help text. Some fonts are much easier to read than others and, since our intention with Training is to get information across to the student, we must make our information easily readable. Good fonts to use for blocks of text are serif or sans serif fonts - select one and keep to it.

Example of a serif font Example of a sans serif font
Serif font type Sans Serif font type
Body text on screen should generally be no more that 14 point and no less than 10 point - 9 point is used for newspapers - but this will depend on font type. All the fonts in the tables below are 18 point but you can see that they are very different sizes. Slab serifs are good for headings while script and decorative fonts could be used on your introductory page. Use script and decorative fonts sparingly and when you do use them, use them for effect and make them large.

It is not a good idea to mix similar font types on a page - make them the same or make them different. For example, don't use Garamond for headings and Times for body text. These are both serif fonts and are similar but not the same. You could use either Times or Garamond for both the headings and body text (making the headings larger or bolder) or Times for the body text and a sans serif font like Arial for the headings. Select your fonts carefully and remember the rules of alignment and proximity.

Example of font types:
Example of font types

Words are much more difficult to read on the screen than on paper and it is more tiring for the reader, so keep Training package text to a minimum. Try not to use more than 200 words on a page, though 100 is preferable. If the line length of your text is too long then the student will have difficulty finding the start of the next line. No more than 10 words per line is a good average guide.

Avoid using capitals for main body text as THEY ARE MUCH MORE DIFFICULT TO READ and the text appears to be shouting at you. The reason capitals are so difficult to read is because all the letters are basically the same rectangular shape. Once people have learned to read they read quickly by looking at the shape of the words not at the individual letters - so forcing people to read capitals is presenting them with something of a handicap. Italics are normally used for gentle emphasis of words, not for main body text.

Colour & atmosphere
How your package looks will depend on the type of package that you are creating. An exploratory setting may be navigated using maps or rooms in a house where each might have its own style. Many Training packages are more formal with a strong navigational structure. These types of package benefit from the repetition of a good colour scheme that creates "invisible links" between screens or pages (see "Repetition" above). If you find it difficult to decide on a colour scheme for your package, then find one you like from another source and do something similar. In general stick to pale coloured background and set your typeface in a contrasting colour that stands out well. Black backgrounds with pale writing are often used to create a dramatic effect in multimedia displays and on promotional web sites, but may be unsuitable for Training packages where conveying information is more important than visual effect.

Colour, graphics, fonts and layout all combine to create a mood or atmosphere. For example, when producing a series of Training packages relating to medicine a very formal clinical style may be adopted with white backgrounds, strong alignments and a classic sans serif font for headings. Depending on the subject matter of the medical package another style may be adopted. For example, a package on the history of medicine could have a pale "cracked marble" background and script font for major headings.
Human Computer Interaction
Whilst graphic designers design creatively, those involved in Training package production and who are trained in HCI are rigorous in their pursuit of usability. Together they should combine to produce the near perfect product. To do this however each must appreciate the skills of the other. If you are interested in this topic then you may like to read the keynote address at HCI'98 by Mahoney (1998). More information on HCI can be found in the Development: Interface Design section of the site.

Hints & Tips
  • Always get someone to check the spelling and grammar in your Training package, the odd minor mistake will always creep in (no doubt you will spot some on this site) but major spelling mistakes - particularly if there are a lot of them - will seriously undermine your credibility! Spelling and grammar checkers are useful, but don't rely on them totally. For example my grammar checker does not see anything wrong with the following sentence. "There is a large tree by the house were I live".
  • Be ruthless in removing unnecessary images, lines, boxes or fancy bits from your pages. Don't add continuously moving graphics just because you can. Take away anything that is not relevant to the page or subject.
  • When designing your Training package use the fewest number of fonts possible.
  • Don't put two spaces after full stops.
  • Keep paragraphs short.
Needs AnalysisOther LanguagesProgrammingMedia ProductionDesignTesting