Library Site Visit Results in Link Overload

The other day my Sister needed help using her local public library's Web site to renew some books. She called me because she was unable to find the information she needed and figured I would be able to help. Together we were able to complete the task but she assured me that it was much easier to take the books back to the branch and that she would not be using the site again.

Target: San Diego Public Library

Is it easier for your customers to shuttle two kids and fifty pounds of books ten minutes through Southern California traffic then it is to use your Web site? If so it's time for a usability redesign.

Skip to the "Before & After" or

Page Goals

Every Web page needs to have a goal. What is it you are trying to communicate? What action is the result of this communication? Currently the San Diego Public Library home page is trying to do so much all at once its purpose is unclear, let’s go ahead and give this page a reason to exist.

The San Diego Public Library Home page exists to provide access to the library from your home or work computer. By access we mean account management, renewals, catalog access and book holds.

Now that our page has a purpose lets define how we will be able to measure the success of this page as it relates to the goals we have defined above. In order to get the metrics we need to measure whether or not our redesign was successful we need to define some conversion goals. A conversion is when you turn a passive visitor into and active participant for this page we want our users to:

• Log in (conversion = successful log in)
• Search the Catalog (conversion = search submitted)
• Click on Content (conversion = user selects to view content)

The above conversion goals represent the core of our usability review but before we get started on these lets address some issues we have with the header.

The current header has two "San Diego Public Library" bars, they are redundant lets loose the top instance (Figure 1) .

figure 1

The navigation seems out of context way up there, let’s move it below the main header. Another big problem with the current navigation is its use of images to display text. Using images to display text is bad for a number of reasons, it makes it impossible for Search Engines to index the text as keywords, the text can not be resized by the browser and this technique increases your total cost of ownership, even small text changes require the production of new images. Let’s loose the images and place the text in a list, pump up the font size and add some color. Our navigation is much more readable now. Since we are using text instead of images the Search Engines are happy and our older users can use the browser controls to set text size. See results below (Figure 2).

figure 2

Now that we have that little bit out of the way lets focus on creating our actionable content areas to support the conversion goals we set earlier.

Log In (conversion = successful log in)

Currently this important bit of functionality is buried under the catalog search functions where no one will ever find it (figure 3).

figure 3

It is probably safe to assume that the Library is going to continue to add more and more personalized content and functionality. We want to make user log in a top level function, so let’s remove the "My Account" link from the page content and create a position for it right under the main navigation. The new positioning will bring the "My Account" functionality right into the user’s eye path making it much easier to find. We want this functionality to really pop so let’s add an icon and visually enhance the text a bit, much better. See the results below (Figure 4).

figure 4

Cool, let’s move on to the content area and tackle the last two user goals.

Search the Catalog (conversion = search submitted)

The catalog search is really the key piece for the site, it needs to be easy to find and simple to use. The first thing we need is a well written title. We need something that will prompt the user into action, "Search Library Catalog and Databases." That should be clear enough for them.

Next let’s add a brief definition telling the user exactly what this component will be used for and place it right under the title. This way the user will know exactly what they are doing and how to do it. Now that we have a nice title let’s take a look at the information we will need to conduct a successful catalog search.

After spending some time looking at the advanced search functionality I identified "Choose Location" and "Enter Search Words" as the minimum inputs required to complete a search. Lets use these on our page so that users can complete the search with as little friction as possible; we also want to provide an "advanced search" option for our power users.

In order to make this really bullet proof let’s add some contextual help for each field and pull the "Ask Now" functionality out from where it was buried in the side bar. We can then place all that help right next to the fields in case something goes wrong like they can’t find the submit ubtton. Don’t laugh, these people are out there, in fact they are probably sitting at a library work station right now (figure 5).

figure 5

Now that the search has been taken care of let’s see if we can organize all this content on the home page.

Click on Content (conversion = user selects to view content)

Let’s start with the right hand column images. At first glance they appear to belong to a category titled "This Month’s Events". If this is what you thought, like I did, you were wrong. It turns out they represent a navigational metaphor for Library topics of interest. We need to remove any ambiguity regarding this content and pull all that keyword rich text out of the images.

Since we already have a section on the home page dedicated to Library News and Events let’s lose the first item in the list, take what we have left and add a descriptive sub header to each. The addition of the sub header will give the user some insight into the page content resulting in more clicks and will provide more content for SEO. Now we can take this new section that we have titled "Library Topics of Inerest" and group it with our "News and Events" section to create a cohesive content area.

The content is now in one section but it seems kind of stale, was it written last week, last month or ten years ago. We need to give the user some indication of our contents "freshness." Adding some dates to the "News and Events" section should do the trick, fresh content is always more relevant (Figure 6).

figure 6

Our last move is to take those nasty text links that were cluttering up the center of our page and move them into the side bar. These links are redundant and available from the top navigational element but they are so good for SEO lets keep them. If we give them a clear header, "Site Map" they may also be useful to our users.

That should do it for now, view the completed redesign

If you are interested in a Usability Redesign for your site read more about Suimple’s Quickly Redesign Service.

We currently do not offer comment functionality, if you have something to say about this usability review email contact[at]suimple.com and I will add your comments to the piece.