Spring Break 2017 Refresh

Header and Navigation

Accessibility

The new menu has additional tools to help users navigate using keyboards and screen reader technology. It adheres to standard behaviors as suggested by WebAIM (e.g. http://webaim.org/techniques/keyboard/).

The links also are easier to read when focused on using higher background contrast as well as more space between each link for ease of scanning and touch screen users.

Size

The top navigation is more compact, reducing the height of the header (the logos and navigation links) and allowing more content to display “above the fold”.

Also, the dual color bars breaks up the header content more distinctly, so the top “bar” is university navigation while the second primary bar is library oriented. The colors meet the branding regulations written by the university.

Mega Menu

The navigation contains more content, similar to a site map, that allows the user to more easily scope and make quicker conclusions regarding what to expect from any given link by way of context. The labels are less ambiguous and do not contain “More” links (we do have “All Policies” and “All Collections and Locations”, but they are worded to clearly state what to expect). This larger menu layout reflects user behaviors noted in usability testing.

To provide more information upfront, today's hours for library buildings are provided in the At the Library menu.

Additionally, the About menu includes the libraries’ statement for tolerance and inclusiveness.

Labels (aka menu, headers, and link names)

The labels selected took considerable effort to finalize. A subteam of the Libraries’ User Testing Group developed the initial draft of links and labels. This was run by the former Web Presence Management Group as well as the Research and Learning directors. The menus then underwent three formal usability tests with the U of M’s Usability Lab. We utilized a method known as tree testing (more information at https://www.optimalworkshop.com/blog/just-published-free-book-length-guide-tree-testing/), each round with about 50 participants. The result of these tests was then sent back to the Libraries’ User Testing Group for more traditional, contextual, qualitative testing.

Additional label testing has been suggested to the Libraries’ User Testing Group.

Content

The links that are in the menu reflect the existing website content but did highlight significant areas for content consideration. Because of this, URL paths do not use the same language or have the same structure as the labels represented by the navigation. While this isn’t great, it does not inhibit the use of the website and is a known concern for the Web Development Team.

Grouping the links into small sub-sections of no more than 5-6 links with meaningful headings makes the content easier to digest while also raising awareness of a broader range of library services.

Additional changes

Footer

To present a more unified navigation (the current footer navigation partially reflects the top navigation) and easier access to all the collections, the new footer contains links to all the collections/locations per previous content decisions. Due to the extensiveness of the primary navigation, rather than repeat selected sections space was made to offer more robust contacting tools. The Question Point form is surfaced so users that made it to the bottom of the page and still did not find what they were looking for have a “next step”.

Jobs at the Libraries is broken out into a separate section on the footer; users did not find it under “Support the Libraries” but expected to find a link in the footer.

Hero image

The background image has been lightened and has a higher resolution for the larger/higher density screens that are being used. By making it greyscale, the file size was reduced as well to improve page load times.

Other background images for the library services area and My Library box were changed to CSS3 patterns and solid color, reducing the number of resource calls for additional optimization.

Search box

To bring more critical content above the fold, we aimed to reduce the size of the search box footprint while still retaining it as a focal point. The database listings receive ten times the usage than the search interface links, which are also available in the dropdown, primary navigation, and lower on the page (“Archival Finding Aids” from the search tools list was added to the “From the Collections” box). Because of the redundancy, removing them brings the content up the page. (Note: hours links count is low because the critical data of today’s hours is already on the page not requiring clicking to meet the user’s needs. )

The placeholder text is also removed as studies have shown it to be confusing. (https://www.nngroup.com/articles/form-design-placeholders/)

Fall 2016
total recorded clicks: ~324,000
search submit: ~267,900
databases links: ~169,500
discovery links: ~16,400
journals links: ~13,500
hours links: ~13,400
tools links: ~5,600 (consider removing this when some subscriptions end)

Auto suggest

We added 40 new electronic resources and the entire navigation menu to the auto suggest tool.

News

Because removing the search interface links in the search box reduces the size of the hero, the news item box to the right needs to shrink as well. This entails changing the number of additional news items displayed from four to three. News as a top content item on the page helps provide a sense of currency and is a tool to introduce awareness of events and services while also breaking up the link list monotony, so should remain relatively visible. Reducing the number of news events does not negatively impact those goals (three is a more expected number as well).

Hours and Locations box

The link originally wrapped both the library name and today’s hours and brought the user to the library’s hours page. Users struggled to get from the library’s hours page to the library landing page, so the link was broken into two: the name of the library is linked to the library’s “home page” and the the time is linked to the library’s hours page.

Databases box

We made a minor label change for the “All Subjects” button, which was somewhat misleading as it linked to the subject guides, which may not have topically sorted all the available databases. The new label is “All Guides”, or simply “Guides” on smaller screens.