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”.





Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s