Emily SingleySystems Librarian

Harvard University

websites that work

an exploration of user-centered website design

a usable website is…

Understandable

Navigable

Searchable

Browser and device neutral

Familiar

Accessible

why usability matters

understandable

“Studies report that about 80% of users scan any new page. Only 16% read each

word.”http://guidelines.usability.gov/guidelines/178

http://www.congregationallibrary.org/churches/records-management

navigable

“People won’t use your Web site if they can’t find their way around it.” – Don’t make me think / Steve

Krug

The F-shape pattern

http://www.usability.gov/get-involved/blog/2010/03/eyetracking.html

Not so good:

http://www.ingenweb.org/

searchableusers love search boxes

is everything on your site searchable?

Not so good:

http://www.washoecounty.us/library/

How Googleable is your website?

many users prefer to navigate from a search engine

browser and device neutral

test…then test some more….

does your site require more than a browser?avoid using proprietary formats

http://www.cantonpl.org/

do you need a separate mobile site?…..or a responsive design?

familiarmeet your user’s expectations

does your site follow these standards?

Top websites in the US by usage:

GoogleFacebookYouTubeYahoo

WikipediaTwitter

BlogspotAmazon

accessiblecan all your patrons use your site?

“Access problems often occur because website designers mistakenly assume that everyone sees and accesses a webpage in the same way. ”

– ADA best practices toolkit

http://screencast.com/t/Ke3s84eJN

5 steps to a user-centered website

1 – identify site goal(s)

http://www.slideshare.net/RealFreeWebsites.com/step-1-how-to-set-your-website-goal

2 – know your audience(s)

3 - test“All you really need is a room with a desk, a computer, and two

chairs.” – Don’t make me think / Steve Krug

http://youtu.be/h4lfb4SHakw

You only need 5 users for valid results:

“Why you only need to test with 5 users“ Jakob Nielsen, March 19, 2000 http://www.useit.com/

4 – organize content

http://www.usability.gov/how-to-and-tools/methods/card-sorting.html

with the help of your users!

5 – create the site

go back to step 1

“Websites are like living organisms…if they stop changing, they die.” -- Heather Shaw, graphic designer

test

audience

Content

Create

Resources

Usability.gov: http://usability.gov/

Usability Guidelines: http://usability.gov/guidelines/guidelines_book.pdf

Krug, Steve. (2005). Don’t make me think: A commonsense approach to web usability. 2nd ed. Indianapolis: New Riders.

Steve Krug’s website: http://www.sensible.com/

Jakob Nielsen’s website: http://www.nngroup.com/

“Top 10 mistakes in website design” by Jakob Nielsen: http://www.nngroup.com/articles/top-10-mistakes-web-design/

Mobile Usability from Jakob Nielsen: http://www.nngroup.com/articles/mobile-usability-update/

W3C Mobile Checker – check to see if your site is mobile compatible:http://validator.w3.org/mobile/

Some good websites:

http://www.congregationallibrary.org/

http://www.massaudubon.org/

http://www.gardnermuseum.org/home/

http://www.metmuseum.org/

http://www.oldsouth.org/

http://www.slcpl.lib.ut.us/

http://www.nypl.org/

http://www.dbrl.org/

Accessibility

ADA best practices toolkit: http://www.ada.gov/pcatoolkit/chap5toolkit.htm

Accessibility basics from usability.gov: http://www.usability.gov/what-and-why/accessibility.html

Section 508 guidelines: http://www.section508.gov/

United States Access Board: a federal agency committed to accessible design http://www.access-board.gov/guidelines-and-standards/communications-and-it

Good blog post comparing screen readers: http://usabilitygeek.com/10-free-screen-reader-blind-visually-impaired-users/

Demo version of JAWS: http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp

Free screen readers:

http://www.screenreader.net/index.php?pageid=11

http://webanywhere.cs.washington.edu/

http://www.nvda-project.org/

This presentation and more: http://emilysingley.net/resources/

Thank you!Any Questions?