Interface Design Guidelines for Users of All Ages

Read the whole story in this PDF: Interface Design Guidelines for Users of All Ages

• Thirty years from now, it is estimated one in four people in the developed world will be aged 65 and over, an increase from one in seven today.2 As the post World War II “baby boom” generation continues to advance in age, countries throughout the world will have more seniors than ever before.
• What is usability? Effective interface usability takes into account navigability, intuitiveness, functionality and sinteractivity from a user perspective, rather then the perceptions of the designer, developer or organization. All too often designers, developers and product marketers fail to understand the true human factor needs. What might appear as natural and intuitive to them may be confusing to the consumer.
• Accessibility refers to whether or not the technology allows end-users to make use of the technology. Just as technology skills and relevant content are integral components to bridging the digital divide for young and old, accessible design for people with disabilities is essential to making the Internet truly universal.
• We must not forget that for many the Internet is a new experience. We must not champion innovation over clarity or form over function. Users who are new to technology haven’t had the benefit of witnessing the evolution of site design and interactivity. Keep the cleverness where it belongs, in the content and put simplicity in the design.

Physiological Changes of Aging

After 55, many will experience vision changes including varying levels of presbyopia, experience a reduced field of vision and ability to resolve images. Other changes include an inability to distinguish certain colors and being able to adapt to changes in light levels as experienced when driving through a tunnel or walking out of a move theater.

Major changes in the changing eye:

1. The most familiar ailment is presbyopia resulting in the decreasing ability to focus on near tasks such as reading as a result of the eye’s lens losing its elasticity. While typically bifocals are designed for reading printed material at a distance 16” at a 25-30 degree downward angle, the average computer screen is 24” away with an upward viewing angle of 10-20 degrees. Many users with presbyopia find that a special pair of glasses optimized for computer usage resolve strain and fatigue.
2. Yellowing of the eye lens causes images to appear as if one is looking through a yellow veil or filter. Another result is that less violet light is registered by the eye, which makes it easier to see reds, oranges and yellows than it does to see blues, greens and violets. This loss in color perception is often called color blindness, which many as one in twelve males are affected. with. This affliction increases with diabetes as well as glaucoma,
3. A third major change in the aging eye is the shrinking of the pupil, resulting in the need for more light and a diminished capacity for adjusting to changing levels of illumination. According to the American Optometric Association, a 60 and 80 year-olds retina only receives 33% and 12% respectively of the light of an average 20 year old.

Layout & Style

• We have observed older users and novices tend to scroll much slower using the bar arrows on the right hand scroll bar, vs. dragging the bar. Further hampering their navigation is the use of an older mouse which does not have a built-in scroll wheel
• Users prefer rows and columns on page to be aligned and, as a result, are better able to read the text.
• Flashing or blinking graphics, Excessive pop-up windows and ads banners are highly distracting
• Using any background patterns including watermarks or embossed logos generally are distracting and interfere with readability. As an alternative, a light complementary background color can be applied.
• Large areas of white space and small blocks of text increase readability. It is suggested you leave a wide margin of 1 ½ or more inches on the right side of the page to maximize usability with different monitor types, window sizes and display resolutions.
• For those users with diminished motor capabilities, simple double-clicking a mouse or scrolling can be difficult. It is recommended you attempt to make all graphical links large and static. Increasing the size of the area around a link, making it “hot” or selectable, can enhance ease of use. Never expect a user to click on a moving graphic element or banner.
• When a user enlarges a Web page, images, including logos, banners and buttons, aren’t enlarged with the rest of the text on a page. Be wary of navigation bars and other crucial elements of a page that cannot be resized.
• Insure your links are consistently underlined to make then identifiable and so that “screen readers” can recognize them.
• Consistency in navigation is one of the golden rules for all designers.
• Left-hand alignment as used in this document, offers a high level of readability as compared to justification. Justified paragraphs have all lines the same length. Forcing the line length causes irregular letter and word spacing. Centered text is best used for titles or very small amounts of copy within a text box.

Color

• Complementary colors are opposite each other and provide contrast for readability. For example when choosing a primary color such as blue, its complementary color would be yellow. Adjacent colors to avoid would be orange and red or blue and green as they do not offer a high level of differentiation to the aging eye. An alternative choose colors from opposite side of the color wheel.
• It is usually in the low saturation levels (very pale or very dark) that cause difficulties for users with color deficiencies. Colors that are exceptionally bright, fluorescence or vibrant can have edges that appear to blur and create after-images, which fatigue the eye. For example yellow text is very difficult to read. A light type color on a dark background can cause letters to appear to close in itself.
• Do not use instructions which refer to objects by color. For example rather then telling the user to click on the red or green button, tell them to press the “on” or “stop” button.
• As a rule use dark type on light or white backgrounds.

Text

• Legibility (readibility) Use basic and common fonts. Avoid drop shadows on text. Use consistent typefaces and fonts throughout your site by applying style sheets, pre-setting formatting in body text, header, bullet and title applications.
• Size. Twelve to fourteen points are recommended font sizes for copy while headlines and titles are typically two points larger. Do not assume that all users know how to change their view or text size within their browser.
• Typefaces. Typefaces come in two general categories serif and san serif. Serif faces include extra “feet” at the ends of the strokes and vary in line weight within the shape of each letter. In general, for print applications, serif typefaces are most legible because the serif adds differentiation between letterforms. Yet, on lower resolution and small monitors, this may not always be true. Examples of serif fonts include Times New Roman as used in this document or Courier and Century Schoolbook. Sans Serif (without serifs) includes fonts such as Arial and Verdana. Choose typefaces based on their familiarity and legibility.
• Kerning. Kerning refers to the adjustment of space between letters in a word.
• Leading. The space between each line of text. Typically, the leading specified is 2 points
  larger than the typeface.
• Use of all capital letters. While there is a need to delineate content from headings, the use of all caps tends to lead to higher levels of eye fatigue because of little differentiation between the letters. As an alternative, consider using bold or capitalize the first letter of each word in a heading. This provides contrast from the body copy, will increased readability. For example “A Guide for Effective Web Design for Users of All Ages” vs. “A GUIDE FOR EFFECTIVE WEB DESIGN FOR USERS OF ALL AGES”.
• Alt Tags. Insure every graphic element, logo and photo includes an “ALT tag”, using alt= “…”. Insure the description is concise yet descriptive, for someone who may not be able to see the image but uses a screen reader or voice synthesis browser, or does not have the ability to download graphic images.
• About Us. The About Us section of your site is important to the older computer and Internet users as they are often concerned of potential information and privacy misue.

Complemtary colour wheel:
Complementary colours are the best choice to provide contrast for readability