The User-Friendly Website

www.HumanCenteredDesign.org

November 18, 2009Build 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.

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/tty617.482.8099 fax

200 Portland Street, Boston, MA 02114www.HumanCenteredDesign.org

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 ProjectsNew England Americans with Disabilities Act (ADA) Center,

1.800.949.4232 voice/tty

National Endowment for the ArtsUniversal Design

Case Study Projectwww.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 SpitzLisa'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

Visual Dexterity Hearing Cognitive Speech

Difficulties and Impairments Among Working-Age Adults

Fifty Six SecondsThat 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/different?

• Vision: What quali8es do you hope to communicate?

• Success Criteria: How will you measure effec8veness?

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

h\p://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 find 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

• An interdependent system of elements for an audience of varied abili6es

• A set of ‘guidelines’ rather than strict rules

• Typography

• Grid

• Naviga6on

• Color

• Images

Most common issues within these areas:

• 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

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

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

H , s ffi s.

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

Residences

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.

• Point Size & Leading (Line Spacing)

• Line Length & Jus6fica6on

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

point size too small

Body Text12/16 Verdana

Title13/20 Verdana Bold

16 pt.

12 pt.

increased 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

Effec%ve Not Effec%ve

Residences

Salzman Residence

Highland Park, Illinois

composed to create a serene series of inter-

locking rooms. Cherry cabinets and slate

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

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.

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.

effec6ve length

effec6ve length, not enough contrast

• 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

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

point size/leadingrela%onship

Effec6ve

hierarchy

Effec%ve

white space

white spacele9 jus%fied

contrast

Effec%ve

Effec%ve More Effec%ve

Typography

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

Sugges6on

• Organize iden6ty, naviga6on and content

• Create consistency and hierarchy

• Are a necessary element for any website

TheGridSystem.org

960 Grid960.gs

Naviga6on

Common Issues:

• Losing Your Place

• Images/Words too Small to Click

• Difficult to Read or Find

Where am I?

• 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

Aries Arditi, PhD

Light Colors

Dark Colors

Not Effective

Effective

Not Effective

Aries Arditi, PhD

Effec%ve Range of Hues

Images

Common Issues:

• Images Behind Text

Not Effec6ve

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 briefly 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 flashes

• Make sure flash 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: h\p://juicystudio.com/services/luminositycontrastra8o.php

• View website under color blindness condi?ons: h\p://colorfilter.wickline.org/

• Check images for Alt Tags: h\p://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.– h\p://www.google.com/analy8cs

Text // Font ChoicesCollect Data // Heat Maps

• 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

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

Design

Transcript of The User-Friendly Website

10 Steps to a User-Friendly Library Website

The User Friendly Website. Presented at Build Boston, Boston MA, November 2010

User-Friendly Fuzzy FCA

Make your website more user friendly (UX)

DEVELOPMENT OF A USER-FRIENDLY SHUTTLECOCK COLLECTOR MACHINEeprints.utem.edu.my/16319/1/Development Of A User-Friendly... · development of a user-friendly shuttlecock collector machine

User Friendly & Compact

3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile Friendly)

10 WEBSITE OPTIMIZATIONS classical MUSICIANS SHOULD DO ... · 10 website optimizations classical musicians should do right now - musicbrandiing.com You want your site to be user-friendly.

User Friendly Facebook

User Friendly

Web Design Kitchener/Waterloo - Website Development, Mobile Friendly Website, E-Commerce Website

Website Resource Guide EHDI Website Step 2 Decide which ... · A contemporary, user-friendly design encourages people to: • Use and return to your website • Remember your organization

Angels Perez creative · website strategy user-friendly platform custom web graphics responsive design seo friendly blog set up ecommerce set up personalized tutorial includes “Angels

Get Well Designed and User Friendly Website

User Friendly Demonstration

Electronic Communications R1 Website Redesign. Create a Website Format based on the Layout of the IEEE Main Website Useful & User friendly for Sections,

User Friendly Demonstration PCA

Top Talent Friendly Website

Key Tips for Creating a user friendly E-commerce website

SEO-friendly website