The User-Friendly Website

The User-Friendly
Website
www.HumanCenteredDesign.org
November 18, 2009
Build Boston

The Boston Society of Architects/AIA is a Registered Provider with The
American Institute of Architects Continuing Education Systems. Credit
earned on completion of this program will be reported to CES Records for
AIA members. Certificates of Completion for non-AIA members are
available on request.
This program is registered with the AIA/CES for continuing professional
education. As such, it does not include content that may be deemed or
construed to be an approval or endorsement by the AIA of any material of
construction or any method or manner of handling, using, distributing, or
dealing in any material or product. Questions related to specific
materials, methods, and services will be addressed at the conclusion of
this presentation.
Welcome

This presentation is protected by US and International Copyright laws.
Reproduction, distribution, display and use of the presentation without
written permission of the speaker is prohibited.
© Institute for Human Centered Design, 2010
Copyright Materials

Session Objectives
• Identify current concerns that drive the need
for user-friendly websites
• Explore how a clear design process and good
organization can make navigation easier
• Learn graphic design basics that will increase
the legibility of your website
• See clear examples of what works
• Learn about resources that will help make your
website more user-friendly

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

617.695.1225 voice/tty
617.482.8099 fax
200 Portland Street, Boston, MA 02114
Public Programming
- Retail store www.IHCDstore.org
- Showroom and exhibits
- Public library
- Lectures, events & conference and meeting space
- Membership
IHCD Studio (see our website for more detail)
- Full spectrum of design services
- Expert consultation on social sustainability
- Participatory planning and design
- Plan review
- Site review
- Accessibility & inclusive design audit
- Product review through analysis and/or focus groups
Funded Projects
New England Americans with
Disabilities Act (ADA) Center,
1.800.949.4232 voice/tty
National Endowment for the Arts
Universal Design
Case Study Project
www.UDcasestudies.org

Presenters
• Stephanie Grey
Stephanie's creative solutions have been implemented through websites,
printed materials, and environmental graphic design for a wide range of clients.
She has lived and worked abroad, gaining an international perspective on
design, and developing an understanding of communication solutions that
meet the needs of diverse cultures. Recently, Stephanie joined the Graphic
Design faculty at Framingham State University.
• Lisa Spitz
Lisa's experience spans the corporate and nonprofit worlds. Her work includes
usability evaluation; interface design; original identity, logo, and web design.
Presently she is Director of Design for CAST, responsible for planning and
supervising the design of universally designed learning environments, public
facing websites, and organizational print collateral.
• Gabriela Sims,
Moderator, Institute for Human Centered Design

Vision limitations in the US
 More than 169 million people in the US – 55%
of the population wear vision correction. U.S. Census
• Presbyopia – a term coming from a Greek word that means
“an old man” is the condition that causes people in their
middle age to be reliant upon reading glasses to see up
close.
• Of the 169 million who wear vision correction, more than 63
million – 53% up to the age of 64 are presbyopic
 Light is critical as you age
• We require 2x more light at 60 than at 40
 There are 1.3 million legally blind people in US
Lisa Spitz // lspitz@cast.org // lisa@lisaspitz-design.com

Brain-based limitations rising…
 Brain-based conditions 84% of all Special
Education students (US DoE, 2006-07)
 One in four US adults suffers from a diagnosable
mental disorder in any given year
 1.4 M Americans experience a Traumatic Brain
Injury (TBI) each year
 13% (5.3M) of Americans over 65 have
Alzheimer’s Disease, projected to double every
20 years

Activity limitation
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

Fifty Six Seconds
That is all the time a person will spend
watching your loading animation, clicking
through your site, reading your copy and
making a decision if it’s worthy of a return
visit or further exploration. Source: Nielsen Online

Examples: the not so good
but could be…

Home Page: Light text, with an added shadow, on a light background is difficult to read

The back button doesn’t work once you are in the site
The text is difficult to read on almost every page.

Organizationally we jump to a left side column
The text is too small but a nice feature if colors were changed and the text enlarged

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

The image changes each time you enter their site I’m just not sure these images
deliver the best message. Nice shots but maybe better in another location.
Home Page

The wood is a very nice idea, however a darker wood would do
the trick along with a bit larger text for the paragraph

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

This feature
could be
made more
apparent

Lisa Spitz // lspitz@cast.org // lisa@lisaspitz‐design.com
Website Planning Process

• Goals & Objec?ves
• Audiences / Personas
• Content Inventory
• Informa?on Architecture
• Wireframes

Web ~ Architecture
Audiences / Personas ~ Client
Content Inventory ~ Programming
Informa8on Architecture ~ Site Planning
Wireframes ~ Schema8c Design

Text // Font ChoicesGoals & Objec?ves
• Intent: How will your website expand your business?
• Present vs. Future State: How will it change over 8me?
• Compe?tors: How are you unique/diﬀerent?
• Vision: What quali8es do you hope to communicate?
• Success Criteria: How will you measure eﬀec8veness?

Text // Font ChoicesAudience / Personas
• Audiences = Who are you designing for?
– Home owners
– Businesses (domes8c & interna8onal)
– Realtors, Developers, Builders

Text // Font ChoicesAudience / Personas
• Personas = Stories about your audiences goals & behaviors
– Age, Gender, Marital Status
– Living situa8on & loca8on
– Educa8on &/or Employment
– Interests and Ac8vi8es
– Reasons for visi8ng your site
– Impression you want to make
– Ac8ons they are hoping to take

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

Text // Font ChoicesInforma?on Architecture
• Informa?on Architecture = Organiza?on and hierarchy
of content
– Logical and consistent naming structure
– Based on audience expecta8ons

Text // Font ChoicesInforma?on Architecture // Ways of Organizing
• By topic / category

• By audience

• By task

Text // Font ChoicesInforma?on Architecture // Sample Site Map

Text // Font ChoicesWireframes
• Wireframes = S?ck ﬁgure layout for par?cular pages
– Important for making decisions
– Where things go, not what they look like
– Ways of naviga8ng
– Hierarchy of content

Text // Font ChoicesWireframes // Elements of a Webpage Wireframe
• Company logo
• Site Naviga?on
• Page ?tle
• Primary page content
• Related content
• Copyright statements
• Contact informa?on

Text // Font ChoicesWireframes // Sample Wireframe Diagram
hp://webstyleguide.com/wsg3/3‐informa8on‐architecture/4‐presen8ng‐informa8on.html

Text // Font ChoicesWireframes // Things to Consider
• Naviga?on
– Are naviga8onal elements consistently placed on each page?
– Have I provided mul8ple pathways through the content?
– Will each of my audiences be able to ﬁnd what they are looking for?

Text // Font ChoicesWireframes // Things to Consider
• Hierarchy and Organiza?on
– Are most important things given the space they require?
– Is there a logical reading order?
– Is there enough space surrounding each element or is it crowded?

Text // Font ChoicesWireframes // Sample Wireframe Diagram

Graphic
Design
Elements

Graphic
Design
Elements
•
An
interdependent
system

of
elements
for
an
audience

of
varied
abili6es
•
A
set
of
‘guidelines’
rather

than
strict
rules

•
Typography
•
Grid
•
Naviga6on
•
Color
•
Images
Graphic
Design
Elements

Graphic
Design
Elements
Most
common
issues

within
these
areas:
•
Contrast
•
White
Space
•
Hierarchy
•
Consistency

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
conﬁdence

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

Graphic
Design
Elements
Type
//
Typeface
Choices
Serif
Sans Serif

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

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

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

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

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

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

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

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

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.

Graphic
Design
Elements
Type
//
Typeface
Choices
Residences
Salzman Residence
reconﬁgured 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.

Graphic
Design
Elements
•
Point
Size
&
Leading
(Line
Spacing)
•
Line
Length
&
Jus6ﬁca6on
Type
//
Bodies
of
Text

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

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

point
size
too
small

Body
Text
12/16
Verdana
Title
13/20
Verdana
Bold

16
pt.
12
pt.
increased
leading

Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Point
Size
&
Leading
Residences
Salzman Residence
composed to create a serene series of inter-
locking rooms. Cherry cabinets and slate
Eﬀec%ve Not
Eﬀec%ve
Residences
Salzman Residence
composed to create a serene series of inter-
locking rooms. Cherry cabinets and slate

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

Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Line
Length
&
Jus6ﬁca6on
not
long
enough
Salzman Residence
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

Graphic
Design
Elements
Type
//
Bodies
of
Text
//
Line
Length
&
Jus6ﬁca6on
eﬀec6ve
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.

eﬀec6ve
length
eﬀec6ve
length,
not
enough
contrast

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

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

point
size/
leading
rela%onship
Eﬀec6ve

Eﬀec%ve
white
space
white
space
le9
jus%ﬁed

Graphic
Design
Elements
Type
//
Typeface
Choices
Graphic
Design
Elements
Typography
•
To
help
maintain
consistency,

create
a
wrifen
style
guide

ahead
of
6me
that
deﬁnes

fonts,
6tles,
sub-‐6tles,
and

paragraphs
Sugges6on

Graphic
Design
Elements
Grids
Grids
•
Organize
iden6ty,

naviga6on
and
content
•
Create
consistency

and
hierarchy
•
Are
a
necessary

element
for
any
website

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

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

Effective Contrast
More Effective Contrast
Less Effective Contrast

The optimal
combination for
legibility is black
on white

White text on
black is almost as
good for legibility

Attention
• Reverse text helps to call out
important information

Light Colors
Dark Colors
Hue:
basic color
categories

Light Colors
Dark Colors
Effective
Effective
Aries Arditi, PhD

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

Eﬀec%ve
Range
of
Hues

Graphic
Design
Elements
Images
Common
Issues:
•
Images
Behind
Text

Resources
Web
Style
Guide
(Yale)
WebStyleGuide.com

Tips for Implementa?on

• Naviga?on
• Images
• Mul?media
• Flash

Text // Font ChoicesNaviga?on
• Don’t do anything that would disable browser controls

Text // Font ChoicesImages
• Use ALT text to communicate the content and purpose of
    a graphic <alt=“insert your text here”>
• Use Null ALT text for images that are purely decora?ve
    <alt=“”>
• For images that can not be described brieﬂy with alt text,
   provide a long descrip?on

Text // Font ChoicesMul?media
• Limit background noise in audio and video files
• Provide text alterna?ves for audio and video files
   (e.g. transcripts for audio files, cap?ons for videos)
• Allow control over play, pause, stop, mute, and volume
   for all audio and video files

Text // Font ChoicesFlash
• Avoid content that moves, blinks, or ﬂashes
• Make sure ﬂash does not interfere with screen reader, audio
   or keyboard commands
• Either use NO ?me sensi?ve content or allow users to
   manipulate or control it
• Allow font sizes to be enlarged or reduced
• Provide text equivalents for all non text elements that
   convey meaning

Tools for Assessing Your Site

• Ask Key Ques?ons
• Evaluate Your Work
• Collect Data
• Ask an Objec?ve Outsider

Text // Font ChoicesAsk Key Ques?ons
• 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?

Text // Font ChoicesEvaluate Your Work
• Purpose = Iden?fy poten?al usability issues for individuals
with vision and brain‐based limita?ons

Text // Font ChoicesEvaluate Your Work // Vision Limita?ons
• Increase font sizes 200‐300%

• Use a color contrast checker:
hp://juicystudio.com/services/luminositycontrastra8o.php

• View website under color blindness condi?ons:
hp://colorﬁlter.wickline.org/

• Check images for Alt Tags:
hp://wave.webaim.org

Text // Font ChoicesEvaluate Your Work // Brain‐Based Limita?ons
• Read content for a 6‐9th grade reading level
• Step back and squint at the website
• Look for mul?ple ways of naviga?ng
• Check that naviga?on is in same loca?on on all pages
• Check that current loca?on is clearly marked
• Look for consistent font styles and easy to read line lengths
• Read links to see if they make sense out of context

Text // Font ChoicesCollect Data
• Purpose = Get the most informa?on about how people use
your website with site sta?s?cs and heat maps

Text // Font ChoicesCollect Data // Site Sta?s?cs
• Track page views, bounce rates, average ?me on site, etc.
– hp://www.google.com/analy8cs

Text // Font ChoicesCollect Data // Heat Maps
• See where most people look/click on your website
– hp://www.crazyegg.com
– hp://www.labsmedia.com/clickheat
– hp://www.clickdensity.com

Text // Font ChoicesAsk an Objec?ve Outsider
• Purpose = Get an objec?ve view of your website
– Ask someone who has not been involved in your design process.
– The most valuable feedback will come from your ‘audience’.

The User-Friendly Website

Recommended

Recommended

More Related Content

Similar to The User-Friendly Website

Similar to The User-Friendly Website (20)

Recently uploaded

Recently uploaded (20)

The User-Friendly Website