User-Centric Web Design: A Case Study


May 14, 2013

Web design can be a complex process that involves more than just aesthetics. Unlike brochure design, for instance, web designers are aware that our designs are used by people – navigational menus, buttons, carousels and the relationship and flow of traffic among multiple pages are just a few examples that transcend layout alone. Research-based web design can improve the user experience and encourage repeat visits simply by increasing a basic understanding of who we’re designing for, and anticipating their online needs and behaviors.

The Client

This can be evidenced in one of our projects – Metrohealth, a medical practice website for seniors. The client wanted the design to be warm and inviting, depicting happy, healthy images of the elderly – a divergence from the cold, stark aesthetic common among medical practice websites. This fell in line with their unique selling proposition. The practice differentiated itself by providing quality care in a comfortable, home-like environment. Common rooms had warm lighting and intimate seating areas. Unique as well were their East-meets-West philosophy of care, providing services such as acupuncture, massage and reflexology, along with top-notch traditional medical care and concierge services.

About the End User

While the medical practice specialized in serving patients 65 and over, the website needed to appeal to younger generations as well. Often, the primary caregiver for elderly parents are their Baby Boomer (and younger) children, in the 40-50 year old range. These caregivers often are very involved in the management of their parent’s care, making medical decisions, managing appointments, and communicating needs. We needed to create a design that compelled and engaged this demographic without alienating the elderly themselves, who posed specific challenges and limitations of their own from a usability standpoint.

We began by doing some research on the primary demographic and found some interesting data. People over the age of 65 represent the fastest growing demographic worldwide – being dubbed the “silver tsunami”. By 2020, it is expected that over one billion senior citizens will be alive on the planet. America’s senior population is growing by 10,000 a day. Studies have found that 84% of these seniors now access the internet. Search queries among the 65+ demographic have doubled since 2010. This demographic is increasingly turning to digital tools for research, information and education.

Significant research had been performed into improving the usability of websites for the aging and elderly, who represent specific challenges:

  • Reduced visual ability
  • Psychomotor impairments/Loss of fine motor control
  • Attentional factors
  • Learning and memory impairments
  • Loss of contrast sensitivity
  • Loss of ability to see fine details

Good web design can offset these challenges by following specific usability guidelines. Taking the above limitations into consideration in web design has a secondary benefit to younger demographics. “Research has demonstrated that improving the usability of systems for elderly, limited cognition, or visually impaired populations allow the public, as a whole, to benefit from improved usability” (Web Usability and Aging, usability.gov.).

01

The National Institute on Aging and several other sources produced some “best practices” in the design and usability of websites for older adults. Below are a few guidelines I incorporated into our client’s website design, and why:

  • Sans Serif typeface – found to be easier to read for older adults than serif typeface.
  • Large body text with high contrast, font size 14 point or larger, with a regular/medium weight.
  • All link text followed the same convention: underlined and highlighted with color (versus colored, non-underlined textual links common in some designs.) This is a standard convention and avoids confusion as to whether the text is linked.
  • Body text is “double-spaced” or have more spacing in between lines than is standard, for readability.
  • Avoided yellow, blue and green in close proximity (difficult to discriminate for those with color blindedness)
  • I made sure to view the design in black and white to determine that all elements are legible.
  • I used dark type against a light background, found to be most readable. I chose a light color scheme that is also warm and inviting with dark text, careful not to use any areas of “knock out” or reversed type.
  • Avoided patterned backgrounds
  • I visually grouped related information, broke lengthy text into sections, and used short paragraphs of text.
  • I kept site navigation simple and straightforward. Research discouraged the use of “drop-down” navigation because these navigations tend to require fine motor skills with the mouse. Additionally, with learning and memory impairments, seniors tend to become confused by too many options and forget what options are available shortly after the sub-menu has disappeared. So, for this reason, primary navigation consisted of simple, underlined links, which requires only one click to directly access a sub-page of information. Sub-navigation appears “on-page” in the interior pages, to remain visible at all times to the user.
  • I designed large dimensional buttons that appear distinct and clickable, incorporated with HTML text for SEO value. Larger buttons with dimensionality are preferred by older adults, and do not require precise mouse movements for activation.
  • Iconography and navigation are consistent and persistent.
  • A conspicuous “Scroll Down” icon is placed just above the fold to eliminate confusion. This indicates to users that they need to scroll down for more information.
  • Text resize option was included, as well as a print button on each interior page.
  • The browser back button was tested on every page to be sure it behaved predictably.
  • I designed a carousel for featured services that displays one message at a time due to attentional factors/selective attention issues – by limiting the amount of information on each page.

In addition to these guidelines, I followed best practices specific to medical websites, as well. Below are just a few.

  • Placed location and contact information for each branch or office on every page.
  • Highlighted practice hours.
  • Clearly stated what patients should do in emergency or after hours.
  • Created a page for every major service or disorder.
  • Included bios of each physician.
  • Used terminology familiar to patients, rather than “doctor speak”.

In conclusion, before designing a website, it’s beneficial to be aware of the primary and secondary demographic by understanding the client base. This can be a valuable jumping-off point for general research on internet usage statistics and usability guidelines specific to demographic and industry. Often, valuable research from reputable sources is readily available, eliminating the need to undergo usability evaluations early on, and allow for more successful early prototypes or designs.

Resources

Making Your Website Senior Friendly – A Checklist. Published by the National Institute on Aging and the National Library of Medicine http://www.nlm.nih.gov/pubs/checklist.pdf
Designing Web Sites for Older Adults: Expert Review of Usability for Older Adults at 50 Web Sites. AARP. http://assets.aarp.org/www.aarp.org_/articles/research/oww/AARP-50Sites.pdf
Web Accessibility for Older Users: A Literature Review W3C
http://www.w3.org/TR/wai-age-literature/
Web Usability and Aging. Usability.gov
http://www.usability.gov/articles/newsletter/pubs/122008news.html
Winning the 2013 Medicare Researcher. Google Think Insights
http://www.google.com/think/articles/winning-the-2013-medicare-researcher.html
Give Your Practice Web Site a Check Up: 16 “Best Practices” for Primary Practice Web Sites TransforMed
http://www.transformed.com/practiceWebsites/medicalWebsites_bestPractices.cfm

+ There are no comments

Add yours