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

Interfaces, Accessibility & Superheroes

Embed Size (px)

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.

Citation preview

Page 1: Interfaces, Accessibility & Superheroes

SXSW Interactive Workshop, 2013

Yvonne So & Livia Veneziano

Interfaces, Accessibility

& Superheroes

1

#superable

Page 2: Interfaces, Accessibility & Superheroes

Hello - We’re Designers

2

Page 3: Interfaces, Accessibility & Superheroes

3

Designing for Accessibility

Page 4: Interfaces, Accessibility & Superheroes

4

First, a Challenge

Page 5: Interfaces, Accessibility & Superheroes

What is Accessible Design?

5

Page 6: Interfaces, Accessibility & Superheroes

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

Page 7: Interfaces, Accessibility & Superheroes

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

Page 8: Interfaces, Accessibility & Superheroes

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

Page 9: Interfaces, Accessibility & Superheroes

‹#›

Page 10: Interfaces, Accessibility & Superheroes

‹#›

Page 11: Interfaces, Accessibility & Superheroes

‹#›

Page 12: Interfaces, Accessibility & Superheroes

‹#›

Page 13: Interfaces, Accessibility & Superheroes

‹#›

Page 14: Interfaces, Accessibility & Superheroes

‹#›

Page 15: Interfaces, Accessibility & Superheroes

‹#›

Page 16: Interfaces, Accessibility & Superheroes

‹#›

Page 17: Interfaces, Accessibility & Superheroes

Regulations and Guidelines

17

Page 18: Interfaces, Accessibility & Superheroes

‹#›

Page 19: Interfaces, Accessibility & Superheroes

Superheroes of Today

19

Page 20: Interfaces, Accessibility & Superheroes

‹#›

Page 21: Interfaces, Accessibility & Superheroes

As defined by w3.org

Four principles of Accessible Design

P.O.U.R.

21

Page 22: Interfaces, Accessibility & Superheroes

22

Perceivable

Operable

Understandable

Robust

Page 23: Interfaces, Accessibility & Superheroes

‹#›

Page 24: Interfaces, Accessibility & Superheroes

‹#›

Page 25: Interfaces, Accessibility & Superheroes

‹#›

Page 26: Interfaces, Accessibility & Superheroes

‹#›

Page 27: Interfaces, Accessibility & Superheroes

Basic Elements of Accessible Design

27

Page 28: Interfaces, Accessibility & Superheroes

What is Legibility?

Legibility

equals

Understanding

28

Page 29: Interfaces, Accessibility & Superheroes

Legibility

Hierarchy

Color &

Contrast

Typography

Iconography

Sound

Touch &

Haptics

The Elements of Legibility

29

Page 30: Interfaces, Accessibility & Superheroes

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

Page 31: Interfaces, Accessibility & Superheroes

‹#›

Page 32: Interfaces, Accessibility & Superheroes

‹#›

Page 33: Interfaces, Accessibility & Superheroes

‹#›

Page 34: Interfaces, Accessibility & Superheroes

‹#›

Page 35: Interfaces, Accessibility & Superheroes

‹#›

Page 36: Interfaces, Accessibility & Superheroes

What is Color?

36

ColorHue

Chromaticity

Saturation

Value

Contrast

Page 37: Interfaces, Accessibility & Superheroes

Colorblindness affects

approximately 8% of males and

0.5% of females.www.colorblindor.com

Colorblindness

37

Page 38: Interfaces, Accessibility & Superheroes

‹#›

Page 39: Interfaces, Accessibility & Superheroes

‹#›

Page 40: Interfaces, Accessibility & Superheroes

‹#›

Page 41: Interfaces, Accessibility & Superheroes

What is Typography?

41

TypographyFont

Size

Weight

Uniformity

Contrast

Page 42: Interfaces, Accessibility & Superheroes

‹#›

Page 43: Interfaces, Accessibility & Superheroes

‹#›

Page 44: Interfaces, Accessibility & Superheroes

‹#›

Page 45: Interfaces, Accessibility & Superheroes

Examples of Easy-to-Read Typefaces

45

Helvetica

Arial

Calibri

Geneva

Gotham

Times

Page 46: Interfaces, Accessibility & Superheroes

‹#›

Page 47: Interfaces, Accessibility & Superheroes

‹#›

Page 48: Interfaces, Accessibility & Superheroes

‹#›

Page 49: Interfaces, Accessibility & Superheroes

‹#›

Page 50: Interfaces, Accessibility & Superheroes

‹#›

Page 51: Interfaces, Accessibility & Superheroes

‹#›

Page 52: Interfaces, Accessibility & Superheroes

‹#›

Page 53: Interfaces, Accessibility & Superheroes

‹#›

Page 54: Interfaces, Accessibility & Superheroes

‹#›

Page 56: Interfaces, Accessibility & Superheroes

FUN STUFF!

56

Page 57: Interfaces, Accessibility & Superheroes

Southwest & FlightView

Bloomberg & Flipboard

Target & Gucci

Yelp & Groupon

Starbucks & PayPal

Skype & Google Voice

57

Exercise: Example Interfaces

Page 58: Interfaces, Accessibility & Superheroes

‹#›

Page 59: Interfaces, Accessibility & Superheroes

Part 2

59

Page 60: Interfaces, Accessibility & Superheroes

‹#›

Page 61: Interfaces, Accessibility & Superheroes

Technology and Innovation

61

Page 62: Interfaces, Accessibility & Superheroes

‹#›

Page 63: Interfaces, Accessibility & Superheroes

63

Common Built-in Features

Increase text size

Text-to-speech

Pinch and zoom screen

Text magnification

Text highlight

Alternate gestures

Custom ring and vibration patterns

Color/brightness contrast

Haptic feedback

Page 64: Interfaces, Accessibility & Superheroes

‹#›

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

‹#›

Page 68: Interfaces, Accessibility & Superheroes

‹#›

Page 69: Interfaces, Accessibility & Superheroes

‹#›

Page 70: Interfaces, Accessibility & Superheroes

‹#›

Page 71: Interfaces, Accessibility & Superheroes

‹#›

Page 72: Interfaces, Accessibility & Superheroes

‹#›

Page 73: Interfaces, Accessibility & Superheroes

‹#›

Page 74: Interfaces, Accessibility & Superheroes

‹#›

Page 75: Interfaces, Accessibility & Superheroes

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

Page 76: Interfaces, Accessibility & Superheroes

76

MORE FUN STUFF!

Page 77: Interfaces, Accessibility & Superheroes

Select one of your services

and suggest an improvement for the

element you found most restrictive.

77

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

Designers and Engineers Today,

Superheroes Tomorrow

80

Page 81: Interfaces, Accessibility & Superheroes

‹#›

Page 82: Interfaces, Accessibility & Superheroes

‹#›

Page 83: Interfaces, Accessibility & Superheroes

Thank you!

83