What To Do When You Can't Do Anything - SEO Soft Skills - Clarity '14
"Why Can't I Find Anything" - an exploration of user-centered library website design
-
Upload
emily-singley -
Category
Documents
-
view
3.098 -
download
0
description
Transcript of "Why Can't I Find Anything" - an exploration of user-centered library website design
![Page 1: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/1.jpg)
Emily Singley Systems Librarian
Southern New Hampshire University
“why can’t I find anything?”
an exploration of user-centered library website design
![Page 2: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/2.jpg)
Readable
Navigable
Understandable
Searchable
Browser and Device Neutral
Familiar
Accessible
A usable website is….
![Page 3: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/3.jpg)
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
![Page 4: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/4.jpg)
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
![Page 5: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/5.jpg)
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/3qq499w7 User survey example from Texas A&M: http://www.wtamu.edu/library/usability/survey2.shtml
![Page 6: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/6.jpg)
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!
![Page 7: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/7.jpg)
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
![Page 9: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/9.jpg)
http://influx.us/onepagerdemo/
from Influx library user experience
A “mobile first” library site template:
![Page 10: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/10.jpg)
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
![Page 11: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/11.jpg)
Top websites in the US by usage:
Google Facebook YouTube
Yahoo Wikipedia
Twitter Blogspot Amazon
Library site that follows familiar standards:
http://www.jocolibrary.org/
Library site that does not:
http://www.rochestervtpubliclibrary.com/
![Page 12: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/12.jpg)
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 designers mistakenly assume that everyone sees and accesses a webpage in the same way. ” – ADA best practices toolkit
![Page 13: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/13.jpg)
Readable?
Navigable?
Understandable?
Searchable?
Browser and Device Neutral?
Familiar?
Accessible?
Let’s test some
library websites:
![Page 14: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/14.jpg)
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?
some usability test questions:
![Page 15: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/15.jpg)
Not so good:
http://www.doverfreelibrary1913.org/
Good:
http://benningtonfreelibrary.org/wordpresshome/ http://www.slcpl.org/
Website examples - Readable:
![Page 16: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/16.jpg)
Not so good: http://www.webrary.org/mgplhome.html http://www.ci.ellensburg.wa.us/index.aspx?nid=144 Good: http://www.broward.org/library/Pages/Default.aspx http://www.dbrl.org/
Website examples - Navigable:
![Page 17: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/17.jpg)
Not so good: http://www.ifpl.org/ http://www.ilsleypubliclibrary.org/ Good: http://www.pequotlibrary.org/ http://www.thomascranelibrary.org/ http://www.jocolibrary.org/
Website examples - Understandable:
![Page 18: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/18.jpg)
Not so good: http://www.blakememorial.org/ http://www.washoecounty.us/library/ http://www.stcharleslibrary.org/index.htm Good: http://denverlibrary.org/ http://www.monterey.org/library/Home.aspx
Website examples - Searchable:
![Page 19: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/19.jpg)
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 distinguished
3. Navigation is non-intuitive: Once in the catalog, users cannot get back, logos do not link, menus change from page to page
4. Events calendar does not easily show regularly recurring events and is not searchable from site search
5. Information is buried under too many pages and links do not explain where you are going.
![Page 20: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/20.jpg)
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
![Page 21: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/21.jpg)
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
![Page 22: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/22.jpg)
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
![Page 23: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/23.jpg)
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
![Page 24: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/24.jpg)
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/
![Page 25: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/25.jpg)
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 surveys
http://usability.gov/methods/analyze_current/learn/index.html
![Page 26: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/26.jpg)
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 users http://usability.gov/methods/design_site/define.html
![Page 27: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/27.jpg)
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/
![Page 28: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/28.jpg)
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
![Page 29: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/29.jpg)
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
![Page 30: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/30.jpg)
Resources
I. Usability resources Usability.gov: http://usability.gov/ Usability Guidelines: http://usability.gov/guidelines/guidelines_book.pdf Klug, 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.html Mobile Usability from Jakob Nielsen: http://www.useit.com/alertbox/mobile-usability.html
![Page 31: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/31.jpg)
II. Library website design
Libsuccess.org section on website design: http://libsuccess.org/index.php?title=Website_Design Library terms that users understand: http://escholarship.org/uc/item/3qq499w7 ALA’s website wiki – lists award winning sites: http://wikis.ala.org/professionaltips/index.php?title=Websites#Library_Website_Award_Winners
Public library website standards from Rhode Island State Library: http://www.olis.ri.gov/pubs/plstandards/websites.php College library website of the month from ALA: http://www.ala.org/acrl/aboutacrl/directoryofleadership/sections/cls/clswebsite/websiteofthemonth
![Page 32: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/32.jpg)
Library website design, continued: “Usability in the library” University of Michigan’s usability site http://www.lib.umich.edu/usability-library The “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 websites http://senna.sjsu.edu/lmain/isdaccess/home.html
![Page 33: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/33.jpg)
III: Mobile library site design: Mobile friendly library websites: a step-by-step guide to creating mobile sites using CSS: http://www.lib.berkeley.edu/digicoll/libraryweb/mobile-websites.pdf How 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#.UFtr4bJlQf4
Tips on designing and developing mobile website from Code4Lib:
http://journal.code4lib.org/articles/2055 Blog: Mobile learning, libraries, and technologies: http://mobile-libraries.blogspot.com/
![Page 34: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/34.jpg)
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.cfm Zinadoo (free): http://www.zinadoo.com// Wordpress plugin (free) – will create a mobile version of your WP site: http://wordpress.org/extend/plugins/mobilepress/
![Page 35: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/35.jpg)
IV. Accessibility ADA best practices toolkit: http://www.ada.gov/pcatoolkit/chap5toolkit.htm Accessibility chapter from usability.gov: http://usability.gov/pdfs/chapter3.pdf Section 508 guidelines: http://www.section508.gov/ United States Access Board: a federal agency committed to accessible design http://www.access-board.gov/gs.htm 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/
![Page 36: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/36.jpg)
V. 10 Web Design Resources I can’t live without Firebug – a Firefox addon for debugging code Wappalyzer – Firefox addon shows what CMS a site is using Notepad++ -- a free code editor Browsershots – free site to check browser compatibility Google Analytics – a free way to track your site’s usage Color Cop – identifies colors on websites W3 Schools color picker – a good color chart W3Schools – learn HTML, CSS, and more! Codecademy – self-paced coding tutorials W3 validator – a HTML code validator
![Page 37: "Why Can't I Find Anything" - an exploration of user-centered library website design](https://reader034.fdocuments.us/reader034/viewer/2022051816/545c563ab1af9f4b0a8b46f8/html5/thumbnails/37.jpg)
This presentation and more:
http://emilysingley.net/resources/