SXSW 2011 Inclusive Design

4,367 views
4,234 views

Published on

Inclusive Design: Creating Beautiful, Usable & Accessible Websites

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,367
On SlideShare
0
From Embeds
0
Number of Embeds
211
Actions
Shares
0
Downloads
102
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×