Interfaces, Accessibility & Superheroes

84
SXSW Interactive Workshop, 2013 Yvonne So & Livia Veneziano Interfaces, Accessibility & Superheroes 1 #superable

description

BAM! POW! Beloved superhero Daredevil squelches his enemies with speed and precision, completely uninhibited by his blindness. Overcoming adversity, discovering superpowers, and saving the world are common themes in comics and graphic novels. Our mission is to bring those themes into the world of accessible design. The World Heath Organization and the World Bank report that nearly 1 out of 7 of the world's population has some form of disability. Creating products and services that don't include alternate interaction models is a failure on a global scale. Designers and engineers are the middlemen between disability and super-ability, and it is our duty to help break interface barriers. This session will explore examples and methods for understanding and practicing accessible design.

Transcript of Interfaces, Accessibility & Superheroes

Page 1: Interfaces, Accessibility & Superheroes

1

SXSW Interactive Workshop, 2013Yvonne So & Livia Veneziano

Interfaces, Accessibility & Superheroes

#superable

Page 2: Interfaces, Accessibility & Superheroes

2

Hello - We’re Designers

Page 3: Interfaces, Accessibility & Superheroes

3

Designing for Accessibility

Page 4: Interfaces, Accessibility & Superheroes

4

First, a Challenge

Page 5: Interfaces, Accessibility & Superheroes

5

What is Accessible Design?

Page 6: Interfaces, Accessibility & Superheroes

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

Page 7: Interfaces, Accessibility & Superheroes

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

Page 8: Interfaces, Accessibility & Superheroes

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

Page 9: Interfaces, Accessibility & Superheroes

9

Who Are We Designing For?

Page 10: Interfaces, Accessibility & Superheroes

Challenging Convention

10

Page 11: Interfaces, Accessibility & Superheroes

11

Challenging Convention

Page 12: Interfaces, Accessibility & Superheroes

12

World Heath Organization Disability Report

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

Page 13: Interfaces, Accessibility & Superheroes

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%

Page 14: Interfaces, Accessibility & Superheroes

14

2010 Census: Population Growth of 65+

Projected growth of population 65 years and older.

Page 15: Interfaces, Accessibility & Superheroes

15

2010 Census: Disability Occurrence by Age

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

Page 16: Interfaces, Accessibility & Superheroes

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

Page 17: Interfaces, Accessibility & Superheroes

17

Regulations and Guidelines

Page 18: Interfaces, Accessibility & Superheroes

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

Page 19: Interfaces, Accessibility & Superheroes

19

Superheroes of Today

Page 20: Interfaces, Accessibility & Superheroes

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

Page 21: Interfaces, Accessibility & Superheroes

21

As defined by w3.org

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

Page 22: Interfaces, Accessibility & Superheroes

22

Perceivable

Operable

Understandable

Robust

Page 23: Interfaces, Accessibility & Superheroes

23

Perceivable

e.g. Flipboard

Providing alternative text on images

Captions or transcripts for video and audio

Good color contrast

Avoid marquees or movement

Page 24: Interfaces, Accessibility & Superheroes

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

Page 25: Interfaces, Accessibility & Superheroes

25

Understandable

Content is clearly and logically presented

Wording should be simple and concise

e.g. Dropbox

Page 26: Interfaces, Accessibility & Superheroes

26

Semantic markupsValidate code Responsive design

Robust

e.g. Netflix

Page 27: Interfaces, Accessibility & Superheroes

27

Basic Elements of Accessible Design

Page 28: Interfaces, Accessibility & Superheroes

28

What is Legibility?

Legibility equals

Understanding

Page 29: Interfaces, Accessibility & Superheroes

29

Legibility

Hierarchy

Color & Contrast

Typography

Iconography

Sound

Touch & Haptics

The Elements of Legibility

Page 30: Interfaces, Accessibility & Superheroes

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

Page 31: Interfaces, Accessibility & Superheroes

31

Hierarchy

What is Hierarchy?

OrderSizeAction

Page 32: Interfaces, Accessibility & Superheroes

32

Stop

Caution

Go

Traffic Light Example

Page 33: Interfaces, Accessibility & Superheroes

33

On

Off

Off

UI of a Traffic Light

Page 34: Interfaces, Accessibility & Superheroes

34

Low Battery

Battery Level Example

Battery Charged

Page 35: Interfaces, Accessibility & Superheroes

35

UI of a Battery Level

On On

Page 36: Interfaces, Accessibility & Superheroes

36

What is Color?

ColorHueChromaticitySaturationValueContrast

Page 37: Interfaces, Accessibility & Superheroes

37

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

Colorblindness

Page 38: Interfaces, Accessibility & Superheroes

38

Greyscale

The Greyscale

Page 39: Interfaces, Accessibility & Superheroes

39

Munsell Color System

Munsell Color System

Page 40: Interfaces, Accessibility & Superheroes

40

Comparing Colors: Kinds of Colorblindness

Zero Chroma

Page 41: Interfaces, Accessibility & Superheroes

41

What is Typography?

TypographyFontSizeWeightUniformityContrast

Page 42: Interfaces, Accessibility & Superheroes

42

Typography: Spacing

Page 43: Interfaces, Accessibility & Superheroes

43

Typography: Weight

Page 44: Interfaces, Accessibility & Superheroes

44

Typography: Geometry

Page 45: Interfaces, Accessibility & Superheroes

45

Examples of Easy-to-Read Typefaces

Helvetica

Arial

Calibri

Geneva

Gotham

Times

Page 46: Interfaces, Accessibility & Superheroes

46

Typography: Possibilities

Typeface: Dyslexie

Page 47: Interfaces, Accessibility & Superheroes

47

What is Iconography?

Page 48: Interfaces, Accessibility & Superheroes

48

Iconography: Simplicity is Key

Page 49: Interfaces, Accessibility & Superheroes

49

Iconography: Making it Accessible

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

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

Page 50: Interfaces, Accessibility & Superheroes

50

Using Sound

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

Page 51: Interfaces, Accessibility & Superheroes

51

Using Touch & Haptics

Touch & HapticsHaptic feedback to indicatestate of error or completion

Touch to invoke action

Page 52: Interfaces, Accessibility & Superheroes

52

Visual Simulators: Color Oracle

Page 53: Interfaces, Accessibility & Superheroes

53

Visual Simulators: Photoshop CS6

Page 54: Interfaces, Accessibility & Superheroes

54

Visual Simulators: VisionSim

Page 56: Interfaces, Accessibility & Superheroes

56

FUN STUFF!

Page 57: Interfaces, Accessibility & Superheroes

57

Southwest & FlightView

Bloomberg & Flipboard

Target & Gucci

Yelp & Groupon

Starbucks & PayPal

Skype & Google Voice

Exercise: Example Interfaces

Page 58: Interfaces, Accessibility & Superheroes

58

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

Page 59: Interfaces, Accessibility & Superheroes

59

Part 2

Page 60: Interfaces, Accessibility & Superheroes

60

The Cyborg

The Cyborg Foundation

Video

Are there new ways to

translate the senses?

Page 61: Interfaces, Accessibility & Superheroes

61

Technology and Innovation

Page 62: Interfaces, Accessibility & Superheroes

62

Mobile Operating Systems

Page 63: Interfaces, Accessibility & Superheroes

63

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

Page 64: Interfaces, Accessibility & Superheroes

64

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

Assistive Technologies & Services

Page 65: Interfaces, Accessibility & Superheroes

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

Page 66: Interfaces, Accessibility & Superheroes

66

Alternate Technologies

Page 67: Interfaces, Accessibility & Superheroes

67

What are the benefits of automation?

Google Car

Page 68: Interfaces, Accessibility & Superheroes

68

What features are good experiences for everyone?

Siri

Page 69: Interfaces, Accessibility & Superheroes

69

What’s the value of gesture?

Page 70: Interfaces, Accessibility & Superheroes

70

How can we use context to create more seamless experiences?

Fleksy

Page 71: Interfaces, Accessibility & Superheroes

71

TouchFire Keyboard

What can we do with bothdigital and physical haptics?

Page 72: Interfaces, Accessibility & Superheroes

72

Blind Maps

Page 73: Interfaces, Accessibility & Superheroes

73

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

Page 74: Interfaces, Accessibility & Superheroes

74

Bionic Eye: Argus II

Page 75: Interfaces, Accessibility & Superheroes

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.

Page 76: Interfaces, Accessibility & Superheroes

76

MORE FUN STUFF!

Page 77: Interfaces, Accessibility & Superheroes

77

Select one of your services

and suggest an improvement for the

element you found most restrictive.

Exercise: Suggest Improvement

Page 78: Interfaces, Accessibility & Superheroes

78

EVEN MORE FUN STUFF!

Page 79: Interfaces, Accessibility & Superheroes

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

Page 80: Interfaces, Accessibility & Superheroes

80

Designers and Engineers Today, Superheroes Tomorrow

Page 81: Interfaces, Accessibility & Superheroes

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

Page 82: Interfaces, Accessibility & Superheroes

82

Design For Us

Page 83: Interfaces, Accessibility & Superheroes

83

Thank you!

Page 84: Interfaces, Accessibility & Superheroes

84

Want to chat more?

@yvonniks@gingerstormy