1

SXSW Interactive Workshop, 2013Yvonne So & Livia Veneziano

Interfaces, Accessibility & Superheroes

#superable

2

Hello - We’re Designers

3

Designing for Accessibility

4

First, a Challenge

5

What is Accessible Design?

6

Universal Design n.“...the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.”

http://www.ncsu.edu/www/ncsu/design/sod5/cud/about_ud/about_ud.htm

Definition: Universal Design

7

Disability n.“...is a complex phenomenon, reflecting an interaction between feature of a person’s body and features of the society in which he or she lives.”

“Disabilities”. World Health Organization. Retrieved 11 August, 2012.

Definition: Disability

8

Accessibility n.“...the degree to which a product, service, or environment is available to as many people as possible.”

“Accessibility – Brain Injury Resource | BrainLine.org.” Accessibility – Brain Injury Resource. N.p., n.d. Web. 16, Jan, 2013

Definition: Accessibility

9

Who Are We Designing For?

Challenging Convention

10

11

Challenging Convention

12

World Heath Organization Disability Report

One out of seven of the world’s population has some form of disability.- World Health Organization

13

2010 Census: Disability by Age

Overall instances of disability in the U.S. by age.

People over 15 years old21.3%

People over 65 years old49.8%

14

2010 Census: Population Growth of 65+

Projected growth of population 65 years and older.

15

2010 Census: Disability Occurrence by Age

Overall instances of disability in the U.S. by age.

16

2010 Census: Disability by Age & Type

Instances of disability in the U.S. by age & type

People over 15 years old

People over 65 years old

Mental

Mobility

Hearing, Sight & Speech

17

Regulations and Guidelines

18

1990: Americans with Disabilties Act (ADA)

1998: Section 5081999: WCAG 1.0

2008: WCAG 2.02010: 21st Century Communications and Video Accessibility Act (CCVA)

Regulations & Guidelines

U.S. Regulations

19

Superheroes of Today

20

Overcome adversity

Fight for good

Adhere to principles, guidelines, and laws

Use existing infrastructure in new ways

Use innovative technology

Look great in a cape

Rules for being a Superhero

Superhero Checklist

21

As defined by w3.org

Four principles of Accessible DesignP.O.U.R.

22

Perceivable

Operable

Understandable

Robust

23

Perceivable

e.g. Flipboard

Providing alternative text on images

Captions or transcripts for video and audio

Good color contrast

Avoid marquees or movement

24

Providing access to navigation and controls through alternative means (e.g. Tab)

Don’t make buttons too tiny

Operable

e.g. New York Times Mobile

25

Understandable

Content is clearly and logically presented

Wording should be simple and concise

e.g. Dropbox

26

Semantic markupsValidate code Responsive design

Robust

e.g. Netflix

27

Basic Elements of Accessible Design

28

What is Legibility?

Legibility equals

Understanding

29

Legibility

Hierarchy

Color & Contrast

Typography

Iconography

Sound

Touch & Haptics

The Elements of Legibility

30

Can my audience understand it?

How can the platform help my users understand? Does the platform suggest particular usability patterns?

How difficult is it to learn? (Learned behavior vs. established patterns)

Questions to Test Legibility

31

Hierarchy

What is Hierarchy?

OrderSizeAction

32

Stop

Caution

Go

Traffic Light Example

33

On

Off

Off

UI of a Traffic Light

34

Low Battery

Battery Level Example

Battery Charged

35

UI of a Battery Level

On On

36

What is Color?

ColorHueChromaticitySaturationValueContrast

37

Colorblindness affects approximately 8% of males and 0.5% of females.www.colorblindor.com

Colorblindness

38

Greyscale

The Greyscale

39

Munsell Color System

Munsell Color System

40

Comparing Colors: Kinds of Colorblindness

Zero Chroma

41

What is Typography?

TypographyFontSizeWeightUniformityContrast

42

Typography: Spacing

43

Typography: Weight

44

Typography: Geometry

45

Examples of Easy-to-Read Typefaces

Helvetica

Arial

Calibri

Geneva

Gotham

Times

46

Typography: Possibilities

Typeface: Dyslexie

47

What is Iconography?

48

Iconography: Simplicity is Key

49

Iconography: Making it Accessible

Don’t:<img src=“spyglass.png”>

Do:<img src=“search.png” alt=“Search” />

50

Using Sound

SoundUse in conjunction with visual cuesDifferentiating between alertsIntegrating sound as responsive feedback

51

Using Touch & Haptics

Touch & HapticsHaptic feedback to indicatestate of error or completion

Touch to invoke action

52

Visual Simulators: Color Oracle

53

Visual Simulators: Photoshop CS6

54

Visual Simulators: VisionSim

55

Checklists, Validators, and Design Tools

Validate HTML/CSS

iOS Human Interface Guidelines

Android Accessibility Guide

Windows Mobile Design Guide

Design Resources: Tools

Color Contrast Checker

Firefox Accessibility Toolbar

Readability Test Tool

Discover more…

56

FUN STUFF!

57

Southwest & FlightView

Bloomberg & Flipboard

Target & Gucci

Yelp & Groupon

Starbucks & PayPal

Skype & Google Voice

Exercise: Example Interfaces

58

Grab a coffee, take a break(but hurry back, for goodness sake!)

59

Part 2

60

The Cyborg

The Cyborg Foundation

Video

Are there new ways to

translate the senses?

61

Technology and Innovation

62

Mobile Operating Systems

63

Common Built-in FeaturesIncrease text sizeText-to-speechPinch and zoom screenText magnificationText highlightAlternate gesturesCustom ring and vibration patternsColor/brightness contrastHaptic feedback

64

Screen readersScreen magnifiersAlternative keyboardsApple's Guided AccessBraille output devicesJumbo remote control3rd party accesibility apps

Assistive Technologies & Services

65

Video Resources

How the Blind Use iPhones

How the Blind Use Instagram

Raising the Floor’s GPII

Web Accessibility by STAFFNet

Google I/O: Making Android Apps Accessible

66

Alternate Technologies

67

What are the benefits of automation?

Google Car

68

What features are good experiences for everyone?

Siri

69

What’s the value of gesture?

70

How can we use context to create more seamless experiences?

Fleksy

71

TouchFire Keyboard

What can we do with bothdigital and physical haptics?

72

Blind Maps

73

How can we adapt old technologies and systems for new ones?

74

Bionic Eye: Argus II

75

What We Can Learn

Leverage existing alternate technologies we already see being used in interfaces today.

Introduce gestures into top level interaction as a fun feature for all users and creates a new channel to access features.

Offering feedback whether it is sound, haptic, or visual cues can be simple, novel, and useful.

76

MORE FUN STUFF!

77

Select one of your services

and suggest an improvement for the

element you found most restrictive.

Exercise: Suggest Improvement

78

EVEN MORE FUN STUFF!

79

Why did I make this decision?

Who is this geared towards?

Does it work for all audiences?

Is it a nice experience?

Discussion: Questions to Ask

80

Designers and Engineers Today, Superheroes Tomorrow

81

Overcome adversity

Fight for good

Adhere to principles, guidelines, and laws

Use existing infrastructure in new ways

Use innovative technology

Look great in a cape

Rules for being a Superhero

Superhero Checklist

82

Design For Us

83

Thank you!

84

Want to chat more?

@yvonniks@gingerstormy