Great design and usability, your website can have both.

Great design and usability, your website can have both.

www.HumanCenteredDesign.org

May 19, 2013 American Alliance of Museums Annual Meeting


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

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 www.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


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.


2011

2010 2009

IHCD Publishes a Book a Year


2012

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.


A little background on the need for accessible websites…

The legal precedence

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

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

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

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...

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 –

WC3/WAI – Taking it further

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

RtF – Taking it further

But legal precedence is still minimum compliance…

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 devices Vision 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


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



Cataracts: Age related cataracts are often yellow or brown causing loss of sensitivity to blue.



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.



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.



Color Blindness: Press the Green button to Start

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…

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

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…

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

Examples of common problems…

1. Color Usage

2. Font Size & Style

Poor legibility: Low contrast, condensed fonts and stylized font striping

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

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

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

Navigation is not intuitive, the back button doesn’t work once you are in the site

4. Lack of Intuitiveness

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

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.

You can make a difference

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”?

http://www.accessingsafety.org

http://www.accessingsafety.org

Poten5al website visitors include…


If you only include the middle...


But if you look to the outskirts...


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

http://www.nngroup.com/about/userexperience.html



Source: h?p://www.google.com/think/research-‐studies/the-‐new-‐mul2-‐screen-‐world-‐study.html

http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html



















Source: h?p://designtaco.com/?p=893



Crea5ng a posi5ve user experience for all users across all devices

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 Grouph?p://www.nngroup.com/about/userexperience.html

Crea=ng a Posi=ve User Experience





The User Experience Honeycomb

Crea=ng a Posi=ve User Experience

-‐ Source: User Experience Design by Peter Morvilleh?p://seman2cstudios.com/publica2ons/seman2cs/000029.php

http://semanticstudios.com/publications/semantics/000029.php




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)


DIY Methods

• Increase font sizes 200-‐300%


Text // Font ChoicesDIY Methods

• Use a color contrast checker h?p://juicystudio.com/services/luminositycontrastra2o.php

http://juicystudio.com/services/luminositycontrastratio.php

http://juicystudio.com/services/luminositycontrastratio.php



• View website under color blindness condi5ons h?p://colorfilter.wickline.org/

http://colorfilter.wickline.org/

http://colorfilter.wickline.org/



• Check images for Alt Tags h?p://wave.webaim.org

http://wave.webaim.org

http://wave.webaim.org


DIY Methods

• Test your website across placorms http://mattkersley.com/responsive/

http://mattkersley.com/responsive/







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?



• 5 second test h?p://fivesecondtest.com/

http://fivesecondtest.com

http://fivesecondtest.com



• Chalkmark h?p://www.op2malworkshop.com/chalkmark

http://www.optimalworkshop.com/chalkmark

http://www.optimalworkshop.com/chalkmark



• UserTes5ng h?p://www.usertes2ng.com/

http://www.usertesting.com

http://www.usertesting.com



• Track page views, bounce rates, average 5me on site, etc. h?p://www.google.com/analy2cs

http://www.google.com/analytics

http://www.google.com/analytics



• 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

http://www.crazyegg.com




http://www.labsmedia.com/clickheat




http://www.clickdensity.com






Approach for Redesigning Your Site

Process

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

Approach for redesigning your site

Text // Font ChoicesAudience / Personas

• Audiences = Who are you designing for?

– Individuals– Families– Schools– Poten2al employees– Funders


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


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?


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.


Text // Font ChoicesInforma5on Architecture

• Informa5on Architecture = Organiza5on and hierarchy of content

– Logical and consistent naming structure– Based on audience expecta2ons


Text // Font ChoicesInforma5on Architecture // Ways of Organizing

• By topic / category



• By audience



• By task


Text // Font ChoicesInforma5on Architecture // Sample Site Map


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


Text // Font ChoicesWireframes // Elements of a Webpage Wireframe

• Company logo

• Site Naviga5on• Page 5tle• Primary page content

• Related content• Copyright statements

• Contact informa5on


Text // Font ChoicesWireframes // Sample Wireframe Diagram

h<p://webstyleguide.com/wsg3/3-‐informa7on-‐architecture/4-‐presen7ng-‐informa7on.html

http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

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?

Website Planning Process

Text // Font ChoicesWireframes // Things to Consider

MOBILETABLET

Graphic Design Elements


• An interdependent system of elements for an audience of varied abili;es

• A set of ‘guidelines’ rather than strict rules

• Typography

• Grid

• Naviga;on

• Color

• Images


Graphic Design ElementsMost common issues:

• Font choice and size

• Contrast

• White Space

• Hierarchy

• Consistency


Type // Typeface Choices


Typography

• Establishes a visual hierarchy allowing informa6on to be read clearly

Good type

• Used consistently, builds user confidence




Typography

• Typeface Choices (fonts)

• Bodies of Text



SerifSans Serif



SerifSans Serif



Sans SerifVerdana Helvetica Trebuchet



SerifGeorgia Times New Roman Palatino



Upper and lower case letters are generally more legible than all uppercase letters.



UPPER AND LOWER CASE LETTERS ARE GENERALLY MORE LEGIBLE THAN ALL UPPERCASE LETTERS.



UPPER AND LOWER CASE LETTERS ARE GENERALLY MORE LEGIBLE THAN ALL UPPERCASE LETTERS.



Extra thin, extra black, italic, and condensed fonts are less legible unless used at larger sizes.












H , s ffi s.



ResidencesSalzman Residence Highland Park, IllinoisOversize 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.



ResidencesSalzman Residence Highland Park, IllinoisOversize 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.


• Point Size & Leading (Line Spacing)

• Line Length & Jus6fica6on

Type // Bodies of Text


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


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



Residences

Salzman Residence Highland Park, Illinois

Oversize doors, simply detailed cabinets, UHFRQ¿JXUHG�FHLOLQJV�DQG�QHZ�OLJKWLQJ�DUH�composed to create a serene series of inter-locking rooms. Cherry cabinets and slate FRXQWHUV�EULQJ�HDFK�VSDFH�WR�OLIH��RIIHULQJ�D�ZDUP�DQG�HQJDJLQJ�HQYLURQPHQW�

Effec%ve Not Effec%ve

Residences





Residences



Effec%ve Not Effec%ve

Residences

Salzman Residence

Highland Park, Illinois

Oversize doors, simply detailed cabinets,

UHFRQ¿JXUHG�FHLOLQJV�DQG�QHZ�OLJKWLQJ�DUH�

composed to create a serene series of inter-

locking rooms. Cherry cabinets and slate

FRXQWHUV�EULQJ�HDFK�VSDFH�WR�OLIH��RIIHULQJ�D�

ZDUP�DQG�HQJDJLQJ�HQYLURQPHQW�


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

too long



not long enough

Salzman Residence Highland Park, IllinoisOversize 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.



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.



• Always use leT-‐jus6fied text for the web

• Centered and right-‐jus6fied text blocks are difficult to read

/HIW�-XVWL¿HG��5DJJHG�5LJKW$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-WDWDWLEXV��RFFDERUHQLV�DWXPH�YHUHFHUHSHG�TXLDH�SHUR�EHUFKLW�HVW�PR-OXSWDWLV�PLQWLRV�H[�HW�RPPR�EHD�FRQVHUD�FRUHLFWHW��RFFXP�YROXW�D�TXDW�DGLW�DXW�HDWLEXV�UH�GRORUUR�HVW��TXDP�TXH�SHUR�H[SOLJQ�DWHPSRU�HVHULV�HXP�TXL�GRORUHVVHTXL�TXDV�LSVDSHOLTXLG�TXLDWXP�HO�LXVDP��TXL�DXW�DOLV�GROHVW�DOLW�TXRV�H[HUXQWXU�PRORUUXP�TXDH�UHV�DXW�TXL�EODERUL�FXV��XO-ODER��,WD�HW�ODER��+HQLVLWD�LGLSVDS�HULEXV�UH�YHQGLV�DFFDE�LV�SH�VLW�H[-FHD�GHOHVVHTXDH�SRUDH�ODERUSRUUR�RGLDH�QHVWR�PDJQDP��FXVFLSVXQGL�TXDWXUL�WDVVXP�VLPHQW�YROXSWDTXH�FRUHKHQHW�DWLDWHP�SRUHULD�QDP�LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD

$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-WDWDWLEXV��RFFDERUHQLV�DWXPH�YHUHFHUHSHG�TXLDH�SHUR�EHUFKLW�HVW�PR-OXSWDWLV�PLQWLRV�H[�HW�RPPR�EHD�FRQVHUD�FRUHLFWHW��RFFXP�YROXW�D�TXDW�DGLW�DXW�HDWLEXV�UH�GRORUUR�HVW��TXDP�TXH�SHUR�H[SOLJQ�DWHPSRU�HVHULV�HXP�TXL�GRORUHVVHTXL�TXDV�LSVDSHOLTXLG�TXLDWXP�HO�LXVDP��TXL�DXW�DOLV�GROHVW�DOLW�TXRV�H[HUXQWXU�PRORUUXP�TXDH�UHV�DXW�TXL�EODERUL�FXV��XO-ODER��,WD�HW�ODER��+HQLVLWD�LGLSVDS�HULEXV�UH�YHQGLV�DFFDE�LV�SH�VLW�H[-FHD�GHOHVVHTXDH�SRUDH�ODERUSRUUR�RGLDH�QHVWR�PDJQDP��FXVFLSVXQGL�TXDWXUL�WDVVXP�VLPHQW�YROXSWDTXH�FRUHKHQHW�DWLDWHP�SRUHULD�QDP�LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD-WXU��VH�VXP�QRQVHTXL�EODWXU

/HIW�-XVWL¿HG��5DJJHG�5LJKW$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-WDWDWLEXV��RFFDERUHQLV�DWXPH�YHUHFHUHSHG�TXLDH�SHUR�EHUFKLW�HVW�PR-OXSWDWLV�PLQWLRV�H[�HW�RPPR�EHD�FRQVHUD�FRUHLFWHW��RFFXP�YROXW�D�TXDW�DGLW�DXW�HDWLEXV�UH�GRORUUR�HVW��TXDP�TXH�SHUR�H[SOLJQ�DWHPSRU�HVHULV�HXP�TXL�GRORUHVVHTXL�TXDV�LSVDSHOLTXLG�TXLDWXP�HO�LXVDP��TXL�DXW�DOLV�GROHVW�DOLW�TXRV�H[HUXQWXU�PRORUUXP�TXDH�UHV�DXW�TXL�EODERUL�FXV��XO-ODER��,WD�HW�ODER��+HQLVLWD�LGLSVDS�HULEXV�UH�YHQGLV�DFFDE�LV�SH�VLW�H[-FHD�GHOHVVHTXDH�SRUDH�ODERUSRUUR�RGLDH�QHVWR�PDJQDP��FXVFLSVXQGL�TXDWXUL�WDVVXP�VLPHQW�YROXSWDTXH�FRUHKHQHW�DWLDWHP�SRUHULD�QDP�LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD

$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-WDWDWLEXV��RFFDERUHQLV�DWXPH�YHUHFHUHSHG�TXLDH�SHUR�EHUFKLW�HVW�PR-OXSWDWLV�PLQWLRV�H[�HW�RPPR�EHD�FRQVHUD�FRUHLFWHW��RFFXP�YROXW�D�TXDW�DGLW�DXW�HDWLEXV�UH�GRORUUR�HVW��TXDP�TXH�SHUR�H[SOLJQ�DWHPSRU�HVHULV�HXP�TXL�GRORUHVVHTXL�TXDV�LSVDSHOLTXLG�TXLDWXP�HO�LXVDP��TXL�DXW�DOLV�GROHVW�DOLW�TXRV�H[HUXQWXU�PRORUUXP�TXDH�UHV�DXW�TXL�EODERUL�FXV��XO-ODER��,WD�HW�ODER��+HQLVLWD�LGLSVDS�HULEXV�UH�YHQGLV�DFFDE�LV�SH�VLW�H[-FHD�GHOHVVHTXDH�SRUDH�ODERUSRUUR�RGLDH�QHVWR�PDJQDP��FXVFLSVXQGL�TXDWXUL�WDVVXP�VLPHQW�YROXSWDTXH�FRUHKHQHW�DWLDWHP�SRUHULD�QDP�LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD-WXU��VH�VXP�QRQVHTXL�EODWXU

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












nestotatio moluptur, consequia venis dis quidem volorro optassu ntia-

tur, se sum nonsequi blatur

Centered, Ragged Left and Right












nestotatio moluptur, consequia venis dis quidem volorro optassu ntia












nestotatio moluptur, consequia venis dis quidem volorro optassu ntia-

tur, se sum nonsequi blatur

5LJKW�-XVWL¿HG��5DJJHG�/HIW$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-

WDWDWLEXV��RFFDERUHQLV�DWXPH�YHUHFHUHSHG�TXLDH�SHUR�EHUFKLW�HVW�PR-OXSWDWLV�PLQWLRV�H[�HW�RPPR�EHD�FRQVHUD�FRUHLFWHW��RFFXP�YROXW�D�TXDW�DGLW�DXW�HDWLEXV�UH�GRORUUR�HVW��TXDP�TXH�SHUR�H[SOLJQ�DWHPSRU�HVHULV�HXP�TXL�GRORUHVVHTXL�TXDV�LSVDSHOLTXLG�TXLDWXP�HO�LXVDP��TXL�DXW�DOLV�GROHVW�DOLW�TXRV�H[HUXQWXU�PRORUUXP�TXDH�UHV�DXW�TXL�EODERUL�FXV��XO-ODER��,WD�HW�ODER��+HQLVLWD�LGLSVDS�HULEXV�UH�YHQGLV�DFFDE�LV�SH�VLW�H[-FHD�GHOHVVHTXDH�SRUDH�ODERUSRUUR�RGLDH�QHVWR�PDJQDP��FXVFLSVXQGL�TXDWXUL�WDVVXP�VLPHQW�YROXSWDTXH�FRUHKHQHW�DWLDWHP�SRUHULD�QDP�

LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD

$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-


LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD-

WXU��VH�VXP�QRQVHTXL�EODWXU

5LJKW�-XVWL¿HG��5DJJHG�/HIW$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-


LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD

$G�HXP��VHTXLG�TXR�EHUVSLFLLV�HVHQLP�FXVGDHULRQ�QLP�UHPTXDP�FRQ-VHFWDTXH�SOLEXVDP�UH�YRORULR�GRORUH��VL�FRULDQG�LFLOLTXDV�VDH�HVW�DX-


LQFWDWH�PDJQLVW�LRUHSHGLV�HW�PLO�LQFLGHELW�DSHGLSLWDWH�PDJQDWLRU�DOLD�QHVWRWDWLR�PROXSWXU��FRQVHTXLD�YHQLV�GLV�TXLGHP�YRORUUR�RSWDVVX�QWLD-

WXU��VH�VXP�QRQVHTXL�EODWXU




Typography

• To help maintain consistency, create a wrifen style guide ahead of 6me that defines fonts, 6tles, sub-‐6tles, and paragraphs

Sugges6on


Grids

Grids

• Organize iden6ty, naviga6on and content

• Create consistency and hierarchy

• Are a necessary element for any website

TheGridSystem.org




Naviga6on

Common Issues:

• Losing Your Place

• Images/Words too Small to Click

• Difficult to Read or Find

Larger text would be more effective

Nice color system helps with navigation

Effective font size and leading

Larger text would be more effective




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 colorcategories

Light Colors

Dark Colors

Effective

Effective

Aries Arditi, PhD

Light Colors

Dark Colors

Not Effective

Effective

Effective

Not Effective

Aries Arditi, PhD


Images

Common Issues:

• Images Behind Text

Not Effec6ve

Not Effec6ve




Mobile Device Considera1ons

• Space-‐Efficient Type

• Plain Backgrounds

• Le>-‐Aligned Text

• Clear Touch targets

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

http://uxmag.com/articles/the-pursuit-of-tappiness







Ensure links and calls-‐to-‐ac7on look tap-‐able without hover states.










Increase font sizes for legibility.










Increase padding around naviga7on menu items.










Increase margins on pages and content blocks.










Increase form field size and spacing.


Not EffecCve EffecCve








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!

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

Date post:	24-Jan-2015
Category:	Design
Upload:	lisa-spitz-design
View:	73 times
Download:	1 times