Website Design for Older Adults

It is shocking how many websites aimed at a 50+ audience are inappropriately designed.

This article is a work in progress as we continue to seek examples of websites that are well designed for older adults while sharing guidelines that have been put forth for aging friendly sites. Building websites for seniors nests within a broader topic of accessibility. Indeed one of the few well designed sites in terms of UI (user interface) and UX (user experience) we have found so far – while searching for examples of sites suitable for 50+ audiences, is the WordPress site for LightHouse for the Blind and Visually Impaired – San Francisco.

The government offers accessibility guidelines for website development.

The WordPress Community has made accessibility a priority. WordPress is our platform of choice because it provides a very easy to use content management system that can be passed on to non-technical users once the website is created so that they can easily update it. Because there are thousands of WordPress professional developers if for some reason you need to find someone new to make changes to your website, you have options. Other reasons we recommend WordPress. Choosing between an open source CMS like WordPress and a proprietary one.

Do you know of an eCommerce site aimed at 50+ that is highly easy to read and navigate?

Can you please let us know about it?

I got some examples of sites properly designed – in his opinion – for seniors from Cemal Tashan. Cemal Tashan has made some useful presentations on designing for seniors to the WordPress community (see below). These are @Tashan’s three current website recommendations for Designing for Seniors.

– Silver Sneakers a part of Tivity Health. Built on WordPress! (BuiltWith is blocked for this site)
– National Institute on Aging
Builtwith.com/nia.nih.gov NIA is built with Drupal.
– AARP
builtwith.com/aarp.com

I found out about the Lighthouse for the Blind and Visually Impaired during the Aging in America Conference in San Francisco in March, hosted by the Aging Society of America. I am hoping to collect more following up with contacts there and from Boomer Business Summit.

Accessible Websites Built on WordPress!

– Lighthouse for the Blind and Visually Impaired – San Francisco

Thank you to Marie Jobling at Community Living Campaign.
builtwith.com/lighthouse-sf.org
The design direction for this website was developed in-house.
There was some outside development work done by accessibility WordPress plug-in specialist Joe Dolson.

I have feedback from Cemal that this is not perfect but a good effort.
http://wave.webaim.org/report#/http://lighthouse-sf.org/

Director of Communications Will Butler gives the important tip that basing a website on the WordPress default themes 2015 – 2017 is best because accessibility is built in. The heading should of course be customized to reflect the brand. Lighthouse for the Blind and Visually Impaired also designed The Holman Prize:

– Holman Prize

– Silver Sneakers

Boomer Business Summit March 28 in SF Resources for Designing for Older Adults

Silvia Vergani, former Design Director, Design Research at IDEO who spoke at Boomer Business Summit published a link on April 19th to download new design resources. IDEO developed the Design on Aging booklets with Project Catalyst—a pioneering research collaboration between AARP, UnitedHealthcare, Pfizer, and MedStar Health.

Good Resources for Designing Websites for Older Adults:

Two useful tools from Cemal Tashan:
webaim.org/resources/contrastchecker
thinkoutsidetheslide.com/color-contrast-calculator
You can request an accessibility report on a website here: wave.webaim.org

Googling for ‘images for websites for seniors’, I found these.

Mackenzie Craven (with G5)
Mackenzie Craven for Senior Housing Forum
This includes a list of senior vision issues to be aware of. Cemal Tashan also refers to how declining vision factors including the ability to distinguish colors must be addressed in website design in his WordCamp video below.

Pew Research Report on Older Adults and Technology Use 2014

Nikki Kerber and Allison Francis IDIA
“Designing Websites for Senior Citizens”
https://www.slideshare.net/Socialwebnerd/idia612-presentation

Box Clever
Box Clever Project for Sage Seniors Association in Canada
mysage.ca (Proprietary CMS)
store.mysage.ca/sage-savories
Both of these websites were built five years ago which deserves extra commendation on being ahead of the curve in their thinking at the time.

During this Google search for images for websites for seniors, I also found these promising but flawed sites:
a website with too much animation:
webbuzz.com.au/project-view/reverse-mortgage-broker-website/ project for seniorsfirst.com.au/
and one with curvy font use:
ellisjones.com.au/disciplines/online-social-media/new-mepacs-website-launched for mepacs.com.au/

Accessibility Design Tips: Cemal Tashan WordCamp Presentation and Supplementary Resources

Cemal Tashan’s guidelines are in this video. I have summarized his points below:


The websites Cemal gave as examples at the end of his presentation in 2015 are for the most part no longer on his list that I gave you above: Silver Sneakers, NIA.NIH.gov, AARP.

User Interface:

– Limit Scrolling
– Break information into short sections
– Left justify (do NOT use center nor right justification)
– “Resize text” button is a must
– Fonts: Avoid curvy, fancy fonts
– Seniors cannot close a pop-up
– Seniors prefer the format to be the same on mobile as on desktop
– Allow additional space around a clickable button, especially on mobile
– Make a button look like a button
– Be very careful with captcha, keep very simple like “I am not a robot” and make sure it works
– Speech function
– Keep in mind that seniors oven have difficulty navigating a site. They are likely to click the first big image they see.

Navigation:

– Don’t use the Hamburger symbol without the word “menu”
– Label symbols as much as possible
– Use single mouse clicks

Content:

– Minimize the use of jargon and technical terms

Color:

– Color combinations: Color Safe based on WCAG 2.0 guidelines (supplementary reference from Cemal)
– Underline links instead of just depending on color (supplementary reference WebAim.org)
– Black on white is the ideal color
– Use white drop out text carefully
– Keep pastels to a minimum
– High contrast color combinations
– Blue, like Facebook

Use Sub-Headings and adequate white space:

– Wall Street Journal was a good example at the time of separating out sections with sufficient white space, and headings in different sizes.
– Break information into short sections

While searching senior topics I found these sites among many aimed at seniors that don’t meet Cemal’s minimum guidelines.

agingcare.com
1800wheelchair.com
redhatsociety.com

Other Thoughts on Senior Design

While “Apple News” is an app rather than a website, when “accessibility” is turned on, as in this image, it is an excellent example for font size and white space.