Prototyping a User Interface for the ELF Information Browser

This article describes the design, prototyping and evaluation of a user interface for the Electronic Learning Facilitator, an intelligent assistant for researchers browsing the ISLE Object Store. After outlining an initial user interface based on a filing cabinet metaphor, this article describes a prototype user interface inspired by the SuperBook structured browsing and retrieval system.

1. Introduction

The Electronic Learning Facilitator (ELF) project aims to develop an intelligent assistant for helping researchers locate information in the Intensely Supportive Learning Environment (ISLE) Object Store (Kirby 1995). As users browse and search for information using various tools, the ELF observes this activity and makes inferences about their interests. The ELF maintains a profile for each user derived from a history of recent interactions and the user’s stated preferences, such as his or her preferred search tools. The ELF maintains a description of the network resources in the ISLE Object Store and matches users to appropriate network resources using a set of rules captured in a knowledge-based system. The ELF must present itself unobtrusively when gathering information about users and when making suggestions to users. The following diagram illustrates how the ELF interacts with users, the ISLE Object Store and network resources such as the Internet.

The ELF interacts with users, the ISLE Object Store and network resources

This article describes the design, prototyping and evaluation of a user interface for presenting information to users once the ELF has found it. Section 2 describes the first version of the ELF user interface which presented information using a filing cabinet metaphor. Section 3 describes the second version which presented information as a SuperBook. Section 4 describes the evaluation of the prototype SuperBook interface.

2. The Filing Cabinet User Interface

The first version of the ELF Information Browser used the filing cabinet metaphor shown below. The filing cabinet metaphor was inspired by General Magic’s extension of the desktop metaphor into the Magic Cap virtual office (Halfhill & Reinhardt 1994). The filing cabinet metaphor, which is familiar to users as a store of information, would represent the ELF as an icon at the bottom of the screen. An icon would be unobtrusive, which is an important requirement for the ELF project.

The ELF filing cabinet metaphor

The filing cabinet user interface has three drawers. The top two drawers divide the information alphabetically into A to M and N to Z. The bottom drawer contains the user preferences for the ELF Information Browser. Users access the information in each drawer by double-clicking the draw.

The following diagram illustrates the user interface for displaying the information contained in the drawers. To carry the filing cabinet metaphor through, information is grouped by letter and presented in hanging files similar to At Ease, a front-end to the Macintosh Finder that groups applications and files into categories displayed on hanging files.

Information grouped by letter and presented in a hanging file

The filing cabinet icon provides two types of modeless feedback. First, the draws pop out to indicate that the ELF has found new or updated information. Second, the depth of the 3D filing cabinet icon is proportional to the amount of unread information; the depth increases when the ELF finds and updates information and decreases when users read information.

Opening filing cabinet draws provides access to information

The disadvantage of the filing cabinet user interface is the limitation of alphabetization. Users would need to create new categories to organize information in a way that is meaningful to them. With potentially large amounts of information being found by the ELF, creating new categories and deciding where information should go would be a cumbersome administrative duty for users. Letting the ELF categorize incoming information seemed appealing at first but several questions soon arose, including:

  • how should the information be categorized?
  • what rules should be used?
  • who should define the rules?
  • what happens if information fits into more than one category?

At this point the disadvantages of the filing cabinet metaphor outweighed its advantages. After informally evaluating a paper prototype of the filing cabinet user interface, I abandoned it in favor of a radically different approach, the SuperBook.

3. The SuperBook User Interface

The SuperBook is a structured hypertext browsing and retrieval system designed to improve the usability of conventional documents (Egan et al. 1989). The SuperBook augments regular hypertext with the following features:

  • rich indexing;
  • fisheye views;
  • table of contents;
  • dynamic page composition and highlighting; and
  • annotations.

The SuperBook indexes each word of the input documents and creates a large but efficient data structure. The likelihood of a user search term matching an indexed word is increased by aliasing, which lets users assign synonyms for jargon used by the authors of the documents. The SuperBook compiles search results into a book, which it presents as a table of contents with a fisheye view. Fisheye views presents detailed information at the focus of the view and presents more general information at the periphery. Users can expand each item in the table of contents to reveal more detail (the focus), leaving the other items to provide context (the periphery). The SuperBook presents pages of text found by keyword searching to the right of the table of contents. Search keywords are highlighted in the text which users can annotate with margin notes.

Egan et. al. (1989) found that the SuperBook enabled students to answer search questions more quickly and more accurately than they could with conventional texts. Students also wrote higher quality open-book essays using the SuperBook than they did with conventional texts. These results suggested that a user interface similar to the SuperBook would be suitable for the ELF Information Browser. As a SuperBook, the ELF would compile search results into a document. Users would then not have to concern themselves with categorizing the information found by the ELF because the table of contents automatically categorizes the search results. The SuperBook’s aliasing facility would also enable the ELF to locate relevant information even when information authors use different terms to ELF users when describing the same concept.

I adopted a formative evaluation strategy for developing the ELF’s SuperBook user interface; after I produced each version of the prototype in Visual Basic I evaluated the prototype and used the results of the evaluation to develop the next iteration of the prototype. I produced four versions of the ELF SuperBook interface before arriving at a design I was happy with. The following screenshot presents the fifth version of the prototype.

ELF SuperBook prototype version five

The ELF’s SuperBook user interface is composed of three areas:

  1. Word Look Up;
  2. Table of Contents; and
  3. Page of Text.

The Word Look Up area contains:

  • a list to hold words the user can choose to search for;
  • an Add word text entry box; and
  • a Find Word button (this button is disabled until the user selects an item in the list).

The Table of Contents area displays the table of contents for the document constructed from the search results.

The Page of Text area contains:

  • a scrollable text box to hold extracts from the search-results document;
  • a list to simulate a margin for adding annotations;
  • a Find Selection button for searching for selected words or phrases (this button is disabled until the user selects an item from the text box); and
  • a Clear Page button which empties the Page of Text scrollable text box.

To initiate a search, the user first adds a word to the Word Look Up list by typing a word into the Add word text input box and pressing return. The word is then added to the Word Look Up list. As soon as the user selects an item in the Word Look Up list, the Find Word button becomes enabled and when pressed, produces a table of contents. The table of contents is built from words found in the search results. The number of occurrences of each topic is presented in square brackets after the item in the list. Double-clicking an item expands the item to reveal sub-topics (the fisheye view). Double-clicking an expanded item collapses the item to hide unwanted detail. Clicking on an item with no sub-topics displays the item in the Page of Text area. In a full implementation of the SuperBook interface, clicking anywhere in the margin of the Page of Text area would enable users to add annotations. The following screenshot shows the ELF SuperBook user interface after a search for broccoli, which was one of the evaluation tasks:

ELF SuperBook prototype version five after a search

4. Evaluating the Prototype SuperBook

I performed a summative evaluation which focussed on searching using a keyword and the table of contents. Five participants were given a brief background to the ELF and asked to perform two tasks:

  1. Find a stir-fry recipe containing broccoli.
  2. When the recipe had been found, add a note in the margin to remind the participant to make it.

No explanation of the operation of the ELF was given to see how far participants could get before asking for help. The SuperBook is a simple idea so my usability goal was for participants to be able to perform the above tasks without explanation or a help facility.

After the evaluation, the participants’ responses and suggestions implied that it was not obvious how to start a search. Although participants confirmed that the placement of the Word Look Up area above the Table of Contents area and to the left of the Page of Text area produced a natural top-to-bottom and left-to-right progression, within the Word Look Up area the Add word text input box was below the list. The position of the Add word box broke the natural progression because even though participants progressed top-to-bottom through the application, they progressed bottom-to-top in the Word Look Up area.

When empty, the Word Look Up list looked like a text input box and participants wanted to type directly into this area. This was because the Add word text input box was below the list and did not initially have the input focus. One participant felt that it would be more natural to start with a few words in the Word Look Up list because, as the ELF had been monitoring him, it would have a rough set of keywords to start with. This would also help differentiate an empty list from an empty text input box.

The position of the Find Word button next to the Add word text input box gave participants the impression that the Add word box was not sensitive to input. Again, this was probably strengthened by the input box not having the focus. It was not obvious to one participant that they had to select a word from the Word Look Up list before the Find Word button would be enabled. One participant suggested that to help identify the Word Look Up area as a list, the title should be changed from Word Look Up to List Of Words To Look Up and the label of the Add word text input box should be changed to Add word to look up. Furthermore, the Find Word button should be renamed Find Selected Word to give users a clue to enable them to proceed without help.

The Table of Contents area was satisfactory except that a method to distinguish expandable and non-expandable items was required. I observed that participants clicked once on an item in the table of contents rather than the expected double-click, which was probably a sign of participants’ tentative exploration of the interface. In the next version of the prototype, item expansion was invoked with a single click.

To summarize, the following changes were made to the prototype after the evaluation:

  1. the Add word text input box was moved above the Word Look Up list;
  2. the Add word text input box was renamed Add word to look up;
  3. the Word Look Up list was renamed Words to look up;
  4. the Find Word button was renamed Find Selected Word;
  5. the square brackets were removed from table-of-contents items that cannot be expanded; and
  6. table-of-contents item expansion was changed from double- to single-clicking.

The following screenshot illustrates version six of the ELF SuperBook interface, which incorporated the above changes. Version six also incorporated online help that provided simple textual descriptions of the Word Look Up, Table of Contents and Page Of Text areas.

ELF SuperBook prototype version six after a search

In a follow-up evaluation, five participants new to the ELF SuperBook user interface performed the same tasks under the same conditions (I provided a brief background to the ELF but no explanation of its SuperBook user interface). All participants except one were able to perform the tasks without asking for an explanation or using the help facility. The participant who did use the help facility at the very beginning did not use it after she had entered a word into the Word Look Up area. The changes made to the prototype after the first evaluation produced the right visual clues for most participants to get started and to complete the tasks.


  • Kirby R., Patrick McAndrew, Alistair Kilgour, Hamish Taylor and Terry Mayes, “ELF: The Electronic Learning Facilitator”, Journal of the Association for Learning Technology, 3(1), 1995.
  • Egan, Dennis E., Joel R. Remde, Louis M. Gomez, Thomas K. Landauer, Jennifer Eberhardt and Carol C. Lochbaum, “Formative Design-Evaluation of SuperBook”, ACM Transactions on Information Systems, Vol. 7, No. 1, 1989.
  • Halfhill, Tom R. and Andy Reinhardt, “Just Like Magic?”, Byte, February 1994.