Designing for PeopleSarah Horton and David SloanWebVisions Barcelona 2015

The person who is doing is the person who is learning

Quote: Professor Chris Jernstedt, Dartmouth CollegePhoto: Wellspring Community School https://flic.kr/p/7FMn8b

Introductions

1. Name2. Area of study3. Current position4. Cena de ayer

By concentrating solely on the bulge at the center of the bell curve we are more likely to confirm what we already know than learn something new and surprising.

Tim Brown, Change By Design

Bell Curve

Example of accessibility audit spreadsheet

Example of success criteria failuresError message not announced by screen readers

Form labels not programmatically associated with inputs

But...…What about

people?

But… What about people?

Principles of Universal Design• Equitable Use• Flexibility in Use• Simple and Intuitive Use• Perceptible Information• Tolerance for Error• Low Physical Effort• Size and Space for Approach and Use

North Carolina State University, uxfor.us/universal-design

Accessibility barriers

Removed using universal design principles

Design Studio

Design Studio Overview• Understand background and context• Define problem space• Sketch, present, critique (rinse and repeat)• Choose 2–3 ideas to pursue

Divergent and Convergent Thinking

From Change by Design, by Tim Brown

Brainstorming RulesDefer judgment. There are no bad ideas at this point. There will be plenty of time to narrow them down later.Encourage wild ideas. Even if an idea doesn’t seem realistic, it may spark a great idea for someone else.Build on the ideas of others. Think “and” rather than “but.”Stay focused on topic. To get more out of your session, keep your brainstorm question in sight.

One conversation at a time. All ideas need to be heard, so that they may be built upon.Be visual. Draw your ideas, as opposed to just writing them down. Stick figures and simple sketches can say more than many words.Go for quantity. Set an outrageous goal—then surpass it. The best way to find one good idea is to come up with lots of ideas.

From Design Thinking for Educators, by Riverdale Country School and IDEO

How might we get city residents to lose weight?

Brainstorm, record, present, critique, refine, vote

Studio: Background and context

Trevor Trevor

Ability: Autism Spectrum Disorder. Uses larger text and a program that hides everything but the text, so he doesn’t get distracted

Aptitude: Uses the computer well for games, but doesn’t learn new sites easily

Attitude: Prefers familiar sites in an established routine

Emily Emily

Ability: Cerebral palsy, difficult to use hands and has some difficulty speaking clearly; uses a motorized wheel chair

Aptitude: Uses the computer well, with the right input device; good at finding efficient search terms

Attitude: Wants to do everything for herself; can be impatient

Jacob Jacob

Ability: Blind since birth with some light perception

Aptitude: Skilled technology user

Attitude: Digital native, early adopter, persists until he gets it

Lea Lea

Ability: Fatigue from fibromyalgia, trackball, and special keyboard

Aptitude: Average user

Attitude: Wishes people would understand how hard it can be for her to make it through the day

Steven Steven

Ability: Native language is ASL; can speak and read lips; uses SMS/IM, Skype, and video chat

Aptitude: Good with graphic tools, and prefers visuals to text; poor spelling makes searching more difficult

Attitude: Can be annoyed about accessibility, like lack of captions

Vishnu Vishnu

Ability: Speaks three languages: Gujarati, Hindi, English, and a little spoken Mandarin. Uses contrast adjustment to see the screen clearly

Aptitude: Expert user of technical tools; frustrated searching across languages

Attitude: Sees himself as a world citizen, and wants to be able to use specialist information from a wide range of locations

Maria Maria

Ability: Prefers Spanish language sites, when she can find them; needs information and instructions written clearly

Aptitude: Adventurous, but not very proficient; husband and daughter set up bookmarks for her

Attitude: Thinks it’s wonderful to be able to have her favorite websites with her at all times

Carol Carol

Ability: First signs of macular degeneration, mild arthritis; hearing aid; no special AT on computer

Aptitude: Used computers when she worked as a bookkeeper, but now her grandkids keep her old home computer updated

Attitude: Willing, but not adventurous

Personas who benefit from Accessible UX

Studio: Define problem space

Demo of screen reader experience

What Went Wrong?

• Modal doesn’t receive focus• Links aren’t descriptive• Labels don’t make sense• Visual and audible don’t match• No audible context for mosaic

Walkthrough of audit results

Studio: Prototyping

How might we connect current and prospective Peace Corps volunteers?

1. Brainstorm2. Choose an idea3. Refine idea4. Sketch idea

Identify 2 strong things, 2 areas for improvement

1. Present2. Critique3. Refine and repeat

Accessible UX design patterns

Forms: Surveys and Tests

https://www.flickr.com/photos/patrikaxelsson/2068480462/

User goals• A user should be able to read a question and give

the answer they want to give– Form components of different types– Free text or selecting from options

• A user should be able to access feedback, if provided

Possible AUX issues

• Presentation: Is question and answer text readable?

• Structure, Language: Are controls labeled suitably?

• Wayfinding: Do people know where they are in the process?

• Interaction: Are controls operable using the keyboard?

Possible AUX issues

• Purpose: Is feedback presented in an accessible manner?

• Diversity: Are people who need more time suitably supported?

Example survey from SurveyMonkey

Discussion Forums

https://www.flickr.com/photos/skohlmann/8846583526/

User goals• A user should be able to browse forums and

threads, read posts and responses• A user should be able to contribute:– write a new post– Reply to, +1, like, report an existing post

Possible AUX issues

• Presentation: Is label and post text readable?

• Structure, Language: Are controls labeled suitably?

• Interaction: Are reply, +1, voting, reporting controls operable using the keyboard?

• Wayfinding: Are forums and threads navigable?

Possible AUX issues

• Purpose: Is feedback on actions presented in an accessible manner?

• Diversity: Do forums support accessible display customization?

Example discussion from Google+

Media Players

https://www.flickr.com/photos/hawkins-thiel/2693834854/

User goals• A user should be able to control a video or audio

clip– Pause, fast-forward, rewind– Full-screen, video quality– Captions, audio descriptions

• A user should be able to access related media

Possible AUX issues

• Presentation: Is the media and player interface presented in an accessible way?

• Structure, Language: Are controls labeled suitably?

• Wayfinding: Can people navigate between player, controls and related content?

• Interaction: Are controls operable using the keyboard?

Possible AUX issues

• Purpose: Is feedback presented in an accessible manner?

• Diversity: Is the presence of accessibility features (captions, audio description) suitably indicated?

Example media player from BBC iPlayer

Resources for accessible user experiences• ARIA Authoring Practices: Design Patterns• Accessible jQuery-ui Components Demonstration• Heydonworks ARIA Examples

Present prototype

1. Title2. One-sentence summary3. Prototype

Accessible Design Maturity Continuum

An Accessible Design Maturity Continuumuxfor.us/mature-it

Manifesto for Accessible User Experience

When we examine accessibility through the lens of user experience, we see that accessibility is:• A core value, not an item on a checklist• A shared concern, not a delegated task• A creative challenge, not a challenge to creativity• An intrinsic quality, not a bolted-on fix• About people, not technology

accessibleux.org

Sample persona Trevor

Ability: Autism Spectrum Disorder. Uses larger text and a program that hides everything but the text, so he doesn’t get distracted

Aptitude: Uses the computer well for games, but doesn’t learn new sites easily

Attitude: Prefers familiar sites in an established routine

When I can learn the pattern, I can find my way.

Sample scenarioTrevor is glad his family lives in Boston where he can get around on his own. He uses the bus and subway extensively. He likes the mobile apps because he knows how to use them, and they don’t have a lot of distracting clutter. Catch the T and Catch the Bus are the best. He hardly ever uses the MBTA website—he doesn’t like it. Once he tried to use it to plan a trip on the commuter rail. He barely got past the first screen because of all the animations. When he did find the right section there were so many options and they were all so detailed. He tried the Trip Planner but ended up getting sidetracked by the map. In the end, he didn’t go.

Activity: Inventory• For your organization, or an organization you

work with, how is digital accessibility currently handled?

• Inventory:– Stakeholders involved– Processes– Resources (skills, tools)

Activity: Actions • For each of our stakeholders:– What do they need to help them?

• For our processes:– What is missing?– How to make what’s there better?

• For our resources:– What more is needed?

Next steps toward Accessibility in Practice1. Write 3 activities on

post-its2. Share post-its3. Discuss which are

difficult

Thank you!@gradualclearing@sloandr