This presentation gives an introduction to inclusive design, including 10 principles of inclusive design, where it came from, and how to implement it in a project. Code examples include media queries and viewport.
Hi! Im Chris Mills! firstname.lastname@example.org @chrisdavidmillshttp://www.slideshare.net/chrisdavidmills http://dev.opera.com
I work at Opera‣ Open standards evangelist and education agitator ‣ dev.opera.com ‣ Talks too much a lot! ‣ Lobbies lots of universities‣ Obsessed by accessibility ... to a point‣ HTML5/CSS3 wrangler‣ Heavy metal drummer
What is inclusive design?‣ I call it "real accessibility" ‣ Not just about disabled people ‣ Also considers mobile users ‣ Low bandwidth users ‣ And everyone else!
What is inclusive design?‣ Branding‣ UX‣ Usability‣ And other exciting buzzwords!
Design with diversity inmind http://www.ﬂickr.com/photos/usarmyafrica/4919901589/
<rant>It is like going to the doctor for a check-up, but thenhaving to hire an independent consultant to tell youwhether the doctor knew what they were talkingabout (or not), or (pick your favourite analogy)
<rant>It is like going to the doctor for a check-up, but thenhaving to hire an independent consultant to tell youwhether the doctor knew what they were talkingabout (or not), or (pick your favourite analogy) $$$
<rant>‣ Yes, not everyone can afford usability labs, accessibility testing sessions, focus groups, mobile testing suites ... yadda yadda
Code <rant>!Yes, it is challenging to make a page accessiblewhen youve got video, Ajax, user-generatedcontent, CMSs, and the boss has decided it needsto conform to WCAG 2.0 AAA...
Code <rant> #2!...but it is bloody impossible when your pagetemplates look like this:<font size="6">My top level heading</font><br><br><font size="2">My first paragraph</font><br><br><font size="2">My second paragraph</font>
Oh, and...Accessibility and usability do not have to be ugly!!!!
Da rootz of Inclusive design http://www.ﬂickr.com/photos/darpi/212323100/
Frank Lloyd Wright said..."All fine architectural values are human values, elsenot valuable." http://www.ﬂickr.com/photos/usonian/4231430254/
The wisdom of Dieter RamsGood design is:‣ Innovative ‣ Honest‣ Useful ‣ Long lasting‣ Aesthetic ‣ Thorough‣ Understandable ‣ Environmentally-friendly‣ Unobtrusive ‣ ConsistentAbove all, it is as little design as possible http://www.vitsoe.com/en/gb/about/dieterrams/
Taking it to the Web http://www.ﬂickr.com/photos/luc_viatour/4247957432/
A plan for implementation...Might look like this‣ Plan‣ Execute‣ Follow guidelines‣ Maintain
Plan‣ Keeping it on brand‣ User experience‣ Research and testing steps‣ Content strategy
Execute‣ Market and user research‣ Visual design‣ UI/Interaction design‣ IA‣ Choice of tools‣ Development
Follow guidelines‣ Design principles and best practices‣ Accessibility guidelines (add common sense)‣ Usability best practices‣ Web standards (and browser hacks!)
Maintain‣ Review content (esp. user generated)‣ Allow easy feedback, and listen to your customers‣ Deal with problems quickly, and be honest about mistakes‣ Always strive to do things better, make small iterative improvements
Lets go back to thoseprinciples‣ Equitable ‣ Preventative‣ Flexible ‣ Tolerant‣ Simple and intuitive ‣ Effortless‣ Perceptible ‣ Accommodating‣ Informative ‣ Consistent
1. Equitable‣ Be welcoming, and dont discriminate‣ Consider the needs of diverse users from the get go‣ User experience cant and shouldnt be IDENTICAL for all users‣ Provide different user experiences with equally valuable outcomes
1. Equitable - how?‣ Text alternatives for critical AV content‣ Adaptive layouts using technologies like media queries and viewport‣ Keyboard accessibility and good ol semantic HTML‣ General thought for fallbacks and graceful degredation
2. Flexible‣ Provide different options for different users, contexts and devices, locales‣ This choice will be appreciated, and more users will find your site accessible and usable
2. Flexible - how?‣ Again, adaptive layouts, keyboard accessibility, progressive enhancement‣ That layered approach - structure, style, behaviour‣ Think carefully about how you use things like CAPCHAs and Ajax‣ Think about an international audience
3. Simple and intuitive‣ Be as obvious as you can‣ Dont assume its usable just because you can use it‣ Keep removing features that arent absolutely necessary‣ Add signposts and user hints‣ "Dont make me think"
3. Simple and intuitive -how?‣ Create prototypes as early as possible‣ Test!‣ Justify new features - dont just add them without thought
4. Perceptible‣ Be clear with content and features‣ Make sure the user understands why they are there, what they can do, and where to go next
4. Perceptible - how?‣ Think about how different devices and users process different types of content‣ Make your copy meaningful and straightforward‣ Again provide alternatives and choices, and make your site adaptive‣ Careful about hiding things from certain users
5. Informative‣ Provide feedback and help options‣ Again, choices are good‣ Be predictable and consistent‣ Keep the user dialogue going, and show you care‣ Manage user expectations/frustrations
5. Informative - how?‣ Keep navigation and other site features consistent and predictable‣ Provide help pages if needed‣ And multiple contact options‣ And make sure your users get responses!‣ Be friendly and approachable‣ Dont make unrealistic promises
Bad promises‣ Making statements like ‣ "All enquires answered within 24 hours" ‣ "Site is WCAG AAA conformant" ‣ "Site is mobile web compliant"‣ Is really stupid!‣ Instead say that youve made reasonable steps to make your site accessible to a wide variety of users, and then make it easy to contact you if a problem is still found
6. Preventative...‣ ...as in, preventative medicine‣ Closely related to "Informative"‣ Guide users carefully through processes (forms is the big one)‣ Help to minimise errors and engender trust
6. Preventative - how?‣ Clear form <labels>‣ Accept a variety of data formats‣ Guide the user interactive pathway as much as you can‣ Provide early feedback‣ Test! test test test‣ We should do the work, not the users
7. Tolerant‣ Follows on very closely from preventative‣ Indicate errors precisely‣ Be supportive‣ Build user confidence
7. Tolerant - how?‣ Indicate what errors have been made, and how to fix them‣ Do this in a variety of ways to suit different users‣ Provide success messaging, as well as error messaging
8. Effortless‣ Again, make your apps as simple and intuitive as possible‣ "Dont make me think"‣ Dont expect too much at once‣ Dont pressure your users unduly
8. Effortless - how?‣ Consistent navigation and other common elements‣ Remove as many features as possible‣ Make copy concise and easy to read‣ Dont do stupid things like having time limits to fill in forms
9. Accommodating‣ Common sense after youve gone through the rest of this preso!‣ Effortless, simple and intuitive, flexible all come into play here
9. Accommodating - how?‣ Make your interfaces invisible and your interactions effortless‣ Make your interfaces adaptive with media queries and viewport
10. Consistent‣ Also common sense after youve gone through the rest of this preso!‣ Consistent layout, navigation, branding, style‣ Make the whole experience comfortable for existing users, and welcoming for new ones
10. Consistent - how?‣ Apply existing brand guidelines‣ Apply existing conventions‣ Use existing guidelines and best practices‣ Use web standards!
Media queries and viewport<meta name="viewport" content="width=400"><link rel="stylesheet" type="text/css" media="screen and (max‐width: 980px)" href="narrowdesktop.css"><link rel="stylesheet" type="text/css" media="screen and (max‐device‐width: 550px), screen and (max‐width: 550px)" href="mobileview.css">
Fallbacks<video ... > <object type="application/x‐shockwave‐flash"> </object></video><p>Jim: Hello Helen!</p><p>Helen: Hello Jim, how are you?</p><p> ... </p>
Bonus points‣ Also good for mobile device users and low bandwidth users, who may not want to download a hulking great video‣ Also good for users in a noisy environment
Its not rocket surgery!‣ A lot of this is obvious when you think about it‣ Its nothing new to many of us‣ But a lot of people still dont get this right‣ And this plan could be useful to many of you
Licensing and creditsContent largely adapted from/inspired by thefabulous work of Sandi Wassmer:•SXSW 2011 Inclusive Design - http://www.slideshare.net/SandiWassmer/sxsw-2011-inclusive-design-7258927•Ten principles of inclusive design - http://www.culture.gov.uk/what_we_do/telecommunications_and_online/8161.aspxContent published under creative commons:http://creativecommons.org/licenses/by-nc-sa/2.5/