Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Usability and
Accessibility Have a
Conversation:
How Accessibility and
UI/UX Teams Can
Collaborate for More
Inclusive Prod...
Accessibility
Jiatyan Chen <jiatyan@stanford.edu>
Stanford University
Usability
&
Have a
Conversation
Who?
Program manager
IT, Project manager
UX, ID
Producer, Developer
The Design of Everyday Things
by Donald Norman
Why?
Usability and Accessibility have a lot of overlaps in topics but structured differently.
Designs are handled as eleme...
How?
The Elements of User
Experience by Jesse James
Garrett.
1. Strategy
Purpose & goals
Needs, both outside & inside
Stakeholder meetings
Market research
Personae
Success metrics
1. Strategy - persona
Description: 35, divorced, 2 young
children, mid-level manager, wants
promotion and pay raise
Stress...
1. Strategy - success metrics
Unique users
Time on site
Traffic source
Time on task
Sales
Brand impression
Student grades
...
1. Strategy
Purpose & goals
Needs, both outside & inside - business case for
accessibility?
Stakeholder meetings - invisib...
2. Scope
Features and content.
Functional specification aka "feature set"
Task analysis, user interviews
Put personae into...
2. Scope - scenario
(Scenarios): Which courses to
enroll? How can I graduate?
Deadlines?
2min on page
2. Scope - content inventory
2. Scope - content analysis
combine
2. Scope
Features and content.
Functional specification aka "feature set" - critical (vs
optionals) to make accessible
Tas...
3. Structure
How product works
Interaction sequences & responses (IxD) using standards,
HCI guidelines, cognitive psycholo...
3. Structure - interaction sequence
Tech Support Cheat Sheet by xkcd
3. Structure - interaction sequence
3. Structure - information
relationship
A visual history of human knowledge by Manuel Lima
3. Structure - information card sort
3. Structure - card sort
3. Structure - information site
analytics
3. Structure - IA
3. Structure
How product works.
Interaction sequences & responses (IxD) using standards,
HCI guidelines, cognitive psychol...
3. Structure - taxonomy
3. Structure - taxonomy
3. Structure - taxonomy
4. Skeleton
Presentation for understanding and interaction.
Wireframe, navigation/wayfinding
UI controls, states, behaviou...
4. Skeleton - wireframe
4. Skeleton - wireframe
4. Skeleton - paper test
What is this page about?
4. Skeleton - paper test
Not related.
Oops!
4. Skeleton - Usability Heuristics
1. Visibility of system status
2. Match between system and the real world
3. User contr...
4. Skeleton
Presentation for understanding and interaction.
Wireframe, navigation/wayfinding - annotated wireframes,
read ...
4. Skeleton - annotated wireframe
4. Skeleton - annotated wireframe
Early prevention of accessibility issues with mockup & wireframe reviews by Aidan
Tierney
4. Skeleton - verbal walkthrough
Accessibility and Design — Where Productivity and Philosophy Meet
by Ryan Strunk, Joe Lon...
4. Skeleton - Usability Heuristics
1. Visibility of system status
2. Match between system and the real world
3. User contr...
5. Surface
Sensory experience of finished product
Design comps & style guide
Colour palettes
Imagery selection
Branding & ...
5. Surface - comps
5. Surface
Sensory experience of finished product
Design comps & style guide - all situations & states,
colour+, typograph...
5. Surface - style guide
5. Surface - palette
https://brand.berkeley.edu/colors/
5. Surface - icons
Endless Legend
5. Surface - icons
Endless Legend
5. Surface - icons
Endless Legend
5. Surface - icons
Endless Legend
6. Sustain
Continuous Delivery -> "Agile" feedback
Sprints on limited features
User Acceptance Test
User feedback
Sustain - UAT
6. Sustain
Continuous Delivery -> "Agile" feedback
Sprints on limited features - automated regression test,
timeboxed manu...
Sustain - Yahoo! A11y Lab Top 10
common issues
"Don't let us find these!"
1. Missing or incorrect names
2. Navigation does...
More?
The Design of Everyday Things by Donald A. Norman
The Elements of User Experience: User-Centered Design for the Web ...
Usability and Accessibility Have a Conversation: How Accessibility and UI/UX Teams Can Collaborate for More Inclusive Prod...
Usability and Accessibility Have a Conversation: How Accessibility and UI/UX Teams Can Collaborate for More Inclusive Prod...
Usability and Accessibility Have a Conversation: How Accessibility and UI/UX Teams Can Collaborate for More Inclusive Prod...
Upcoming SlideShare
Loading in …5
×

Usability and Accessibility Have a Conversation: How Accessibility and UI/UX Teams Can Collaborate for More Inclusive Products

1,266 views

Published on

Starting with Jesse James Garrett's model of User Experience, this webinar will examine where accessibility and usability dovetail in areas such as user research, information architecture, persona, wireframes, visual design, and user testing. By understanding more about each other, we may better navigate each other's challenges and solve each other's problems more effectively.

Published in: Technology
  • My only statement is "WOW"...I thought your other systems were special but this is going to turn out to be the "Holy Grail" of all MLB systems, no doubt! ♥♥♥ http://t.cn/A6zP2GDT
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Usability and Accessibility Have a Conversation: How Accessibility and UI/UX Teams Can Collaborate for More Inclusive Products

  1. 1. Usability and Accessibility Have a Conversation: How Accessibility and UI/UX Teams Can Collaborate for More Inclusive Products Jiatyan Chen Online Accessibility Program Manager Stanford University www.3playmedia.co m Twitter: @3playmedia Live tweet: #a11y • Type questions in the window during the presentation • This webinar is being recorded & will be available for replay • To view live captions, please follow the link in the chat window Patrick Loftus (Moderator) Marketing Assistant 3Play Media
  2. 2. Accessibility Jiatyan Chen <jiatyan@stanford.edu> Stanford University Usability & Have a Conversation
  3. 3. Who? Program manager IT, Project manager UX, ID Producer, Developer The Design of Everyday Things by Donald Norman
  4. 4. Why? Usability and Accessibility have a lot of overlaps in topics but structured differently. Designs are handled as elements or whole, while WCAG is organised by principles. UX A11y
  5. 5. How? The Elements of User Experience by Jesse James Garrett.
  6. 6. 1. Strategy Purpose & goals Needs, both outside & inside Stakeholder meetings Market research Personae Success metrics
  7. 7. 1. Strategy - persona Description: 35, divorced, 2 young children, mid-level manager, wants promotion and pay raise Stresses: time to take classes & do homework, travelling, no spouse to tend to children, babysitter choice Needs: calendar, when to do tasks, choices of courses, what others chose
  8. 8. 1. Strategy - success metrics Unique users Time on site Traffic source Time on task Sales Brand impression Student grades Messaging perception Reduce help desk calls ...
  9. 9. 1. Strategy Purpose & goals Needs, both outside & inside - business case for accessibility? Stakeholder meetings - invisible stakeholders? Market research Personae - credible 'disability' characteristics. Need ideas? See A Web for Everyone Persona, An Alphabet of Accessibility Issues Success metrics - unique users, % reached, reduce errors, equivalent ease of use, standards violation, improve comprehension
  10. 10. 2. Scope Features and content. Functional specification aka "feature set" Task analysis, user interviews Put personae into scenarios Content inventory, content analysis Project charter Trade-off requirements vs feasibility of making them
  11. 11. 2. Scope - scenario (Scenarios): Which courses to enroll? How can I graduate? Deadlines? 2min on page
  12. 12. 2. Scope - content inventory
  13. 13. 2. Scope - content analysis combine
  14. 14. 2. Scope Features and content. Functional specification aka "feature set" - critical (vs optionals) to make accessible Task analysis, user interviews - happy path to make accessible Put personae into scenarios - situational disability, platform constraints in tasks Content inventory, content analysis - core content to make accessible Project charter - assumptions about time limits & capabilities, in scope vs out of scope Trade-off requirements vs feasibility of making them - refer
  15. 15. 3. Structure How product works Interaction sequences & responses (IxD) using standards, HCI guidelines, cognitive psychology Content structure & information relationship (IA) using card sort & data analytics Writing style guide
  16. 16. 3. Structure - interaction sequence Tech Support Cheat Sheet by xkcd
  17. 17. 3. Structure - interaction sequence
  18. 18. 3. Structure - information relationship A visual history of human knowledge by Manuel Lima
  19. 19. 3. Structure - information card sort
  20. 20. 3. Structure - card sort
  21. 21. 3. Structure - information site analytics
  22. 22. 3. Structure - IA
  23. 23. 3. Structure How product works. Interaction sequences & responses (IxD) using standards, HCI guidelines, cognitive psychology - use accessible pattern libraries eg. WAI-ARIA Authoring Practices, eBay MIND patterns, deep dive into non-standard elements Content structure & information relationship (IA) using card sort & data analytics - be intentional about hierarchy, sequencing, semantic structure, help/contact Writing style guide - taxonomy, keywords, title, link text
  24. 24. 3. Structure - taxonomy
  25. 25. 3. Structure - taxonomy
  26. 26. 3. Structure - taxonomy
  27. 27. 4. Skeleton Presentation for understanding and interaction. Wireframe, navigation/wayfinding UI controls, states, behaviours, error handling Prototype, test & refine with user testing Heuristic evaluation/expert review Code framework, platform & library
  28. 28. 4. Skeleton - wireframe
  29. 29. 4. Skeleton - wireframe
  30. 30. 4. Skeleton - paper test What is this page about?
  31. 31. 4. Skeleton - paper test Not related. Oops!
  32. 32. 4. Skeleton - Usability Heuristics 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10.Help and documentation
  33. 33. 4. Skeleton Presentation for understanding and interaction. Wireframe, navigation/wayfinding - annotated wireframes, read order, beware of cognitive load, UI controls, states, behaviours, error handling - keyboard, time limits, platforms differences Prototype, test & refine with user testing - AT testing, verbal walkthrough Heuristic evaluation/expert review - both usability and accessibility experts Code framework, platform & library - automated accessibility tools, use libraries which have a11y support, code to standards
  34. 34. 4. Skeleton - annotated wireframe
  35. 35. 4. Skeleton - annotated wireframe Early prevention of accessibility issues with mockup & wireframe reviews by Aidan Tierney
  36. 36. 4. Skeleton - verbal walkthrough Accessibility and Design — Where Productivity and Philosophy Meet by Ryan Strunk, Joe Lonsky
  37. 37. 4. Skeleton - Usability Heuristics 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10.Help and documentation
  38. 38. 5. Surface Sensory experience of finished product Design comps & style guide Colour palettes Imagery selection Branding & visual elements
  39. 39. 5. Surface - comps
  40. 40. 5. Surface Sensory experience of finished product Design comps & style guide - all situations & states, colour+, typography & layout for dyslexia & low cognitive load Colour palettes - colour contrast Imagery selection - suggested alt text Branding & visual elements - icons with labels
  41. 41. 5. Surface - style guide
  42. 42. 5. Surface - palette https://brand.berkeley.edu/colors/
  43. 43. 5. Surface - icons Endless Legend
  44. 44. 5. Surface - icons Endless Legend
  45. 45. 5. Surface - icons Endless Legend
  46. 46. 5. Surface - icons Endless Legend
  47. 47. 6. Sustain Continuous Delivery -> "Agile" feedback Sprints on limited features User Acceptance Test User feedback
  48. 48. Sustain - UAT
  49. 49. 6. Sustain Continuous Delivery -> "Agile" feedback Sprints on limited features - automated regression test, timeboxed manual test, test something every sprint User Acceptance Test - SR & keyboard test with UAT script, UAT for accessibility User feedback using questionnaire - periodic WCAG evaluation, prioritise accessibility requests
  50. 50. Sustain - Yahoo! A11y Lab Top 10 common issues "Don't let us find these!" 1. Missing or incorrect names 2. Navigation doesn't follow visual design 3. Skipping over visible items or speaking invisible items 4. Not grouping visually related elements 5. Element type (link, button, etc.) is missing or incorrect 6. The state of buttons is not described 7. Headings are missing or used inconsistently 8. Missing "hints" that provide context 9. Missing closed captions or caption controls 10.Low contrast
  51. 51. More? The Design of Everyday Things by Donald A. Norman The Elements of User Experience: User-Centered Design for the Web by Jesse James Garrett A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug 100 Things Every Designer Needs to Know about People by Susan M. Weinschenk https://www.usability.gov/ Many thanks to ATHEN & WebAIM mailing list, and A11y Slackers. Jiatyan Chen <jiatyan@stanford.edu> Stanford University https://goo.gl/zgVCN M

×