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
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
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
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
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
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
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