Getting older? Tips & tricks for designing inclusive open source user interfaces


Published on

In 1911, only 4% of our population was aged 65 years or older. In 2011, this increased to a whopping 14% - that's over 3 million people! Until someone invents a way to stop aging, we need to face facts. We're getting older...and this brings about a host of problems when interacting with a website or product (small font anyone?).

Join us for a (occasionally light-hearted) primer on creating inclusive user experiences (UX). In this session, we'll take a look at what happens when you age, how it impacts your use of software and the web, and tips for including accessibility into your designs so that it benefits every one of varying levels of abilities. Oh, and the best thing? These tips also benefit you when you get older.

Published in: Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • So who am I?Hi, I’m Ruth!As you can probably tell from the talk title and my bio, I’m not a developer. But I’m a user of open source software. This isn’t going to be a technical talk but there will be lots of design examples that you can apply to your work.I love robots and I make stuff with 2. frikin’ lasers! You may have possibly seen my earlier mini conf talk about laser cutting….3. I’m a member of the Canberra hackerspace.When I was in school, I thought I was going to grow up to be a..4. FreeBSD system administrator…but I then entered the workforce and accidentally started my design career by designing mainframes screens.5. I now work for a user experience design consultancy called Stamford Interactive. I’m really passionate user experience and inclusive design and have been working in the design and accessibility fields for over 11 years.
  • I’m a user experience designer. And I love how everyone is talking about UX.
  • I’m not a graphic designer and wouldn’t have a clue how to make a really gorgeous interface. But I do know how to make a useful user experience.This means that I have spent thousands of hours watching how people interact with technology and how we design for it. So I was recently running a series of usability tests looking at how a range of people were interacting with a particular website. My participants included a range of backgrounds (retail workers, professionals) and ages (from early 20s up to mid 50s). People were getting through the tasks with varying levels of difficulty but I noticed that with my older participants, they would start to lean closer towards the monitor screen as they were completing their tasks. I had one participant finally stop half way through to say that she was having trouble seeing the screen as the text was too small.The interesting thing is that none of the older participants had identified with having any impairment and kept apologising for something that should have been addressed at the site level.
  • It’s a sad truth that none of us are getting any younger. Ageing is a global issue from which no-one is exempt.
  • Economic and health impacts.
  • The most important thing to remember is that our abilities gradually decline over time.Vision decline – “Can you make the text bigger, love?” Content starts becoming hard to read due to declining ability to focus on near objects, along with reduced contrast and colour perception.Physical ability – reduced dexterity means that it can get harder to use the keyboard, mouse and touch screens, particularly for small target areas (*shakes fist* single-letter link? Small button? Tiny checkbox? Argh!).Hearing – it gets harder to separate sounds as we start to lose the range of hearing (with implications as more content is delivered online through videos and podcasts).Cognitive ability – short term memory can impact navigation, attention and comprehension.
  • Most older adults naturally experience vision declining with age. This includes the yellowing of the eye’s lens, loss of elasticity of the lens and pupil shrinkage.Decreasing ability to focus on near tasks, including a computer screenColour perception and sensitivity; less violet light is registered, making it easier to see red and yellows than blues and greens and often making darker blues and black indistinguishablePupil shrinkage; 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 [Lighthouse ILE] while 80 year old retinas only receive around 15% [Eye Digest]Contrast sensitivity; from the age of 40, contrast sensitivity at higher spatial frequencies starts to decline until at the age of 80 it has been reduced by up to 83% [source:]
  • Age-related macular degeneration (AMD) is a disease of the retina that causes progressive loss of central vision, leaving the peripheral or side vision intact. Macular Degeneration affects one in seven Australians over the age of fifty and the risk increases with age. It affects your ability to see fine detail and to distinguish colours.Source: Cataract is a clouding of the normally-clear lens of the eye. Results in blurred vision & glare sensitivity.
  • Arthritis is a major cause of mobility issues forthe elderly.Arthritis is the major cause of disability and chronic pain in Australia, with 3.85million Australians affected at a cost to our economy of more than $23.9 billion each year in medical care and indirect costs such as loss of earnings and lost production.Source: Painful realities: The economic impact of arthritis in Australia 2007,’s disease, four primary symptoms:Tremor – trembling in the hands, arms, legs, jaw and faceRigidity – stiffness of he limbs and trunkBradykinesia – slowness of movementPostural instability – impaired balance and coordinationCause difficulties with using the mouse and other pointing devices. Can also be difficult to use the keyboard in some cases.
  • Dementia & Alzheimer’s Disease is one of the most prevalent disease as we grow older. While we might not necessarily get this, many older adults suffer from Mild Cognitive Impairment or subjective memory loss:Trouble remembering names of people met recentlyTrouble remembering flow of conversationIncreased tendency to misplace things
  • Due to very gradual decline in abilities
  • Many people hold certain stereotypes about “disability”. One of the most important things to take away is that having disabilities is not a binary state – it can range greatly in severity from low to mild impairment, up to profound impairments. There are a significant amount of people who sit somewhere on this range, despite a number of people who would not normally classify their self as having a “disability”. For example, take dad who may be bad with numbers, or grandma who has a bad memory. Or even famous people like Richard Branson who has dyslexia. At the end of the day, accessibility is about a whole range of people, their abilities and preferences and their experiences.
  • As much as I would love to give you a set of tips that works for all disabilities, there is no one size fits all set of rules. Everyone experiences your site differently. They have different needs, preferences and ways of interacting with your site. People also respond to different formats in different ways. Some may use assistive technologies, some way use low tech solutions and some may rely on your pictures to understand your content.
  • Although there’s no define black and white rules, what we can do is use some high level personas to help identify potential design problems.
  • Let’s look at a range of usability best practices that will give you an inclusive user experience. By using usability best practices,you’ll be making great strides in making your site or application accessible by people with cognitive disabilities as well as improving access for everyone.
  • Bad colour contrastSmall size font
  • Which ones are the links?
  • Use a large font as a default (equivalent of size 12-14 points for body text and at least 2 additional points equivalent for headings), and make sure that the font can be easily resized. Test to make sure that font sizes can be increased to a reasonable amount without breaking. If you’re a Firefox user, you can use the NoSquint browser High contrast – Grey text on white background can look pretty sexy, but only if you can actually see it (being young with 20:20 vision will help). Ensure that content passes colour contrast checks and that you’re not using colour alone to provide meaning. There are lots of free colour contrast tools to use, such as theColour Contrast Analyser or the Colour Contrast Check.Highly visible links – Making your audience hunt for a link is pretty annoying, particularly if text colour is being used to indicate a link and the contrast is low. Go old school—underline links, or provide some strong visual cues such as strong colour contrast and underline on mouseover or when a keyboard user tabs to the active link.
  • Can’t see focus indicatorNot keyboard accessible
  • Highly visible focus indicatorsMake it highly visibleControllable animations or videos should be able to receive focusIf part of a page reloads, focus should stay where it is If the whole page reloads, focus should be reset to the most logical restarting point
  • Exercise: get to pay your bill online using only your keyboard
  • Need to add a skip to content link.Allows the user to navigate around the page without having to go through a huge list of links.Common misperception that skip links are just for screen reader users. Skip links often hidden as it’s seen to be ‘clutter’. Arguments for either way, Useful for screen reader users, keyboard uses and those with mobility difficulties
  • I LOVE thinkgeek – it’s one of the most dangerous sites out there but their checkout form leaves some things to be desired (there’s also good things!).Bad things:No explanation of required indicatorsRequired indicators placed after the field (bad for screen readers and for screen magnifier users)Contrast of instructional textNo use of <label> elements
  • Bigger target sizes of buttons, links and other interactive elements
  • Bigger target sizes of buttons, links and other interactive elements
  • Try this: find information about getting a snake catcherMobility issues means that it can be difficult trying to use the mouse, particularly when slipping off multi-level menus.
  • Transcripts and captioning can help make information processing easier.Audio description: Where this helps someone on the autistic spectrum is it identifies the emotion which may be difficult for them to pin down and it also provides another input track to reinforce the information. Captions: For somebody who is on the autistic spectrum it gives a greater depth of understanding and context by providing a second input stream. People on the autistic spectrum may struggle with audio processing, that is filtering out different sounds and distinguishing between what’s relevant and what is not relevant. If there is an audio overload with lots of different sounds because of the audio processing issues some people on the autistic spectrum have, all or most of the audio could be rendered totally meaningless and captions provide a backup for when this occurs.
  • Stop CAPTCHAs – Hands up if you find CAPTCHAs easy. For the vast majority, CAPTCHAs can be difficult to understand, but they're particularly difficult for older users, often due to:low contrast textimages of text which can’t increase in size when a person increases the text sizedifficult-to-understand questions (including mathematical CAPTCHAs).
  • Due to declining spatial and working memory, older people are more likely to get lost when using a user interface. Provide strong orientation cues, such as:Page titleHighlight current page in navigationBreadcrumbSearchSite map
  • Avoid distracting background images, noises or moving elementsThis tip is about attention. People with attention problems often have difficulty focussing their attention to the task at hand and can be very easily distracted by things such as popup windows and moving elements. Avoid multiple pop-up windows and blinking or moving elements, as this can pull attention away from the content. Some older people can be distracted by any movement and sound (such as those carousels commonly found on many home pages). Allow them to pause/stop/hide the movement and sound.
  • Ensure that the error message clearly describes what is wrong and how to fix it.Providing information about how to correct input errors allows users who have learning disabilities to fill in a form successfully. Users who are blind or have impaired vision understand more easily the nature of the input error and how to correct it. People with motion impairment can reduce the number of times they need to change an input value.Source:
  • This tip is about problem solving. People who have difficulties with problem solving have difficulty recognising problems, identifying, choosing or implementing solutions and evaluating outcomes. With this form, the user is told what is the problem, but it’s difficult to see where the actual problem is.Error messages should be as explanatory as possibleTell users what they did wrong and how to fix the problem
  • This is a slightly better example. Errors are clearly identified at the top of the page and at the field level. There are also additional visual indicators (highlighted yellow fields) which helps to clearly identify the problem fields. A study by Zerwinski and Larson (2002) suggests that change blindness is also more likely to occur with older users, due to concentration and perception issues.
  • Maths computations or formulas can be difficult for many people to understand. This could be due to a person’s deficit math comprehension abilities or a number of cultural factors leading to dislike of maths (evident in many parts of the US).Where calculations are required, such as e-commerce sites that add the prices of items bought, GST, shipping and handling and any other, do this automatically.
  • Include Kim’s awesome card here!
  • Getting older? Tips & tricks for designing inclusive open source user interfaces

    1. 1. Getting older?Tips & tricks for designinginclusive open source userinterfaces31 Jan 2013Linux.conf.auBy @RuthEllisonfrom @StamfordUX
    2. 2. Hi, I’m Ruth Image source: @RuthEllison from @StamfordUX
    3. 3. User experience (UX) @RuthEllison from @StamfordUX
    4. 4. How do we differentiate? We need to provide a better user experience - Bdale Garbee @RuthEllison from @StamfordUX
    5. 5. Has anyone here managed to stop aging?@RuthEllison from @StamfordUX
    6. 6. UNITED NATIONS By 2050, >1 5 in People will be over 60 years of age @RuthEllison from @StamfordUXSource: World Population Ageing, 1950-2050, Chapter II: Magnitude and speed of population ageing
    7. 7. In 19114%Of our Australianpopulation was aged65 years or older @RuthEllison from @StamfordUX
    8. 8. In 2012 14.2% Of our Australian population was aged 65 years or older @RuthEllison from @StamfordUXSource: ABS, 3101.0 - Australian Demographic Statistics, Jun2012 ,
    9. 9. Getting old sucks! @RuthEllison from @StamfordUXImage source:
    10. 10. Our abilities gradually decline over time @RuthEllison from @StamfordUX
    11. 11. Our abilities change over time @RuthEllison from @StamfordUX
    12. 12. VisionEye condition changesLack of ability to focusColour perception & sensitivityContrast sensitivity @RuthEllison from @StamfordUX
    13. 13. Common eye diseases Macular Degeneration (MD) Cataracts @RuthEllison from @StamfordUX
    14. 14. Physical ability Arthritis 3.85 million people affected in Australia!! Parkinson‟s Disease Affects 1 in 100 people >60 @RuthEllison from @StamfordUX
    15. 15. Hearing Inability to hear high- pitched sounds @RuthEllison from @StamfordUX
    16. 16. Cognitive ability Dementia & Alzheimer‟s Disease Mild Cognitive Impairment or subjective memory loss @RuthEllison from @StamfordUX
    17. 17. People don’t always identify with having a disability. @RuthEllison from @StamfordUX
    18. 18. Spectrum of abilities Dad: bad with numbers Richard Branson: dyslexiano profound Grandma: bad memoryimpairment impairment @RuthEllison from @StamfordUX
    19. 19. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect” Sir Tim Berners-Lee, 1997@RuthEllison from @StamfordUX
    20. 20. How do we design for all of this? ??? @RuthEllison from @StamfordUX
    21. 21. There is noone-size-fits-allrule @RuthEllison from @StamfordUX
    22. 22. Let’s meet some folks… @RuthEllison from @StamfordUX
    23. 23. Rose CharlieRecently retired from an IT Retired from his IT product Executive position manager jobSpends her days golfing Has Parkinson‟s DiseaseA bit hard of hearing Has difficulty typing &using the mouse as a resultEye sight getting worse with age Heavy user of social networks to keep in touch with family, old classmates, colleagues
    24. 24. for an inclusiveuser experience
    25. 25. VISION @RuthEllison from @StamfordUX
    26. 26. What trouble will Rose & Charliehave? @RuthEllison from @StamfordUX
    27. 27. Grey text on blackbackground is so sexy @RuthEllison from @StamfordUX
    28. 28. But grey text on whitebackground is even sexier (think Apple?) @RuthEllison from @StamfordUX
    29. 29. gallery/Hand-Lettering- Quotes/3801291@RuthEllison from @StamfordUX
    30. 30. Text styles & layout Use large fonts as a default High contrast Left align Avoid chunks of italic text Visible links @RuthEllison from @StamfordUX
    31. 31. Free contrast checking toolsColour Contrast WCAG Contrast Analyser checker (Firefox plugin )Get from @RuthEllison from @StamfordUX
    32. 32. PHYSICAL ABILITY @RuthEllison from @StamfordUX
    33. 33. What issues will Rose &Charlie have?
    34. 34. A good example: focus indicator @RuthEllison from @StamfordUX
    35. 35. navigation @RuthEllison from @StamfordUX
    36. 36. http://webaim.orgKeyboard navigation Allows the user to „skip‟ over navigation to the main content @RuthEllison from @StamfordUX
    37. 37. On mousehover @RuthEllison from @StamfordUX
    38. 38.<div id="comic"><img src=""title="Wikipedia path: Virus -&gt; Immune system -&gt; Innateimmune system -&gt; Parasites -&gt; List of parasites of humans -&gt; Naegleria fowleri -&gt; Primary amoebic meningoencephalitis -&gt; Deciding I DEFINITELY shouldnt connect an aquarium pump tomy sinuses" alt="Sick Day"></div>
    39. 39. What issues will Rose & Charliehave with this? @RuthEllison from @StamfordUX
    40. 40. Bigger target areas<tr> <td class="bill-border-left" align="right" valign="middle"> <p>First name:</p> </td> <td align="left" valign="middle" nowrap="nowrap" class="bill-border-right"> <input type="text" name="bill_name_first" id="form_bill_name_first" value="" class="black- 11px textfield ClickTaleSensitive" size="25"> <span class="hot-small">*</span> </td></tr> @RuthEllison from @StamfordUX
    41. 41. Bigger target areas<tr> <td class="bill-border-left" align="right" valign="middle"> <label for="form_bill_name_first">First name:<abbr class="req" title="required">*</abbr> </label> </td> <td align="left" valign="middle" nowrap="nowrap" class="bill-border-right"> <input type="text" name="bill_name_first" id="form_bill_name_first" value="" class="black-11px textfield ClickTaleSensitive" size="25"> </td></tr> @RuthEllison from @StamfordUX
    42. 42. Flyout menus @RuthEllison from @StamfordUX
    43. 43. HEARING @RuthEllison from @StamfordUX
    44. 44. What’s wrong with this? @RuthEllison from @StamfordUX
    45. 45. Use transcripts, captions & audio descriptions @RuthEllison from @StamfordUXspectrum-captions-and-audio-description/
    46. 46. COGNITIVE ABILITY @RuthEllison from @StamfordUX
    47. 47. WTF? @RuthEllison from @StamfordUX
    48. 48. Everything should be made assimple as possible, but no simpler.- based on a quote by Albert Einstein @RuthEllison from @StamfordUX
    49. 49. What issues will Rose & Charliehave with this? Quantum Random Bit Generator Service: @RuthEllison from @StamfordUX
    50. 50. Orientation cues @RuthEllison from @StamfordUX
    51. 51. Avoid distractions @RuthEllison from @StamfordUXSource:
    52. 52. Error handlingSource:
    53. 53. Urm…? @RuthEllison from @StamfordUX
    54. 54. Help recover from errors @RuthEllison from @StamfordUX
    55. 55. Be predictable & consistent @RuthEllison from @StamfordUX
    56. 56. @RuthEllison from @StamfordUX
    57. 57. Calculate it automatically @RuthEllison from @StamfordUX
    58. 58. Saturn V Saturn V is awesome right? Explain this blueprint to your neighbour…. Source: @RuthEllison from @StamfordUX
    59. 59. Plain English 1,000 words people use most often!! @RuthEllison from @StamfordUX
    60. 60. Try it yourself! @RuthEllison from @StamfordUX
    61. 61. TO WRAP UP…. @RuthEllison from @StamfordUX
    62. 62. We are all on the spectrumBenefits everyonePut yourself in the shoes of the other person („what‟s their experience?‟)Clean, simple design where possibleValidate your markup @RuthEllison from @StamfordUX
    63. 63. Be consistentBe predictableBe obviousBe simple, but no simpler @RuthEllison from @StamfordUX
    64. 64. Rose CharlieRecently retired from an IT Retired from his IT product Executive position manager jobSpends her days golfing Has Parkinson‟s DiseaseA bit hard of hearing Has difficulty typing &using the mouse as a resultEye sight getting worse with age Heavy user of social networks to keep in touch with family, old classmates, colleagues
    65. 65. Want to Learn More? Check out: W3C‟s Web Accessibility and Older People: Meeting the Needs of Ageing Web Users project Developing Websites for Older People: How Web Content Accessibility Guidelines (WCAG) 2.0 Applies Get your hands on an AGNES (Age Gain Now Empathy System) suit, which is a product of the MIT Age Lab to help students, developers, designers, engineers and others, better understand the physical effects associated with ageing. @RuthEllison from @StamfordUX
    66. 66. Credits Scott Lacey for many of the illustrations Alastair D‟Silva, Brett Downing, Stuart Young for some examples @RuthEllison from @StamfordUX
    67. 67. Thank you!Ruth Ellison@RuthEllison from @stamfordux