The authors redesign the user interface of an online library catalog, leveraging current Web technologies that allow dynamic and fine-grained user interaction. Over the course of their iterative design and test cycle, they identified four key areas where such dynamic Web technologies can be used to improve the support for typical information seeking strategies, namely: 1) the use of overview + details, 2) a tabular data display, 3) using tabs as a history mechanism, and 4) embedding a suggestion bar. The authors believe that the revised affordances created by their changes in these four areas will inform the design of future search interfaces.
TopIntroduction
In the past decade, many integrated library systems have migrated their patron library catalog to Web-based applications. The resulting Online Public Access Catalogs (OPACs) embraced the advantages and limitations of the HTML medium. With HTML 2.0, vendors had access to a simple and uniform user interface toolbox that was limited to clicking hyperlinks and submitting fill-in forms for receiving user input and sending an entire HTML page to report relevant results. While the resulting systems were instantly accessible worldwide, they were static, having limited or no interaction with the user after page rendering.
In the past decade, a set of new technologies has changed this interaction pattern. These technologies push the computational load of handling the interaction to the client's Web browser. Dynamic HTML (DHTML), the Document Object Model (DOM), and JavaScript enable the client to respond to fine-grained user interactions with a Web page to update and redraw parts of the page. Asynchronous XML + JavaScript (AJAX) extends this notion of interactivity further, allowing the client to both pull data from and push data to the server. Similarly, CSS and XSLT offload the burden of rendering a logical document to the client, easing the transmission load. When coupled together appropriately, these “dynamic” Web technologies enable Web-based applications to interact with the user in a much more immediate and fine-grained manner than is possible using earlier Web technology. Contrast this to “static” interfaces that use a click-and-wait paradigm and require an entire page refresh to respond to any type of interaction.
How can such technologies improve UI design in online catalogs? Such dynamic Web technologies enable a tighter loop of interactivity between the user and the data presentation. We believed that such interactivity could be leveraged to better support the information seeking tasks of library patrons in their catalog use.
In 2007, we have done several iterations of design, implementation, and focus group testing, resulting in a new design for our university's catalog system. While our redesign touches on many different usability aspects, we focus on the four areas that are enabled as a direct result of employing dynamic Web technologies (Figure 1).
Figure 1. Prototype OPAC user interface with AJAX
- •
Overview + Details Panes: We replace the separate pages for results and item details with a single page featuring resizable panes.
- •
Tabular Data Display: We replace the listing of results with a sortable, extensible data table that uses AJAX to retrieve additional results without page refresh.
- •
Tabs as History Mechanism: We use tab controls to display both past and current queries. This is a simple, lightweight solution that fits the characteristics of most user catalog sessions.
- •
Embedded Suggestion Bar: We embed a permanent suggestion bar into data display to offer suggestions such as spell check. When patrons choose a suggestion, the new search is executed in a separate tab.
We use these four aspects of our UI as themes to present the main work in our chapter, discussing selected related work, our iterative design process, and conclusions in each of the next four sections. We then detail our iterative development and summative evaluation process in the Development Process and Evaluation Section, and conclude with a short discussion on our current plans for deployment and future directions in our catalog project.
TopOverview + Details Panes
In the typical static OPAC UI, result lists are typically shown in response to a search and the details of an individual item are shown when its record is clicked. However, when users need to compare items in the query results (e.g. during research), such interfaces make it difficult as direct comparisons are not possible. On the other hand, displaying multiple records at once takes up too much space and presents too much clutter. We believe that in such scenarios, users would benefit from keeping the results list visible while viewing item details, as it would help keep track of their context with respect to their main task (Ellison, 2001).