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.

SXSW 2011 Inclusive Design

4,617 views

Published on

Inclusive Design: Creating Beautiful, Usable & Accessible Websites

Published in: Technology
  • Be the first to comment

SXSW 2011 Inclusive Design

  1. 1. WELCOME Inclusive DesignCreating Beautiful, Usable & Accessible Websites
  2. 2. "All fine architectural values arehuman values, else not valuable." Frank Lloyd Wright Photo via Wikimedia. Creator: Al Ravenna.
  3. 3. What is Inclusive Design?Design with diversity in mind Photo via Flickr. Creator: woodley wonderworks
  4. 4. The Inclusive Design UmbrellaPlan • Execute • Follow
  5. 5. The Inclusive Design UmbrellaPlan ‣ Brand Custodianship ‣ User Experience ‣ Content Strategy
  6. 6. The Inclusive Design UmbrellaExecute ‣ Market Research ‣ Visual Design ‣ User Interface Design ‣ Information Architecture Design ‣ Development
  7. 7. The Inclusive Design UmbrellaFollow ‣ Good Design Principles & Best Practices ‣ Accessibility Guidelines & Best Practices ‣ Web Standards ‣ Usability Best Practices
  8. 8. Inclusive Design ElementsUser Centred: Designed to optimise for use by all people Beautiful: Visually pleasing On Brand: Delivers on brand promise Accessible: Can be accessed by diverse users, user agents & devices Usable: Can be used as intendedInteroperable: Harmoniously interacts with disparate technologies Open: Uses open standards, wherever possible Meaningful: Conveys its purpose, giving meaning to end users Universal: Fit for purpose to be used by all
  9. 9. From Architecture andIndustrial Design to the Web Photo via Flickr. Creator: Stepan Mazurov
  10. 10. But First..... What is Design? "Design is the process of conceptualising and creating something tangible, in order to serve a specific purpose."
  11. 11. .....and Foremost What is Good Design? Dieter Rams Immutable Principles of Good Design: ‣ is innovative ‣ makes a product useful ‣ is aesthetic ‣ makes a product understandable ‣ is unobtrusive ‣ is honest ‣ is long-lasting ‣ is thorough down to the last detail ‣ is environmentally friendly ‣ is as little design as possible
  12. 12. But, I don’t design! Oh, yes you do.Anyone involved in creating a website is part of the design process. Photo via Flickr. Creator: Jolene Van Laar
  13. 13. Everyone in the team must have: Skills, Knowledge, Passion, Integrity, Empathy
  14. 14. The Principles of Inclusive Design One: Equitable Two: Flexible Three: Simple & Intuitive Four: Perceptible Five: Informative Six: Preventative Seven: Tolerant Eight: Effortless Nine: Accommodating Ten: Consistent
  15. 15. Principle one: Equitable ‣ Be Welcoming YOU ‣ Dont Discriminate ‣ Different User Experiences EFFECT ‣ Equally Valuable Outcomes
  16. 16. Principle one: Equitable HOW? ‣ Engage with users from the get go. ‣ The success of your website depends on them.
  17. 17. Principle two: Flexible ‣ Give Options YOU ‣ Think Who, How, Why, What, Where & When ‣ Choice for Diverse Users EFFECT ‣ Access Device Neutrality
  18. 18. Principle two: Flexible HOW? Considering the variables. ‣ Users ‣ Physical Environment ‣ User Agents ‣ User Preferences ‣ Devices Build for the different outcomes ‣ HTML: Lay a meaningful foundation ‣ CSS: Apply effective styling ‣ JavaScript: Enhance behaviour & interactivity
  19. 19. Principle two: Flexible
  20. 20. Principle two: Flexible
  21. 21. Principle three: Simple & Intuitive ‣ Be Obvious YOU ‣ Add Value, not Complexity ‣ Seamless User Experiences EFFECT ‣ Engaging Interactions
  22. 22. Principle three: Simple & Intuitive HOW? ‣ Deliver Benefits, not Features. ‣ Balance Outcomes with Experiences. ‣ Create Use Cases ‣ Build Prototypes ‣ Test
  23. 23. Principle four: Perceptible ‣ Be Clear YOU ‣ Dont Assume Anything ‣ Communication of Information EFFECT ‣ Understanding of the Websites Purpose
  24. 24. Principle four: Perceptible HOW? ‣ Straightforward and Concise Copy ‣ Meaningful Structure and Sequence ‣ Alternatives for Images, Audio-Visual and Other Non-text Content ‣ Convey Information for all Senses
  25. 25. Principle four: Perceptible
  26. 26. Principle four: Perceptible
  27. 27. Principle five: Informative ‣ Be Timely and Descriptive YOU ‣ Give Feedback ‣ Manage Expectations EFFECT ‣ Maintain Dialogue
  28. 28. Principle five: Informative HOW? ‣ Let people know where they are ‣ Provide multiple ways to navigate and access content ‣ Make common elements memorable ‣ Dont make your website behave unpredictably
  29. 29. Principle five: Informative
  30. 30. Principle six: Preventative ‣ Provide Instructions YOU ‣ Guide Users ‣ Minimise Errors EFFECT ‣ Engender Trust
  31. 31. Principle six: Preventative HOW? ‣ Guide Users Interactions ‣ Use Flexible Form Field Formats ‣ Give Clear Form Labels and Instructions ‣ Provide Early Intervention
  32. 32. Principle six: Preventative
  33. 33. Principle seven: Tolerant ‣ Indicate Errors Precisely YOU ‣ Be Supportive ‣ Build Confidence EFFECT ‣ Reinforce Reliability
  34. 34. Principle seven: Tolerant HOW? ‣ Indicate what errors have been made ‣ Provide accurate instructions for fixing errors ‣ Make it clear to the user where the errors are ‣ Provide appropriate success and error messaging
  35. 35. Principle eight: Effortless ‣ Be Unrestrictive YOU ‣ Dont Be Demanding EFFECT ‣ Carefree Happy Customers ‣ Users who Interact Naturally ‣ Deeper User Engagement ‣ Efficient and Effective Use
  36. 36. Principle eight: Effortless HOW? ‣ Make your websites common elements memorable ‣ Do not rely on users to understand anything ambiguous
  37. 37. Principle eight: Effortless
  38. 38. Principle nine: Accommodating ‣ Be Approachable YOU ‣ Provide Space EFFECT ‣ Room to Manoeuvre ‣ Adaptable ‣ Convenient and Comfortable ‣ Robust
  39. 39. Principle nine: Accommodating HOW? ‣ Make sure that your website can be accessed by different devices of all shapes and sizes ‣ Allow text to be resized without breaking the visual design
  40. 40. Principle ten: Consistent ‣ Have Standards YOU ‣ Be Conventional ‣ Familiar Environment EFFECT ‣ Memorable Functionality
  41. 41. Principle ten: Consistent HOW? ‣ Use Web Standards ‣ Apply Conventions where they exist ‣ Conform to Industry Guidelines and Best Practices ‣ Adhere to Brand Guidelines
  42. 42. Principle ten: Consistent
  43. 43. Inclusive Design is where Innovation and Imagination flourish. Meeting the needs of a wide range ofusers does not limit creativity. It awakensthe senses and enlivens the human spirit.  
  44. 44. "All fine Internet values are human values, else not valuable."Sandi Wassmer & Ian Pouncey
  45. 45. Any Questions? Transcript of this presentation available for Download2011 Sandi Wassmer Photo via Flickr. Creator: Jonathan Youngblood

×