design for UX & accessibility

talk delivered for Applied Art for the web,
part of the MA Web Design & Content Planning,
The University of Greenwich

website: http://eyelearn.org

Transcript

1. DESIGN for UX & accessibility
2. USER EXPERIENCE ACCESSIBILITY ? USE R EXPERIE NCE A CCESSIBILI TY
3. ACCESSIBILITY ?
4. ? Does accessible design deliver good user experience
5. USER EXPERIENCE ?
6. ? Does good user experience include accessibility
7. USE R EXPERIE NCE A CCESSIBILI TY
8. user experience // accessibility design consistency language hierarchy semantics context use of icons content alternatives transcripts colour responsive design interaction presentation video audio images captions typesetting layout forms contrast IA structure
9. USE R EXPERIE NCE A CCESSIBILI TY
10. TO INCLUDE ACCESSIBILITY MEANS • to consider all your users and situations. • to deliver content in different formats. • to consider assistive technologies. • to ensure access to all content regardless of how it is viewed/read. • to follow best practices and consider common patterns. DESIGN FOR INCLUSION. This will support a good user experience.
11. DESIGN FOR INCLUSION. physical sensory cognitive physical sensory physical sensory cognitive cognitive physical sensory cognitive ACCESSIBILITY CONSIDER ALL ABILITIES.
12. DESIGN FOR INCLUSION. physical sensory cognitive physical Modern Times Charlie Chaplin ACCESSIBILITY CONSIDER ALL ABILITIES.
13. DESIGN FOR INCLUSION. Film summary: The film opens with an overhead shot of a flock of sheep jostling in their sheep pen, and rushing through a chute. Instantly, the sheep dissolve into a similar overhead shot of industrial workers pushing out of a subway station at rush hour on their way to work... listen to film summary Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. transcript sensory sensory cognitive Modern Times Charlie Chaplin ACCESSIBILITY CONSIDER ALL ABILITIES.
14. DESIGN FOR INCLUSION. Modern Times Charlie Chaplin Film summary: The film opens with an overhead shot of a flock of sheep jostling in their sheep pen, and rushing through a chute. Instantly, the sheep dissolve into a similar overhead shot of industrial workers pushing out of a subway station at rush hour on their way to work... listen to film summary Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. transcript Home Flower Car Sunshine Clouds ACCESSIBILITY CONSIDER ALL ABILITIES. cognitive cognitive
15. ACCESSIBILITY CONSIDER ALL ABILITIES. Food Lovers design task:
 Dessert section :: recipe finder
16. ACCESSIBILITY CONSIDER ALL ABILITIES.
17. DESIGN FOR INCLUSION. ACCESSIBILITY CONSIDER ALL ABILITIES.
18. ACCESSIBILITY CONSIDER ALL ABILITIES. DESIGN FOR INCLUSION. Carefully plan both content structure and menu setup. What are users’ expectations?
 What are are their goals? How will your choice of menu system affect your users? How can the content be optimised? How can it be accessed most easily? What menu setup will be most effective and user-friendly?
19. ACCESSIBILITY CONSIDER DEVICES AND SITUATIONS. DESIGN FOR INCLUSION. Don’t assume anything. … using an old desktop computer. … using a mobile device. … on a very slow connection. … using assistive technologies. … viewing your site in a niche browser. Your users might be…
20. TO DESIGN A GOOD USER EXPERIENCE MEANS • to know your users and their preferences. • to create a positive experience during all interactions on the site. • to ensure easy access to all content and functions. • to set up forms which are a delight to use. • to give suitable feedback on all interaction. DESIGN FOR DELIGHT. This will support accessibility.
21. USER EXPERIENCE DESIGN FOR DELIGHT. CONSIDER ALL PEOPLE & SITUATIONS. Don’t assume anything. … calm and rational Your users might be… … viewing your site in a situation you cannot even imagine. … in a rush … or relaxed and with time to spare. … tech savvy … or fairly inexperienced. … or in distress.
22. Designing for Crisis 
 by Eric Meyer
 An Event Apart video → vimeo.com/148927676 talk: Design for real life 
 by Eric Meyer & Sara Wachter-Boettcher
 A Book Apart book: photo © Adrian Q 2008
23. ★ offer easily digestible/consumable content to all ★ design with people, for people ★ have conversations, be social, learn. ★ aim to create familiarity and trust ★ create consistency between all elements ★ be conscious of cultural/social context ★ focus on creating a positive experience 
 across the entire site and its interactions USER EXPERIENCE CONSIDER ALL PEOPLE & SITUATIONS. DESIGN FOR DELIGHT.
24. DESIGN FOR DELIGHT. DESIGN FOR INCLUSION.
25. ?
26. The White Hat calls for information known or needed. "The facts, just the facts." The Yellow Hat symbolizes brightness and optimism. Under this hat you explore the positives and probe for value and benefit. The Black Hat is judgment - the devil's advocate or why something may not work. Spot the difficulties and dangers; where things might go wrong. Probably the most powerful and useful of the Hats but a problem if overused. The Red Hat signifies feelings, hunches and intuition. When using this hat you can express emotions and feelings and share fears, likes, dislikes, loves, and hates. The Green Hat focuses on creativity; the possibilities, alternatives, and new ideas. It's an opportunity to express new concepts and new perceptions. The Blue Hat is used to manage the thinking process. It's the control mechanism that ensures the Six Thinking Hats® guidelines are observed. Dr. Edward de Bono, 1985 [ISBN 0-316-17831-4] [The De Bono Group LLC | debonogroup.com] SIX THINKING HATS
27. SIX THINKING HAT PERSONAS the rational mind ‣ fact-driven ‣ text-orientated ‣ values clarity over visual flair ‣ often uses tab to navigate sites
28. SIX THINKING HAT PERSONAS ‣ patient and calm browsing habits ‣ internet use mainly leisurely, 
 allowing time to consume content ‣ interest to explore site likely ‣ prefers navigation with mouse, 
 or use of tablet the optimist
29. SIX THINKING HAT PERSONAS the sceptic ‣ confident tech user, used to fast pace digital work ‣ impatient browsing habits, using many tabs and keyboard shortcuts ‣ quick skim reader, relying on 
 good visual hierarchy ‣ risk of abandoning site high
30. SIX THINKING HAT PERSONAS the intuitive mind ‣ confident tech user ‣ prefers familiar patterns to unusual approaches ‣ responds strongly to visual design ‣ prefers mixed content combining media and text
31. SIX THINKING HAT PERSONAS the creative mind ‣ easily swayed by visual design ‣ engaged by unique and 
 strong ideas ‣ tends to wander off / 
 may be easily distracted ‣ prefers to use open source apps/browsers
32. SIX THINKING HAT PERSONAS the analyst ‣ objective and analytical ‣ usually rushing / skim reading ‣ likes consistency & logic ‣ main net use: mobile / tablet
33. GETTING PEOPLE INVOLVED & COLLECTING FEEDBACK Example: Variation Validation [ helio.zurb.com ] 1 2 3
34. GETTING PEOPLE INVOLVED & COLLECTING FEEDBACK Silverback [silverbackapp.com]
35. GETTING PEOPLE INVOLVED & COLLECTING FEEDBACK [ hotjar.com ] screenshot of recording
36. DESIGN FOR INCLUSION & DELIGHT. DESIGN WITH PEOPLE FOR PEOPLE.
37. EFFECTIVE INCLUSIVE UX DESIGN ★ focus on your users.
 study & learn from their behaviour.
 listen & observe | review | iterate | repeat ★ consistency is key.
 establish your approach and stick to it, across all aspects:
 content | copy | design | interaction ★ provide alternatives to all media.
 text alternatives | captions | transcripts. ★ offer a positive experience.
 quality of content | tone of language | delight to use/access.

38. WORK WITH EMOTION. DESIGN FOR DELIGHT. CREATE AN ATMOSPHERE. GET TO KNOW YOUR USERS. OBSERVE - REVIEW - ITERATE. ACCESSBILITY ACCESSBILITY FOUNDATION OF USER EXPERIENCE
39. RECOMMENDED READING ★ 52weeksofux.com ★ uie.com Joshua Porter & Josh Brewer Jared Spool ★ inclusivenewmedia.org Inclusive New Media Design ★ a11yproject.com
40. Prisca Schmarsow prisca@eyedeastudio.london eyedeastudio.london @prisca_eyedea