The visual system serves various functions, four of which are critical in the context of designing a user interface for seniors.

• Visual acuity is the ability to see fine details of objects such as text, icons and buttons in a user interface for seniors.
• Contrast sensitivity is the ability to discriminate between different brightness levels.
• Color perception is the ability to distinguish between different colors in and around text, icons, buttons, etc.
• Usable visual field is the ability to use the whole of the visual field to perceive detail in the area being looked at and the surrounding area.

From the age of about 40, the lens of the eye begins to harden and lose its flexibility, causing a condition called “presbyopia.”  Presbyopia causes images to be focused behind the retina with a resulting loss in visual acuity. This is a normal part of ageing that makes it increasingly difficult to focus at short distances.  Because of this most older people have less ability to detect fine detail such as small print and certain font styles (hence the need for reading glasses).  This impairment is worse in dim light, with low contrast, and away from the center of the visual field.  This lens hardening also makes it take longer to refocus with changes in distance. However, distance vision is usually unaffected by presbyopia. These are important considerations when designing a user interface for seniors.

Graphics Courtesy University of Cambridge

With age our pupils shrink; resulting in the need for more light and a diminished capacity to adjust to changing light levels.  For example, 60-year-old retinas receive only 40% of the light that 20-year-old retinas receive, while 80-year-old retinas only receive around 15%. Hence older people also have lower light sensitivity and increased sensitivity to glare.  This also compounds problems in older adults with quickly changing focus and reacting to rapid changes in brightness.

Graphics Courtesy WiserUsability.Com

The older eye is less able to make out low contrast patterns.  According to the National Eye Institute in the US, from the age of 40, contrast sensitivity starts to decline, until at the age of 80 it may have been reduced by up to 83%.  This has profound implications when choosing colors.  For example, as illustrated below certain text color and background color combinations are extremely difficult to read for older people with low contract sensitivity.  These are important factors when designing a user interface for seniors.

Graphics Courtesy University of Cambridge

Compounding the effects of presbyopia, visual sharpness is also worse with declining contrast sensitivity. Declines in contrast sensitivity cause the older eye to have slower accommodation transitioning between dark and light places.  Older eyes have more difficulty seeing thin lines and focusing on hard edges.  Beyond affecting reading in general, this makes it difficult for seniors to distinguish between similar icons, buttons and other user interface element shapes where edges and lines are critical visual cues in a user interface for seniors.

Color confusion can make user interface interactions very difficult if color is overly relied upon to provide information.  The most common form of color blindness in the general population is difficulty in distinguishing between colors from red to green in the color spectrum.  According to the National Eye Institute this affects approximately 1 in 12 men (8%) and 1 in 200 (0.5%) women in the world.  These percentages increase with age, and severity also increases with age.  Although, known as “red-green color blindness” this does not mean sufferers mix up red and green, it means they mix up all colors which have some red or green as part of the whole color. For example, a red-green color blind person will confuse a blue and a purple because they can’t ‘see’ the red element of the color purple.  For red-green color blind seniors, the “state” of hyperlinks that turn from blue to purple when clicked will be difficult to differentiate.  Blue-Yellow color blindness should also be considered, but is much less common than red-green color blindness.

Graphics Courtesy University of Cambridge

Graphics Courtesy ColourBlindAwareness.Org

Other common ageing related visual disorders include cataracts, glaucoma, macular degeneration, and diabetic retinopathy.  According to the Royal National Institute for the Blind in the UK, approximately 16% of people between 65 and 74 years suffer from some combination of these disorders.  This number grows to approximately 19% of people between 75 and 84 years.  And after 85 years approximately 46% are affected.  Because of these disorders many elderly people suffer from lens yellowing and/or a limited field of vision as illustrated below.  Consider these facts in your user interface for seniors.

Simulations Produced Using the  Vision Impairment Simulator

Mitigation Strategies:

• Use larger pointer symbols for user interfaces that employ a mouse, touch pad, joy-stick, active pen or other type of pointing device. Provide easy to recognize and to use settings to change pointer size in your user interface for seniors.
• Use larger sized buttons, icons and other user interface element shapes. There are no specific size recommendations for vision (although there are for mitigating motor control problems – see the Movement Control section).  The best size for buttons, icons and shape is a complex function of contrast, symbol or graphic legibility, label text size, device screen size and resolution, etc..  This is a factor that requires extensive user testing by older adults.  You might also try the Sight Exclusion Estimator to test specific sizes.
• Carefully consider line thickness, line spacing and contrast when designing graphical designs for buttons, icons and other graphical shapes when designing a user interface for seniors.
• When they are an important part of user interface functionality, offer larger functional substitutes for small or difficult to interpret operating system controls (e.g., augment the small Wi-Fi icon on a smartphone with a larger icon in your software app user interface).
• The use of sans serif fonts is widely recommended. These are easier to read for seniors because they do not have projections at the end of strokes.  One study also showed that use of sans serif aids older adults in being able to more effectively “scan” pages for relevant information.  Commonly used sans serif fonts include Arial, Tahoma and Veranda.  Avoid serif fonts.  Avoid condensed fonts.  Avoid decorative font styles.  Font size being equal, these fonts are more difficult for older people with vision impairments to read.
• For body text, use a minimum font size of 14 points (0.19 inches as viewed on a side by side printed sample using postscript).  Viewing distance and angle also need to be considered.  See our article on Understanding Recommended Font Sizes for more detailed information.
• For heading text, minimum font sizes of 18 points (0.25 inches as viewed on a side by side printed sample using postscript). Viewing distance and angle also need to be considered.  Headings should clearly stand out from body text, and should clearly identify the sections that follow. This is a factor that requires extensive user testing by older people.  See our article on Understanding Recommended Font Sizes for more detailed information.
• For text embedded within menus, buttons, icons and other interactive controls, use a font size that is consistent with body text font size in your user interface for seniors.
• Where possible let people easily adjust text size themselves. In these cases, ensure the formatting continues to look good when text size is enlarged – particularly links, buttons, menus in other interactive controls.
• Use text formatting options carefully. Avoid text that is all caps or italics.  Avoid italics and underlining.  These consistently prove difficult for older people to read.  Some older users find bold text an advantage, some do not.  Use left justification.  Use increased line spacing and margins.
• Avoid moving or animated text which may be difficult to maintain focus on and read. Animation should be avoided in a user interface for seniors (see the Attention section).
• The size and spacing of user interface element shapes and fonts must relate to the possible variations in screen sizes (inches) and screen resolution (number of pixels).  For example, if the same user interface is designed to be viewed on a personal computer, a tablet and a smartphone.  Rather than using absolute pixels it’s better to design in terms of pixels per inch (ppi) or points (pt) or density independent pixels (dp) which are all device size and resolution independent measures for scaling across varying devices.  For website pages, responsive design allows pages to be viewed in response to the size of the device one is viewing.  Responsive web pages adapt to the size and resolution the screen by using proportion-based grids, flexible images and CSS3 media queries.
• Use adequate white space. Blocks of text are easier to read if surrounded by white space.  This is also true with shapes such as buttons and icons.  There are no specific minimum white space recommendations for vision (although there are separation distance recommendations to mitigate motor control problems – see the Movement Control section).  This is a factor that requires extensive user testing by seniors.
• Don’t rely on differences in color – particularly blue and purple in close proximity; yellow and red in close proximity; blue and green in close proximity; and shades of gray in close proximity. These colors are difficult for many older people to distinguish, particularly when one is used as a background for another.   You might try the Vischeck Software or one of the other tools referenced below to test your choice of colors under certain color blindness scenarios.
• Pay attention to brightness and contrast ratios – particularly those between text and its background. W3C published a recommended contrast ratio of at least 4.5:1 between text (or images of text) and solid (black or white) background behind the text.  The 4.5:1 ratio accounts for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.  The recommended ratio is increased to 7:1 for users with vision loss equivalent to approximately 20/80 vision.  The 7:1 level generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency.  Exceptions to this recommendation are (1) that large text (and images of large text) that have a contrast ratio of at least 3:1; (2) text (or images of text) that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement; and (3) text that is part of a logo or brand name has no minimum contrast requirement.  In most cases black type against a white background, or white type against a black background work consistently well for older people.  These black/white variations have a contrast ratio of 23:1.  You might try the Luminosity Colour Contrast Ratio Analyser or one of the other tools referenced below to test your contrast ratios.  See our article on Understanding Recommended Color Contrast for more detailed information.
• Avoid patterned backgrounds. They provide lower contrast ratios and may also be distracting in a user interface for seniors.
• Consider the likely viewing distance and potential difficulties caused by ambient lighting when choosing text size and brightness contrast. Test your design by squinting and viewing at various distances from the eye.  Or try the Sight Exclusion Estimator to test likely viewing distance scenarios.
• Clearly distinguish regular text from hyperlinks or other functions. Use underlining in addition to color in order to more clearly differentiate between hyperlinks and regular text.  Avoid hyperlinks that toggle from blue to purple when clicked.  Avoid hyperlinks that toggle from blue to green when clicked.  Use the same constant formatting for hyperlinks throughout the entire user interface.
• Arrange related user interface elements spatially so they remain visible for older adults who have some loss of visual field. You might try the Impairment Simulator Software or one of the other tools referenced below to test your user interface design against certain visual field impairments.
• When the design of your user interface for seniors allows, provide brighter lighting and minimize glare.
• Avoid flashing user interface elements. If flashing is used (e.g., to provide a critical alert), use low frequency flashes.  The Epilepsy Foundation states that frequencies of between 5 and 30 times per second may trigger seizures in seizure prone people (young and old).  Another article says 3 or more flashes per second need to be avoided.
• Utilize assistive technologies that might help accommodate sight impairments…for example, audio readers such as iOS VoiceOver or Android TalkBack; or built in browser synthesized speech screen readers. Also consider the use of haptic (vibration or other tactile) feedback when an action is taken or an event occurs in the user interface.  Be aware of possible information overload in seniors when multiple assistive technologies are employed.
• Utilize adaptive technology strategies that might help accommodate sight impairments in seniors. For example, operating system font and size settings, or display resolution settings.  Do not expect many older people to be able to find the standard (hard to find) settings provided by standard device operating systems.  Your user interface should make such settings obvious and easy to use.  For example, by providing proxy text size directly in your user interface that change the related operating system settings.

Below are some vision tools and resources that can assist user interface designers:

• Colour Contrast Analyser provides a pass/fail assessment against WCAG 2.0 color contrast success criteria and simulation of certain visual conditions, including color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision.
• Colour Contrast Visualiser helps you find optimal color combinations by visualizing the colors that provide sufficient contrast on a color palette. Available in Flash and Adobe AIR versions, so you will need support for either of these in order to use it.
• Luminosity Colour Contrast Ratio Analyser tests for a contrast ratio of 4.5:1 as recommended by WCAG 2.0.
• Snook Colour Contrast Check tests text and background color combinations against WCAG 2.0 Font size is taken into account.
• CSS Analyser does a color contrast test of your CSS. It also validates the CSS and checks that relevant text sizes are specified in a relative unit of measurement.
• Colour Contrast Analyser Firefox Extension examines the difference between foreground and background colors for text elements.
• Colour Contrast Check lets you input foreground and background colors either by entering hexadecimal values or by adjusting sliders. The tool gives you immediate feedback by showing what the chosen color combination looks like and whether it passes the test.
• Sight Exclusion Estimator is a mobile-friendly website that enables you to assess the visual clarity of text or graphics that are viewed on a handheld device. It estimates the number of people who would be unable to see such designs comfortably.
• Impairment Simulator Software simulates a range of vision impairments at different degrees of severity. This can help in developing an understanding of the impact of vision conditions on usability (best used in Internet Explorer).
• Cambridge Simulation Glasses are wearable glasses that demonstrate the impact of a range of visual acuity losses.
• Vischeck Software simulates color blindness and corrects images to make them accessible to color blind viewers. It can be used online or as a Photoshop plugin that appears in the “Filter” menu. The online tool simulates color blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colors of the document you are working on.
• WebExhibits Vision Simulator allows you to choose from various photographs with the site simulating the photograph in whichever type of color blind condition you choose.
• ACTF aDesigner simulates different levels of short sightedness, lens transparency and color blindness. It also checks vision aspects of web accessibility.
• WebAIM Voice Over (Mac and iOS) and NVDA (Windows) simulate the use of a screen reader with a user interface for seniors.
• Fluid blog Mobile Designs 101 provides an excellent reference to understanding pixels, points and screen resolution.

Related Articles: Understanding Recommended Font Sizes | Understanding Recommended Target Sizes | Understanding Recommended Color Contrast | Using Color When Designing Technology for Seniors