Interfaces, Accessibility & Superheroes

SXSW Interactive Workshop, 2013

Yvonne 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

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

Regulations and Guidelines

17

‹#›

Superheroes of Today

19

‹#›

As defined by w3.org

Four principles of Accessible Design

P.O.U.R.

21

22

Perceivable

Operable

Understandable

Robust

‹#›

‹#›

‹#›

‹#›

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

‹#›

‹#›

‹#›

‹#›

‹#›

What is Color?

36

ColorHue

Chromaticity

Saturation

Value

Contrast

Colorblindness affects

approximately 8% of males and

0.5% of females.www.colorblindor.com

Colorblindness

37

‹#›

‹#›

‹#›

What is Typography?

41

TypographyFont

Size

Weight

Uniformity

Contrast

‹#›

‹#›

‹#›

Examples of Easy-to-Read Typefaces

45

Helvetica

Arial

Calibri

Geneva

Gotham

Times

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

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

‹#›

Part 2

59

‹#›

Technology and Innovation

61

‹#›

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

‹#›

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

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

‹#›

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

‹#›

‹#›

Thank you!

83

84

Want to chat more?

livia.veneziano@gmail.com

yoyososo@gmail.com