Getting older? Tips & tricks for designing inclusive open source user interfaces
•
2 likes•3,438 views
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.
Recommended
Recommended
More Related Content
More from Ruth Ellison
More from Ruth Ellison (8)
Recently uploaded
Recently uploaded (20)
Getting older? Tips & tricks for designing inclusive open source user interfaces
- 1. Getting older? Tips & tricks for designing inclusive open source user interfaces 31 Jan 2013 Linux.conf.au By @RuthEllison from @StamfordUX
- 2. Hi, I’m Ruth Image source: http://gematsu.com/2011/03/portal-2-gdc-screens-laser-companion-cube @RuthEllison from @StamfordUX
- 3. User experience (UX) @RuthEllison from @StamfordUX
- 4. How do we differentiate? We need to provide a better user experience - Bdale Garbee @RuthEllison from @StamfordUX
- 5. Has anyone here managed to stop aging? @RuthEllison from @StamfordUX
- 6. UNITED NATIONS By 2050, >1 5 in People will be over 60 years of age @RuthEllison from @StamfordUX Source: World Population Ageing, 1950-2050, Chapter II: Magnitude and speed of population ageing
- 7. In 1911 4% Of our Australian population was aged 65 years or older @RuthEllison from @StamfordUX
- 8. In 2012 14.2% Of our Australian population was aged 65 years or older @RuthEllison from @StamfordUX Source: ABS, 3101.0 - Australian Demographic Statistics, Jun 2012 , http://www.abs.gov.au/ausstats/abs@.nsf/Latestproducts/3101.0Feature%20Article1Jun%202012?opendocument&tabname=Summary&prodno=3101.0&issue=Jun%202012&num=&view=
- 9. Getting old sucks! @RuthEllison from @StamfordUX Image source: http://www.gettingthroughthis.com/wp-content/uploads/2012/08/False-teeth.jpg
- 10. Our abilities gradually decline over time @RuthEllison from @StamfordUX
- 11. Our abilities change over time @RuthEllison from @StamfordUX
- 12. Vision Eye condition changes Lack of ability to focus Colour perception & sensitivity Contrast sensitivity @RuthEllison from @StamfordUX
- 13. Common eye diseases Macular Degeneration (MD) Cataracts @RuthEllison from @StamfordUX
- 14. Physical ability Arthritis 3.85 million people affected in Australia!! Parkinson‟s Disease Affects 1 in 100 people >60 @RuthEllison from @StamfordUX
- 15. Hearing Inability to hear high- pitched sounds @RuthEllison from @StamfordUX
- 16. Cognitive ability Dementia & Alzheimer‟s Disease Mild Cognitive Impairment or subjective memory loss @RuthEllison from @StamfordUX
- 17. People don’t always identify with having a disability. @RuthEllison from @StamfordUX
- 18. Spectrum of abilities Dad: bad with numbers Richard Branson: dyslexia no profound Grandma: bad memory impairment impairment @RuthEllison from @StamfordUX
- 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. How do we design for all of this? ??? @RuthEllison from @StamfordUX
- 21. There is no one-size-fits-all rule @RuthEllison from @StamfordUX
- 22. Let’s meet some folks… @RuthEllison from @StamfordUX
- 23. Rose Charlie Recently retired from an IT Retired from his IT product Executive position manager job Spends her days golfing Has Parkinson‟s Disease A bit hard of hearing Has difficulty typing &using the mouse as a result Eye sight getting worse with age Heavy user of social networks to keep in touch with family, old classmates, colleagues
- 24. for an inclusive user experience
- 25. VISION @RuthEllison from @StamfordUX
- 26. What trouble will Rose & Charlie have? http://www.top3.com.au/about/about-top3-by-design.html @RuthEllison from @StamfordUX
- 27. Grey text on black background is so sexy @RuthEllison from @StamfordUX
- 28. But grey text on white background is even sexier (think Apple?) @RuthEllison from @StamfordUX
- 29. http://www.typographyserved.com/ gallery/Hand-Lettering- Quotes/3801291 @RuthEllison from @StamfordUX
- 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. Free contrast checking tools Colour Contrast WCAG Contrast Analyser checker (Firefox plugin ) Get from http://www.visionaustralia.org.au/info.aspx?page=628 @RuthEllison from @StamfordUX
- 32. PHYSICAL ABILITY @RuthEllison from @StamfordUX
- 33. What issues will Rose & Charlie have? http://www.altronics.com.au/
- 34. A good example: focus indicator webaim.org @RuthEllison from @StamfordUX
- 35. http://bit.ly/10RKt2M Keyboard navigation @RuthEllison from @StamfordUX
- 36. http://webaim.org Keyboard navigation Allows the user to „skip‟ over navigation to the main content @RuthEllison from @StamfordUX
- 37. On mousehover http://xkcd.com/1157/ @RuthEllison from @StamfordUX
- 38. http://xkcd.com/1157/ <div id="comic"> <img src="http://imgs.xkcd.com/comics/sick_day.png" title="Wikipedia path: Virus -> Immune system -> Innate immune system -> Parasites -> List of parasites of humans - > Naegleria fowleri -> Primary amoebic meningoencephalitis - > Deciding I DEFINITELY shouldn't connect an aquarium pump to my sinuses" alt="Sick Day"> </div>
- 39. What issues will Rose & Charlie have with this? @RuthEllison from @StamfordUX
- 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. 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. Flyout menus http://gawler.sa.gov.au @RuthEllison from @StamfordUX
- 43. HEARING @RuthEllison from @StamfordUX
- 44. What’s wrong with this? @RuthEllison from @StamfordUX
- 45. Use transcripts, captions & audio descriptions http://mindfulresearch.co.uk/2011/08/29/autistic- @RuthEllison from @StamfordUX spectrum-captions-and-audio-description/
- 46. COGNITIVE ABILITY @RuthEllison from @StamfordUX
- 47. WTF? https://twitter.com/GrumpyAssCat/status/295671401254367232 @RuthEllison from @StamfordUX
- 48. Everything should be made as simple as possible, but no simpler. - based on a quote by Albert Einstein @RuthEllison from @StamfordUX
- 49. What issues will Rose & Charlie have with this? Quantum Random Bit Generator Service: @RuthEllison from @StamfordUX
- 50. Orientation cues @RuthEllison from @StamfordUX
- 51. Avoid distractions http://www.margaretriver.com/ @RuthEllison from @StamfordUX Source: http://www.dyslexia-parent.com/mag35.html
- 53. Urm…? @RuthEllison from @StamfordUX
- 54. Help recover from errors @RuthEllison from @StamfordUX
- 55. Be predictable & consistent @RuthEllison from @StamfordUX
- 57. Calculate it automatically @RuthEllison from @StamfordUX
- 58. Saturn V Saturn V is awesome right? Explain this blueprint to your neighbour…. Source: http://www.up-ship.com/drawndoc/saturnvprints.htm @RuthEllison from @StamfordUX
- 59. Plain English 1,000 words people use most often!! http://xkcd.com/1133/ @RuthEllison from @StamfordUX
- 60. Try it yourself! http://splasho.com/upgoer5/ @RuthEllison from @StamfordUX
- 61. TO WRAP UP…. @RuthEllison from @StamfordUX
- 62. We are all on the spectrum Benefits everyone Put yourself in the shoes of the other person („what‟s their experience?‟) Clean, simple design where possible Validate your markup @RuthEllison from @StamfordUX
- 63. Be consistent Be predictable Be obvious Be simple, but no simpler @RuthEllison from @StamfordUX
- 64. Rose Charlie Recently retired from an IT Retired from his IT product Executive position manager job Spends her days golfing Has Parkinson‟s Disease A bit hard of hearing Has difficulty typing &using the mouse as a result Eye sight getting worse with age Heavy user of social networks to keep in touch with family, old classmates, colleagues
- 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. Credits Scott Lacey for many of the illustrations Alastair D‟Silva, Brett Downing, Stuart Young for some examples @RuthEllison from @StamfordUX
- 67. Thank you! Ruth Ellison @RuthEllison from @stamfordux
Editor's Notes
- 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: http://www.w3.org/TR/wai-age-literature/]
- 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: http://www.rsb.org.au/site/DefaultSite/filesystem/documents/Brochures/RSB_AMD_DLBrochure_Web.pdfA 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, http://www.arthritisaustralia.com.au/index.php/arthritis-information.htmlParkinson’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: http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-suggestions.html
- 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!