A Tabbed Search Box

I am the first Web Services Librarian at the University of Montana, Missoula’s Mansfield Library. My work to make library resources, services, and spaces (as represented on the website) more reliable, usable, and pleasurable highlights my background in marketing, design, communications, UX, and writing. One project in particular to re-design the home page search interface exemplifies how user experience-oriented my work is.

The original search box hid most of its functionalities in a dropdown. Selecting any option from the dropdown did the not modify the design of the search box and gave no other design cues to what the user was searching. Given the complexity and variety of resources available to search from this box, its simplicity was not doing users any favors. My idea to move to a tabbed search interface came from literature and trends in the field: the tabbed search box is the most often used search interface by library home pages in a 2015 survey and other library data collection shows how effective it is at organizing different silos of information. Although other research, particularly from Nielsen Norman Group, suggests that a simpler search box is better I felt strongly that in this instance that UX research was not well suited for this specific website and use case.

screenshot of Mansfield Library homepage at the University of Montana. This is an older screenshot from spring semester 2017 using the Internet Archive's Wayback Machine.
Original search box
screenshot of Mansfield Library homepage at the University of Montana. This is an older screenshot from spring semester 2017 using the Internet Archive's Wayback Machine
Tabbed search box 1.0

Once the new tabbed search interface went live, I collected two types of data to gauge its success: usability testing and a transaction log. The transaction log showed that the website tab wasn’t used and that the OneSearch, journal title, and database title tabs were being using correctly ~70% of the time. In version 2.0, we added a small and strategic amount of explanatory text, removed the website search, and created a more accessible search icon.

screenshot of the Mansfield Library home page at the University of Montana.
Tabbed search box 2.0

Using the transaction log, we continue to monitor its use to see if user error of the journals and databases tabs decrease. The latest figures still show ~75% successful search rate for both of those tabs and an increase in successful use for the OneSearch tab. This is despite significantly re-designing both the journals and databases tabs to demonstrate that they are a unique resource and that the search function operates very differently from the “one-stop-shop” feel of OneSearch’s search. Specifically, transaction log data showed me that students were often searching for subject areas in the database tab like “biology” and “economics”. To serve the needs of those searching by subject I designed a browse by subject dropdown box that takes users to a list of database in that area curated by librarians.

screenshot of database tab on Mansfield Library from June 2017
Database tab 1.0
screenshot of database tab on the Mansfield Library's website
Database tab 2.0

The latest addition to the tabbed search interface is adding autocomplete to the default OneSearch tab. Data from usability testing proves that users struggle with spelling, use autocomplete whenever it is available, and have a very difficult time troubleshooting or correcting course when they spell something incorrectly and end up with confusing search results. I wrote about the importance of autocomplete on library home pages for the website LibUX.


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 )

Facebook photo

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

Connecting to %s