websites that work
an exploration of
user-centered
website design

Emily Singley
Systems Librarian
Harvard University
a usable website is…
 Understandable
 Navigable
 Searchable
 Browser and device neutral
why usability matters

 Famil...
understandable
“Studies report that about 80% of users scan any
new page. Only 16% read each word.”
http://guidelines.usability.gov/guide...
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/
searchable
users 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
do you need a separate mobile site?
…..or a responsive design?

http://www.cantonpl.org/
familiar
meet your user’s expectations

Top websites in the US by usage:
Google
Facebook
YouTube
Yahoo
Wikipedia
Twitter
B...
accessible
can all your patrons use your site?

http://screencast.com/t/Ke3s84eJN
“Access problems often occur because web...
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...
You only need 5 users for valid results:

“Why you only need to test with 5 users“ Jakob Nielsen, March 19,
2000 http://ww...
4 – organize content
with the help of your users!

http://www.usability.gov/how-to-and-tools/methods/card-sorting.html
5 – create the site
go back to step 1
goals

create

content

audience

test

“Websites are like living organisms…
if they stop changing, they...
Resources
Usability.gov: http://usability.gov/
Usability Guidelines: http://usability.gov/guidelines/guidelines_book.pdf

...
Some good websites:
http://www.congregationallibrary.org/

http://www.massaudubon.org/
http://www.gardnermuseum.org/home/
...
Accessibility
ADA best practices toolkit: http://www.ada.gov/pcatoolkit/chap5toolkit.htm
Accessibility basics from usabili...
This presentation and more:
http://emilysingley.net/resources/
Any Questions?
Websites That Work - NEHGS website usability presentation
Websites That Work - NEHGS website usability presentation
Websites That Work - NEHGS website usability presentation
Upcoming SlideShare
Loading in …5
×

Websites That Work - NEHGS website usability presentation

4,098 views
3,914 views

Published on

Presentation given at the New England Historic Genealogical Society on March 4, 2014.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,098
On SlideShare
0
From Embeds
0
Number of Embeds
451
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Websites That Work - NEHGS website usability presentation

  1. 1. websites that work an exploration of user-centered website design Emily Singley Systems Librarian Harvard University
  2. 2. a usable website is…  Understandable  Navigable  Searchable  Browser and device neutral why usability matters  Familiar  Accessible
  3. 3. understandable
  4. 4. “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
  5. 5. navigable “People won’t use your Web site if they can’t find their way around it.” – Don’t make me think / Steve Krug
  6. 6. The F-shape pattern http://www.usability.gov/get-involved/blog/2010/03/eyetracking.html
  7. 7. Not so good: http://www.ingenweb.org/
  8. 8. searchable users love search boxes is everything on your site searchable?
  9. 9. Not so good: http://www.washoecounty.us/library/
  10. 10. How Googleable is your website? many users prefer to navigate from a search engine
  11. 11. browser and device neutral test…then test some more….
  12. 12. does your site require more than a browser? avoid using proprietary formats
  13. 13. do you need a separate mobile site? …..or a responsive design? http://www.cantonpl.org/
  14. 14. familiar meet your user’s expectations Top websites in the US by usage: Google Facebook YouTube Yahoo Wikipedia Twitter Blogspot Amazon does your site follow these standards?
  15. 15. accessible can all your patrons use your site? http://screencast.com/t/Ke3s84eJN “Access problems often occur because website designers mistakenly assume that everyone sees and accesses a webpage in the same way. ” – ADA best practices toolkit
  16. 16. 5 steps to a user-centered website
  17. 17. 1 – identify site goal(s) http://www.slideshare.net/RealFreeWebsites.com/step-1-how-to-set-your-website-goal
  18. 18. 2 – know your audience(s)
  19. 19. 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
  20. 20. 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/
  21. 21. 4 – organize content with the help of your users! http://www.usability.gov/how-to-and-tools/methods/card-sorting.html
  22. 22. 5 – create the site
  23. 23. go back to step 1 goals create content audience test “Websites are like living organisms… if they stop changing, they die.” -- Heather Shaw, graphic designer
  24. 24. 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/
  25. 25. 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/
  26. 26. Accessibility ADA best practices toolkit: http://www.ada.gov/pcatoolkit/chap5toolkit.htm Accessibility basics from usability.gov: http://www.usability.gov/what-andwhy/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-screenreader-blind-visually-impaired-users/ Demo version of JAWS: http://www.freedomscientific.com/downloads/jaws/jawsdownloads.asp Free screen readers: http://www.screenreader.net/index.php?pageid=11 http://webanywhere.cs.washington.edu/ http://www.nvda-project.org/
  27. 27. This presentation and more: http://emilysingley.net/resources/
  28. 28. Any Questions?

×