Brain Snack logo

Web Design
and Usability
Brain Snack

South Central Library System
CE Program, July 14, 2006



Today we'll talk about:

Today's talk will concentrate on library web sites themselves, not catalogs or databases.

By usability, I mean putting the user's needs first, and paying attention to quality, readability, and navigation.

Accessibility means making a site usable by people with disabilities, but doing so benefits all your users. I'll talk about how to use images, color, and layout tables in accessible ways.

I'll also mention SCLS's web site redesign services and resources for your future use.



Library web sites: who uses them? How much?

30% of people in the US have visited a library web site.

96% have visited a library in person.

Source: OCLC Perceptions report

The 2005 OCLC report "Perceptions of Libraries and Information Resources" is on their web site at http://www.oclc.org/reports/2005perceptions.htm. I read it to find out how much our patrons are using our web sites.

I was surprised that only about a third of people have been to their library's web site, when almost all have visited in person. Some didn't even know the library had a web site.



Library web sites: what are they best at?

  1. Getting to the catalog
  2. Library hours, locations, contact info
  3. Library events

Not surprisingly, the number one thing people want to know when they come to the library's web site is how to get into the catalog and start searching. This means you'll want a link to the catalog to be *very* easy to find. Subscription databases are also good to point out.

People also visit your site because they want to visit you in person, so hours, locations (maybe even maps), phone and email (maybe even IM), and calendars or schedules of events should be available and up-to-date.

You may also offer special content like digitized local history books.



Library web sites: what do people think about them?

98% say Google provides reliable information.

78% say library web sites do.

Source: OCLC Perceptions report, part 1-27

This is a sobering thought, and one that I'm not sure of the reasons for! But we can do our part to raise people's perception of our reliability by making sure the content on our web sites is accurate, and that the sites look good.



Usability: User-centered design

S. R. Ranganathan

Remember Ranganathan.

Read Koyanl et al.'s Research-Based Web Design & Usability Guidelines.


S. R. Ranganathan, the famous librarian, established five widely quoted laws of library science:

  1. Books are for use.
  2. Every reader has his or her book.
  3. Every book has its reader.
  4. Save the time of the reader.
  5. The library is a growing organism.

These laws apply to the web as well (see http://www.webology.ir/2004/v1n2/a8.html) and it is good to keep them in mind when you are working on your web site.

The Research-Based Web Design & Usability Guidelines were published in 2002 for the NIH. They are a phenomenal resource. Each guideline and its supporting evidence is presented concisely.

The best part is that the guidelines actually say how strong the supporting evidence is.

If you remember just two things from this Brain Snack, remember these. I'll only talk about the tip of the iceberg today.



Usability: Quality

Large, overgrown garden

Take on only as much as you can maintain.

Image source


Sometimes it's so exciting to start working on a web site that webmasters take on more than they have time to do well. Even if they start out with the best of intentions it's easy to become overwhelmed!



Usability: Quality

Small, tidy garden

Small is beautiful!

Image source


If you're new to maintaining a web site, take small steps first.

Make sure everything on the site is accurate, and has a reason for being there.

If you want to start a new feature, like a new book list or newsletter, you may want to get a few issues done before posting the first one. This will get you in the habit of doing the work, and then posting it becomes second nature.

This has the added benefit of giving your visitors a clear idea of what your site offers.



Usability: Readability

Be legible.

Use large, familiar fonts.

Use high-contrast colors.

Source: Koyanl et al., chapter 11, & "Font/Text Size"


For something to be readable, it has to be legible. Tiny or fancy fonts, most patterned backgrounds, and the wrong colors can make text unreadable.



Usability: Readability

Elements of Style by Strunk and White

Be understood.

Write for scanning.

"Content must be readable first, printable second, downloadable third."

Source: Jakob Nielsen, Be Succinct!; Dogmas are Meant to be Broken (#7).

Our longtime friends Strunk and White's advice to be succinct is more important on the web than in print!

Research shows that people don't read on the web, they scan. Here it helps to remember the rule about saving the time of the reader.

The last quote above points to the importance of presenting information in the best way possible. There will be some things, perhaps like Friends group applications, that you want to make available as a PDF or Word document so people can print it. But whenever you can, make your information available as text on a web page.



Usability: Navigation

Example of a site map

Web sites are organized hierarchically.



This is because they're basically folders full of files.

Usually there's a home page with links to second-level pages, that may have links to third-level pages, or may have actual information on them.

For most SCLS member web sites, two or three levels is as deep as you'll have to go.



Usability: Navigation

Always provide navigation.

Tell visitors where they are.

Use the web site hierarchy.

Source: Koyanl et al., chapter 7, and "Navigation"

Help keep your users oriented by using the same navigation on every page, and use obvious headers and titles to tell them where they are at all times.

Looking back to what I talked about with making your content readable first and printable second, navigation is also easier to provide on web pages than on PDF files. Google can plop your visitor down into just about any page on your site; make it easy for them to get their bearings!



Accessibility: Why is it important?

"Combinations of physical, mental, and technological disabilities may make it hard or impossible for some visitors to use your web site."

Source: Dive into Accessibility

If you have time to only read one thing about accessibility (after you finish the NIH guidelines), read this online book.



Accessibility: Images

Provide alt text.

Use images meaningfully.

Optimize images for fast downloads.

Source: Koyanl et al., chapters 3 and 14, and "Graphics" and "Accessibility"

Images add value to web sites if they are well-chosen, appropriate, and don't interfere with delivering content.



Accessibility: Color

Example of color conveying information on a form

Do not use color alone to convey information.

Sources: Koyanl et al., chapters 3 and 10, and "Use color wisely"

You can test your page in a colorblindness simulator like Vischeck (http://vischeck.com/).

On the web, blue means link, almost as much as underlining does. Respect this convention or risk annoying your users!



Accessibility: A Tiny Little Bit about Layout Tables

SCLS home page with table elemets outlined

Further reading: Eric Meyer on CSS; Creating Accessible Tables.


Using tables to position material on a page is not inherently inaccessible. However, if they are not used correctly they will make a page sound like gibberish to a screen reader.



Redesigning a web site: now what?!

SCLS can help!

Further reading: Design It Yourself: Web sites; Techessence: the Dreaded Redesign.



Useful Tools & Further Reading

See the Continuing Education past programs page for links and bibliography.

If you only have time to read a few things, read the three items at the top of the page under "Must-reads".



Thank you!

This presentation was created in HTML using CSS. Thanks to Jessamyn West for the layout & stylesheet, and babasteve's flickr photos for the background image.

The layout and stylesheet are available to borrow. See source code for details.

slides version | printable version