Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,419 views

Published on

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

Published in: Education
  • Be the first to comment

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?

×