Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Inclusive design to improve products and services

Chris Bush
March 31, 2020

Inclusive design to improve products and services

Workshop Description:
According to the Office for National Statistics, there are over 10 million disabled people in the UK, representing around 15% of the population. More than ever before, the need to deliver inclusive, accessible digital products and services constitutes both a moral and a commercial imperative.

Accessible products ensure that people with disabilities – whether they are cognitive, physical, visual or auditory – can interact with, navigate and contribute to the web. Molly will begin the session by talking openly about her experience with Usher Syndrome and sharing her views on how technology can be better designed and configured to improve digital experiences for everyone and not just those with an impairment.

Molly and Chris from Sigma, will then guide attendees through the various challenges and obstacles that commonly prevent impaired users from engaging with digital products or services and show you how Molly uses assistive technologies along with demos of other popular tools.

We’ll also give you a chance to try using screen readers and screen magnification tools, vision impairment glasses and mobility gloves.

After this workshop, you’ll have a better understanding of the challenges users of assistive technologies encounter and learn the basic principles that will help you evaluate your own digital products to ensure you are providing the best, most inclusive experience for all your users.

Chris Bush

March 31, 2020
Tweet

More Decks by Chris Bush

Other Decks in Design

Transcript

  1. Inclusive design to
    improve products and
    services
    UX Copenhagen 2020

    View full-size slide

  2. wearesigma.com @wearesigma
    Thinking about inclusion

    View full-size slide

  3. wearesigma.com @wearesigma
    1 in 7
    1 billion
    People with long-term disability worldwide
    World Health Organisation

    View full-size slide

  4. wearesigma.com @wearesigma
    21%
    14.1 million
    People in the UK have
    some form of disability
    ONS

    View full-size slide

  5. wearesigma.com @wearesigma
    Why inclusion matters

    View full-size slide

  6. wearesigma.com @wearesigma
    My story

    View full-size slide

  7. wearesigma.com @wearesigma
    Usher syndrome =
    Deafness + Retinitis Pigmentosa
    RP is the second most common cause of blindness after aging

    View full-size slide

  8. wearesigma.com @wearesigma
    Acquiring a disability
    ≠ being born with a disability

    View full-size slide

  9. wearesigma.com @wearesigma
    My life revolves around technology

    View full-size slide

  10. wearesigma.com @wearesigma
    However, technology doesn’t fully
    compensate

    View full-size slide

  11. wearesigma.com @wearesigma
    Anyone can have
    challenges
    ‣ Disability is more common than you
    may think
    ‣ We will all experience disability at
    some point
    ‣ By the age of 45 most of us will need
    glasses
    ‣ Yet many websites do not support
    dynamic text
    ‣ Many on iPhone use 'Large Text,’ a
    lot of apps aren’t compatible.

    View full-size slide

  12. wearesigma.com @wearesigma

    View full-size slide

  13. wearesigma.com @wearesigma
    Accessibility should not be
    considered as an afterthought, or
    as ‘help’ but as reasonable built-in
    adjustments for all...

    View full-size slide

  14. wearesigma.com @wearesigma
    What is the best way to
    design for inclusion?

    View full-size slide

  15. wearesigma.com @wearesigma
    The best examples of
    inclusive design
    are formed from
    user needs, not just
    compliance

    View full-size slide

  16. wearesigma.com @wearesigma
    What’s wrong
    with this picture?
    Having a braille sign that points to a light

    View full-size slide

  17. wearesigma.com @wearesigma
    Designing for extremes

    View full-size slide

  18. wearesigma.com @wearesigma

    View full-size slide

  19. wearesigma.com @wearesigma
    Types of impairment
    Visual
    Ability to perceive
    or process
    visual information
    Auditory
    Ability to perceive
    or process
    auditory information
    Sensorimotor
    Ability to feel and
    manipulate a physical
    device quickly,
    smoothly, and
    accurately
    Cognitive
    Ability in mentally
    demanding areas:
    reading, memory,
    attention, language,
    complex concepts,
    problem solving
    Speech
    Ability to produce
    speech sounds
    clearly, smoothly, and
    understandably

    View full-size slide

  20. wearesigma.com @wearesigma
    Types of impairment - Long term
    Visual
    Blindness,
    low vision,
    colour blindness,
    presbyopia, floaters
    cataracts, macular
    degeneration, nerve
    damage
    Auditory
    Tinnitus, bony growth
    in the ear, nerve
    damage, hearing loss
    due to ageing or long-
    term exposure to loud
    noise
    Sensorimotor
    Dyspraxia,
    RSI, arthritis,
    cerebral palsy,
    Parkinson’s,
    Essential Tremor,
    nerve damage
    Cognitive
    Down syndrome,
    Asperger, AD/HD, brain
    injury, dyslexia,
    dementia, learning
    difficulties
    Speech
    Apraxia, dysarthria,
    stammering,
    laryngeal/oral cancer,
    smoking,
    nodules/polyps,
    brain injury, strong
    accent

    View full-size slide

  21. wearesigma.com @wearesigma
    Types of impairment - Short term
    Visual
    Forgot my glasses
    Glare on a device in
    bright sunlight
    Auditory
    Medication,
    perforated eardrum,
    excess ear wax,
    acoustic neuroma,
    exposure to sudden
    loud noises
    Noisy environment
    Sensorimotor
    Temporary injury,
    such as a broken wrist
    Carrying a child /
    umbrella / mug /
    laptop
    Cognitive
    Medication
    Tiredness, stress
    Hangover
    Speech
    Laryngitis, throat
    infection, allergic
    reaction
    Hoarseness after
    shouting / singing

    View full-size slide

  22. wearesigma.com @wearesigma
    Let’s normalise inclusive design

    View full-size slide

  23. wearesigma.com @wearesigma
    Because, when we get it right,
    it becomes invisible

    View full-size slide

  24. wearesigma.com @wearesigma
    Because, when we get it right
    it becomes invisible

    View full-size slide

  25. wearesigma.com @wearesigma
    Video
    captions

    View full-size slide

  26. wearesigma.com @wearesigma
    The different types of
    assistive technologies

    View full-size slide

  27. wearesigma.com @wearesigma

    View full-size slide

  28. wearesigma.com @wearesigma
    How Molly uses technology

    View full-size slide

  29. wearesigma.com @wearesigma
    What can we do to be
    more inclusive?

    View full-size slide

  30. wearesigma.com @wearesigma
    Often when we think about different
    devices, we think about the
    screen-size first

    View full-size slide

  31. wearesigma.com @wearesigma
    Input
    devices
    Touch
    & gestures
    Voice
    Pointing
    devices
    But the ways in which we interact can be
    very different

    View full-size slide

  32. wearesigma.com @wearesigma
    iPhone 4
    Design for comfort

    View full-size slide

  33. wearesigma.com @wearesigma
    iPhone 4 iPhone 5 iPhone 6 iPhone 6+
    Design for comfort

    View full-size slide

  34. wearesigma.com @wearesigma
    iPhone 4 iPhone 5 iPhone 6 iPhone 6+
    Design for comfort
    Navigation
    systems on
    larger screens
    can be
    uncomfortable
    to use

    View full-size slide

  35. wearesigma.com @wearesigma
    Standard
    touch size of
    7-10mm
    Provide
    3-5mm
    inactive space
    around
    elements
    Design hit areas to be easy to click or tap

    View full-size slide

  36. wearesigma.com @wearesigma
    Clear
    visual
    hierarchy
    Headings,
    headings,
    headings
    Reading age
    of 11-12 years is
    generally good
    practice
    Design for legibility and readability
    10-15
    words on a
    line

    View full-size slide

  37. wearesigma.com @wearesigma
    Show
    What the error is
    Where the error is
    How to fix it
    Help users fix errors

    View full-size slide

  38. wearesigma.com @wearesigma
    Custom
    controls can
    be very
    empowering
    or very
    prohibitive
    Think carefully before using custom controls

    View full-size slide

  39. wearesigma.com @wearesigma
    Design for the full spectrum of your users
    .

    View full-size slide

  40. wearesigma.com @wearesigma
    Can you find any black holes?
    .
    Content can
    be hidden if
    you do not
    use A tags for
    actions

    View full-size slide

  41. wearesigma.com @wearesigma
    Don’t force users to remember
    things they don’t need to
    .
    Flybe asks you to
    enter details the
    system already
    knows about you
    (when logged in)

    View full-size slide

  42. wearesigma.com @wearesigma
    Sometimes people want or need a human
    Being a digital service doesn’t mean you should make it harder for people to
    engage with a real person. When we run inclusive usability sessions we
    frequently hear requests for systems to include chat interfaces along with
    other contact methods (email, phone, etc).
    Chat interfaces often provide a valuable way for users who can’t use, or
    dislike using a phone to get essential support
    .

    View full-size slide

  43. wearesigma.com @wearesigma
    Run mixed ability usability sessions
    for greater depth and alignment of insights
    .

    View full-size slide

  44. wearesigma.com @wearesigma
    Everyone will experience a real need
    for inclusive services at least once in their lives
    Consider everyone's journey
    .

    View full-size slide

  45. Thank you. Questions?
    For copies of the slides, handouts, and a set of useful resources
    (or if you want help or have more questions)
    [email protected] - @suthen
    [email protected] - @Mollywatttalks

    View full-size slide

  46. Accessibility Guidelines
    WCAG 2.1 guidelines for accessibility
    https://www.w3.org/TR/WCAG20/
    And an excellent quick guide from
    https://twitter.com/joechidzik (abilitynet)
    http://3pha.com/wcag2/
    Interactive WCAG 2.1 guidelines, using
    WEBAIM recommendations
    http://bit.ly/2q1rMyD
    18F Accessibility Guide
    https://accessibility.18f.gov/tools/
    GDS accessibility posters
    https://accessibility.blog.gov.uk/2016/09/02
    /dos-and-donts-on-designing-for-
    accessibility/

    View full-size slide

  47. Mobile Guidelines
    WCAG 2.1 guidelines for accessibility
    https://www.w3.org/TR/WCAG20/
    Interactive WCAG 2.1 guidelines, using
    WEBAIM recommendations
    http://bit.ly/2q1rMyD
    18F Accessibility Guide
    https://accessibility.18f.gov/tools/
    GDS accessibility posters
    https://accessibility.blog.gov.uk/2016/09/02
    /dos-and-donts-on-designing-for-
    accessibility/
    How WCAG 2.1 guidelines apply to mobile
    http://w3c.github.io/Mobile-A11y-TF-Note/
    ARIA design patterns
    https://www.w3.org/TR/wai-aria-
    practices/
    BBC mobile accessibility guidelines
    http://www.bbc.co.uk/guidelines/futuremedi
    a/accessibility/mobile
    Open AJAX Examples using ARIA
    http://oaa-accessibility.org/

    View full-size slide

  48. Assistive technology and tools
    WCAG 2.1 guidelines for accessibility
    https://www.w3.org/TR/WCAG20/
    Interactive WCAG 2.1 guidelines, using
    WEBAIM recommendations
    http://bit.ly/2q1rMyD
    18F Accessibility Guide
    https://accessibility.18f.gov/tools/
    GDS accessibility posters
    https://accessibility.blog.gov.uk/2016/09/02
    /dos-and-donts-on-designing-for-
    accessibility/
    NVDA free screen reader
    http://www.nvaccess.org
    ZoomText screen magnifier
    https://www.zoomtext.com/products/zoom
    text-magnifierreader/
    How automated accessibility checkers
    compare and what issues they pick up
    https://alphagov.github.io/accessibility-tool-
    audit/index.html
    Funkify (Chrome plugin)
    https://www.funkify.org

    View full-size slide

  49. Automated Tools
    WCAG 2.1 guidelines for accessibility
    https://www.w3.org/TR/WCAG20/
    Interactive WCAG 2.1 guidelines, using
    WEBAIM recommendations
    http://bit.ly/2q1rMyD
    18F Accessibility Guide
    https://accessibility.18f.gov/tools/
    GDS accessibility posters
    https://accessibility.blog.gov.uk/2016/09/02
    /dos-and-donts-on-designing-for-
    accessibility/
    Wave Chrome extension
    https://chrome.google.com/webstore/detai
    l/wave-evaluation-
    tool/jbbplnpkjmmeebjpijfedlgcdilocofh
    Achecker – automated test using code
    view
    http://achecker.ca/checker/index.php
    SiteImprove – automated test using code and
    style sheets
    https://siteimprove.com/
    Sort sight (by Power mapper) -tests more
    than one page at a time
    http://www.powermapper.com/products/s
    ortsite/

    View full-size slide

  50. PDF Tools
    WCAG 2.1 guidelines for accessibility
    https://www.w3.org/TR/WCAG20/
    Interactive WCAG 2.1 guidelines, using
    WEBAIM recommendations
    http://bit.ly/2q1rMyD
    18F Accessibility Guide
    https://accessibility.18f.gov/tools/
    GDS accessibility posters
    https://accessibility.blog.gov.uk/2016/09/02
    /dos-and-donts-on-designing-for-
    accessibility/
    Adobe Acrobat Pro
    https://acrobat.adobe.com
    European Internet Inclusion Initiative PDF
    automated checker
    http://checkers.eiii.eu/en/pdfcheck/
    W3C guidelines for PDFs
    https://www.w3.org/TR/WCAG-
    TECHS/pdf.html
    Government advice for PDFs
    https://www.gov.uk/guidance/how-to-
    publish-on-gov-uk/accessible-pdfs

    View full-size slide

  51. Great reads
    WCAG 2.1 guidelines for accessibility
    https://www.w3.org/TR/WCAG20/
    Interactive WCAG 2.1 guidelines, using
    WEBAIM recommendations
    http://bit.ly/2q1rMyD
    18F Accessibility Guide
    https://accessibility.18f.gov/tools/
    GDS accessibility posters
    https://accessibility.blog.gov.uk/2016/09/02
    /dos-and-donts-on-designing-for-
    accessibility/
    WebAIM million website review
    https://webaim.org/projects/million
    MisMatch Design
    https://mismatch.design
    Exploring the UK’s digital divide
    https://www.ons.gov.uk/peoplepopulati
    onandcommunity/householdcharacteristi
    cs/homeinternetandsocialmediausage/ar
    ticles/exploringtheuksdigitaldivide/2019-
    03-04
    Inclusive Design Principles
    https://inclusivedesignprinciples.org

    View full-size slide

  52. WCAG 2.1 guidelines for accessibility
    https://www.w3.org/TR/WCAG20/
    Interactive WCAG 2.1 guidelines, using
    WEBAIM recommendations
    http://bit.ly/2q1rMyD
    18F Accessibility Guide
    https://accessibility.18f.gov/tools/
    GDS accessibility posters
    https://accessibility.blog.gov.uk/2016/09/02
    /dos-and-donts-on-designing-for-
    accessibility/
    Inclusive Design Patterns
    https://assets.cms.gov/resources/framewor
    k/2.0/Pages/index.html
    Microsoft: respecting focus
    http://human.cx/media/1042/respecting-
    focus-a-behavior-guide-for-intelligent-
    systems.pdf
    Accessibility for Teams
    https://accessibility.digital.gov
    Microsoft: inclusive design toolkit
    https://download.microsoft.com/downlo
    ad/b/0/d/b0d4bf87-09ce-4417-8f28-
    d60703d672ed/inclusive_toolkit_manual
    _final.pdf

    View full-size slide