"Why Can't I Find Anything" - an exploration of user-centered library website design


Published on

Slides from a talk I gave to the Merri-Hill-Rock Public Library consortium in Hooksett, NH on October 10, 2012.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

"Why Can't I Find Anything" - an exploration of user-centered library website design

  1. 1. “why can’t I find anything?”an exploration of user-centered library website design Emily Singley Systems Librarian Southern New Hampshire University
  2. 2. A usable website is….  Readable  Navigable  Understandable  Searchable  Browser and Device Neutral  Familiar  Accessible
  3. 3. 1 - Readable Avoid clutter Avoid dense text – white space is good Pages should be easily scannable Easy on the eyes – comfortable color scheme and font sizes “Studies report that about 80% of users scan any new page. Only 16% read each word.” http://usability.gov/pdfs/chapter16.pdf
  4. 4. 2 - Navigable F-shape – eyes travel across top once, across top again, then down left (or right) side:http://www.usability.gov/articles/newsletter/pubs/032010news.html/ Minimize the number of clicks Eliminate horizontal scrolling Use dropdown menus and breadcrumbs Make sure users can always get home – clickable logo Make sure users don’t “get stuck” in external sites – i.e., catalog, events calendar, LibGuides, etc.“People won’t use your Web site if they can’t find their way around it.” – Don’t make me think / Steve Klug
  5. 5. 3 - Understandable Information needs to be presented in the user’s language – know your users! Avoid “Librarianese” Find out what terms mean to your users: Catalog? Interlibrary Loan? About the library? Database? etc….Library terms that users understand / John Kupersmith:http://escholarship.org/uc/item/3qq499w7User survey example from Texas A&M:http://www.wtamu.edu/library/usability/survey2.shtml
  6. 6. 4 - Searchable Site should be searchable from every page Search boxes should indicate what they will search – clearly distinguish searching the catalog and the site Search boxes need to work! Test them. Make sure all your content is searchable from site search – including calendar events. SEO – how Googleable is your site? Test it!
  7. 7. 5 - Browser and device neutral Test your site on as many different browsers and devices as possible Avoid formats that require special software: Word, Adobe Acrobat PDFs, Windows Media Player, etc. Easiest solution: use a template that has already been proven to work in every environment (i.e. Wordpress, Drupal, etc.) “Responsive” sites are increasingly replacing separate mobile sites
  8. 8. A “responsive” library website: http://www.cantonpl.org/ Uses Drupal CMS
  9. 9. A “mobile first” library site template: http://influx.us/onepagerdemo/ from Influx library user experience
  10. 10. 6 - Familiar Meet user expectations – don’t flout them Look at the most popular websites – they set the standards Site search box in upper right Login in upper right Navigation menus remain the same on every page Contact info and copyright date in footer
  11. 11. Top websites in the US by usage: Google Facebook YouTube Yahoo Wikipedia Twitter Blogspot AmazonLibrary site that follows familiar standards:http://www.jocolibrary.org/Library site that does not:http://www.rochestervtpubliclibrary.com/
  12. 12. 7 - Accessible Follow standards - ADA and Section 508 Test with visually-impaired users Test with a screen reader and other assistive technologies“Access problems often occur because website designersmistakenly assume that everyone sees and accesses a webpagein the same way. ” – ADA best practices toolkit
  13. 13. Let’s test somelibrary websites: Readable? Navigable? Understandable? Searchable? Browser and Device Neutral? Familiar? Accessible?
  14. 14. some usability test questions: Is the library open on Sundays? How do I get a library card? Does the library have a copy of Huckleburry Fin? (note spelling) Is there a Storytime on Saturdays for my 4-yr old?
  15. 15. Website examples - Readable:Not so good:http://www.doverfreelibrary1913.org/Good:http://benningtonfreelibrary.org/wordpresshome/http://www.slcpl.org/
  16. 16. Website examples - Navigable:Not so good:http://www.webrary.org/mgplhome.htmlhttp://www.ci.ellensburg.wa.us/index.aspx?nid=144Good:http://www.broward.org/library/Pages/Default.aspxhttp://www.dbrl.org/
  17. 17. Website examples - Understandable:Not so good:http://www.ifpl.org/http://www.ilsleypubliclibrary.org/Good:http://www.pequotlibrary.org/http://www.thomascranelibrary.org/http://www.jocolibrary.org/
  18. 18. Website examples - Searchable:Not so good:http://www.blakememorial.org/http://www.washoecounty.us/library/http://www.stcharleslibrary.org/index.htmGood:http://denverlibrary.org/http://www.monterey.org/library/Home.aspx
  19. 19. 5 common problems with library websites:1. Jargon: Interlibrary Loan, Databases, Catalog, Libguides, etc.2. Catalog search box is not explained; site search and catalog search are not clearly distinguished3. Navigation is non-intuitive: Once in the catalog, users cannot get back, logos do not link, menus change from page to page4. Events calendar does not easily show regularly recurring events and is not searchable from site search5. Information is buried under too many pages and links do not explain where you are going.
  20. 20. 5 big library websites I like: 1. Saint Paul Public Library 2. Cleveland Public Library 3. Daniel Boone Public Library 4. Iowa City Public Library 5. Johnson County Public Library
  21. 21. 5 small library websites I like: 1. Steamboat Springs Public Library 2. Princeton Public Library 3. Ipswich Public Library 4. Western Springs Public Library 5. Waterville Public Library
  22. 22. 5 mobile library websites I like: 1. Enoch Pratt Public Library 2. Mount Prospect Public Library 3. Canton Public Library 4. Chelmsford Public Library 5. San Francisco Public Library
  23. 23. 5 steps to a user-centered library website:1 - Test the site Perform a simple usability test on the current site Test browsers, devices, and accessibility Determine what works, what doesn’t Usability testing is easy! You only need to test with 5 users Jakob Nielsen - http://www.useit.com/“All you really need is a room with a desk, a computer, and two chairs.” – Don’t make me think / Steve Klug
  24. 24. 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/
  25. 25. 2 - Identify your audience(s) Who is using your site? What do they use the site for? Who is not using the site, and why not? Quick 1-minute survey on the site Focus groups with library patrons Mail/email/telephone surveyshttp://usability.gov/methods/analyze_current/learn/index.html
  26. 26. 3 - Identify and organize content Ask your audiences what they need (and want) on the site Create a content inventory Involve users in a card sorting exercise Identify language and labels that make sense to your users Design a mockup (or wireframe) of the new site layout Test the mockup with usershttp://usability.gov/methods/design_site/define.html
  27. 27. 4 - Create the site Code the site yourself from scratch Choose a CMS and template that works well for your design (Wordpress, Blogger, Drupal, etc.) Hire someone: http://www.websitesforlibraries.com/ http://influx.us/
  28. 28. 5 - Go back to step 1 Perform the same usability test you used in step 1. Are there any improvements? What still isn’t working? Website design is iterative “Websites are like living organisms… if they stop changing, they die.” -- Heather Shaw, graphic designer
  29. 29. some final thoughts…. Your website should provide the same high level of service as your physical library. Involving your users in your website design makes it their space. Your site doesn’t need to be fancy or expensive, it just needs to work for your users. You don’t need much technical knowledge. Use the templates and resources that have already been proven and tested.“Websites are the electronic front door to your library; as such they deserve the same planning and care that your library receives. ” – RI State Library
  30. 30. ResourcesI. Usability resourcesUsability.gov: http://usability.gov/Usability Guidelines: http://usability.gov/guidelines/guidelines_book.pdfKlug, Steve. (2005). Don’t make me think: A commonsense approach to web usability.2nd ed. Indianapolis: New Riders. Find it at Amazon.Steve Klug’s website: http://www.sensible.com/Jakob Nielsen’s website: http://www.useit.com/“Top 10 mistakes in website design” by Jakob Nielsen:http://www.useit.com/alertbox/9605.htmlMobile Usability from Jakob Nielsen: http://www.useit.com/alertbox/mobile-usability.html
  31. 31. II. Library website designLibsuccess.org section on website design:http://libsuccess.org/index.php?title=Website_DesignLibrary terms that users understand:http://escholarship.org/uc/item/3qq499w7ALA’s website wiki – lists award winning sites:http://wikis.ala.org/professionaltips/index.php?title=Websites#Library_Website_Award_WinnersPublic library website standards from Rhode Island State Library:http://www.olis.ri.gov/pubs/plstandards/websites.phpCollege library website of the month from ALA:http://www.ala.org/acrl/aboutacrl/directoryofleadership/sections/cls/clswebsite/websiteofthemonth
  32. 32. Library website design, continued:“Usability in the library” University of Michigan’s usability sitehttp://www.lib.umich.edu/usability-libraryThe “One-Pager” from Influx – a very simple, mobile-friendly, usability-tested library website template:http://influx.us/onepager/Userslib.com – a good library blog on usability:http://userslib.com/Library User Experience – an excellent usability blog from the University of Virginia:http://libraryux.wordpress.com/Accessible design for library websiteshttp://senna.sjsu.edu/lmain/isdaccess/home.html
  33. 33. III: Mobile library site design:Mobile friendly library websites: a step-by-step guide to creatingmobile sites using CSS:http://www.lib.berkeley.edu/digicoll/libraryweb/mobile-websites.pdfHow to create a mobile library site without technical knowledge:http://oedb.org/blogs/ilibrarian/2011/7-tools-to-create-a-mobile-library- website-without-technical-knowledge/Blog post comparing mobile library sites: http://musingsaboutlibrarianship.blogspot.com/2010/04/comparison-of- 40-mobile-library-sites.html#.UFtr4bJlQf4Tips on designing and developing mobile website from Code4Lib: http://journal.code4lib.org/articles/2055Blog: Mobile learning, libraries, and technologies:http://mobile-libraries.blogspot.com/
  34. 34. Mobile library site design, continued:W3C Mobile Checker – check to see if your site is mobile compatible:http://validator.w3.org/mobile/Library Anywhere – a mobile library site app:http://www.libanywhere.com/Mobile site creation:Boopsie: http://www.boopsie.com/library/Winksite (free): http://winksite.com/site/index.cfmZinadoo (free): http://www.zinadoo.com//Wordpress plugin (free) – will create a mobile version of your WP site:http://wordpress.org/extend/plugins/mobilepress/
  35. 35. IV. AccessibilityADA best practices toolkit: http://www.ada.gov/pcatoolkit/chap5toolkit.htmAccessibility chapter from usability.gov: http://usability.gov/pdfs/chapter3.pdfSection 508 guidelines: http://www.section508.gov/United States Access Board: a federal agency committed to accessible designhttp://www.access-board.gov/gs.htmGood 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.aspFree screen readers:http://www.screenreader.net/index.php?pageid=11http://webanywhere.cs.washington.edu/http://www.nvda-project.org/
  36. 36. V. 10 Web Design Resources I can’t live withoutFirebug – a Firefox addon for debugging codeWappalyzer – Firefox addon shows what CMS a site is usingNotepad++ -- a free code editorBrowsershots – free site to check browser compatibilityGoogle Analytics – a free way to track your site’s usageColor Cop – identifies colors on websitesW3 Schools color picker – a good color chartW3Schools – learn HTML, CSS, and more!Codecademy – self-paced coding tutorialsW3 validator – a HTML code validator
  37. 37. This presentation and more:http://emilysingley.net/resources/