Implementing Faceted Search User Interface

A digital library can be underpinned by a search platform such as Apache Solr, which facilitates faceted search services. In my previous posts, I have described the development of a Solr-based search engine infrastructure, involving metadata and rich binary documents indexing of multi-sourced data, viz., the CERN Library book data, content from a digital repository (Fedora). The search engine only provides underpinning services. It does not provide a user interface.

This post outlines the work involved in prototyping a digital library user interface - UX2 Library. It describes the UX design, development made with respect to an associated open source technology. We have recently tested the prototype with a group of users from the University of Edinburgh and published the results: summary and report. In my next post, I shall propose an agile technique based on 'user stories', to address the usability issues arising from this user study.

For a general introduction to both faceted search and Apache Solr, see "Developing Faceted Search Using Apache Solr, Part 1".

Building on Open Source Interface - Blacklight

Solr is a service-oriented search engine. Any web application capable of consuming web services may integrate Solr-based faceted search. For this purpose, there are various plugins and software libraries capable of mediating system interactions between web applications and Solr, for example SolrJ (Java), solr-php-client, Drupal Solr Module, rsolr and Sunspot (both Ruby), AJAX Solr (JavaScript). There are also several existing open source web applications with built-in Solr support such as Blacklight (below), Haystack.

Figure 1: Blacklight User Interface

Instead of developing a web application from scratch, we adopted Blacklight as a quick basis for UX2 Library. Similar to other discovery UI products that rely on faceted search as a unique selling point (e.g. AquaBrowser 'fresh, modern' interface), Blacklight is billed as a next-generation interface for library catalog and digital repositories. Because Solr facilitates simultaneous searching of data from heterogeneous sources, Blacklight is also a unified search interface for digital content silos. Off-the-shelf, Blacklight provides the following features:

• Faceted search - predominant feature
• Extended user services: search history/saved search, folder/bookmarking, export options
• Advanced features (additional plugins) in development: advanced search, range limits, CQL searching
• Basic login

Blacklight is a Ruby on Rails application. It is highly configurable. Since 2009, the application has been released as a Rails Engine, providing a default and fully functional (Model–View–Controller) system which can be customised progressively. For example you can change the entire look and feel ('view') and provide additional system behaviour ('controller') by overriding the default system. The Rails Engine topology mandates Blacklight code and assets to exist independently in a system location separate from the hosting (engined) application (below). This enables developers to customise and override views and methods in controllers while keeping up to date with the latest Blacklight engine development through source code management (using Git).

For further details, see the installation guideline.

Figure 2: Blacklight App Topology

Visual Design, HTML5

A visual design and style guide can provide a consistent look and feel. The BBC Global Experience Language (GEL) is an example that has inspired the UI development of UX2 Library. In particular we have adopted its typography, grid and layout system, design philosophy aspiring to clean interfaces that are "simple, useful and intuitive" while eschewing hackneyed visual elements such as round corners and gradient background. To find out more about the fundamentals of BBC GEL, read this blog post.

To implement the BBC visual design, I integrated the Compass framework into Blacklight. Compass is an overarching CSS authoring framework that integrates several existing CSS frameworks including Blueprint, 960.gs, YUI. At the core of Compass is Sass, a relatively new meta-language which provides a powerful way of writing and managing CSS codes. Sass adds advanced computing concepts to CSS3: variables, string and number operations, inheritance and mixins that enable CSS codes re-use. For example, the following Sass codes define the properties of the BBC universal grid and a mixin to display list items horizontally floating left by default. The variable nomenclature and the @import statement imply the use of Compass's built-in support for Blueprint.

// Sass variables
$blueprint_grid_width: 16px 
$blueprint_grid_margin: 16px
$blueprint_grid_columns: 31 
$baseline_grid_size: 16px

@import blueprint

// Sass mixin 
=horizontal_links($direction: left)
    padding: $baseline_grid_size/2 0 $baseline_grid_size/2 0
    ul
        margin: 0
        padding: 0 0 0 $baseline_grid_size

    li  
        float: $direction
        display: inline
        margin-right: 0.5em
        padding-right: 0.5em
        text-align: center

Sass mixins can be applied repeatedly in CSS codes. For example, the following defines several layout classes in UX2 Library, using the horizontal_list mixin defined above and column a built-in mixins from Blueprint:

.facet_limit
    +horizontal_list
    li:first-child
        padding-left: 4px
    margin-bottom: $baseline_grid_size  

.google_viewer
    +column(20)
    height: $baseline_grid_size * 38

.book_cover
    +column(5)
    margin: 0 $baseline_grid_size $baseline_grid_size 0

The $baseline_grid_size variable provides a unit of measurement for CSS properties such as height, margin. This provides consistent visual effects conformed to the intended typography and universal grid. The key layout of UX2 Library corresponds to the three columns of BBC GEL's universal grid as shown below. It consists of two areas. First, a main area spanning the two 304-pixel columns for key content including facet directory, search results, item details. Second, a side area spanning the larger 336-pixel column for supplementary or serendipitous content including results facets and external links.

Figure 3: The main layout of UX2 Library

The default views of Blacklight are implemented in XHTML 1.0, a web markup language dated back to around 2000. There have been considerable developments in markup languages, notably the development of HTML5, a major revision of the HTML standard. HTML5 improves markups with more descriptive markup designed to convey better semantic meaning. New additions include structural elements such as article, aside, nav, section, header, footer etc. for organising content, and audio, video elements for multimedia markup that is less dependent on proprietary plugins.

In accordance with this development and future-proofing, I began using HTML5 for the UX2 project website in 2009. For UX2 Library, I have also started to override the default views of Blacklight using the structural elements of HTML5. The HTML5 views are implemented using Haml, a meta-language similar to Sass. Haml provides a more intuitive way of marking up web content. It has strict indentation-based syntax ensuring well-indented clean codes. The syntax strips markup into the bare minimum and removes the need for closing tags with a lot of '<', '>' characters which is more humane to write! All HTML markups are generated automatically from Haml codes. Haml also provides a cleaner alternative to Ruby templating (ERB) - a way of embedding Ruby codes and logics in views. For example, '<% end %>' elements are not required in Haml as the ending of a Ruby block is implicit by means of new lines and indentations (see Ruby Blocks and Haml).

Interaction Design - Faceting

I would describe the interactions between users and faceted search UI as "faceting". The interaction pattern of faceting is broadly consistent across different UI products. Faceting usually involves cyclic interactions between two UI regions: the main facet area and the breadcrumb-like area consisting selected facets (below). Users may select facets, review results, select more facets to refine results. They might also interact with the selected facets, in particular removing them to obtain different search results e.g. (below) removing 'Landscape', 'History & geography' (below) to view all '1850AD - 1899 AD' resources. Key differences among faceted search products are often due to the ways with which these two UI region, 'facets', 'selected facets' are implemented. These two areas have been a focus of UX2 Library development.

Figure 4: Faceted Search UI of the World Digital Library

Facets

The Blacklight UI presents facets on the left side of the UI by default. The facets are hidden within the respective headings or categories by default (underneath 'Limit your search' in Figure 1). Users need to toggle a heading to reveal the facets before selecting them. The facet headings also don’t look like expandable sections. These, especially the extra toggling step diminish the usability of facets. The negative impacts are also multiplied with the number of facet headings. Therefore removing this hidden aspect of the facets is the first customisation I made on Blacklight by stripping out the Javascript toggling effect. To increase facets visibility in the front page, the facets are layout openly in horizontal lists in the main area - see Figure 3.

Despite the improved visibility, our recent usability test still alluded to potential usefulness issues. During the test, the first course of user actions tend to involve the search box instead of the front-page facets. However, the user study did suggest the inclusion of dynamic content (search history, saved searches, bookmark items) in this UI area to encourage user interaction. I conducted a guerilla test with library users through a card sorting drill, to gauge their preference for labels and keywords in the front-page. Recommendation and editorial content are the obvious choices. Another possible enhancement may also involve some form of personalisation such as adding and removing facets.

Post-search, the facets are presented in the side area of UX2 Library, again in horizontal list layout as shown below.

Figure 5: Facets from a search session in UX2 Library

Selected Facets: Breadcrumbs, Cherry-Picking, Cherrycrumbs Patterns

Facets selection and deselection is a key faceting interaction. From UX2's studies of faceted search UIs including the AquaBrowserUX case study], I found two general interaction design patterns involving the selected facets. The patterns both provide the primary informational requirement: displaying the selected facets, but they are different in terms of interaction characteristics:

• Breadcrumbs: The premise of this pattern is similar to its counterpart: breadcrumbs trail in web UIs. A facet breadcrumb lists selected facets in chronological order. Each facet contains a link, offering user a way to navigate back to a previous facet selection. Examples: AquaBrowser (below) and Europeana.

Figure 6: Facet Breadcrumbs in AquaBrowser

• Cherry-picking: This pattern is slightly more fine-grained and unique to faceted search UI. The facets are not presented as links, but as individual removable items (see the WDL example in Fig.4). The interaction on a particular facet is atomic; user can cherry-pick a facet to remove (e.g. 'landscape' Fig.4) without causing other facets to be removed, in contrast to breadcrumbs. The version of Blacklight I worked on provides a cherry-picking UI (below).

Figure 7: The original Blacklight selected facets UI I worked on

The default UI occupies a large area of screen estate. The facet items span horizontal empty areas and cascade down a prime UI location. I therefore had to minimise this visual impact by reducing the size of facet items and list them in a horizontal layout (below, Fig.8). I have noticed recently that several other Blacklight-engined library catalogues (e.g. Stanford University) and Blacklight (recent update) now provide a less 'severe' looking cherry-picking UI.

In addition to visual presentation, I grappled with an issue relates to the presentation order of facet items. Currently, the default cherry-picking UI does not display facet items in the same order with which the users select the facets. A newly selected facet should be appended to the facet items stack or list a la breadcrumbs style, and not get inserted into the UI at random locations (especially preceding the last selected facet) which is currently the case. This unpredictable system behaviour is inconsistent with user interaction and mental model for scanning facets. Interestingly, this issue also exists on the World Digital Library UI.

I implemented a new interaction design to solve this issue which I would term as 'cherrycrumbs':

• 'Cherrycrumbs' a composite pattern (cherry-picking + breadcrumbs): I implemented a new cherry-picking UI prototype based on this design. The new UI contains an orderly facet breadcrumbs integrating both links for retrospective navigation and removable facet items for cherry-picking interaction (below).

Figure 8: UX2 Library cherrycrumbs UI for selected facets

The randomness of facet display order is caused by the underlying Ruby system object Hash, a container with built in logic that does not preserve order of object (facets) insertion. The development of the cherrycrumbs UI required a custom solution to tackle this system cause. The solution is based on the use of Ruby Dictionary, a third-party software (Hash subclass) capable of preserving insertion order of Hash objects (key-value pairs). The development process was quite complex and involved overriding existing Blacklight system (helper) methods.

The cherrycrumbs UI design dovetails with the current development of breadcrumb navigation, especially the emergence of "integrated faceted breadcrumbs" with embedded functionalities and UI elements. The design, although rudimentary, belongs to this trend because it incorporates a simple facet removal UI into the breadcrumbs trail. Further development in this area for UX2 Library may involve the use of checkbox interactions instead of 'x' links, changing facet and search field through embedded drop down menus, reorganising facet selection order (cf. mspace.

No Time To Elaborate..

There are several additional strands of development, each of which merits an individual write-up. I hope to elaborate these towards the end of UX2 when we are doing more dissemination activities. Below is a summary:

Data Enrichment. Concentration user experience development is a remit of UX2. The development relies on various mechanisms of aggregating distributed services and data to provide better user experience. The UX2 Library prototype already provides a unified search interface for two different datasets - a library catalogue (CERN Library dataset) and a digital library of e-science resources, aggregated through Apache Solr multi-core data architecture. In another form of data concentration, book covers (seen in the above figures) are fetched dynamically from Google Books using the Book Search APIs and ISBN in the library catalogue as identifiers. The Google integration was accomplished through a Ruby gem (software library) - gdata for mediating access to the Google APIs and by overriding the respective methods (index, show) in the catalog controller of Blacklight. In addition to book covers, the prototype also augments individual item details with book preview content including table of content retrieved from Google, as well as library holding data - see Figure 9.

Intriguing Branches. Intriguing Branches is an information architecture pattern presenting additional information users would find useful in serendipitous manners. To experiment with this pattern, I updated the prototype to provide external links ('intriguing branches') in the item details page (Figure 9). A third-party content suggestion engine, Zemanta enabled this service to be quickly prototyped. Zemanta is usually used by bloggers as an assistive tool to provide supplementary information during the writing process. When the item details page is accessed, the library UI (controller) sends a block of text composed of item metadata and description to Zemanta's API via a HTTP (POST) request. The engine puts the text through natural language processing using semantic technology and returns various types of suggestions such as wikipedia links, tags and other related online articles. The suggestions are subsequently presented in the side area of the UI. All interactions between the library UI and Zemanta are facilitated through additional method overrides in the catalog controller.

Figure 9: Various forms of data enrichment in UX2 Library

Mobile Web. We are in the last few months of UX2 and delving into mobile device research and development! This coincides with the project aim to investigate ways of diffusing digital library user experience through platforms other than desktop computers. Key challenges of mobile development for the project are manifold. These include determining the scope and form of useful mobile library services and how these services are developed and delivered in usable manners to the users. We are investigating two existing forms of mobile service medium: customised web front-end and application native to mobile platforms (iOS, Android). There is an ongoing debate on which of these two options should development resources best be invested in. The decision is obvious for us because Blacklight is a Model-View-Controller (MVC) application. It is relatively easy to create a custom mobile web front-end: simply implement additional mobile views/layout over the existing web application. I therefore began development on a mobile web version of UX2 Library while gaining technical capacity to build a native mobile application (iOS). A preliminary version of the mobile web as shown below, took one week to implement.

Figure 10: UX2 Library mobile views, front-page, search results and item details page

Broadly, the mobile web development involved mobile look and feel (CSS) implementation and UI simplification, a process of stripping out information and UI features such as extended services, faceting, Zemanta branches, pagination for a basic resource discovery UI. This creates a simple UI with cleaner look and feel, better suited to "fast launch, short use" mobile use scenarios. Additional features including faceting and extended user services (bookmarking, search history etc) may be re-introduced progressively pending on further research and user studies to determine if the services are suited to mobile use scenarios and in what form they should be delivered. A key requirement of the mobile web development is the installation of an additional Ruby-on-Rails plugin, mobile-fu to detect mobile device requests so that the library UI can serve mobile views accordingly. The following HTML 'viewport' meta element is also required to render the views consistently on screens of different resolutions, and to prevent zoom-out views caused by the default viewport of higher resolution devices such as iPhone 4:

<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'>'

Below is a link to the codebase of UX2 Library:

• UX2 Library source code.

That's all for now. Thanks!

Comments

[Jcd92410]

Thanks a lot for this great article!

JCD

[ram]

amazing work..
Thanks much!