Skip to Main Content

Transformative Website Style Guide: Usability

This guide offers practical advice on creating a transformative library website.

Recommended Resources

10 Pillars of a Well-Designed Library Website

  • Navigation (menus)
  • Main navigation
  • Footer
  • Alerts Top of page or in the header
  • Branding
  • Calls to action
  • Shortcuts
  • Visuals
  • Contact Information
  • Library Services
  • Staff information
  • Policies

Answering User Questions Through Transformative Usability

A transformative website will answer your users' questions before they even have them and require them to think less. Your content should be organized in a way that is clear and efficient.

Your site should be:
User Friendly - putting yourself in your user’s position when organizing content ensures that your information makes sense and is not difficult to navigate or understand.
Service-focused - a logical hierarchy of information will help your users understand what will answer their questions and serve their needs. Your Library services are one of the most important tools available to patrons and will be communicated best if they are treated with the attention they deserve. An example of this would be providing thorough descriptions of your most frequently used services instead of a long, extensive list. 
User-centered - When focusing on usability, it is best to keep information accessible to viewers through the least amount of clicks as possible. Always put yourself in the user’s position and consider different scenarios when you are organizing your content such as:
  • Consider your user having only 5 minutes on a mobile device to find a specific piece of information on their way to class.
  • Consider your user having an hour on a desktop or laptop computer to perform a thorough search as part of a study session.

Service Focused

Highlighting People and Services (vs. Collections)

Your library's website should focus more on the people and services that make it great; and less on collections. The questions you answer through the virtual "signage" provided through images, links and buttons, should guide your users to an opportunity to then have the opportunity to perform a deeper search within collections.

Creating Clear Calls to Action

With so many options you are presenting to your users, it is important to create clear, actionable steps for them to take. Think of these as if you were in their position and are looking to accomplish something simply and with the least amount of clicks possible. The example below from The University of Miami Library shows how calls to action can be displayed prominently without feeling like another large piece of text to sort through.

Using the Footer

The footer is a great place to provide shortcuts to the most-visited or requested pages.  The ZSR Library website is a great example.

Creating Human Connection

The Penn State University Library does an outstanding job of providing instances of human connection. Here, you will find images of smiling faces and a convenient "Ask a Librarian" feature prominently displayed.

The large image of smiling faces on the homepage of Westerville Public Library allows users to feel as though they were being greeted at the entrance of the library by all the staff.

Although not a library resource, Plain Values presents its staff in a creative way by adding a creative hover effect for each staff member.

Services are featured in two categories on the Vanderbilt University website, giving users clear direction on what is essential for them.


Responsive Design and Mobile Testing

When you consider your audience and how they are viewing your site, it is important to step into their perspective.  Today's technology is full of a wide variety of devices, screen sizes and browsers.  Testing your website's performance on each of these will bring your viewers a better experience and allow them to get the most out of their online experience.

How to Test For Mobile Devices

One simple way to test your site on different mobile devices is to use an inspection tool within your browser. 
Step 1 - Pull up your website in your browser
Step 2 - Use the developer tools to view your website on simulated mobile devices 
Step 3 - Explore each page of your website on multiple device simulations