Interfaces, Accessibility & Superheroes

  • Published on
    15-Dec-2014

  • View
    1.410

  • Download
    40

Embed Size (px)

DESCRIPTION

BAM! POW! Beloved superhero Daredevil squelches his enemies with speed and precision, completely uninhibited by his blindness. Overcoming adversity, discovering superpowers, and saving the world are common themes in comics and graphic novels. Our mission is to bring those themes into the world of accessible design. The World Heath Organization and the World Bank report that nearly 1 out of 7 of the world's population has some form of disability. Creating products and services that don't include alternate interaction models is a failure on a global scale. Designers and engineers are the middlemen between disability and super-ability, and it is our duty to help break interface barriers. This session will explore examples and methods for understanding and practicing accessible design.

Transcript

<ul><li> 1. Interfaces, Accessibility&amp; Superheroes SXSW Interactive Workshop, 2013 Yvonne So &amp; Livia Veneziano#superable 1</li></ul> <p> 2. Hello - Were Designers2 3. Designing for Accessibility3 4. First, a Challenge 4 5. What is Accessible Design? 5 6. Definition: Universal DesignUniversal Design n....the design of products and environments to be usable byall people, to the greatest extent possible, without the needfor adaptation or specialized design.http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm 6 7. Definition: Disability Disability n. ...is a complex phenomenon, reflecting an interaction between feature of a persons body and features of the society in which he or she lives. Disabilities. World Health Organization. Retrieved 11 August, 2012. 7 8. Definition: Accessibility Accessibility n. ...the degree to which a product, service, or environment is available to as many people as possible. Accessibility Brain Injury Resource | BrainLine.org. Accessibility Brain Injury Resource. N.p., n.d. Web. 16, Jan, 2013 8 9. # 10. # 11. # 12. # 13. # 14. # 15. # 16. # 17. Regulations and Guidelines 17 18. # 19. Superheroes of Today 19 20. # 21. Four principles of Accessible DesignP.O.U.R. As defined by w3.org 21 22. PerceivableOperableUnderstandableRobust 22 23. # 24. # 25. # 26. # 27. Basic Elements of Accessible Design27 28. What is Legibility?LegibilityequalsUnderstanding28 29. The Elements of LegibilityHierarchyIconography Color &amp; LegibilitySound ContrastTouch &amp;TypographyHaptics 29 30. Questions to Test LegibilityCan my audience understand it?How can the platform help my users understand?Does the platform suggest particular usabilitypatterns?How difficult is it to learn?(Learned behavior vs. established patterns) 30 31. # 32. # 33. # 34. # 35. # 36. What is Color?ColorHueChromaticitySaturationValueContrast 36 37. ColorblindnessColorblindness affectsapproximately 8% of males and0.5% of females.www.colorblindor.com37 38. # 39. # 40. # 41. What is Typography? TypographyFontSizeWeightUniformityContrast41 42. # 43. # 44. # 45. Examples of Easy-to-Read Typefaces Helvetica Geneva Arial Gotham Calibri Times45 46. # 47. # 48. # 49. # 50. # 51. # 52. # 53. # 54. # 55. Design Resources: Tools Checklists, Validators, and Design ToolsValidate HTML/CSSColor Contrast CheckeriOS Human Interface Guidelines Firefox Accessibility ToolbarAndroid Accessibility GuideReadability Test ToolWindows Mobile Design Guide Discover more 55 56. FUN STUFF! 56 57. Exercise: Example Interfaces Southwest &amp; FlightView Bloomberg &amp; FlipboardTarget &amp; GucciYelp &amp; GrouponStarbucks &amp; PayPal Skype &amp; Google Voice 57 58. # 59. Part 2 59 60. # 61. Technology and Innovation61 62. # 63. Common Built-in FeaturesIncrease text sizeText-to-speechPinch and zoom screenText magnificationText highlightAlternate gesturesCustom ring and vibration patternsColor/brightness contrastHaptic feedback 63 64. # 65. Video ResourcesHow the Blind Use iPhonesHow the Blind Use InstagramRaising the Floors GPIIWeb Accessibility by STAFFNetGoogle I/O: Making Android Apps Accessible 65 66. Alternate Technologies 66 67. # 68. # 69. # 70. # 71. # 72. # 73. # 74. # 75. What We Can LearnLeverage existing alternate technologies we already seebeing used in interfaces today.Introduce gestures into top level interaction as a fun featurefor all users and creates a new channel to access features.Offering feedback whether it is sound, haptic, or visual cuescan be simple, novel, and useful. 75 76. MORE FUN STUFF!76 77. Exercise: Suggest Improvement Select one of your servicesand suggest an improvement for the element you found most restrictive. 77 78. EVEN MOREFUN STUFF! 78 79. Discussion: Questions to AskWhy did I make this decision?Who is this geared towards?Does it work for all audiences?Is it a nice experience?79 80. Designers and Engineers Today,Superheroes Tomorrow 80 81. # 82. # 83. Thank you! 83 84. Want to chat more?@yvonniks@gingerstormy 84 </p>