SXSW 2011 Inclusive Design
•Download as KEY, PDF•
15 likes•1,516 views
Inclusive Design: Creating Beautiful, Usable & Accessible Websites
Recommended
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (14)
Similar to SXSW 2011 Inclusive Design
Similar to SXSW 2011 Inclusive Design (20)
More from Sandi Wassmer
More from Sandi Wassmer (8)
Recently uploaded
Recently uploaded (20)
SXSW 2011 Inclusive Design
- 1. WELCOME Inclusive Design Creating Beautiful, Usable & Accessible Websites
- 2. "All fine architectural values are human values, else not valuable." Frank Lloyd Wright Photo via Wikimedia. Creator: Al Ravenna.
- 3. What is Inclusive Design? Design with diversity in mind Photo via Flickr. Creator: woodley wonderworks
- 4. The Inclusive Design Umbrella Plan • Execute • Follow
- 5. The Inclusive Design Umbrella Plan ‣ Brand Custodianship ‣ User Experience ‣ Content Strategy
- 6. The Inclusive Design Umbrella Execute ‣ Market Research ‣ Visual Design ‣ User Interface Design ‣ Information Architecture Design ‣ Development
- 7. The Inclusive Design Umbrella Follow ‣ Good Design Principles & Best Practices ‣ Accessibility Guidelines & Best Practices ‣ Web Standards ‣ Usability Best Practices
- 8. Inclusive Design Elements User 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 intended Interoperable: 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. From Architecture and Industrial Design to the Web Photo via Flickr. Creator: Stepan Mazurov
- 10. But First..... What is Design? "Design is the process of conceptualising and creating something tangible, in order to serve a specific purpose."
- 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. 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. Everyone in the team must have: Skills, Knowledge, Passion, Integrity, Empathy
- 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. Principle one: Equitable ‣ Be Welcoming YOU ‣ Don't Discriminate ‣ Different User Experiences EFFECT ‣ Equally Valuable Outcomes
- 16. Principle one: Equitable HOW? ‣ Engage with users from the get go. ‣ The success of your website depends on them.
- 17. Principle two: Flexible ‣ Give Options YOU ‣ Think Who, How, Why, What, Where & When ‣ Choice for Diverse Users EFFECT ‣ Access Device Neutrality
- 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. Principle two: Flexible
- 20. Principle two: Flexible
- 21. Principle three: Simple & Intuitive ‣ Be Obvious YOU ‣ Add Value, not Complexity ‣ Seamless User Experiences EFFECT ‣ Engaging Interactions
- 22. Principle three: Simple & Intuitive HOW? ‣ Deliver Benefits, not Features. ‣ Balance Outcomes with Experiences. ‣ Create Use Cases ‣ Build Prototypes ‣ Test
- 23. Principle four: Perceptible ‣ Be Clear YOU ‣ Don't Assume Anything ‣ Communication of Information EFFECT ‣ Understanding of the Website's Purpose
- 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. Principle four: Perceptible
- 26. Principle four: Perceptible
- 27. Principle five: Informative ‣ Be Timely and Descriptive YOU ‣ Give Feedback ‣ Manage Expectations EFFECT ‣ Maintain Dialogue
- 28. Principle five: Informative HOW? ‣ Let people know where they are ‣ Provide multiple ways to navigate and access content ‣ Make common elements memorable ‣ Don't make your website behave unpredictably
- 29. Principle five: Informative
- 30. Principle six: Preventative ‣ Provide Instructions YOU ‣ Guide Users ‣ Minimise Errors EFFECT ‣ Engender Trust
- 31. Principle six: Preventative HOW? ‣ Guide Users Interactions ‣ Use Flexible Form Field Formats ‣ Give Clear Form Labels and Instructions ‣ Provide Early Intervention
- 32. Principle six: Preventative
- 33. Principle seven: Tolerant ‣ Indicate Errors Precisely YOU ‣ Be Supportive ‣ Build Confidence EFFECT ‣ Reinforce Reliability
- 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. Principle eight: Effortless ‣ Be Unrestrictive YOU ‣ Don't Be Demanding EFFECT ‣ Carefree Happy Customers ‣ Users who Interact Naturally ‣ Deeper User Engagement ‣ Efficient and Effective Use
- 36. Principle eight: Effortless HOW? ‣ Make your website's common elements memorable ‣ Do not rely on users to understand anything ambiguous
- 37. Principle eight: Effortless
- 38. Principle nine: Accommodating ‣ Be Approachable YOU ‣ Provide Space EFFECT ‣ Room to Manoeuvre ‣ Adaptable ‣ Convenient and Comfortable ‣ Robust
- 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. Principle ten: Consistent ‣ Have Standards YOU ‣ Be Conventional ‣ Familiar Environment EFFECT ‣ Memorable Functionality
- 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. Principle ten: Consistent
- 43. Inclusive Design is where Innovation and Imagination flourish. Meeting the needs of a wide range of users does not limit creativity. It awakens the senses and enlivens the human spirit.
- 44. "All fine Internet values are human values, else not valuable." Sandi Wassmer & Ian Pouncey
- 45. Any Questions? Transcript of this presentation available for Download 2011 Sandi Wassmer Photo via Flickr. Creator: Jonathan Youngblood
Editor's Notes
- \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