Skip to Main Content

LibGuide Design: Best Practices and Guidelines

This guide is designed to provide guidance on making LibGuides more useful, accessible, and relevant to users through best practices that incorporate usability and web design.

Navigation

For most LibGuides, side navigation is encouraged as it makes it easier for users to navigate the guide. 

Selecting the Layout for a new Guide

To create a new LibGuide with side navigation, select the System Default - Side Nav Layout from the template options on the screen where you create and name your new guide: 

Screenshot of LibGuides templates menu

 

Changing the Layout of an Existing Guide

To change the navigation in an existing guide to side navigation, open the guide you wish to change (and make sure you're logged in). Go to the top right corner of the screen and click on the Guide Layout icon (it looks like a small rectangular picture) and select Guide Navigation Layout from the available options.

Screenshot of available LibGuides Navigation selections

This will open a pop-up window where you can change your template from tabbed layout to the side navigation layout: 

Screenshot of the available LibGuides template choices

 

Important Note: Changing navigation styles will automatically re-order the boxes on your guide, but not necessarily in the way you would choose. When you change your navigation to or from Side Nav, you will want to re-order the boxes on your guide so that they are in an order that makes sense.

Why Side Navigation?

Side navigation is usually easier for our users to understand and navigate without being overwhelmed. Here are links to information about studies exploring usability, eye tracking, and other studies indicating that students generally have an easier time seeing and using side navigation:

Responsive Design

LibGuides are made with responsive design. This makes it easier for users on phones, tablets, and other mobile devices to read and use them. However, this means that we need to pay attention to where we place content in guides as it will be rearranged to suit the screen size of the user.

When viewing a Side Navigation layout guide on small devices:

  • The navigation with be at top.
  • The box(es) in the left column will be second.
  • The box(es) in the column 1 will wrap around below the left column

When viewing a Tab layout guide on small devices:​

  • The tabs (navigation) will be at top.
  • The top box will be second (if used).
  • The box(es) in left column will be third.
  • Additional columns will wrap around below the top box and left column in order from left-to-right.
  • The bottom box will always be last (if used).

Implications

  • When using Side-Nav layout, limit the box(es) you add underneath the navigation in the left column so readers will focus on the main content in your primary column.
  • When using Tab layout, place your most important content in the left column or top box since this is guaranteed to always be at the top of the guide.
  • Break up content so there is a natural flow when the columns are rearranged.
  • Group similar or themed content closer together in a column so they don't get separated.
  • Test your guide on multiple screens (or resize your browser window) before publishing.
WSU Libraries, PO Box 645610, Washington State University, Pullman WA 99164-5610, 509-335-9671, Contact Us