Library Gateway: Cumulative Changes Version 2

Here is a final mock-up of the redesigned library gateway:gatewayv2View final Journals and Reserves tabs here.

Changes from original site include:

1. Main Library building hours on the gateway

2. Library site search box in the upper right hand corner of the screen

3. Horizontal tabs pared down, and instructional copy improved

4. Vertical tabs pared down and reordered

Other changed pages:

Easy Search Results

Library hours and locations


Vertical Tabs v.2

As with many other aspects of the library gateway, any redesign of the vertical tab layout has to keep as its overall aim presenting users with just the right amount of information.

There seems to be general agreement, among both the users we tested and those in class how commented on our initial iterations, that the present layout tries to incorporate too much and bears some unnecessary redundancies. Others, though, rightly pointed out that a certain amount of overlap is useful for different users, who will expect to find the same information in different places.

Some, for example, will attempt to resolve the information need more or less corresponding to “employment” by looking under the tab/category “About the Library;” others, in contrast, will look under “Resources For…” and find the same link, this time with the title “Those looking for employment.”


[Redesigned vertical tabs: “about the library” moved to second spot, “browse by subject” removed]

As we noted in our last iteration of the vertical tabbed layout, the “Most Popular Resources” tab and its accompanying links reasonably occupy the top spot. Putting the most frequently used and sought information in one place, and having it display by default, makes for better usability.

The order of the links in the in the “Most Popular Resources” seemed as though they could benefit from a bit of reordering. Under the assumption that “information about the library”, such as hours and contact information, would be frequently sought, that section of links was moved up. Similarly, the account access information for users was bumped up to right beneath that. Article resources and course reserves, since they can be accessed more immediately from the horizontal tabs, were moved down a bit. However, It seemed preferable to keep them, as opposed to getting rid of them altogether, since users might not be able to find the information in its other location.

Screen shot 2012-12-11 at 11.28.50 AM

[Rearranging the links in the “Most Popular Resources Tab]

We felt that, along those lines, the second-most sought information should follow “Most Popular Resources”. and since most of the users in our studies tended to look to “About the Library” for much of their tasks, the tab seemed to be a good candidate to occupy the next spot.

As we noted in our last round of iterations, the “Browse by Subject” tab seemed to be the one which bore the most needlessly redundant information. The information it contained which was unique  could easily be incorporated into another tab and eliminated. The content was well-represented under the “Resources for…” tab. The Subject Guides are also under “Help & Tutorials.” The only thing that seemed to be losing a spot is the “Libraries By College/Major” – a very helpful resource – that could make sense within the “Find a Library,” one of the “Popular Resources”.

Many of the links in the subsequent tabs seem like they would be easier to scan, or read quickly, if they were shortened and placed in a more logical order. For example, in the “About the Library” tab, many of the sections seem to lend themselves to shortening, without losing any of their effectiveness: “Technology at the Library” to “Technology”, “History of the University Library” to “History”, “Give us your comments, suggestions, and feedback” to just “Feedback”, “All Library Policies” to “Policies”, and so on. “Patron Policies” seemed like it could reasonably be removed, since it itself is a subset of “Policies” and can be found on that page. Finally, “Library Administration”, since it is a list of administrator’s contact information, seemed like it belonged better under the heading of “Find a Person”.


[Rearranged links in the “About the Library” tab]

Final Note: Navigation Consistency

The last recommendation relating to the vertical tab layout is difficult to represent visually: essentially, when a user follows any of the links found in the vertical tabs and then decides to navigate back to the main page, the tab layout will revert to its default setting, i.e. “Most Popular Resources.” It would make it much easier for a user to orient themselves if, for example, when they followed a link from the “About the Library” tab and then returned to the main page, the “About the Library” tab was still selected. This would also likely improve the efficiency with which users could find information, since frequently users will follow a link, not find the information they’re looking for, and wish to navigate back and choose another link which is immediately adjacent to the first one they selected.

Library Hours v.3

Displaying all of the U of I library hours and locations is no easy feat. With so many libraries that each have their own unique hours, and the occasional holiday thrown into the mix, the challenges are many. Based on user struggles, and competitor analysis, it may be time to abandon the current model and start fresh. The Durham County Libraries’ site Is the Library Open? is an exemplary hours page. Users can select the library that they are interested in from a drop down menu and then a map and a very readable display of the hours comes up. There was some concern about there being too many libraries at U of I for this drop down menu model. However, users can take a shortcut to the library that they have in mind by typing in the first letter of the name of the library that they are interested in.

The code is open source, and is available through github. While we didn’t do a full install of the code, we did a mock-up of how it might look for the U of I libraries:


Clicking on the arrow adjacent to the library name will reveal an alphabetic listing of all the physical library spaces on campus:


Users sometimes are more interested in finding an open, quiet study space than a particular library. To facilitate users finding an open library quickly there will also be a link that appears when a library is closed:


Letting patrons view a list of open libraries. The page will have all the essential information for visiting the library:


Many of the University’s libraries are virtual, and will not be listed on this page. This will necessitate a full listing linked from the gateway of all of the libraries. The Library Locations page that is currently linked from the gateway communicates that information clearly, renaming it to Find a Library would be a good way to repurpose it:


This combination of pages would help users find what they want and when they can use it, although we would hope further iterations and user testing would continue.

Easy Search Results Iterations

Although the Library Easy Search Results page was out of the scope of our redesigns, so many classmates commented its need for improvement, we decided to spend time working on some potential iterations.

In our first version, we chose to just simplify the page, in the hopes that less clutter would make the page more usable.


In another round, we chose to go more with the results page a patron lands on when searching from the Undergraduate Library page, as this page is more simplified but also provides additional functionality the main library page does not provide.

Ultimately, using this page as a template, our final iteration simplified the results by eliminating extra “matches,” anything with no matches will not show up on the page, and we eliminated Search Engine results since users can easy go to Yahoo!, Google, or Bing to find those results.

What we came up with is a drastically streamlined page with powerful functionality to enhance a patrons search.

easy searchWe would be very interested in what user testing and further iterations would show if the library actually chose to implement such a design.

Horizontal Tabs v.2

Our second stage of iterations were informed by our classmates’ comments. Based on these comments, we formulated a group response (posted here) which outlined our plan to re-name the tab created in our first round of iterations, the “Everything/Easy Search tab,” to the more concise “Quick Search.” With this in mind, we completed a rough sketch of the horizontal tabs to include the new “Quick Search” tab:


Quick Search Tab

The next round of iterations sought to improve the horizontal tabs further. Having now renamed the “Everything/Easy Search” tab to “Quick Search,” the “Search for” lead-in text does not make sense. One classmate suggested removing this text altogether, and adding the types of resources that may be searched in the “Quick Search” in the search bar itself. This solution prevents  confusion that could be caused by removing the “articles,” “books” and “media” tabs: the Quick Search tab now includes language that explains to the user that these items may be searched using the “Quick Search” tab. It also uses space wisely; rather than including these instructions underneath the search bar, they are placed inside, leaving room for other instructions in the valuable space underneath.


First iteration of second round: “Quick Search” tab includes instructions for what the user may search for inside of the search box

In the current site, the space underneath the search box in the “Everything” tab reads, “Search by title, author, or keyword in a broad selection of sources. What am I searching?” The “What am I searching” link takes the user to a page that lists all of the sources searched by the library’s Easy Search tool (which powers the catalog search).


Current Library Gateway horizontal tabs, with instructions underneath the search bar

The iteration above retains the instructions to “Search by title, author, or keyword,” but removes the rest of the instructions. Since our goal is to create a one-click (or few clicks) search field, information on which databases are searched is not necessary within this space.

This iteration also includes an attempt to simplify the drop-down subject menu in the “Everything” tab, which some of our classmates pointed to as a potential area for improvement. Currently, the drop-down menu lists subject areas within which the user may chose to limit his search. The default selection is “Multi-Subject Resources” this was re-named to “Everything,” since most users searching for an item will not be concerned with which subject-specific resource are being searched. These search parameters are better positioned as advanced search fields.

The Gateway includes an “Advanced Search” link on the Everything tab, and it contains the same search options that are on the Everything tab. That is to say, the Advanced Search is the same as the “Everything” search. Or, the “Everything” search includes advanced search options. Therefore, our classmates were correct in intuiting that subject-specific resource options are overkill for a “Quick Search.”


Current site: Everything tab with subject resource drop-down menu expanded


Advanced Search: Includes the same search options as the Everything tab

Because users may select subject-specific resources via Advanced Search, it is redundant to include these options on the Quick Search tab. Furthermore, the consolidation of the tabs from six into three, and the renaming of the “Everything” tab to “Quick Search” attempts to create the  feeling of a centralized catalog that may be searched within one or two clicks. To then ask the user to choose subject-specific resources undoes this, and fragments the catalog. Scott Berkun discusses this idea of flow and invisible design in his essay, “The Role of Flow in Web Design.” The databases that power the library’s catalog search are too visible behind the subject resource drop-down menu. This transparency is appropriate within an advanced search; it is not appropriate for homepage design, nor especially for a search tool that is “Quick”.

Therefore, the next iteration removed the subject resource drop-down menu, and replaced it with a search term drop down menu. The search term instructions, which were located beneath the search bar, were removed. “In” was removed, since the user is no longer searching for a term “in” subject-specific resources. The Advanced Search link was moved from the right-hand side of the content box to the bottom to increase its visibility. The “Go” button was replaced with “Search.”


Iteration #1, with search term instructions underneath search box and “Go” button


Iteration #2, with subject resources removed, search terms added to drop-down menu, Advanced Search link placed at the bottom, “in” removed

However, the “Advanced Search” is hidden once the drop-down menu is expanded, so this was moved to the left, and positioned underneath the search box:


Iteration #3, with Advanced Search link aligned left

Journal Tab

Within the Journal tab, only the instructions below the search box were redesigned. The rest of the features, including the search instructions within the search box and the “Go” button remained the same. This is because the search box instructions, “enter journal title” are provide clear directions to the user. They also inform the user that this particular search tab performs searches of journal titles, and not articles titles. The current Gateway’s journal tab includes further instructions below the search box:

Current Gateway Journal tab with instructions below the search box.

During walk-through evaluations of the Gateway and user tests, the instructions “this does not search the contents of journals” was overlooked. Users attempted to search for specific articles using the Journal tab. Since our redesign removes the article tab altogether, it is expected that users will be even more likely to search for articles within the Journal tab. Therefore, these instructions need to be made more explicit and eye-catching. Currently the instructions scan as a text block of information, which is easy to ignore. By paring down the instructions to include only one sentence, the text grabs the user’s attention.  Our next iteration removes all of the instructions except for where to go to search for an article, and instructs them to visit the Quick Search tab, which links to the Quick Search tab.


Therefore, “search for specific journal titles both in print and electronic format. This does not search the contents of journals” is removed. Between the search box instructions (“enter journal title”) and the new instructions beneath the search box (“To locate a specific article, use the Quick Search”), the user is sufficiently informed that the Journal tab searches journal titles and not their contents.

Reserves Tab

Like the Journal tab, our redesign only affects the instructions on the Reserves tab. These instructions are similar to the instructions on the search tabs: they explain to the user how to use that particular search module, and what it will do:


However, because the Reserves tab includes only links, and not a search bar, these instructions are somewhat misleading. “Search for course materials by instructor and course” means that the search tools linked to above support search by instructor or course. However, it is not clear that this statement relates to the above links. In fact, it seems as thought this sentence itself should link to a resource that allows a user to search by instructor and course. Therefore, the language was revised slightly in the next iteration:


The new instructions refer to the links directly: “Use the links above to search for reserves by course or instructor.”

Horizontal Tabs: Final Iterations

Below are the final versions of each tab.

Quick Search

Advanced search link is moved back to the right of the search button, so that the user sees it when they go to click the search button, and are therefore made aware of this advanced search option.



To maintain consistency with the Quick Search tab, the “Go” button is renamed “Search”.




Website Background and Analysis

Website Background

The University of Illinois at Urbana-Champaign radically changed the look of the library gateway page at the beginning of the Fall 2012 semester. Before that, the last major update to the site had occurred in 2008. According to library’s announcement, “Since the last major redesign of the Library Home Page in 2008, we’ve paid very close attention to the feedback and comments you’ve given us. Multiple studies undertaken by library faculty and staff revealed that we could do a better job getting you from our Library Home Page to the information you need. Drawing on those studies, as well as data from web logs, dozens of rounds of interviews, and usability tests, we worked through an iterative redesign process that resulted in the new Library Home Page.”

This is what the page looked like before the redesign:

The old library gateway page. (

This is the current page:

For now, users can still access the old library homepage’s interface; however, the site managers note that the old page will be taken down at the end of the Fall 2012 semester.

Viewing the old and new gateways side by side it is apparent that the designers of the new gateway did not go “back to the drawing board” so much as worked with what they had. The naming conventions for the vertical tabs can be found throughout the page. Consolidation has occurred, which is important on a site where real estate is so limited and stakeholders abound, but redundancy and confusion are still an issue.

User Studies

Four user studies were completed by our group and provided the basis for much of our design rationale and choices. You can refer to these user studies here:

  1. Greer Martin’s
  2. Ashley Booth’s
  3. Cate Kompare’s
  4. Mark Baldwin’s

Website Analysis

Based upon our own use of the site and the four user studies, we outlined the major strengths and weaknesses of the website:


  1. The gateway has to appeal to a wide audience (undergraduates, graduate students, faculty/staff, new students, community members, etc.) and is presenting an array of diverse information in a small space.
  2. The gateway acknowledges employ diverse information discovery strategies (e.g. search vs. browse) and therefore allows users to find the same information in a variety of ways.
  3. Many of the tabs in the vertical, left-hand navigation worked better than expected during user studies, especially “About the Library” and “Resources For…”


  1. The tabs along the top are misleading, especially the “Everything” tab and the “Search Library Page” tab.
  2. Users expect the content on the main part of the page to change when a new tab is clicked.
  3. The gateway assumes the user is already familiar with the libraries (how many there are, their acronyms, etc.).
  4. There needs to be more links to the location and hours pages within the sub-pages.


Suggested Redesign Importance Difficulty of Implementation Total Score
Rearrange and consolidate horizontal tabs 1 5 6
Rearrange and consolidate vertical tabs 2 4 6
Improve link naming 3 1 4
Improve visibility/accessibility of hours and locations 4 3 7
Re-skin library webpage search 5 2 7

Based upon our quick analysis of the importance and difficulty of implementation of the preceding redesign ideas, we arrived at the following priority list:

  1. Improve link naming (4)
  2. Rearrange and consolidate horizontal/vertical tabs (both 6)
  3. Improve visibility accessibility of hours and locations and re-skin library webpage search (7)

Competitive Analysis

The tabular search box is a common theme among university library pages.

University of North Carolina Libraries have a pared down tabular structure. Only three tabs (Articles+, Catalog, Google Scholar) account for the site’s main search function.

The site search is down in the footer of the page. There is a link ‘Search This Site‘ that takes the patron to a new page full of disclaimers and search tips. They also have a site map for the patron who likes to click their way to information. The search function is powered by Google. A quick search reveals that they maintain the UNC skin once a search is performed, reinforcing the fact that it is a site-specific search.

The University of Texas Libraries tab’s are a bit more robust than those at University of North Carolina (All, Articles, Catalog, Databases, Journals and Site Search). They also facilitate greater flexibility and (possibly) transparency in what the patron is searching.

They have a federated search feature called scoUT that seems to be similar to Illinois’s Easy Search. scoUT powers the All and Articles Search, and it is is easy to discern that from the tabbed box. Articles, Catalog and Journals have radio buttons where the patron can specify what kind of resources (ie online or in print, peer reviewed, format etc.).

When searching the UT catalog from the main page the patron can specify format, and the resources being searched are fairly transparent.

Google powers their site search, and they maintain the UT skin on the search results page.

Simmons Library has a site-tab search structure. The tabs are called: e-resources, articles, catalog and reserves.

To search the e-resources the user must select a database first. They seem to have less electronic subscriptions that Illinois. Everything is fairly straightforward, and is happening on a smaller, more manageable scale. The site search is on the upper-right hand side of the page. It is powered by Google, but maintains the Simmons skin.