This document provides information about an organization called the Institute for Human Centered Design (IHCD) and accessibility and universal design. IHCD is an international nonprofit based in Boston dedicated to enhancing experiences for people of all ages and abilities through design excellence. The document discusses IHCD's services including design consulting, technical assistance, education and training, and research focused on accessibility and universal design. It also provides examples of IHCD projects and publications. Presenters from IHCD and a design firm are listed who will discuss creating positive user experiences for all users across devices.

1. Great design and
usability, your website
can have both.
www.HumanCenteredDesign.org
May 19, 2013
American Alliance of Museums
Annual Meeting

2. www.HumanCenteredDesign.org
An international nonprofit based in Boston dedicated
to enhancing the experiences of people of all ages and
abilities through excellence in design.

3. Design powerfully and profoundly
influences everyone and our sense of
confidence, comfort, and control.
Variation in ability is ordinary, not
special, and affects most of us for at
least part of our lives.
2 core beliefs…
www.HumanCenteredDesign.org

4. www.HumanCenteredDesign.orgwww.HumanCenteredDesign.org
Scope of Services
Regional, National, International
Design & Consulting on accessibility and universal design
 Built environment
 Products, service design
 Information & Communication Technology (ICT)
Technical Assistance (federal funding)
 Fair Housing Accessibility – National
 Americans with Disabilities Act
User/Expert Lab – review by people with physical, sensory,
brain-based conditions at IHCD or the field
Education & Training on accessibility and universal design
Research – qualitative and quantitative

5. www.HumanCenteredDesign.org
Institute for Human Centered Design
Technical Assistance Projects
One of ten national centers
providing information,
guidance and training on the
Americans with Disabilities Act.
800-949-4232 v/tty
A member of the 888-341-7781 v/tty
A program of the US
Department of Housing and
Urban Development providing
information on the Fair Housing
Act design and construction
requirements.

6. www.HumanCenteredDesign.org

7. 2011
2010 2009
IHCD Publishes
a Book a Year
www.HumanCenteredDesign.org
2012

8. Presenters
• Lisa Spitz, Lisa Spitz Design
BA Psychology and Graphic Arts, Regis College -
M.Des, Interaction Design, Carnegie Mellon
Lisa is a strategic, detail-oriented, Senior User Experience Designer with 10+
years experience in corporate and nonprofit worlds. Lisa is passionate about
leveraging the power of design to transform business needs into meaningful
user experiences. Her work includes user research, information architecture,
interface/web design, print design, usability evaluation and consultation.
• Gabriela Sims, Institute for Human Centered Design (IHCD)
BA, Communication Design, Parsons School of Design
MPA, Suffolk University
Gabriela has been at IHCD since 1992. Originally trained in graphic design, she
oversees graphic quality in all IHCD projects including books, websites,
information products, and marketing. She also works with the technical
specialists on IHCD’s review of websites to ensure accessibility.
www.HumanCenteredDesign.org

9. A little background on the
need for accessible websites…

10. The legal precedence

11. Legal Precedence for Accessible Websites
• Section 504 of Rehabilitation Act: Programs that receive
federal assistance
• Section 508 of the Rehabilitation Act: Federal agencies or
entities that supply or contract to them
• Americans with Disabilities Act
Title I – Employment, reasonable accommodations
Title II – State & Local Government
Title III – Places of public accommodations
• 21st Century Communications and Video
Accessibility Act of 2010 (CCVA): Video content – closed
captions, video description, mobile browser accessibility

12. Section 508 Compliance - Snapshot
• Requires electronic and information products for and
by government entities to be accessible (physical,
sensory)
• Includes websites, software, online services, multi-
media and hardware
• While the overarching principle is equivalent access,
guidelines allow for alternate access.
• Section 508 is undergoing a refresh by US Access
board to align with WAI-WCAG

13. Section 504 Compliance - Snapshot
Section 504 provides for equal opportunity to enter
facilities and participate in programs and activities.
• The important considerations are that disabled
people have:
 the same opportunities in employment,
 the same opportunities to enter and move around in facilities,
 the same opportunities to communicate, and
 the same opportunities to participate in programs

14. Section 504 Compliance - Snapshot
Under 504 there is an obligation to program accessibility.
Websites are a really important backbone of the museum
experience and this creates a need to pay attention to
creating an accessible website. These days so much
happens on websites - access to galleries, community
forums etc.
Remember legal compliance will only get you to minimum
508 standards – user friendly graphics are often over
looked but go beyond...

15. 21st Century CVAA Compliance - Snapshot
• The CCVA contains groundbreaking protections to
enable people with disabilities to access broadband,
digital and mobile innovations.
• Title I addresses communications access to make
products and services using Broadband fully
accessible to people with disabilities. For example
smart phones will be required to be usable by blind
and visually impaired people
• Title II makes it easier for people with disabilities to
view video programming on television and Internet
–

16. WC3/WAI – Taking it further

17. W3C WAI WCAG 2.0- Snapshot
Calls for information to be:
• Understandable – readable and understandable text
as well as the operation of the user interface
• Perceivable – text and other alternatives for non-text
and multi-media; multiple ways of presenting
information
• Operable – keyboard access, cognitively sound, easy
to navigate
• Robust – compatible with variety of tools

18. RtF – Taking it further

19. But legal precedence is still
minimum compliance…

20. Vision loss in the US
 More than 62% of the population of people over 40 have
vision problems National Eye Institute, based on 2010 U.S. Census Populations
 Approximately 30% of the population has Presbyopia
• Presbyopia means "old eye" and involves the loss of the eye's ability to focus on close
objects, the condition that causes people in their middle age to be reliant upon reading
glasses to see up close.
 Light is critical as you age. We require 2x more light at 60
than at 40
 70% of U.S. adults experience some form of digital eye
strain while using their electronic devicesVision Council of America, 2012
 There are 1.3 million legally blind people in US
 Approximately 75% of adults use
some sort of vision correction
Vision Council of America

21. Vision loss in the US
Macular Degeneration: In general, magnification and
high levels of illumination will assist in reading and
other near vision tasks.
Photos courtesy of National Eye Institute

22. Vision loss in the US
Photos courtesy of National Eye Institute
Cataracts: Age related cataracts are often yellow or
brown causing loss of sensitivity to blue.

23. Vision loss in the US
Photos courtesy of National Eye Institute
Diabetic Retinopathy: The largest single cause of visual
impairment among those of working age. Impacts between
40 to 45 percent of Americans diagnosed with diabetes.

24. Vision loss in the US
Photos courtesy of National Eye Institute
Color Blindness: Impacts 1 of 76 Americans. Causes
difficulties seeing colors in red-green, yellow-blue range
and while rare, any color range at all.

25. Vision loss in the US
Photos courtesy of National Eye Institute
Color Blindness: Press the Green button to Start

26.  One in five people in the United States has a learning disability
Twenty-ninth annual Report to Congress, U.S. Dept of Ed. 2010
 One in four US adults suffers from a diagnosable mental disorder
in any given year
 1.5 to 2 M Americans experience a Traumatic Brain Injury (TBI)
each year Centers for Disease Control and Prevention, National Center for Injury Prevention and Control,
March 25, 2010
 In the US there are believed to be at least 5 million individuals
with age-related dementias. It is estimated that 1 in 6 women, and
1 in 10 men, who live past the age of 55 will develop dementia in
their lifetime Institute for Dementia Research & Prevention, Pennington Biomedical Research Center
Brain-based conditions
rising…

27. 1. Specific learning disabilities
2. Speech/language impairments
3. Intellectual limitation
4. Emotional disturbance
5. Other health impairment
6. Developmental delay
7. Autism
(source: U.S. DoE, 2005-6, IDEA)
Cognitive variations…
Most prevalent types of
disabilities for children in the US…
13.8% of all youth age 3-21

28. This population is larger than those with all other
physical and sensory disabilities combined
Web AIM’s Cognitive accessibility can be defined by the
following principles:
Simple
Consistent
Clear
Multimodal
Error-tolerant
Attention-focusing
Cognitive Variations…

29. Activity difficulties
Source: study commissioned by Microsoft, conducted
by Forrester Research, Inc., 2003
0%
5%
10%
15%
20%
25%
30%
Visual Dexterity Hearing Cognitive Speech
Difficulties and Impairments Among
Working-Age Adults

30. Examples of common
problems…

31. 1. Color Usage

32. 2. Font Size & Style
Poor legibility: Low contrast, condensed fonts and stylized font striping

33. Light text, with an added shadow, on a light background is difficult to read

34. Drop down menu is not opaque rendering it more difficult to read

35. Flash that makes you wait and gives you no
easy way to skip it is frustrating, it also
doesn’t work very well with smart phones
and tablets
3. Over use of flash

36. Navigation is not intuitive, the back button doesn’t work once you are in the site
4. Lack of Intuitiveness

37. Home page: It’s very difficult to locate the information that will guide you through the site.

38. 6. Information conveyed only with color, that wasn’t also
conveyed without color.
Registration
7. General difficulty in finding critical information, for example
hours of operation, ticket prices and accessibility
information.
5. Meaningless out of context Alt. Text: Instead of ‘Click Here’
it should say what it is. “Registration” “Buy Tickets” etc.

39. You
can
make
a
difference

40. New
WHO
defini5on
of
disability
-­‐ “Disability
occurs
in
the
interac2on
between
a
person,
his
or
her
func2onal
ability,
and
the
environment.”
-­‐ “One
is
more
or
less
disabled
based
on
the
intersec2on
between
herself,
her
func2onal
abili2es,
and
the
many
types
of
environments
with
which
she
interacts.”
-­‐ “The
experience
of
disability
can
be
minimized
by
designing
environments
to
accommodate
varying
func5onal
abili5es
and
providing
individualized
solu5ons
when
needed.”
-­‐ Source:
h?p://www.accessingsafety.org
Why
Design
for
“All”?

41. Poten5al
website
visitors
include…
Why
Design
for
“All”?

42. If
you
only
include
the
middle...
Why
Design
for
“All”?

43. But
if
you
look
to
the
outskirts...
Why
Design
for
“All”?

44. But
wait,
that’s
not
all...

45. But
wait,
that’s
not
all...
The
rise
of
touch
devices
-­‐ 31%
of
American
adults
own
a
tablet
computer
(January
2013)
-­‐ 87%
of
American
adults
have
a
cell
phone
(December
2012)
-­‐ 45%
of
American
adults
have
a
smartphone
(December
2012)
-­‐ Source:
h?p://pewinternet.org/Commentary/2012/February/Pew-­‐Internet-­‐Mobile.aspx

46. But
wait,
that’s
not
all...
Source:
h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html

47. But
wait,
that’s
not
all...
Source:
h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html

48. But
wait,
that’s
not
all...
Source:
h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html

49. But
wait,
that’s
not
all...
Source:
h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html

50. But
wait,
that’s
not
all...
Source:
h?p://www.google.com/think/research-­‐studies/the-­‐new-­‐mul2-­‐screen-­‐world-­‐study.html

51. But
wait,
that’s
not
all...
Source:
h?p://designtaco.com/?p=893

52. Crea5ng
a
posi5ve
user
experience
for
all
users
across
all
devices

53. What
is
“User
Experience”?
-­‐ "User
experience"
encompasses
all
aspects
of
the
end-­‐user's
interac2on
with
the
company,
its
services,
and
its
products.”
-­‐ Source:
Nielsen
Norman
Group
h?p://www.nngroup.com/about/userexperience.html
Crea=ng
a
Posi=ve
User
Experience

54. The
User
Experience
Honeycomb
Crea=ng
a
Posi=ve
User
Experience
-­‐ Source:
User
Experience
Design
by
Peter
Morville
h?p://seman2cstudios.com/publica2ons/seman2cs/000029.php

55. Tools
for
Assessing
Your
Site

56. Tools
for
Assessing
Your
Site
•
Purpose
–
Iden2fy
poten2al
usability
or
accessibility
issues
–
Understand
what
your
site
looks
like
on
Tablets
and
Smartphones
and
iden2fy
poten2al
usability
issues
DIY
(Do
it
yourself)

57. Tools
for
Assessing
Your
Site
DIY
Methods
•
Increase
font
sizes
200-­‐300%

58. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesDIY
Methods
•
Use
a
color
contrast
checker
h?p://juicystudio.com/services/luminositycontrastra2o.php

59. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesDIY
Methods
•
View
website
under
color
blindness
condi5ons
h?p://colorfilter.wickline.org/

60. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesDIY
Methods
•
Check
images
for
Alt
Tags
h?p://wave.webaim.org

61. Tools
for
Assessing
Your
Site
DIY
Methods
•
Test
your
website
across
placorms
http://mattkersley.com/responsive/

62. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesUser
Research
•
Purpose
=
develop
a
“user-­‐centered”
mindset
–
Who
is
my
audience?
–
When
are
they
accessing
my
site?
–
Where
are
they
when
viewing
my
site?
–
Why
are
they
coming
to
my
site?
–
What
are
you
trying
to
communicate?
–
How
does
the
experience
of
using
your
website
address
their
current
needs?

63. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesUser
Research
•
5
second
test
h?p://fivesecondtest.com/

64. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesUser
Research
•
Chalkmark
h?p://www.op2malworkshop.com/chalkmark

65. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesUser
Research
•
UserTes5ng
h?p://www.usertes2ng.com/

66. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesUser
Research
•
Track
page
views,
bounce
rates,
average
5me
on
site,
etc.
h?p://www.google.com/analy2cs

67. Tools
for
Assessing
Your
Site
Text
//
Font
ChoicesUser
Research
•
See
where
most
people
look/click
on
your
website
–
h?p://www.crazyegg.com
–
h?p://www.labsmedia.com/clickheat
–
h?p://www.clickdensity.com

68. Approach
for
Redesigning
Your
Site

70. Process
•
Audiences
/
Personas
•
Goals
&
Objec5ves
•
Content
Inventory
•
Informa5on
Architecture
•
Wireframes

71. Approach
for
redesigning
your
site
Text
//
Font
ChoicesAudience
/
Personas
•
Audiences
=
Who
are
you
designing
for?
–
Individuals
–
Families
–
Schools
–
Poten2al
employees
–
Funders

72. Approach
for
redesigning
your
site
Text
//
Font
ChoicesAudience
/
Personas
•
Personas
=
Stories
about
your
audiences
goals
&
behaviors
–
Age,
Gender,
Marital
Status
–
Living
situa7on
&
loca7on
–
Educa2on
&/or
Employment
–
Interests
and
Ac2vi2es
–
Reasons
for
visi2ng
your
site
–
Impression
you
want
to
make
–
Ac2ons
they
are
hoping
to
take

73. Approach
for
redesigning
your
site
Text
//
Font
ChoicesGoals
&
Objec5ves
•
Intent:
How
will
your
website
expand
your
business?
•
Present
vs.
Future
State:
How
will
it
change
over
2me?
•
Compe5tors:
How
are
you
unique/different?
•
Vision:
What
quali2es
do
you
hope
to
communicate?
•
Success
Criteria:
How
will
you
measure
effec2veness?

74. Approach
for
redesigning
your
site
Text
//
Font
ChoicesContent
Inventory
•
Content
=
Text,
images
&
media
to
be
included
on
your
site
–
Plans
for
future
growth
(+
5-­‐10
yrs)
–
Use
descrip2ve
links
within
your
content
–
Audience
considera5ons:
interna2onal
users,
individuals
with
mental
disorders,
brain
injury,
alzheimer’s,
etc.

75. Approach
for
redesigning
your
site
Text
//
Font
ChoicesInforma5on
Architecture
•
Informa5on
Architecture
=
Organiza5on
and
hierarchy
of
content
–
Logical
and
consistent
naming
structure
–
Based
on
audience
expecta2ons

76. Approach
for
redesigning
your
site
Text
//
Font
ChoicesInforma5on
Architecture
//
Ways
of
Organizing
•
By
topic
/
category

77. Approach
for
redesigning
your
site
Text
//
Font
ChoicesInforma5on
Architecture
//
Ways
of
Organizing
•
By
audience

78. Approach
for
redesigning
your
site
Text
//
Font
ChoicesInforma5on
Architecture
//
Ways
of
Organizing
•
By
task

79. Approach
for
redesigning
your
site
Text
//
Font
ChoicesInforma5on
Architecture
//
Sample
Site
Map

80. Approach
for
redesigning
your
site
Text
//
Font
ChoicesWireframes
•
Wireframes
=
S5ck
figure
layout
for
par5cular
pages
–
Important
for
making
decisions
–
Where
things
go,
not
what
they
look
like
–
Ways
of
naviga2ng
–
Hierarchy
of
content

81. Approach
for
redesigning
your
site
Text
//
Font
ChoicesWireframes
//
Elements
of
a
Webpage
Wireframe
•
Company
logo
•
Site
Naviga5on
•
Page
5tle
•
Primary
page
content
•
Related
content
•
Copyright
statements
•
Contact
informa5on

82. Approach
for
redesigning
your
site
Text
//
Font
ChoicesWireframes
//
Sample
Wireframe
Diagram
h<p://webstyleguide.com/wsg3/3-­‐informa7on-­‐architecture/4-­‐presen7ng-­‐informa7on.html

83. Website
Planning
Process
Text
//
Font
ChoicesWireframes
//
Things
to
Consider
•
Naviga5on
–
Are
naviga2onal
elements
consistently
placed
on
each
page?
–
Have
I
provided
mul2ple
pathways
through
the
content?
–
Will
each
of
my
audiences
be
able
to
find
what
they
are
looking
for?
•
Hierarchy
and
Organiza5on
–
Are
most
important
things
given
the
space
they
require?
–
Is
there
a
logical
reading
order?

84. Website
Planning
Process
Text
//
Font
ChoicesWireframes
//
Things
to
Consider
MOBILETABLET

85. Graphic
Design
Elements

86. Graphic
Design
Elements
•
An
interdependent
system
of
elements
for
an
audience
of
varied
abili;es
•
A
set
of
‘guidelines’
rather
than
strict
rules

87. •
Typography
•
Grid
•
Naviga;on
•
Color
•
Images
Graphic
Design
Elements

88. Graphic
Design
Elements
Most
common
issues:
•
Font
choice
and
size
•
Contrast
•
White
Space
•
Hierarchy
•
Consistency

89. Graphic
Design
Elements
Type
//
Typeface
Choices
Graphic
Design
Elements
Typography
•
Establishes
a
visual
hierarchy
allowing
informa6on
to
be
read
clearly
Good
type
•
Used
consistently,
builds
user
confidence

90. Graphic
Design
Elements
Type
//
Typeface
Choices
Graphic
Design
Elements
Typography
•
Typeface
Choices
(fonts)
•
Bodies
of
Text

91. Graphic
Design
Elements
Type
//
Typeface
Choices
Serif
Sans Serif

92. Graphic
Design
Elements
Type
//
Typeface
Choices
Serif
Sans Serif

93. Graphic
Design
Elements
Type
//
Typeface
Choices
Sans Serif
Verdana Helvetica Trebuchet

94. Graphic
Design
Elements
Type
//
Typeface
Choices
Serif
Georgia Times New Roman Palatino

95. Graphic
Design
Elements
Type
//
Typeface
Choices
Upper and lower case
letters are generally
more legible than all
uppercase letters.

96. Graphic
Design
Elements
Type
//
Typeface
Choices
UPPER AND LOWER
CASE LETTERS ARE
GENERALLY MORE
LEGIBLE THAN ALL
UPPERCASE LETTERS.

97. Graphic
Design
Elements
Type
//
Typeface
Choices
UPPER AND LOWER
CASE LETTERS ARE
GENERALLY MORE
LEGIBLE THAN ALL
UPPERCASE LETTERS.

98. Graphic
Design
Elements
Type
//
Typeface
Choices
Extra thin, extra black, italic,
and condensed fonts are
less legible unless used at
larger sizes.

99. Graphic
Design
Elements
Type
//
Typeface
Choices
Extra thin, extra
black, italic, and
condensed fonts are
less legible unless
used at larger sizes.

100. Graphic
Design
Elements
Type
//
Typeface
Choices
Extra thin, extra black,
italic, and condensed fonts
are less legible unless used
at larger sizes.

101. Graphic
Design
Elements
Type
//
Typeface
Choices
Extra thin, extra black,
italic, and condensed fonts
are less legible unless used
at larger sizes.

102. Graphic
Design
Elements
Type
//
Typeface
Choices
H , 
   s
  ffi  
  s.

103. Graphic
Design
Elements
Type
//
Typeface
Choices
Residences
Salzman Residence
Highland Park, Illinois
Oversize doors, simply detailed cabinets,
reconfigured ceilings and new lighting are
composed to create a serene series of
interlocking rooms. Cherry cabinets and slate
counters bring each space to life, offering a
warm and engaging environment.

104. Graphic
Design
Elements
Type
//
Typeface
Choices
Residences
Salzman Residence
Highland Park, Illinois
Oversize doors, simply detailed cabinets,
reconfigured ceilings and new lighting are
composed to create a serene series of
interlocking rooms. Cherry cabinets and slate
counters bring each space to life, offering a
warm and engaging environment.

105. Graphic
Design
Elements
•
Point
Size
&
Leading
(Line
Spacing)
•
Line
Length
&
Jus6fica6on
Type
//
Bodies
of
Text

106. Graphic
Design
Elements
Type
//
Bodies
of
Text
Common
Issues:
•
Point
sizes
too
small
•
Lines
of
text
oTen
too
long/short
•
Lack
of
visual
hierarchy
•
Not
enough
white
space
•
Long,
centered
paragraphs

107. Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Point
Size
&
Leading
•
Readers
like
larger
type
•
2
pts.
leading
for
print
•
More
generous
leading
is
a
key
to
legibility
on
the
web
ex:
12
pt.
type
/
14
pt.
leading
ex:
12
pt.
type
/
16
pt.
leading

108. Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Point
Size
&
Leading
Residences
Salzman Residence
Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-
locking rooms. Cherry cabinets and slate
Effec%ve Not
Effec%ve
Residences
Salzman Residence
Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-
locking rooms. Cherry cabinets and slate

109. Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Point
Size
&
Leading
Residences
Salzman Residence
Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-
locking rooms. Cherry cabinets and slate
Effec%ve Not
Effec%ve
Residences
Salzman Residence
Highland Park, Illinois
Oversize doors, simply detailed cabinets,
composed to create a serene series of inter-
locking rooms. Cherry cabinets and slate

110. Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Line
Length
&
Jus6fica6on
•
8–16
words
per
line
for
comfort
•
Jus6fy
on
the
leT
margin
•
Allow
for
white
space
around
text

111. too
long

112. Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Line
Length
&
Jus6fica6on
not
long
enough
Salzman Residence
Highland Park, Illinois
Oversize doors, simply
detailed cabinets,
reconfigured ceilings
and new lighting are
composed to create a
serene series of
interlocking rooms.
Cherry cabinets and
slate counters bring each

113. Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Line
Length
&
Jus6fica6on
effec6ve
length
Partnerships in Health aims to improve the health and well-being of
vulnerable individuals, children and families by integrating legal assistance
into the medical setting. We address social determinants of health and
seek to eliminate barriers to healthcare in order to help people meet their
basic needs and to help them stay healthy. Not every illness has a biological
remedy. A family forced to choose between food and heat in the winter
months cannot be treated with a prescription or a vaccination. Similarly,
an asthmatic person will never breathe symptom free—no matter how
much medication is administered—if he or she returns from the doctor’s
office to mold-infested housing, as thousands do.

116. Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Line
Length
&
Jus6fica6on
•
Always
use
leT-­‐jus6fied
text
for
the
web
•
Centered
and
right-­‐jus6fied
text
blocks
are
difficult
to
read

118. -
-
-
-
-
-
-
-
-
-

119. -
-
-
-
-
-
-
-
-
-

120. Centered, Ragged Left and Right
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia
nestotatio moluptur, consequia venis dis quidem volorro optassu ntia
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia

121. Centered, Ragged Left and Right
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia
nestotatio moluptur, consequia venis dis quidem volorro optassu ntia
Ad eum, sequid quo berspiciis esenim cusdaerion nim remquam con-
sectaque plibusam re volorio dolore, si coriand iciliquas sae est au-
tatatibus, occaborenis atume verecereped quiae pero berchit est mo-
luptatis mintios ex et ommo bea consera coreictet, occum volut a quat
adit aut eatibus re dolorro est, quam que pero explign atempor eseris
eum qui doloressequi quas ipsapeliquid quiatum el iusam, qui aut alis
dolest alit quos exeruntur molorrum quae res aut qui blabori cus, ul-
labo. Ita et labo. Henisita idipsap eribus re vendis accab is pe sit ex-
cea delessequae porae laborporro odiae nesto magnam, cuscipsundi
quaturi tassum siment voluptaque corehenet atiatem poreria nam
inctate magnist iorepedis et mil incidebit apedipitate magnatior alia

122. -
-
-
-
-
-
-
-
-
-

123. -
-
-
-
-
-
-
-
-
-

124. Graphic
Design
Elements
Type
//
Typeface
Choices
Graphic
Design
Elements
Typography
•
To
help
maintain
consistency,
create
a
wrifen
style
guide
ahead
of
6me
that
defines
fonts,
6tles,
sub-­‐6tles,
and
paragraphs
Sugges6on

125. Graphic
Design
Elements
Grids
Grids
•
Organize
iden6ty,
naviga6on
and
content
•
Create
consistency
and
hierarchy
•
Are
a
necessary
element
for
any
website

127. TheGridSystem.org

128. Graphic
Design
Elements
Type
//
Typeface
Choices
Graphic
Design
Elements
Naviga6on
Common
Issues:
•
Losing
Your
Place
•
Images/Words
too
Small
to
Click
•
Difficult
to
Read
or
Find

131. Larger text
would be
more
effective
Nice color
system
helps with
navigation
Effective
font size
and leading
Larger text
would be
more
effective

136. Graphic
Design
Elements
Type
//
Typeface
Choices
Graphic
Design
Elements
Color
•
A
key
component
of
usability
•
Almost
10
percent
of
male
readers
have
trouble
dis6nguishing
shades
of
red
from
shades
of
green
•
The
most
common
issue
with
color
is
not
enough
contrast

137. Effective Contrast
More Effective Contrast
Less Effective Contrast

138. The optimal
combination for
legibility is black
on white

139. White text on
black is almost as
good for legibility

140. Attention
• Reverse text helps to call out
important information

141. Light Colors
Dark Colors
Hue:
basic color
categories

142. Light Colors
Dark Colors
Effective
Effective
Aries Arditi, PhD

143. Light Colors
Dark Colors
Not Effective
Effective
Effective
Not Effective
Aries Arditi, PhD

144. Graphic
Design
Elements
Images
Common
Issues:
•
Images
Behind
Text

145. Not
Effec6ve

146. Not
Effec6ve

148. Graphic
Design
Elements
Type
//
Typeface
Choices
Graphic
Design
Elements
Mobile
Device
Considera1ons
•
Space-­‐Efficient
Type
•
Plain
Backgrounds
•
Le>-­‐Aligned
Text
•
Clear
Touch
targets

149. Increase
the
size
and
margin
for
bu4ons
and
calls-­‐to-­‐ac7on.
Source:
h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness
Not
Effec)ve Effec)ve

150. Ensure
links
and
calls-­‐to-­‐ac7on
look
tap-­‐able
without
hover
states.
Source:
h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness
Not
Effec)ve Effec)ve

151. Increase
font
sizes
for
legibility.
Source:
h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness
Not
Effec)ve Effec)ve

152. Increase
padding
around
naviga7on
menu
items.
Source:
h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness
Not
Effec)ve Effec)ve

153. Increase
margins
on
pages
and
content
blocks.
Source:
h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness
Not
Effec)ve Effec)ve

154. Increase
form
field
size
and
spacing.
Source:
h+p://uxmag.com/ar2cles/the-­‐pursuit-­‐of-­‐tappiness
Not
EffecCve EffecCve

155. Design for Accessibility
A national project leading to a new digital resource on
accessibility and universal design in cultural
environments
In cooperation with the Institute for Human Centered
Design
Coming your way in fall 2013!

156. An international nonprofit based in Boston dedicated
to enhancing the experiences of people of all ages and
abilities through excellence in design.
Thank you!
Come visit us
at Booth #1024