Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Design and Develop in an Inclusive Way

1,076 views

Published on

Usher Syndrome is a progressive condition and to date there is no cure. It not only affects hearing and sight but also causes considerable difficulty with mobility and communication. Molly will begin this session by talking openly about her progression with Usher Syndrome and share her views and experiences on how technology can be better designed and configured to enhance life for everyone and not just those with Usher Syndrome.

Although this is a specific condition, at some point in our lives we might all suffer from an impairment that will limit our abilities to interact with the world around us. This could be temporary or longer-term but as we grow older we are all likely to go through changes that will affect our sight, our hearing, and our overall mobility. We also need to consider the impact that poorly designed digital products and services can have on people’s confidence and independence. Rather than see it as a test before product release, accessibility should be built into your design and development approach from the start.

Molly and Chris will guide you through the various challenges and obstacles that commonly prevent users from engaging with digital services and show you some easy to implement accessibility principles that will help you ensure you are providing the best possible experience for the widest range of abilities.

Through focusing on how to design for people with specific visual, auditory, cognitive and mobility needs, after this session you will have a better appreciation of how you and your team can deliver fully inclusive solutions.

Published in: Design
  • Be the first to comment

How to Design and Develop in an Inclusive Way

  1. 1. How to design and develop in an inclusive way
  2. 2. Chris Bush Head of Experience Design - @suthen @wearesigma Molly Watt Technology, Web Accessibility & Usability consultant @mollywatttalks @mollywatttrust How to design and develop in an inclusive way
  3. 3. My story ► 1994 ► 18 months on ► Support > Speech therapy > Included > Happy childhood ► 2006 ► 2008 ► 2010
  4. 4. Deafness + retinitis pigmentosa = Usher syndrome
  5. 5. Toughest thing about usher syndrome? ► Ignorance and lack of understanding - ignorance ► Being born severely deaf and then acquiring blindness ► Access to assistive technology Inclusion ► Resulting in education being severely affected ► Communication and mobility affected Depression, anxiety, and isolation
  6. 6. Educate, don’t assume ► Most common form of congenital deaf blindness ► 2nd to ageing in number ► I can empathise with the ageing population ► Many will acquire sensory impairment, more turn to technology, more are subjected to accessibility challenges.
  7. 7. How do I, and many people access the world? ► It's simple, technology. ► Those of us lucky to have access to technology ► Some class as 'assistive technology' ► It's not rocket science either...
  8. 8. Evolution of Hearing aid technology ► Analogue ► Digital ► GN Resound Linx2
  9. 9. Apple ecosystem = access = inclusion ► iPhone ► iPad ► MacBook ► Apple Watch
  10. 10. However, Assistive technology does not fully compensate ► Almost everything can be done online now... ► However, design can limit effectiveness ► Assistive technologies are valuable to all - BUT ► Those who create online environments must create with ACCESSIBILITY in mind in order for assistive technologies to be most effective.
  11. 11. Anyone can have challenges ► Disability is more common than you may imagine. ► We will all experience disability at some point. ► 1 in 5 (around 20%) of us have some kind of a disability. ► Example : By the age of 45 most of us will need glasses - glasses are considered as an assistive tech. ► Yet many websites do not enable dynamic text. ► Many on iPhone use 'Large Text,' many apps are still not compatible.
  12. 12. Accessibility should not be considered as an afterthought or as 'help' but as reasonable built-in adjustments for all...
  13. 13. Acquiring a disability > being born with a disability ► Many like myself, I was born deaf but sighted and then lost vision. ► I am now registered blind however still rely on the remaining vision I have left (5% in one eye) ► Many think if you are blind you use auditory tech ► Being born blind if different to being born sighted. ► Only 5% of blind people have no useful sight. ► The rest have some, however not completely useful.
  14. 14. So, what is the best way to think about designing for inclusion?
  15. 15. Exemplar examples of inclusive design are formed from user needs not just compliance
  16. 16. What’s wrong with this picture?
  17. 17. Designing for extremes
  18. 18. Vision Ability to see, or process visual information Hearing Ability to hear, or process acoustic information Motor Ability to interact with a device accurately and quickly Cognitive Ability in mentally demanding areas; reading, memory, attention, complex concepts or language Types of impairment
  19. 19. Vision Blindness, low vision & colour blindness Hearing Hearing loss Motor Dyspraxia, RSI, arthritis and cerebral palsy Cognitive Down’s syndrome, Asperger’s and dyslexia, learning difficulties Types of impairment – long term
  20. 20. Vision Forgot my glasses Glare when using a device in bright sunlight Hearing Communication within a noisy environment Motor Temporary injury such as a broken wrist Carrying a child Cognitive Medication, Tiredness, Stress, Hangover :D Types of impairment – temporary & situational
  21. 21. What can you do to make your products more inclusive?
  22. 22. Design and understanding
  23. 23. Consider colour and contrast 2.7 million people in the UK are colour blind
  24. 24. Consider colour and contrast ChromeLens to the rescue
  25. 25. Design hit areas to be easy to click or tap Standard touch size of 7-10mm Provide 3-5mm inactive space around elements
  26. 26. Design for comfort iPhone 4
  27. 27. Design for comfort iPhone 4 iPhone 5 iPhone 6 iPhone 6+
  28. 28. Design for comfort iPhone 4 iPhone 5 iPhone 6 iPhone 6+
  29. 29. Design for readability Clear visual hierarchy A background colour that does not flicker 10-15 words on a line Adequate line-heights (120-150%)
  30. 30. Ensure that content is easy to understand readable.com Reading age of 11-12 years is generally good practice
  31. 31. Provide captions for video
  32. 32. Help users find your content Providing auto-complete helps to reduce user error
  33. 33. Help users fix errors Show; What the error is, Where the error is, and How to solve it
  34. 34. Think carefully before using custom controls Custom controls can be very empowering or very prohibitive
  35. 35. Development and implementation
  36. 36. Start with solid foundations - ARIA The Accessible Rich Internet Applications Suite, defines a way to make web content more accessible to people with disabilities. It especially helps with dynamic content and advanced user interfaces ► Landmark roles ► States and properties
  37. 37. ARIA landmark roles <header role=“banner”> <aside role= “complimentary”> <main role=“main”> <footer role=“contentinfo”> <nav role="navigation"> <div id=“search” role=“search”> Users are able to quickly navigate to known content
  38. 38. ARIA landmark roles <header role=“banner”> <aside role= “complimentary”> <main role=“main”> <footer role=“contentinfo”> <nav role="navigation"> <div id=“search” role=“search”> 29% of users prefer 6 or less per page (WebAIM screen reader survey) Don’t over use them
  39. 39. . Design for the full spectrum of your users
  40. 40. . Can you find any black holes? Content can be hidden if you do not use A tags for actions
  41. 41. . Avoiding chatty screen readers
  42. 42. . Avoiding chatty screen readers <div class="ottSidekickFeedLeadArticleWrapper "> <a id=“{removed}" href=“http://news.sky.com/story/1020776" class="Article" onclick="{removed}"> <img title="Autumn Statement: Osborne Tightens The Screw" alt="Autumn Statement: Osborne Tightens The Screw" src="-90x90.jpg"> </a> </div> <div class=“{removed}"> <h4 class="hbx-lid"><a href="http://news.sky.com/story/1020776" title="Autumn Statement: Osborne Tightens The Screw" onclick=“{removed}”> Autumn Statement: Osborne Tightens The Screw </a></h4> <p title="Chancellor George Osborne will warn there are no &quot;miracle cures&quot; as he admi…"> Chancellor George Osborne will warn there are no "miracle cures" as he admi… </p> </div>
  43. 43. . Avoiding chatty screen readers <a href="/news/uk-england-beds-bucks-herts-20603182“ class=“article”> <img alt="Euromillions logo" src="http://news.bbcimg.co.uk/media/images/30185-1.jpg"> <h2 class=“secondary-story-header“>Deadline day for £64 lotto prize</h2> <p>The highest lottery prize ever to remain unclaimed nearly £64m - will go to good causes if the winner does not come forward by 23:00 GMT</p> </a>
  44. 44. . Where did the zoom go? Everybody finds zoom useful
  45. 45. Why inclusive design really matters
  46. 46. Isolation ► Many platforms are still inaccessible, creating everyday barriers ► Without inclusion online, many miss out... ► Getting a job, reading the news, personal banking, applying for colleges, playing online games, learning new information, making reservations, shopping online... ► All these can make life incredibly easier with the right access. ► Benefits everybody
  47. 47. Reasonable adjustments / accessibility ► One of the best universities in London for Primary Education (to teach children aged 5-11 years) ► Applying was impossible without help - no independence = confidence knock. ► I was unable to access the course through ignorance and a completely inaccessible website - where I was referred for my reading material and email. ► I was excluded online as well as in lectures. ► Easily preventable
  48. 48. Everyone will experience a real need for inclusive services at least once in their lives. Consider everyone's journey.
  49. 49. Chris Bush Head of Experience Design - @wearesigma @suthen Molly Watt Technology, Web Accessibility & Usability consultant @mollywatttalks @mollywatttrust Thank you. Any questions?
  50. 50. Prepared by Sigma: Putting users at the heart of our solutions delivers better products to a happier audience www.wearesigma.com Prepared by Sigma: Putting users at the heart of our solutions delivers better products to a happier audience www.wearesigma.com

×