The web is a medium of self-expression, it reflects the designer’s taste, thoughts, and feelings. It is therefore important to plan it very carefully, As in houses, a general web site ususally has an entrance, or the front door (home page); a passage leading to the various rooms of the house (the page after the home page); the main rooms (core pages) and the exit (final pages). It can be more interesting to build up the user’s expectations before opening the core page.

Choose either white or a very pale colour. Dark backgrounds are very difficult to read, and wallpaper effects take a long time to load. As you may never know the capabilities of all browsers it’s better to make sure your page will suit most of them.

Choose black ink for main text, red for important parts of the text, blue for links and magenta for visited links, as these are common conventions. Use graphics for icons and vary the position of text using tables.

• View page designs with a range of browsers and on different computer platforms to check presentation;
• Indicate the nature of the site to users so that they are aware of potential time delays (e.g. structure of site, file sizes and browser requirements);
• A designer must allow for time delays in the learner moving between elements of the learning material:

• Consistency of presentation;
• Clear structure (i.e. heading, captions and instructions written in plain English and appearing where learner expects them);
• Clarity of display (i.e. not too much displayed);
• Meaningful; and
• Visually attractive.

• Your objective is to provide a screen design which is clear, straightforward and meaningful;
• The web page should not exceed 3 or 4 screen lengths;
• Minimise the number of page changes;
• Avoid horizontal scrolling it can confuse learners;
• If you want to encourage learners to print the page then provide an alternative version where you can combine several pages together on a single page or a downloadable file;
• The structure should be consistent, straightforward and motivating:

• Maximum of 5 to 7 choices on each page;
• No more than three levels or steps to reach any particular objective;
• An exit from every page;
• Single jump to return to Home Page; and
• Clear information to learners on every page to aid their navigation.

• Indicate scope or structure of the site;
• Frames can have a significant benefit to users if they are used to provide a consistent display while moving through a web site;
• Frames can add considerably to the complexity of the display;
• Frames are likely to take longer to load;
• When graphics are employed it is important to offer a text alternative to the image;
• Graphics can add significantly to the size of a web page so that downloading can be slow especially for learners who are accessing the site using a low speed modem;
• Links and navigational aids are important in providing a clear structure:
• Always provide a return link to the Home Page;
• If the page is long (over 2 screens) then provide a return to the Top of Page link;
• Explain the structure of the site on the Home Page;
• List sections at the top of long pages (i.e. over 2 screens long);
• Links such as NEXT, BACK or RETURN assume that the learner knows what next, back and return take you to. It is better to explain, for example, Next to Colour Tutorial page 4 of 6; and
• Links in the text should be meaningful and part of the information.

• Do not allow the capability of making hypertext links to take over;
• Animation shows the change over time;
• Animation adds interest to a display;
• Animation attracts the learner’s attention;
• Keep a high contrast between graphics image and background;
• Relate graphics to the capability you want to be learned;
• Pictures not covered by the information in the text will not enhance learning;
• The presence of pictures relevant to the text will assist learning;
• Pictures can aid learner’s understanding and recall of information;
• Learners may fail to make use of complex illustrations unless encouraged to study the image;
• The image should be placed near the text it is illustrating;
• Learners prefer representative graphics occupying a quarter to half the screen display but remember the size of the file which will need to be loaded;
• Up to three representative images can be displayed on a single screen;
• Users read the text on a screen 20 to 30% slower than the corresponding text printed on paper;
• The length of a line of text should be short (i.e. between 8 and 10 words);
• The text should be displayed in meaningful units (i.e. a single concept at a time);
• Text should be presented left justified;
• Text should use a mixture of upper and lower case letters; and
• Cross-references in the tutorial text can increase learners access to additional facilities.

Clarke, A. (1997). The Principles of Screen Design for Computer-Based Learning Materials. A Training Technology Unit Publication, DFEE, Crown Copyright.