usability and accessibility considerations in web design · usability and accessibility...

Usability and Accessibility Usability and Accessibility

Considerations in Web Considerations in Web

DesignDesignICIT MidICIT Mid--Year ConferenceYear Conference

June 7, 2007June 7, 2007

Matt Emerson, Story CountyMatt Emerson, Story County

[email protected]@storycounty.com

Welcome!Welcome!

�� Who are you?Who are you?

�� Matt EmersonMatt Emerson�� Webmaster, Story County, IowaWebmaster, Story County, Iowa

�� Researching Usability for our website redesign in Researching Usability for our website redesign in the coming yearthe coming year

�� I am a new usability student not a masterI am a new usability student not a master

�� Introducing Web TopicsIntroducing Web Topics

�� Topics focusing on web technologies, policies Topics focusing on web technologies, policies and designand design

�� First of hopefully many to comeFirst of hopefully many to come

On the AgendaOn the Agenda

�� What is usability?What is usability?

�� What is accessibility?What is accessibility?

�� Why are they conjoined in web design theory?Why are they conjoined in web design theory?

�� Section 508, and why you should go beyond changes for visual impSection 508, and why you should go beyond changes for visual impairmentsairments

�� Meeting your marketMeeting your market

�� How to evaluate your current siteHow to evaluate your current site

�� How people really use web pagesHow people really use web pages

�� Writing for the webWriting for the web

�� Designing for Usability and AccessibilityDesigning for Usability and Accessibility

�� Key tips for designing an organizational style guideKey tips for designing an organizational style guide

�� HomepagesHomepages……gone in 30 seconds!gone in 30 seconds!

�� Structuring your informationStructuring your information

�� Key TipsKey Tips

�� TestingTesting

�� References, ResourcesReferences, Resources

�� Q&A timeQ&A time

Why are we here?Why are we here?

�� We are here to discuss in a general, overview We are here to discuss in a general, overview

style:style:

�� UsabilityUsability

�� Cognitive processes that people use to interact with Cognitive processes that people use to interact with

appliances, cars, tools or in our case web pagesappliances, cars, tools or in our case web pages

�� AccessibilityAccessibility

�� Overcoming limitations to reach your widest audienceOvercoming limitations to reach your widest audience

�� Technical: Browsers, platforms, bandwidthTechnical: Browsers, platforms, bandwidth

�� User Impairments:User Impairments:

�� Blindness, limited eyesight, color blindnessBlindness, limited eyesight, color blindness

�� Cognitive impairments, literacy, mental impairmentsCognitive impairments, literacy, mental impairments

Usability vs. Accessibility or Usability vs. Accessibility or

Usability/Accessibility?Usability/Accessibility?�� Classified as two topics, but are really two sides Classified as two topics, but are really two sides

of the same coinof the same coin�� Pages have to be accessible to be usablePages have to be accessible to be usable

�� Usable pages increase your market to reach the Usable pages increase your market to reach the widest audience extending your accesswidest audience extending your access

�� ““BuzzBuzz”” of Section 508of Section 508�� Section 508Section 508

�� Amendment to Rehabilitation Act of 1973Amendment to Rehabilitation Act of 1973

�� Mandates that all electronic information disseminated or Mandates that all electronic information disseminated or produced by the Federal Government must be accessible by produced by the Federal Government must be accessible by disabled Federal Employees and the Publicdisabled Federal Employees and the Public

Section 508Section 508

�� Software, MultiSoftware, Multi--Media, Communications, Computers and Media, Communications, Computers and the Webthe Web

�� Applicable to Federal AgenciesApplicable to Federal Agencies�� Foggy if it applies to federally funded agenciesFoggy if it applies to federally funded agencies

�� In web community heaviest consideration and discussion In web community heaviest consideration and discussion given to compliance in the areas of:given to compliance in the areas of:�� Screen Reader compatibilityScreen Reader compatibility

�� ALT IMG Tags for graphics, LABELS, Frame Removal, avoid color ALT IMG Tags for graphics, LABELS, Frame Removal, avoid color to convey meaningto convey meaning

�� Endorsement of CSS (Cascading Style Sheets)Endorsement of CSS (Cascading Style Sheets)

�� Heavy emphasis on design changes for people with visual Heavy emphasis on design changes for people with visual impairmentsimpairments

Go beyond 508; visual disabilitiesGo beyond 508; visual disabilities

�� 508 put the usability/accessibility foot in 508 put the usability/accessibility foot in

the doorthe door

�� Following 508 guidelines may make you in Following 508 guidelines may make you in

compliance, but it woncompliance, but it won’’t address several t address several

other large issues like:other large issues like:�� AgeAge

�� EducationEducation

�� Reading LevelReading Level

�� Economic BackgroundEconomic Background

A part of a larger, plan: meeting A part of a larger, plan: meeting

your users needsyour users needs�� Form a teamForm a team

�� Key decision makersKey decision makers

�� TechiesTechies

�� Most importantly involve your users in some Most importantly involve your users in some capacitycapacity

�� Learn about your usersLearn about your users�� View your web users as View your web users as ““customerscustomers”” who are who are

““buyingbuying”” your information with their timeyour information with their time

�� Who are you trying to attract to your site?Who are you trying to attract to your site?�� List those groups of peopleList those groups of people

�� What are their needs for information?What are their needs for information?

�� What are their expectations from your site?What are their expectations from your site?

�� How do they think about, group, and organize How do they think about, group, and organize information?information?

�� Is it different than your actual organizational Is it different than your actual organizational structure?structure?

�� What is their level of familiarity with the Web?What is their level of familiarity with the Web?

What are the key objectives of What are the key objectives of

your website?your website?�� Reduce counter traffic, parking, foot traffic?Reduce counter traffic, parking, foot traffic?

�� Extend Service, engage the public?Extend Service, engage the public?

�� Access to rapidly changing information?Access to rapidly changing information?

�� To conserve resources?To conserve resources?

�� These questions are key to develop metrics These questions are key to develop metrics

for measuring successfor measuring success

Evaluating your Current SiteEvaluating your Current Site�� Evaluating your current web pageEvaluating your current web page

�� Review eReview e--mails or frequent questionsmails or frequent questions

�� Evaluate your web logs to see how visitors Evaluate your web logs to see how visitors are using your siteare using your site

�� Conduct a surveyConduct a survey

�� Conduct a usability test (details later) to Conduct a usability test (details later) to generalize user behaviorgeneralize user behavior

�� Determine how users interact with Determine how users interact with specialized information for your sitespecialized information for your site

�� Does your page currently employ standard Does your page currently employ standard web conventions and guidelines? Should it?web conventions and guidelines? Should it?�� Logo and company name in upper left Logo and company name in upper left

corner?corner?

�� Direct Link to Home Page?Direct Link to Home Page?

�� Search function?Search function?

�� Navigation pane?Navigation pane?

How people really use web pagesHow people really use web pages

�� Most literate web users donMost literate web users don’’t read web pages, t read web pages, they scan in an they scan in an ““FF”” shaped patternshaped pattern�� Not like a book or newspaper; in order start to finishNot like a book or newspaper; in order start to finish

�� Read in a hurryRead in a hurry

�� Cherry Pick & Get to the factsCherry Pick & Get to the facts

�� Focus on headlines, bolded main points which serve Focus on headlines, bolded main points which serve as cuesas cues

�� Rarely read everythingRarely read everything

�� Zone in on graphics and copy that covey meaning in Zone in on graphics and copy that covey meaning in the same context of what they are looking forthe same context of what they are looking for

�� Billboards of informationBillboards of information

How people really use web pagesHow people really use web pages

Heat maps from eye tracking studiesHeat maps from eye tracking studies

*F*F--shaped Pattern for Reading Web Contentshaped Pattern for Reading Web Content

Jakob NielsenJakob Nielsen’’s Alertbox s Alertbox -- http://www.useit.com/alertbox/reading_pattern.htmlhttp://www.useit.com/alertbox/reading_pattern.html

Writing for the webWriting for the web

�� Who is your audience?Who is your audience?

�� Government is rife with institutional speak, Government is rife with institutional speak, acronyms, or slogans avoid or explain (TPS acronyms, or slogans avoid or explain (TPS Reports?)Reports?)

�� Use a conversational tone, and use simple Use a conversational tone, and use simple languagelanguage�� Target your pages for an 6Target your pages for an 6thth grade reading levelgrade reading level

�� Be succinct, summarize information, then give your Be succinct, summarize information, then give your users the option to read moreusers the option to read more

�� Use 50% or less of the text you would usually use Use 50% or less of the text you would usually use for a hard copyfor a hard copy

�� Use obvious terminology, Jobs over Use obvious terminology, Jobs over ““Career Career OpportunitiesOpportunities”” for an examplefor an example

Writing for the WebWriting for the Web

�� Employ Employ ““scanabilityscanability”” writing techniqueswriting techniques�� BulletsBullets

�� Bold Text (Uppercase is perceived as yelling)Bold Text (Uppercase is perceived as yelling)

�� Use Headline SummariesUse Headline Summaries�� Sub headersSub headers

�� Avoid large blocks of text, users see this as too much workAvoid large blocks of text, users see this as too much work

�� Group similar information togetherGroup similar information together

�� Employ Employ ““scanabilityscanability”” design standardsdesign standards�� Use standard fonts (like Verdana) above 10 ptsUse standard fonts (like Verdana) above 10 pts

�� Make sure there is plenty of contrast (nothing beats black and wMake sure there is plenty of contrast (nothing beats black and white)hite)

�� Avoid backgrounds that may interfere with Avoid backgrounds that may interfere with ““scanningscanning””

�� Pages should always answer:Pages should always answer:�� Where am I?Where am I?

�� What is on this page?What is on this page?

Writing for the WebWriting for the Web

�� In building the content of your pagesIn building the content of your pages

�� Prioritize your contentPrioritize your content

�� Put your most important information firstPut your most important information first

�� Avoid scrolling, people are in a hurry and Avoid scrolling, people are in a hurry and

want their information near the top of the page want their information near the top of the page

and it makes using cell phones and small and it makes using cell phones and small

screens a painscreens a pain

�� Use your white space to encapsulate your Use your white space to encapsulate your

related text in to scannable blocksrelated text in to scannable blocks

Designing Pages for Usability / Designing Pages for Usability /

AccessibilityAccessibility�� ““DonDon’’t Make People Thinkt Make People Think”” –– Steve KrugSteve Krug

�� Provide users with a consistent Provide users with a consistent experience, avoid drastic changes in experience, avoid drastic changes in layouts, department pageslayouts, department pages

�� Develop a design standard for your entire Develop a design standard for your entire websitewebsite�� Give your users a standardized experienceGive your users a standardized experience

�� Avoids cognitive resetsAvoids cognitive resets

�� Follow common practices so people who arrive Follow common practices so people who arrive at a deep linked page (from a web search at a deep linked page (from a web search engine) can pick up and work with out having to engine) can pick up and work with out having to ““resetreset””

�� If someone knows how to use just one page, If someone knows how to use just one page, they should be able to use other pages without they should be able to use other pages without having to reorient themselveshaving to reorient themselves

Develop an organizational style Develop an organizational style

guide for your web pagesguide for your web pages�� Develop a style guide standard to use across Develop a style guide standard to use across

departments or applications to determine:departments or applications to determine:�� Fonts and colors, avoid fixed sizesFonts and colors, avoid fixed sizes

�� HeadersHeaders

�� Links (unvisited and visited)Links (unvisited and visited)

�� Body textBody text

�� At the minimum determine standard locations for:At the minimum determine standard locations for:

�� Logo, organizational nameLogo, organizational name

�� Phone Numbers & EPhone Numbers & E--mail Addressesmail Addresses

�� Navigational elementsNavigational elements

�� Search boxSearch box

�� Where the content of your page will goWhere the content of your page will go

�� Where links and downloadable files will goWhere links and downloadable files will go

�� ““ZonesZones”” for graphics and animationfor graphics and animation

Common ConventionsCommon Conventions


guideguide�� Build a visual hierarchy with your style Build a visual hierarchy with your style

guideguide

�� Most Important (Page Titles)Most Important (Page Titles)

�� Less important (Paragraph Headlines)Less important (Paragraph Headlines)

�� Least Important (Body Text, Links)Least Important (Body Text, Links)


guideguide�� Clearly define action itemsClearly define action items

�� What is clickable?What is clickable?

�� Strongly define links, clickable graphics and Strongly define links, clickable graphics and

buttons to differentiate from your body text.buttons to differentiate from your body text.

�� Go beyond Go beyond ““click hereclick here””. Let people know what they . Let people know what they

are getting for clicking a link. (PDFs, Eare getting for clicking a link. (PDFs, E--mail, offmail, off--

site Web pages)site Web pages)

�� What will this button do?What will this button do?

�� Make sure users understand what the result is for Make sure users understand what the result is for

clicking a button.clicking a button.


guideguide�� Optimally users should never questionOptimally users should never question

�� Is this a button?Is this a button?

�� Is it a link?Is it a link?

�� What is the result of this action?What is the result of this action?

�� Use strong contrast between page Use strong contrast between page

elements to give organizationelements to give organization

�� Break pages in to clearly defined areasBreak pages in to clearly defined areas


guide for your web pagesguide for your web pages

�� Deploy using a template design available in Deploy using a template design available in most web editorsmost web editors

�� Recommended: Use Cascading Style SheetsRecommended: Use Cascading Style Sheets�� A separate file that contains all of the design A separate file that contains all of the design

elements used in your siteelements used in your site

�� Easy to change entire look of your site without having Easy to change entire look of your site without having to change each pageto change each page

�� Easy to customize for different methods of accessing Easy to customize for different methods of accessing your siteyour site�� Different browsers IE, Firefox and moreDifferent browsers IE, Firefox and more

�� Different platforms WebTV, PDAs and Cell PhonesDifferent platforms WebTV, PDAs and Cell Phones

�� Accessibility aides & screen readersAccessibility aides & screen readers

Forms and opportunities for Forms and opportunities for

user entryuser entry�� Give instant and descriptive error messagesGive instant and descriptive error messages

�� Use colors and text to draw attention to the Use colors and text to draw attention to the problem areaproblem area

�� Denote optional and required fieldsDenote optional and required fields

�� Validate all user entered dataValidate all user entered data

�� State limits to characters, formatting etc.State limits to characters, formatting etc.

�� Give them contact information if they continue to Give them contact information if they continue to have problemshave problems

�� Give users a way outGive users a way out

The Homepage.. gone in 30 The Homepage.. gone in 30

secondsseconds�� On average, first time users spend less On average, first time users spend less

than 30 seconds on your home pagethan 30 seconds on your home page

�� Limited time frame to make people aware of Limited time frame to make people aware of

your informationyour information

�� A home for signposts to other information, the A home for signposts to other information, the

less time on the homepage the betterless time on the homepage the better

�� Most people only read 10Most people only read 10--20 words on the 20 words on the

home pagehome page

�� Be clear, be conciseBe clear, be concise

The Homepage.. gone in 30 The Homepage.. gone in 30

secondsseconds�� Goals for your homepageGoals for your homepage

�� Establish a Establish a ““big picturebig picture””

�� Where your visitors areWhere your visitors are

�� Who you areWho you are

�� What you doWhat you do

�� How you can benefit themHow you can benefit them

�� Showcase latest developments, site changes, timely contentShowcase latest developments, site changes, timely content

�� Give them a list of choices, and help them find the most relevanGive them a list of choices, and help them find the most relevant t informationinformation

�� ““Show me what I am looking forShow me what I am looking for””

�� Be obvious and content should be self explanatoryBe obvious and content should be self explanatory

�� Give them teasers about information that they may not know Give them teasers about information that they may not know about, help them learn more about your siteabout, help them learn more about your site

Homepage.. gone in 30 Homepage.. gone in 30

secondsseconds�� Focus your most important homepage content at Focus your most important homepage content at

the topthe top

�� The top 50% of your home page should The top 50% of your home page should

reference 90% of your website contentreference 90% of your website content

�� Try to minimize scrolling, only 27% of users Try to minimize scrolling, only 27% of users

scroll down to find out morescroll down to find out more

�� If you have to scroll give users a reason to, tease If you have to scroll give users a reason to, tease

themthem

�� Design a home page that fits on one screenDesign a home page that fits on one screen

Sandiego.gov HomepageSandiego.gov Homepage

Structuring your sites information Structuring your sites information

for usabilityfor usability

�� Information ArchitectureInformation Architecture

�� How your site is organizedHow your site is organized

�� Develop a Site MapDevelop a Site Map

�� Provides structure for your Provides structure for your

navigation routinesnavigation routines

�� Groups relevant information Groups relevant information

in logical groupsin logical groups

Structuring your sitesStructuring your sites’’ information information

for usabilityfor usability�� Break out of our institutional structure Break out of our institutional structure ““silossilos””

�� Real Estate for exampleReal Estate for example�� AssessorAssessor’’s Page Hass Page Has

�� Assessed ValuesAssessed Values

�� Tax Credits and ExemptionsTax Credits and Exemptions

�� RecorderRecorder’’s Page Hass Page Has�� Deeds, Mortgages, Documents, LiensDeeds, Mortgages, Documents, Liens

�� TreasurerTreasurer’’s Page Hass Page Has�� Property Tax PaymentsProperty Tax Payments

�� AuditorAuditor’’s Page Hass Page Has�� Property Records, Transfers Levy, RatesProperty Records, Transfers Levy, Rates

�� GIS GIS �� Maps, parcel dataMaps, parcel data

““SilosSilos”” Site MapSite Map

Home Page

Assessor Auditor GIS Recorder Treasurer

AppraisalReal Estate Documents

Taxes

Levies

Property Info

Maps

Transfers

Deed

Mortgage

Payment

Credit Forms

Structuring your siteStructuring your site’’s information s information


�� While building information this way may While building information this way may keep the actual office structure intact:keep the actual office structure intact:

�� It keeps related information in different parts It keeps related information in different parts of your siteof your site

�� Assumes that your users are familiar with the Assumes that your users are familiar with the officeoffice’’s responsibilitys responsibility

�� Makes it difficult to Makes it difficult to ““dig out of silodig out of silo”” to return to to return to the home page or link to get to related the home page or link to get to related informationinformation

““ServicesServices”” Site MapSite Map

Home Page

Appraisal

Real Estate

Documents

Taxes

Levies

Property Info

Maps

Transfers

Deed

Mortgage

Payment

Credit Forms

Structuring your siteStructuring your site’’s information s information


�� Focus on users, not your government structureFocus on users, not your government structure

�� Meet user expectations of where information Meet user expectations of where information should be locatedshould be located

�� Use subcategories that further define where the Use subcategories that further define where the information will beinformation will be

�� Avoid content overlaps, or multiple pages with Avoid content overlaps, or multiple pages with the same information.the same information.

>

Key BasicsKey Basics

�� Links should change color when Links should change color when

visitedvisited

�� Avoid breaking use of the back Avoid breaking use of the back

buttonbutton

�� Avoid spawning new windows with the Avoid spawning new windows with the

exception of PDF, files or Word docs.exception of PDF, files or Word docs.

�� Avoid using unAvoid using un--scannable text or scannable text or

large blocks of textlarge blocks of text

�� Outdated contentOutdated content

�� Inconsistent DesignInconsistent Design

Key basicsKey basics

�� DonDon’’t crowd your paget crowd your page

�� Place items and content where Place items and content where people will expect to find itpeople will expect to find it�� LogoLogo

�� Navigation itemsNavigation items

�� Avoid ScrollingAvoid Scrolling

�� Put the most important information Put the most important information firstfirst

�� Use CSS if possibleUse CSS if possible�� Allows for more control, changes are Allows for more control, changes are

easyeasy

Key basicsKey basics

�� Make sure all of the visual Make sure all of the visual information such as graphics information such as graphics has an ALT TEXT, or a has an ALT TEXT, or a descriptive captiondescriptive caption

�� Make sure you can navigate Make sure you can navigate your web page with a your web page with a keyboardkeyboard

�� Use JavaScript sparinglyUse JavaScript sparingly

�� Test!Test!

Test your siteTest your site

�� Assume nothing about how your users Assume nothing about how your users

operateoperate

�� Test to generalize user behaviorTest to generalize user behavior

�� Testing early and often will allow you to Testing early and often will allow you to

have small testing groupshave small testing groups

�� Encourage people to Encourage people to ““think aloudthink aloud””

�� Make sure your test group represents your Make sure your test group represents your

target audiencetarget audience

Test your siteTest your site

�� A group 3A group 3--4 testers work4 testers work

�� Think of friends, relatives or other nonThink of friends, relatives or other non--governmental governmental

employeesemployees

�� Give them a reason to participate by appealing to Give them a reason to participate by appealing to

their sense of volunteerism or their wallettheir sense of volunteerism or their wallet

�� Give your testers assigned tasks to completeGive your testers assigned tasks to complete

�� Observe tasks that take a long time to complete, or Observe tasks that take a long time to complete, or

failfail

�� Video tape the testing sessionsVideo tape the testing sessions

Recommended ResourcesRecommended Resources

�� BooksBooks�� ““DonDon’’t Make Me Think: A Common Sense Approach to Web t Make Me Think: A Common Sense Approach to Web

UsabilityUsability”” –– by Steve Krugby Steve Krug

�� Prioritizing Web Usability Prioritizing Web Usability –– by Jakob Nielsen & Hoa Lorangerby Jakob Nielsen & Hoa Loranger

�� WebWeb�� www.usability.govwww.usability.gov –– Guidelines from US GovGuidelines from US Gov’’tt

�� www.useit.comwww.useit.com –– Jakob NielsenJakob Nielsen’’s usability sites usability site

�� http://www.iainstitute.org/tools/http://www.iainstitute.org/tools/ --tools from the Information tools from the Information Architecture InstituteArchitecture Institute

�� www.efuse.com/Design/effective_writing.htmlwww.efuse.com/Design/effective_writing.html (How to write (How to write effectively for the web)effectively for the web)

�� www.willwww.will--harris.com/radio/words_on_the_web.htmlharris.com/radio/words_on_the_web.html (Words on (Words on the web)the web)