SXSW 2011 Inclusive Design

WELCOME Inclusive DesignCreating Beautiful, Usable & Accessible Websites

"All ﬁne architectural values arehuman values, else not valuable." Frank Lloyd Wright Photo via Wikimedia. Creator: Al Ravenna.

What is Inclusive Design?Design with diversity in mind Photo via Flickr. Creator: woodley wonderworks

The Inclusive Design UmbrellaPlan • Execute • Follow

The Inclusive Design UmbrellaPlan ‣ Brand Custodianship ‣ User Experience ‣ Content Strategy

The Inclusive Design UmbrellaExecute ‣ Market Research ‣ Visual Design ‣ User Interface Design ‣ Information Architecture Design ‣ Development

The Inclusive Design UmbrellaFollow ‣ Good Design Principles & Best Practices ‣ Accessibility Guidelines & Best Practices ‣ Web Standards ‣ Usability Best Practices

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

From Architecture andIndustrial Design to the Web Photo via Flickr. Creator: Stepan Mazurov

But First..... What is Design? "Design is the process of conceptualising and creating something tangible, in order to serve a speciﬁc purpose."

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

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

Everyone in the team must have: Skills, Knowledge, Passion, Integrity, Empathy

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

Principle one: Equitable ‣ Be Welcoming YOU ‣ Dont Discriminate ‣ Different User Experiences EFFECT ‣ Equally Valuable Outcomes

Principle one: Equitable HOW? ‣ Engage with users from the get go. ‣ The success of your website depends on them.

Principle two: Flexible ‣ Give Options YOU ‣ Think Who, How, Why, What, Where & When ‣ Choice for Diverse Users EFFECT ‣ Access Device Neutrality

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

Principle two: Flexible

Principle three: Simple & Intuitive ‣ Be Obvious YOU ‣ Add Value, not Complexity ‣ Seamless User Experiences EFFECT ‣ Engaging Interactions

Principle three: Simple & Intuitive HOW? ‣ Deliver Beneﬁts, not Features. ‣ Balance Outcomes with Experiences. ‣ Create Use Cases ‣ Build Prototypes ‣ Test

Principle four: Perceptible ‣ Be Clear YOU ‣ Dont Assume Anything ‣ Communication of Information EFFECT ‣ Understanding of the Websites Purpose

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

Principle four: Perceptible

Principle ﬁve: Informative ‣ Be Timely and Descriptive YOU ‣ Give Feedback ‣ Manage Expectations EFFECT ‣ Maintain Dialogue

Principle ﬁve: 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

Principle ﬁve: Informative

Principle six: Preventative ‣ Provide Instructions YOU ‣ Guide Users ‣ Minimise Errors EFFECT ‣ Engender Trust

Principle six: Preventative HOW? ‣ Guide Users Interactions ‣ Use Flexible Form Field Formats ‣ Give Clear Form Labels and Instructions ‣ Provide Early Intervention

Principle six: Preventative

Principle seven: Tolerant ‣ Indicate Errors Precisely YOU ‣ Be Supportive ‣ Build Conﬁdence EFFECT ‣ Reinforce Reliability

Principle seven: Tolerant HOW? ‣ Indicate what errors have been made ‣ Provide accurate instructions for ﬁxing errors ‣ Make it clear to the user where the errors are ‣ Provide appropriate success and error messaging

Principle eight: Effortless ‣ Be Unrestrictive YOU ‣ Dont Be Demanding EFFECT ‣ Carefree Happy Customers ‣ Users who Interact Naturally ‣ Deeper User Engagement ‣ Efﬁcient and Effective Use

Principle eight: Effortless HOW? ‣ Make your websites common elements memorable ‣ Do not rely on users to understand anything ambiguous

Principle eight: Effortless

Principle nine: Accommodating ‣ Be Approachable YOU ‣ Provide Space EFFECT ‣ Room to Manoeuvre ‣ Adaptable ‣ Convenient and Comfortable ‣ Robust

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

Principle ten: Consistent ‣ Have Standards YOU ‣ Be Conventional ‣ Familiar Environment EFFECT ‣ Memorable Functionality

Principle ten: Consistent HOW? ‣ Use Web Standards ‣ Apply Conventions where they exist ‣ Conform to Industry Guidelines and Best Practices ‣ Adhere to Brand Guidelines

Principle ten: Consistent

Inclusive Design is where Innovation and Imagination ﬂourish. Meeting the needs of a wide range ofusers does not limit creativity. It awakensthe senses and enlivens the human spirit.

"All ﬁne Internet values are human values, else not valuable."Sandi Wassmer & Ian Pouncey

Any Questions? Transcript of this presentation available for Download2011 Sandi Wassmer Photo via Flickr. Creator: Jonathan Youngblood

http://lanyrd.com	100
http://designdeinterface101.posterous.com	65
http://paper.li	22
https://twitter.com	1
http://www.slideshare.net	1
url_unknown	1

SXSW 2011 Inclusive Design

by Sandi Wassmer on Mar 14, 2011

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 190

Statistics

SXSW 2011 Inclusive Design Presentation Transcript