|
Another important factor is the manner in which the information is presented on the screen. The learner can easily be distracted and disoriented if the page is cluttered with lengthy text, too many images, fonts and colours. To help the student focus on the learning material, maintain consistency from screen-to-screen.
Factors in Web Page Design |
Explanation |
Page Design |
- keep the pages simple
- avoid excessive use of animated graphics, sounds, busy backgrounds
- use white space generously to guide the learners as they make their way through the page
|
Page Length and Width |
Width
- for pages containing text, the width of text on the page should not exceed 70 to 80% of the screen (as the eye tires scanning back and forth across the screen).
- place the text into a single celled table set at 75% of the screen to maintain the width
- Length
- “pages” of information should not exceed 1 or 2 screens (2 computer screens equal one page of written text)
- excessive scrolling can become tedious for your students
|
Text |
- break text into segments separated by white space and headings
- place your most important information in the top half of the page (often called above the fold, as in a newspaper.)
- be succinct in your writing; use bullet points where possible (keep it short and simple)
- studies have shown that text generally attracts attention on a page before the graphics (although this may be reversed with young users)
(Source: Nielsen, Jakob in Web Page Design Quality Criteria in the VID http://www.thevid.org Retrieved: April 8, 2004)
|
Fonts |
- reading material on a screen is 25% to 30% slower than from a printed page
- a non-serif font (e.g., Arial, Helvetica, Verdana) is easier to read than a serif font (e.g., Times New Roman, Georgia); select a font that is supported by your users
|
Alignment |
- refers to the “lining up” of items on the page both vertically and horizontally
- items can aligned to the left or right side, or center of the page
- choose 1 alignment and stay with it. Items that are not aligned on a web page make finding information more difficult
|
Repetition |
- repeating certain elements can provide coherency to a site (e.g., navigation buttons should be the same colour, size, and in the same location on every page)
|
Contrast |
- refers to the degree of difference between 2 elements on a page (e.g., black text on a white background provides the greatest contrast) which can include colour, size, boldness, degree of white space around objects, etc.; avoid overusing boldface
- make the text a strong contrast to the background colour of the page to ensure that the user can read it. Avoid using bright screen backgrounds that make it harder to display details.
- Most colour blind people have a red-green colour blindness
Avoid using these text colours as directions. E. g. Click the red text. It is best to avoid using colour to indicate something specific on a page.
|
Proximity |
- refers to the relationship of one item on the page to another.
- items that are close together appear to be connected; items that are separated do not appear connected
- keep titles, picture captions, etc., close to the text to which they are related
(Source: Williams, Robin and Tollett, John.1998. The Non-Designer's Web Book: An easy guide to creating, designing, and posting your own web site. California: Peachpit Press)
|
|
