Successfully reported this slideshow.
Your SlideShare is downloading. ×

Beyond the touch screen - better accessibility for mobile apps

Ad

Beyond the touch screen 

for a better accessibility of mobile apps
Fabien Marry
@Fabien_UX

Ad

Outline Introducing Noëlle… and everybody else
Mobile devices are a godsend for
accessibility
Where do we start?
Going the...

Ad

IntroducingNoëlle…
andeverybodyelse

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 57 Ad
1 of 57 Ad

More Related Content

Beyond the touch screen - better accessibility for mobile apps

  1. 1. Beyond the touch screen 
 for a better accessibility of mobile apps Fabien Marry @Fabien_UX
  2. 2. Outline Introducing Noëlle… and everybody else Mobile devices are a godsend for accessibility Where do we start? Going the extra mile A message from Professor Hawking 2@Fabien_UX
  3. 3. IntroducingNoëlle… andeverybodyelse
  4. 4. Meet Noëlle 4@Fabien_UX Meet Noëlle, who was my grand mother… She loved to get postcards when we went on holidays, so I wrote one to her every time I went somewhere. But her eyesight had declined to a point where she couldn’t read most things...
  5. 5. Meet Noëlle 5@Fabien_UX I kept writing to her, but I just wrote larger. If you care a tiny bit, it’s often not that hard to include people with slightly different needs.
  6. 6. Not just Noëlle… 6@Fabien_UX Mean Upper limit Lower limit Age (Years) OcularAccommodation(Dioptres) 0 10 20 30 40 50 60 70 0 2 4 6 8 10 12 14 Higher Mean Lower Age (Years) OcularAccomodation(Dioptries) Everybody’s eyesight gets worse with time, maybe much earlier that you would think... This is especially an issue to be aware of when your designers are all under 40!
  7. 7. 7@Fabien_UX http://www.inclusivedesigntoolkit.com/ 63 M Population 11 M Disabled 8.5 M Arthritis 9 M Hearing Impairment 2 M Visual Impairment 1 in 10 Left Handed 8% Men 0.4% Women Colour Blind 3.4 M Asthma 1.5 M Diabetes The UK population in numbers
  8. 8. Expand your addressable market 8@Fabien_UX How many people have less than Full ability ? Source: 1996/97 The Disability Follow-up Survey (Grundy et al. 1999) http://www.inclusivedesigntoolkit.com/
  9. 9. Expand your addressable market 9@Fabien_UX Source: The Henley Centre, Family Expenditure Survey (1996) http://www.inclusivedesigntoolkit.com/ Money to spend and time to spend it The UK’s 12 million disabled people have a spending power in excess of £80 billion.
  10. 10. An ageing population 10@Fabien_UX Japan As the population gets older in most developed countries, the need will only get greater.
  11. 11. Fantastic PR opportunity for your clients 11@Fabien_UX “Your product can now be accessible to vision impaired people
 for the first time”
  12. 12. A legal requirement! 12@Fabien_UX Another reason: The Disability Discrimination Act 1995 (DDA) gives people with disabilities important rights not to be discriminated against: in accessing everyday goods and services like shops, cafés, banks, cinemas and places of worship. Especially for Government and Enterprise. http://www.flickr.com/photos/bravosixninerdelta/7158071205/sizes/c/in/photostream/
  13. 13. People in the UK who have never used the internet 13@Fabien_UX 34% have a disability https://beta.ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2015#disability Disability is a huge barrier to Internet access and full involvement in society.
  14. 14. Mobiledevicesarea godsendfora11y
  15. 15. A typical dedicated accessibility device 16@Fabien_UX Only $7,595! • Augmentative and alternative communication • Not versatile • Poor design leading to stigma • Hard to find • Expensive! https://store.prentrom.com/product_info.php/cPath/11/products_id/207
  16. 16. Accessibility features are now built in mainstream devices 17@Fabien_UX Cheaper Better design Better build quality More features No stigma • Cheaper, no stigma, well designed • Today I’m focusing on iOS as it is the most advanced • Most of these features are also available on Android
  17. 17. Accessibility features are now built in mainstream devices 18@Fabien_UX “There's nothing on the iPhone or iPad that you can do that I can't do” Stevie Wonder
  18. 18. Built into iOS:
 Zoom 19@Fabien_UX • Simply zooms in • Works everywhere but not very practical as requires constant panning
  19. 19. Built into iOS:
 Dynamic Type 20@Fabien_UX iOS 7 introduced a feature that allows user to simply increase the font size of key content of text, assuming the developer used the Dynamic Type framework to allow it.
  20. 20. Built into iOS:
 Safari and its reader mode 21@Fabien_UX
  21. 21. Built into iOS:
 Safari and its reader mode 22@Fabien_UX
  22. 22. Built into iOS:
 High contrast mode 23@Fabien_UX This “psychedelic” mode can help people with some vision impairments.
  23. 23. Built into iOS:
 Assistive Touch 24@Fabien_UX Assistive Touch adds simple buttons to do things requiring precise hand control movements: • multi finger gestures • hardware buttons • shake • even customs gesture someone else can record for you
  24. 24. Built into iOS:
 Custom vibrations 25@Fabien_UX iOS goes beyond visual and audio. Haptic can be used to communicate information with different vibration patterns.
  25. 25. Built into iOS:
 Voiceover 26@Fabien_UX Demo: How a blind person can use Twitter https://www.youtube.com/watch?v=c0nvdiRdehw&t=38s
  26. 26. Built into iOS:
 Voiceover 27@Fabien_UX Demo: How a blind person can use Twitter https://www.youtube.com/watch?v=c0nvdiRdehw&t=38s
  27. 27. More to iOS than a touch screen 28@Fabien_UX http://www.apple.com/uk/accessibility/ios/braille-display.html
  28. 28. Meet Andy 29@Fabien_UX Here’s Andy… A typical 20 something that went on holiday, and decided to take a dive in the wrong place…
  29. 29. Meet Andy 30@Fabien_UX ...and is now paralysed from the neck down. That means he struggled to do anything without someone helping him. Just imagine what that’s like. From one day to the next, he couldn’t make a phone call on his own, couldn’t send a text on his own, needed someone to read to him. Suddenly, he had no independence, and no privacy.
  30. 30. Meet Andy 31@Fabien_UX Luckily technology could help. He now has a solution that’s integrated with his wheelchair. A chin joystick controls the Voiceover cursor on his iPhone.
  31. 31. How to touch with no arms 32@Fabien_UX http://store.griffintechnology.com/mouthstick-stylus That’s a lot better than the early alternative which was just a stick to bite on.
  32. 32. Built into iOS:
 Switch control 33@Fabien_UX Since iOS 7, your device can be controlled by external switches. A switch is anything that can close an electric circuit: a big button, something that detect when you close your eyelid, or when you blow into it.
  33. 33. Built into iOS:
 Switch control 34@Fabien_UX Here’s Christopher Hills. Born with cerebral palsy, he has limited control of his limbs. He’s using switches installed in his wheelchair head rest to control his devices.
  34. 34. Built into iOS:
 Switch control 35@Fabien_UX Christopher’s now a certified Apple Final Cut Pro editor. He produces a lot of video for YouTube, including some that explain his setup.
 His Youtube channel:
 https://www.youtube.com/ user/icdhills
  35. 35. Built in
 voice commands 36@Fabien_UX Dictation + Digital assistants that understand natural language are next. “Remind me to buy milk when I get of from my bus” “Call my wife” “Set a timer for 10min”. Not open to third parties... for now.
  36. 36. 37@Fabien_UX All these capacities are built in, but you need to do your part for it to work.
  37. 37. Sowheredowestart?
  38. 38. A great A11y needs all 39@Fabien_UX Sales Scoping Interaction Design User Interface Software
 Development Quality Assurance Client Usability testing Delivering good accessibility is a team effort. Sales need communicate its value for our clients. Scoping needs to factor it in to estimation. We need to design interactions that can also work without graphics. And interfaces that consider readability, colour contrast, colour blindness.
  39. 39. Add a11y metadata to you UI 40@Fabien_UX Add Adds a &tle Accessibility enabled If false, element will be ignored completely by the VO cursor. Label Short spoken text after focus. Hint Longer spoken message after label and a pause (an explanation not a command). Trait
 Define the type of interaction. This is not part of the GUI, but it is the key foundation for UI for voiceover. Can be added in Xcode Ui like here, or straight in code. It is is also used by braille accessory users. And it would not be a stretch to think a future version of the OS could use the labels as voice commands.
  40. 40. Documenting a11y metadata 41@Fabien_UX © 2013 TigerSpike. Confidential. Last Update: 11 / 02 / 2013 Page: 5 Tigerspike London Level G, 1 & 3, 18 Buckingham Gate, London SW1E 6LB, United Kingdom l +44 20 7148 6600 l london@tigerspike.com l www.tigerspike.com iPad 14:04 PM Velum - iPad publication iPad Wireframes & Functional Overview 1.0 Issue Library LS ⚙ "LOGO⚙ " Issue Info Panel 1.0 Issue Library LS Allows users to quickly choose which Issues to read. Provides access to stored Favorite Articles and App Settings. 1. SETTINGS BUTTON [Gesture: Tap] Goes to "Settings". [Transition: Slide] When Settings is opened it slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the Archive below. [A11y: enabled; Label: "Settings"] 2. FAVOURITES BUTTON [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER [Gesture: Swipe Right] Slides (animated) issues to previous issue* [Gesture: Swipe Left] Slides (animated) issues to next issue* If the issue has not yet downloaded: [Gesture: Tap] Starts downloading the issue. [A11y: enabled; Label: "Download the issue"; Hint: "<issue title>." Trait: Selected, button, image]. If the issue has already been downloaded: [Gesture: Tap] Open the issue. [Transition: Expand] The cover expands to fill screen [Transition: Fade] Front cover fades to pre-roll advert [Transition: Fade] Pre-roll advert fades to Issue Contents Page [A11y: enabled; Label: "Open the issue."; Hint: "<issue title>" Trait: button, image]. 6. ISSUE INFO PANEL See "1.1 Issue Library - Issue Info Panel" page. *chronologically 1 2 3 4 6 5 2. FAVOURITES BUTTON [Gesture: Tap] Goes to "Favourites". [Transition: Slide] When Favourite is tapped, it (animated) slides up from bottom of screen above the Issue Library layer, upon closing it slide back down revealing the archive. [A11y: enabled; Label: "Favourites", Hint: "Access your favourites articles";] 3. PREVIOUS ISSUE COVER [Gesture: Tap] Slides (animated) issues to previous issue* [Gesture: Double Tap] Slides (animated) issues to previous issue* & [IF DL'd] opens issue [Transition: Slide horizontally] [A11y: enabled; Label: "Previous issue"; Hint: "Selects the issue <issue title>." Trait: button, image] 4. NEXT ISSUE COVER [Gesture: Tap] Slides (animated) issues to next issue* [Gesture: Double Tap] Slides (animated) issues to next issue* & [IF DL'd] opens issue [A11y: enabled; Label: "Next issue"; Hint: "Selects the issue <issue title>."; Trait: button, image]. 5. SELECTED ISSUE COVER This metadata shouldn’t be left for the developer to rush in at the last minute. It’s part of your application just like any text displayed, and should be given the same consideration regarding brand and tone of voice. Clear instructions need to be provided for developers.
  41. 41. Add a11y metadata to you UI 42@Fabien_UX https://speakerdeck.com/spanage/ios-accessibility-inside-and-out For best result, you want to think how to group the accessibility metadata. The best solution is not always to define every element independently.
  42. 42. Helps with automated testing 43@Fabien_UX http://calaba.sh/ A11y metadata is often required to create automated UI tests.
  43. 43. Hook into standard gestures: Escape 44@Fabien_UX = up/back, close, cancel A two-fingered Z motion is the standard gesture to escape modal boxes or go up one level in navigations. Already done if using standard navigation controllers.
  44. 44. Hook into standard gestures: Magic tap 45@Fabien_UX A two fingered double tap is the magic tap. 2-finger double tap = do the most likely action:
 play/pause for media, start/end call, take picture… also now used to expose further actions.
  45. 45. Hook into standard gestures: the code 46@Fabien_UX - accessibilityPerformEscape { // call to your code to get out } - accessibilityPerformMagicTap { // call to your code to do the action } Easy: one line of code!
  46. 46. Legibility: make font size adjustable 47@Fabien_UX +A-A …or let Apple do the work and adopt Dynamic type! Simple but great outcome: allow user to adapt the font size to their vision.
  47. 47. Avoid using colour only to convey meaning 48@Fabien_UX Normal vision Simulated colour blindness http:///wearecolorblind.com/example/ichat
  48. 48. Avoid gesture only interactions 49@Fabien_UX Clear Gesture only interactions are unusable for Voiceover users. Very difficult for sighted users with mobility issues (although Adaptive touch can help).
  49. 49. How to check? 50@Fabien_UX 50 shades of something
 Test your graphics with colour blindness simulators No peeking
 Try using your app using Voiceover, screen off. Nothing like the real thing
 Include users with impairments in usability testing.
  50. 50. Goingtheextramile “Go the extra mile... it’s never crowded.” - unknown
  51. 51. Camera:
 face recognition 52@Fabien_UX “One face. Small face. Face near right edge. Auto- focussed”. http://svan.ca/blog/2012/blind/ Use the hardware and software capacities (here face detection) to think outside of the box, and allow even blind users to take and share pictures. Just because a person is blind doesn’t mean that she’s not facing something others would like to look at.
  52. 52. Ariadne GPS: GPS 53@Fabien_UX Uses GPS to help blind people explore GPS + Voiceover = great opportunities to make apps that help blind people explore cities and landscape. For example, you can set key locations and alert when approaching the right bus stop.
  53. 53. TapTapSee: Eyes for the blind! 54@Fabien_UX You take a picture, it tells you what it sees. Camera + image recognition + crowd sourced analysis = Great when you want to make sure that the bottle you’re opening is milk rather than orange juice when you’re making coffee. Also can help recognise medication, money, clothes...
  54. 54. Instapaper special font for dyslexia 55@Fabien_UX
  55. 55. Everybody Technology - Stephen Hawking's Dream https://www.youtube.com/watch?v=2Tel9UvJfws
  56. 56. On the web Matt Gemmell’s Accessibility for iPhone and iPad apps
 http://mattgemmell.com/accessibility-for-iphone-and- ipad-apps/ Apple’s dev resources on
 https://developer.apple.com/accessibility/ WWDC session on iOS accessibility
 https://developer.apple.com/videos/play/wwdc2015-201/ Switch control on iOS:
 https://support.apple.com/en-mz/HT201370 Christopher Hills’ youtube channel
 https://www.youtube.com/user/icdhills/feed Summer Panage’s iOS accessibility inside and out
 https://speakerdeck.com/spanage/ios-accessibility- inside-and-out Android’s dev resources on accessibility
 https://developer.android.com/guide/topics/ui/ accessibility/index.html Accessibility features in Android Lollipop:
 http://www.androidcentral.com/accessibility-features- android-50-lollipop Android central on Accessibility
 http://www.androidcentral.com/accessibility On twitter @iAmMaccing, @MarcoInEnglish, @mostgood @sommer, @RNIB, and… @Fabien_UX ;) 57@Fabien_UX Going further

×