| |
|
| B | A | C | K | G | R | O | U | N | D | _ | C | O | L | O | R |
Designing web pages
|
John Bradford
outlines the principles of good web-page design for a dyslexic audience.
|
The arrival of the World Wide Web on our computer monitors means that it suffers from the faults of any new medium:
![]() You may have other criticisms of the present state of the World Wide Web. This article will attempt to lay out some of the principles of good web design, which apply to most web pages, but especially to pages which are intended specifically for dyslexic readers. The examples given show bad practice, and the layout of this article is intended to show good practice. Column width. There
is nothing worse to read than unbroken text stretching right across your screen.
As the eyes try to scan across, it is extremely difficult to read on to the next
line. The point of vision gets lost in a sea of text. (Example)
(Example)
Far preferable is a narrow column width like the page this article is written on (60-70 characters). This is the sort of width used by newspapers, and it allows much easier scanning along the lines of print. Justified or not? Justified text is where the words are spaced out by the word processor so that both the left and the right sides of each column are straight lines. Unjustified text - like the text on this page - leaves a ragged edge down the right hand side. For a dyslexic reader, justified text, with its uneven spaces between words, creates visual patterns of white space which are hard to ignore. They distract the reader, who loses the place. Unjustified text is far easier to read, although it is unfortunately not fashionable in some design-led magazines. Background color. Many
dyslexic readers are particularly sensitive to the brightness of text on a pure
white background. This can cause the words to appear to move around and to blur
together.
This difficulty can be avoided if pure white is not used for the page background color. A slightly off-white color can easily be achieved (with the code BGCOLOR="#FFFFE5"). Text is also harder to read on a patterned or tiled background. (Example.) For pages which are heavily used by dyslexic adults or teenagers, a background color changer can be added to a page, like the one at the top of this page (which may be freely copied by any other web designer). It is also helpful to keep the page background clear of unnecessary objects or movement. Type face.
Unfortunately, most computer programs are set up to use Times New Roman as the 'default' typeface. This is a traditional typeface, associated with printing, and it looks like this: abcdefg hijklm nopqrstu vwwxyz You will notice that Times New Roman has lots of decorative bits added to letters (serifs), making them more complex to read. Also, the letter 'g' is more like a number 8. The typeface 'Arial' being used on this page is clearer, is more like the letters we all learned at school, and is preferable. Some dyslexic readers prefer the Comic Sans typeface, but it can appear a bit childish to some readers. Verdana has an open feel and is a popular choice for websites. Print size. Screen sizes are getting larger, but many people still view webpages on smaller monitors. This makes reading any size smaller than 'size 2' difficult without a magnifying glass! This sentence is written in size 1, and deserves the description of 'small print'. Unfortunately, as web designers try to squeeze more and more information onto their pages, assuming that their viewers have the same large monitor screens that they themselves have, it is becoming more commonly used. Avoid italics. Italic letters lean over sideways, and are used in books to emphasize a point. However, when seen on a computer monitor, they are hard for a dyslexic person to read. When the text size is reduced to size 1, they become virtually illegible. Italic letters should be avoided if at all possible. It is far more sensible to make important words bold. Pictures or images. You don't have to be dyslexic
to know that scanning a page of writing is far more pleasurable if there are pictures
to look at. Pictures, flow charts and pictograms immediately give a sense of what
the page is about. They break up the page into smaller chunks, and, for a dyslexic
reader, provide an immediate visual stimulus and a visual memory for the future.
A severely dyslexic teenager who was showing me how he used the Internet was mumbling to himself: 'Pictures . . . pictures . . . pictures . . .' as he followed the results listing for his enthusiastic search for information about motorbikes. Text
boxes or bubbles.
Moving images. Flickering or flashing images are distracting not only to anyone with visual problems, but to all of us. Advertisements at the top of pages seem particularly desperate to force themselves into our field of attention. If only they knew how off-putting their gimmicks are! There are also little effects that can make images change drastically or patterns appear around the mouse pointer. These also make it particularly distracting to people who simply want to read the information on the page. Navigation. ![]() Difficulties with a sense of direction often plague dyslexic readers. How often have we all been trapped by some unimaginative web designer so that we just cannot get to the page we need on the website! The golden rule should be that there is a simple list of links on each individual page linking to every other page or section on that site. Short sentences. Long sentences contain more than one idea. It is perfectly possible to break longer sentences up into shorter ones. This does not mean that the sentences are intellectually inferior to a passage with longer sentences. The same ideas can be conveyed equally clearly in shorter sentences. This gives a dyslexic reader a break after each sentence. There is a limit to the length of a complicated sentence that anyone can take in before our mind gives out! Short paragraphs. ![]() Newspaper stories are good examples of how text can be broken up to improve readability. It is very common for newspaper articles and reports to be set out so that there is a paragraph break after each sentence. This may not fit in with conventions about correct English or essay-writing, but that is another issue. The priority when reading a newspaper or web-page should be easy readability, and paragraphs - even of only one line - should always be spaced out with an empty line between each paragraph. This page is a good example of this. Writing for text-reading software. Severely dyslexic readers may well be reading your web-page using a text-reading browser such as Web Talkster. Whilst highly recommended, such software programs have their limitations, such as the inability to distinguish where headings end. The following five guidelines will help to accommodate these shortcomings:
The whole point of the presentation of text is for the meaning to be easily digested. This can best be achieved on a web-page by having a paragraph break every sentence or two. Clear, well-spaced pages of unjustified text, broken up with illustrative pictures, can make surfing the web a far easier experience for dyslexic readers. Feedback, additional references, books and other comments would be greatly appreciated, to me at this e-mail address. John
Bradford
References:
British Dyslexia
Association Dyslexia Style Guide. - The
style in which this information is produced is key to facilitating comprehension
for the reader. Website design must consider all the above factors together with the following points. Web Designing for Dyslexia. - People with dyslexia frequently experience discomfort when reading because they find it more difficult to ‘decode’ the words on the page, and can also find it difficult to remain focussed on a particular piece of text. Some people may also have to concentrate more to remember what they have already read, which means they will tire more easily. Concise, Scannable, and Objective: How to Write for the Web. - studies of how users read on the Web found that they do not actually read: instead, they scan the text ... Beyond
Guidelines: Advanced Accessibility Techniques. Usability v. Dyslexia. - Legibility guidelines for dyslexia often conflict with usability conventions for websites. My challenge was to find a way of designing a website that adhered to both sets of rules. Current Issues in Web Usability . Web Accessibility Initiative. Designing More Usable Web Sites. Designing For Dyslexia. People with dyslexia frequently experience discomfort when reading because they find it more difficult to 'decode' the words on the page, and can also find it difficult to remain focussed on a particular piece of text. Some people may also have to concentrate more to remember what they have already read, which means they will tire more easily.
Books:
|
|
|