superheroes sxsw 2013

SXSW Interactive Workshop, 2013Yvonne So & Livia Veneziano

Interfaces, Accessibility & Superheroes

1

#superable

Hello - We’re Designers

2

3

Designing for Accessibility

4

First, a Challenge

What is Accessible Design?

5

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

6

Definition: Universal Design

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.

7

Definition: Disability

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

8

Definition: Accessibility

9

Who Are We Designing For?

Challenging Convention

10

11

Challenging Convention

World Heath Organization Disability Report

12

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

2010 Census: Disability by Age

13

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

People over 15 years old21.3%

People over 65 years old49.8%

2010 Census: Population Growth of 65+

14

Projected growth of population 65 years and older.

2010 Census: Disability Occurrence by Age

15

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

2010 Census: Disability by Age & Type

16

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

Regulations and Guidelines

17

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

Superheroes of Today

19

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

As defined by w3.org

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

21

22

Perceivable

Operable

Understandable

Robust

Perceivable

23

e.g. Flipboard

Providing alternative text on images

Captions or transcripts for video and audio

Good color contrast

Avoid marquees or movement

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

Don’t make buttons too tiny

24

Operable

e.g. New York Times Mobile

25

UnderstandableContent is clearly and logically presented

Wording should be simple and concise

e.g. Dropbox

26

Semantic markupsValidate code Responsive design

Robust

e.g. Netflix

Basic Elements of Accessible Design

27

What is Legibility?

Legibility equals

Understanding

28

Legibility

Hierarchy

Color & Contrast

Typography

Iconography

Sound

Touch & Haptics

The Elements of Legibility

29

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

30

Hierarchy

What is Hierarchy?

OrderSizeAction

31

Stop

Caution

Go

Traffic Light Example

32

On

Off

Off

UI of a Traffic Light

33

Low Battery

Battery Level Example

34

Battery Charged

UI of a Battery Level

35

On On

What is Color?

36

ColorHueChromaticitySaturationValueContrast

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

Colorblindness

37

Greyscale

The Greyscale

38

Munsell Color System

Munsell Color System

39

Comparing Colors: Kinds of Colorblindness

Zero Chroma

40

What is Typography?

41

TypographyFontSizeWeightUniformityContrast

Typography: Spacing

42

Typography: Weight

43

Typography: Geometry

44

Examples of Easy-to-Read Typefaces

45

HelveticaArialCalibri

GenevaGotham

Times

Typography: Possibilities

46

Typeface: Dyslexie

What is Iconography?

47

Iconography: Simplicity is Key

48

Iconography: Making it Accessible

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

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

49

Using Sound

50

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

Using Touch & Haptics

51

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…

FUN STUFF!

56

Southwest & FlightView

Bloomberg & Flipboard

Target & Gucci

Yelp & Groupon

Starbucks & PayPal

Skype & Google Voice

57

Exercise: Example Interfaces

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

58

Part 2

59

The Cyborg

60

The Cyborg Foundation

Video

Are there new ways to translate

the senses?

Technology and Innovation

61

Mobile Operating Systems

62

63

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

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

64

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

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.

75

76

MORE FUN STUFF!

Select one of your services

and suggest an improvement for the

element you found most restrictive.

77

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

Designers and Engineers Today, Superheroes Tomorrow

80

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

Design For Us

82

Thank you!

83

84

Want to chat more?

@yvonniks@gingerstormy