Diamond Browser: Faceted Search on Mobile Devices Robert Capra
Jason Raitz
School of Information and Library Science University of North Carolina Chapel Hill, NC
School of Information and Library Science University of North Carolina Chapel Hill, NC
[email protected]
[email protected]
ABSTRACT Faceted search interfaces are commonly used on the Web, especially on sites for online shopping, document collections, and library catalogs. As use of mobile web devices such as smartphones and tablet computers with smaller screens has increased, designers are adapting support for faceted search interfaces to meet the limitations of smaller screens. Although there have been a number of studies that have examined faceted search interfaces on traditional computer displays, few studies have explored the tradeoffs and use of smaller-screen faceted interfaces. In this paper, we present the Diamond Browser, a system we are building to rapidly design, test, and conduct evaluations of faceted search interface designs for mobile devices. We describe the system architecture and two initial interfaces that we developed.
Keywords Faceted search interfaces, mobile HCI
1. INTRODUCTION Faceted search [8][13] has its roots in the colon classification scheme developed by S.R. Ranganathan [13]. In recent years, researchers have applied and studied concepts of faceted classification in a variety of information seeking systems, including Flamenco [5], the Relation Browser [1][10][16], SERVICE [7], and mSpace [14]. Faceted search and navigation interfaces are now commonplace on the Web. Many major online retailers incorporate faceted search and navigation as part of their site designs. University and public libraries are incorporating faceted interfaces into their online catalogs, giving users the ability to filter results on metadata such as Library of Congress subject headings, geographic locations, and item availability. Across a variety of systems, facets allow users to gain insight about the structure of a collection, preview dimensions of a query, and understand the context of their search. In the context of desktop-sized displays, Marti Hearst and her colleagues developed and tested a variety of faceted search interface designs as part of the Flamenco project [2][3][4][5][15]. Among their results, they found that users “preferred being allowed to navigate in multiple hierarchies” [3, p. 1], as opposed HCIR 2011, October 20, 2011, Mountain View, CA, USA. Copyright is held by the authors.
to interfaces that required users to explore only one facet at a time. In one study, they tested two interfaces: a “matrix view”, and a “single tree view”. The matrix view displayed multiple facets along the left side of the screen and search results in the center/right. At any time in the search process, users could see and select facets from the left side. The “single tree view” was designed like a hierarchical directory. There was no left-hand column of facets, but subcategories of the current category were shown at the top of the screen. Search results were shown below the list of subcategories. This view did not allow selecting items from more than one facet. Results from this study showed that users had a strong preference for the matrix view [2]. At a recent HCIR workshop, Hearst identified the need for more research to determine “if faceted navigation is well-suited for the small screen” of mobile devices [4, p. 5] and noted that faceted navigation may work better with touch-screen mobile devices than with keyboard-based mobile interaction. Search interfaces on desktop-sized displays (e.g., 1024x768 pixels or larger) commonly display facets down the left-hand side of the screen, occupying 5% to 10% of the screen. Directly applying a similar approach for mobile devices with screen sizes of 240x320 pixels could create serious limitations on the amount of additional information that could be displayed horizontally. The FaThumb project explored faceted navigation of mobile devices, primarily by mapping number keys to navigation choices [6]. On the web magazine UXmatters, Greg Nudelman [11][12] outlined a series of design approaches to present faceted interfaces on small screen devices. Boon Low [9] has written about the design and prototyping of faceted interfaces for digital libraries, including discussion of mobile web issues. With increasing use of mobile devices such as smartphones and tablet computers, we set out to examine the adaptation of faceted search interfaces to smaller screen sizes and touch-screen interaction. In this paper, we present progress on our first step toward this goal: a software infrastructure to allow rapid prototyping and evaluation of mobile faceted interfaces.
2. THE DIAMOND BROWSER The Diamond Browser is designed for designers and researchers to use to develop, test, and evaluate faceted search interfaces for mobile devices. Diamond is designed to provide the basic infrastructure needed to design a mobile faceted search interface, and to be easy to modify and configure. Figures 3 and 4 show example faceted interfaces created using the Diamond system with a collection of items from the Open Video project (www.openvideo.org)
2.1 System Architecture The system was built using a standard Ubuntu 10.04 LTS AMI image running on Amazon’s EC2 environment and uses Lucene/Solr, Lucidworks Enterprise, and SolrPHPClient to
support back-end search and facet capabilities and integration with PHP. An overview of the system architecture is shown in Figure 1.
as a starting point for creating other interfaces. This interface uses a style that displays all the interface elements in a vertical sequence: sbox, cbox, fbox, rbox. An advantage of this approach is that the facet choices (fbox) are visible early in the page and can be used for immediate navigation. The baseline interface is also useful when configuring a new data source. When fine tuning facet categories it is helpful to minimize the effort required to see them by displaying the facets immediately below the cherry picking box. However, by displaying the facets early in the baseline interface, the results may be pushed off the bottom of the visible page, requiring a user to scroll to see them. Many currently deployed mobile facet interfaces opt for a different approach that places the results early on the page and requires action to see the facets. For example, facets may be placed below the initial results or loaded onto a separate page and may require a button press to reveal the facets. The second interface (called the “Facet Toggle” interface) included in the Diamond Browser hides the facets initially when the page is loaded and then displays them when the “Narrow results” button is pressed (Figure 4). This interface was created with a small Javascript JQuery script, slidetoggle. Implementation was fairly simple and consisted of: a) including the JQuery library into the code, b) adding the “Narrow results” button, c) pointing the slidetoggle function at the button, and d) hiding the fbox section using CSS.
Figure 1. Diamond System Architecture Figure2 illustrates the support files for three different interfaces (a, b, and c) in the system. For each faceted interface two files are created: a CSS file (e.g. mobilea.css) and a corresponding PHP file (e.g. searcha.php). These files contain the CSS, Javascript, and PHP code needed to implement a particular faceted design. Diamond provides scaffolding code to support common faceted search interface functionality as shown in Figure 1 and outlined in Figure 2. These functions include: a query/search box (sbox), a breadcrumb/cherry picking display of the facets included in the current query (cbox), a display of the facets available (fbox), and a results display (rbox). These scaffolding elements can be easily moved, re-styled, and their behavior can be changed by modifying the CSS, Javascript, and PHP code in the files mentioned above. The search.php files (e.g. searcha.php, searchb.php) are structured with HTML
elements as shown in Figure 2. The search.php file makes PHP include calls to Diamond’s libraries of PHP code to support communication with back-end Lucene/Solr components for common functions: connect_vars.php to handle the connection to Solr, cbox.php to support breadcrumb/cherry picking, fbox.php to return the facets, and rbox.php to return the result records from a search. This structure allows researchers to rapidly create and implement their own faceted interface designs without having to re-implement common elements. Diamond uses Solr/Lucene to store data on the back-end, so new or different document collections can be added using either Solr or Lucidworks.
Future interfaces can be similarly created by simply copying the default interface, search.php, and modifying the code to create the style. Diamond provides the scaffolding code and base functions to support navigation, query construction and tracking, results display, and integration with the Solr/Lucene back-end.
4. FUTURE WORK We are building the Diamond system with a goal of implementing several different styles of mobile faceted interfaces and evaluating them in a laboratory study, similar to the approaches used by Hearst and her colleagues [2][3][4][5][15] to evaluate desktopsized faceted interfaces. In our evaluations, we hope to test common designs in current use, designs proposed by Nudelman [11][12], and experimental designs.
5. REFERENCES [1] Capra, R. G., & Marchionini, G. (2008). The Relation Browser Tool for Faceted Exploratory Search. In Proc. JCDL 2008. New York, ACM Press, p. 420. [2] English, J., Hearst, M., Sinha, R., Swearingen, K., & Lee, K. (2002). Flexible search and navigation using faceted metadata. Unpublished manuscript. [3] Hearst, M. (2006). Design recommendations for hierarchical faceted search interfaces. ACM SIGIR Workshop on Faceted Search.
3. INETERFACES DESIGNED
[4] Hearst, M. (2008). UIs for Faceted Navigation: Recent Advances and Remaining Open Problems. In Proc. HCIR ‘08.
Currently, we have designed two test interfaces using the Diamond system. Both interfaces use data items from the Open Video project collection (www.open-video.org)
[5] Hearst, M., Elliott, A., English, J., Sinha, R., Swearingen, K., & Yee, K. (2002). Finding the flow in web site search. Communications of the ACM 45(9): 42-49.
The first interface is shown in Figure 3. We call this interface the “Baseline interface”. It is useful for development and can be used
[6] Karlson, A. K., Robertson, G. G., Robbins, D. C., Czerwinski, M. P., & Smith, G. (2006). FaThumb: A Facet-
Figure 2. Template of a search interface page (search.php) Based Interface for Mobile Search. In Proc. CHI 2006. New York, ACM Press, p. 711–720. [7] Kules, B., Kustanowitz, J., & Shneiderman, B. (2006). Categorizing web search results into meaningful and stable categories using fast-feature techniques. In Proc. JCDL ‘06, (pp. 210-219). New York: ACM Press.
[12] Nudelman, G. (2010b). Design Patterns for Mobile Faceted Search: Part II :: UXmatters. Retrieved July 18, 2011, from http://www.uxmatters.com/mt/archives/2010/05/designpatterns-for-mobile-faceted-search-part-ii.php. [13] Tunkelang, D. (2009). Faceted Search. Morgan & Claypool Publishers. doi: 10.2200/S00190ED1V01Y200904ICR005.
[8] La Barre, K. (2010). Facet Analysis. In B. Cronin (Ed.), Annual Review of Information Science and Technology (pp. 243-284). Medford: Information Today, Inc.
[14] Wilson, M. L., & schraefel, m. c. (2008). A longitudinal study of exploratory and keyword search. In Proc. JCDL ’08, (pp. 52-56). New York: ACM Press.
[9] Low, B. (2010). Implementing Faceted Search User Interface - Enhancing User Interactions in Digital Libraries. Retrieved May 20, 2011, from http://boonious.typepad.com/ux2/2011/01/implementingfaceted-search-ui.html.
[15] Yee, K.-P., Swearingen, K., Li, K., & Hearst, M. (2003). Faceted metadata for image search and browsing. In Proc. CHI ’03, (pp. 401-408). New York: ACM Press.
[10] Marchionini, G. and Brunk, B. (2003). Toward a general relation browser: A GUI for information architects. Journal of Digital Information, 4(1). [11] Nudelman, G. (2010a). Design Patterns for Mobile Faceted Search: Part I :: UXmatters. Retrieved July 18, 2011, from http://www.uxmatters.com/mt/archives/2010/04/designpatterns-for-mobile-faceted-search-part-i.php.
[16] Zhang, J., & Marchionini, G. (2005). Evaluation and evolution of a browse and search interface: Relation Browser++. In Proceedings of the 2005 National Conference on Digital Government Research (p. 179–188). Digital Government Society of North America.
Figure 3. Baseline Interface
Figure 4. Facet Toggle Interface
