Más contenido relacionado

Similar a Making mobile accessible(20)


Making mobile accessible

  1. Making Mobile Accessible
  2. Why does it matter? Approximately one billion people worldwide have some form of disability, making up a quarter of the mobile subscribers worldwide. Visually Impaired Mental Health Dyslexia Autism Mobility 0 175 350 Unit: Million 525 700
  3. But why should I bother? “People with disabilities rarely use the web” “We don’t want to affect the experience for the majority of our users” “We don’t have the budget for accessibility” “Accessible websites are ugly”
  4. Oh… Accessibility will improve the experience for all users. Easier to read, hear, interact, understand and stay focused. Accessibility doubled Legal and General’s life insurance sales online. ! Tesco home delivery sales increased by £13m in 2005. Normal visitors also claimed to prefer the accessibility changes that were made. ! Accessibility changes increased sales by 68%.
  5. “Stand on a street corner sometime and watch how many walkers prefer using curb-cut ramps instead of stepping over a storm drain or tiptoe- ing around a street post. Most people choose to use a ramp when entering a building, even if they aren’t in a wheelchair or require the use of crutches.”
  6. Learning Disabilities ‘Learning disability’ is an umbrella term covering many different intellectual disabilities. It means that a person’s capacity to learn is affected and that they may not learn things as quickly as other people.
  7. Learning Disabilities - Consistency Consistent navigation and iconography. ! Between screens the placement, functionality and display of elements should be consistent to aid familiarity and focus. ! ! Interactive elements should produce predictably similar results. ! Any components that give the user feedback (touch states, animations etc) should be consistant through the application.
  8. Learning Disabilities - Transformability Text should be scalable without breaking functionality. ! Application content should remain readable and functional when text size is either increased or decreased. ! Avoid using text within images. ! Use true text within images wherever possible, this means that the textual content will also support the scaling of any text sizes. ! Don’t rely on colour to convey content. ! Not all users will be able to relate a colour to an event or situation, so don’t rely on colour alone to convey message.
  9. Learning Disabilities - Multi Modality Make content available in multiple mediums. ! Provided alternative ways of viewing content (such as audio and video) provides the user with multiple means of perceiving content. ! ! Images can be used to convey and enhance content. ! The use of images can aid the users understanding of any content they may find complicated to understand. ! This also applies to iconography, text provides contextual cues and content comprehension
  10. Learning Disabilities - Focus Help the user to focus on import an content. ! White space and page design can help to increase focus on content. However, be careful to draw attention away with animations, sounds, images and busy backgrounds - this makes it hard for some users to focus. ! Structure content. ! Breaking content into shorter sections with clear headings creates a clear and easy to follow structure for users. Sequencing pages and using multisep forms can also help to simplify the flow of content.
  11. Learning Disabilities - Error Prevention Give the user control. ! The user should have complete control over content updates and changes, content time-outs should be avoided unless more time can be requested. ! Indicate the user of their current state. ! Make sure the user knows their progress or current state within a flow, this may be a position within the navigational structure or a step within a sequence ! Allow the reversal of any users actions ! Any critical interaction (user input, navigation) should be reversible or cancellable.
  12. Dyslexia Dyslexia is a common type of specific learning difficulty that mainly affects the skills involved in the reading and spelling of words.
  13. Dyslexia - Iconography Whilst text aids the user by giving more context to any imagery that is used, iconography allows users to skip reading any supporting text. ! This can save the user both time and frustration, allowing them to identify the purpose of the navigation almost instantly.
  14. Dyslexia - River Effect Justified text and double spacing after periods produces large gaps between text, this is known as creating a distracting river of whitespace. ! This can make it hard for the user to read both accurately and fluently, which can cause them to constantly lose their place.
  15. Dyslexia - Blurred Content Using pure black text on a pure white background causes swirled words due to the sensitivity of the contents high contrast. This bad habit affects the users ability to read, as well as making the process very tiring. ! Longer breaks are required between reading text, long paragraphs make it easy for users to lose their place. A rule of ‘one idea per paragraph’ helps to keep focus.
  16. Dyslexia - Washout Effect Serif fonts can obscure the shape of lettering, causing them to merge together within words. This makes the text become faint and indistinct, slowing the reader down. ! To overcome this, sans-serif fonts increase space between letters, making the words easier to understand. ! Italics should be avoided due to being both jagged and slanted, making it hard for users to understand. This becomes even worse so when smaller font sizes are used.
  17. Autism Spectrum Autism and Asperges syndrome are both part of a range of related developmental disorders known as autistic spectrum disorders (ASDs) that begin in childhood and last through adulthood.
  18. Autism Spectrum - Content Availability The display of content that cannot be interacted with by the user can cause frustration and panic for some users. ! Ideally, an alternative form of interaction should be shown such as registering for an update of when an item is in stock, rather than a grey ‘Out of Stock’ button. ! Otherwise, such content should be hidden from the user, but accessible upon request.
  19. Autism Spectrum - Limit Choices User with autism can easily be overloaded within information and choices. Because of this, the number of routes (links) the user can take should be kept to a minimum within each area. ! It should take a user no more than three clicks to be able to navigate to their desired destination. ! Providing more than a single method of navigating information, where possible, gives the user control over navigation.
  20. Hearing Loss Hearing loss is a common problem that often develops with age or is caused by repeated exposure to loud noises.
  21. Hearing loss - Closed Captioning Any videos used should always include subtitles. Closed caption should be implemented effectively to ensure all viewers can achieve an enjoyable experience. ! Banding should be used as the caption background, but it should not obscure any important content and the context of the caption should still be clear. ! Captions are not just for users with hearing loss. Users with learning difficulties and non-english speakers also gain a better experience.
  22. Hearing loss - Visual Notification Any interactive features that indicate some form of progress should always be supported with a visual alert. ! This could be by showing a visual notification as well as the chime that is played when a message received… ! …Or showing some form of visual validation when content finishes updating.
  23. Hearing Loss - Content Availability Applications and sites that are locked to landscape orientation will create difficulties for users who are hard of hearing. ! Orientation locks cause problems for users with some disabilities. ! Landscape for example, once the phone has been turned around it is likely that the users hands will be covering the speakers of the mobile device this makes it difficult for the user to hear any audio content.
  24. Visual Impairments Visual impairment is when a person has sight loss that cannot be fully corrected using glasses or contact lenses.
  25. Visual Impairments - Colour Blindness Type Colour affected % population Protanopia Red and Green, more intense. 1% all males Deuteranopia Red and green. 1% all males Tritanopia Blue and yellow < 1% 1 / 30,000 Complete chromatopsia All colours, as grey Incomplete chromatopsia All colours, dimly visible 1 / 30,000 Protanomaly Reds can seem black 1% males, 0.01% females Deuteranomaly Muted greens 6% males, 0.4% females Tritanomaly Blue and yellow 0.01%
  26. Visual Impairments - Colour Blindness • Text links that aren’t underlined • Maps with multiple lines • Keys used for tables / graphs • Coloured maps • Discounted items on e-commerce sites
  27. Visual Impairments - Colour Blindness Deuteranope Non-colour blind Protanope
  28. Visual Impairments - Colour Blindness Non-colour blind Tritanope
  29. Visual Impairments - Colour Blindness Deuteranope Non-colour blind Protanope
  30. Visual Impairments - Colour Blindness Non-colour blind Tritanope
  31. Learning from others The ignorance of accessibility is more common than you may think…
  32. Useful Tools Color Oracle - A free colour blindness simulator for Window, Mac and Linux. ! WAVE Web Accessibility Tool - An online tool checks page accessibility, providing tags to show the results. ! WHO - Information on disabilities on a global scale, useful reports and fact sheets.
  33. References Many thanks to these people for the work referenced within this presentation. Why Bother with Accessibility? - Laura Kalbag ! Evaluating Cognitive Web Accessibility - WebAim ! World Health Organisation ! RNIB ! The National Autism Society ! 6 Surprising Nad Practices That Hurt Dyslexic Users - UXMovement ! Say Goodbye to Red-Green Color Scales - Gregor Aish !