Design Tidbits

back Tidbits Overview

Tools for Design and Visualization

Simplification

Interaction Design

Screen Design

Hierarchies

Visual Design

Design Process

Web, Web Applications, Web Design

Performance

Miscellany

 

 

Selecting Objects By Attributes – Part II

By Gerd Waloszek, SAP AG, SAP User Experience – March 10, 2008

In the second article of this short series, I continue to present approaches to the task of selecting one or more objects by means of their attributes. Here, I introduce two visualization techniques: the dynamic queries developed by Ben Shneiderman and coworkers; and the Attribute Explorer developed by Robert Spence and coworkers. I also look briefly at the topic of visual search and conclude the article with a "quick-and-dirty" comparison of the approaches covered in the two articles.

In the first article, I presented the following approaches to the object selection task: using a spreadsheet with attribute filters, an interactive query on a flat-file database, and implementing a Web interface for the query.

 

Starfield Displays and Dynamic Queries

Let us now fundamentally change the way in which attribute-based queries are handled and turn to two visual approaches. I will look first at dynamic queries, as proposed by Ben Shneiderman and his coworkers, Christopher Williamson and Christopher Ahlberg. The authors demonstrated their "dynamic queries" approach for the tasks of finding suitable houses (HomeFinder, together with Christopher Williams) and movies (FilmFinder, together with Christopher Ahlberg).

Combining dynamic queries with starfield displays – a refinement of scatter diagrams – makes object selection a truly visual task. Like scatter diagrams, starfield displays plot data along two dimensions. The individual data points can either be represented as simple colored shapes (see Figure 1) or they may contain figures and labels, depending on the complexity of the records they represent and the degree of detail the user needs. The dynamic query mechanism – consisting of different types of selection controls such as one-way or two-way sliders, buttons, and radio buttons – permits users to manipulate the starfield display in order to select subsets of points, namely those that satisfy the dynamic query. In addition, users can review individual points, scale, scroll, and zoom the display for further exploration of the data set. The query controls provide a subset of Boolean queries: "OR" between attributes values, "AND" between attributes.

As already noted, the starfield display is a 2D-representation. An example of a "natural" 2D-representation is a map. In the HomeFinder, a map is used to plot the locations of houses. In combination with dynamic queries, only those houses are displayed that satisfy the query conditions:

The HomeFinder application dynamically combines a starfield display (the map) with an interactive query mechanism (sliders, buttons)

Figure 1: The HomeFinder application dynamically combines a starfield display (the map) with an interactive query mechanism (sliders, buttons)

In the FilmFinder, a more recent version of this approach, a timeline is combined with popularity as the second dimension. It also incorporates alpha sliders for defining textual constraints.

The FilmFinder application combines a starfield display (timeline versus popularity) with a dynamic query mechanism (numeric and alpha sliders, checkboxes)

Figure 2: The FilmFinder application combines a starfield display (timeline versus popularity) with a dynamic query mechanism (numeric and alpha sliders, checkboxes)

As you can also see in Figure 2, users access detailed information for selected objects. This is much more necessary for visual approaches than for table-based ones. While tables usually display all the object attributes, visual representations usually only show objects as colored dots, bars, squares, or other simple shapes.

Later, Shneiderman simplified the starfield display to a discrete grid. He also addressed the problem of feedback sometimes taking longer than 100 ms in larger databases by displaying only the size of the result set, not the set itself.

Dynamic queries spur exploration, because users can interactively change the query parameters and watch the instantaneous result in the starfield display. According to Spence (2000, 2007), however, a drawback to the original dynamic queries as proposed by Shneiderman and coworkers is that data is displayed only when it satisfies the query. I will return to this issue and a solution below.

 

Attribute Explorer

Another visual approach to selecting objects based on attribute values is the Attribute Explorer, developed by Robert Spence and coworkers. Again, this tool has been demonstrated for the tasks of finding suitable houses and choosing a car. The Attribute Explorer is based on linked histograms, each displaying a frequency distribution across the possible values of one attribute. That is, the height of each histogram bar represents the number of objects that match the respective value or fall into the value range for the respective attribute. If there are not too many objects, individual items can be identified across histograms: If an individual item is selected in one histogram, it is also highlighted in the other histograms (see Figure 3). The term "linked histograms" means that manipulations in one histogram, such as movements of range sliders, are carried over to the other histograms immediately (Spence calls this brushing).

Figure 3: The Attribute Explorer uses linked histograms or bargrams

A query is performed by changing the values of sliders along the attribute values in one or more histograms. The result of such a manipulation is displayed immediately. Objects that satisfy all the criteria are indicated in a certain color, typically white. Objects that fail one or more criteria are displayed in different colors, such as gray or blue (see Figure 3). Thus, users see all of the objects all of the time, not just those that match all the criteria. In other words, the Attribute Explorer does not filter away or hide any objects. Spence refers to the difference in look between objects that satisfy all, all but one, all but two, etc. criteria as "sensitivity information" In his opinion, this characteristic of the Attribute Explorer is an important advantage over other approaches, such as dynamic queries, because it guides users in exploring constraints. Thanks to this information they get a better sense of which constraints to change and in which direction in order to increase or decrease the number of hits. Certainly, it would be possible to add sensitivity information to Shneiderman's dynamic queries as well.

The Attribute Explorer, too, can display details for selected objects and can be enhanced by adding icons or displaying images of objects that satisfy certain criteria. For example, in a variant of the Attribute Explorer that was used for choosing a car, images of cars that matched all the criteria were displayed, and the selected car was highlighted in the bargram and image list as well.

 

Visual Search

Visual search denotes the approach of choosing objects simply on the basis of their visual appearance, often without any further interactive query mechanisms. In many cases, the visual representation of objects suffices for a visual search, for example, when searching for states or cities on a map or for days in a calendar. In more abstract cases, techniques from information visualization need to be employed. Shneiderman & Plaisant (2004) present an example, in which treemaps are used in a Web product catalog for binoculars, with price determining the individual areas within the treemap. The treemap display has also been enriched to show information about individual products. According to Shneiderman & Plaisant (2004) visual search is closely related to browsing through menu structures.

 

Quick-and-Dirty Comparison

In the first article, I presented approaches that are based on a table, to which a query or filter mechanism is applied. The two visual approaches in this article literally hide the underlying table from the users' view and let them explore the data set in real-time. Of course, both require much more computing power than their text-based counterparts. In the table below, I have summarized the pros and cons of the different approaches:

Approach Pros Cons
Spreadsheet with filters
  • Query performed using direct manipulation
  • Requires only standard office software
  • Modal dialogs make interaction somewhat cumbersome
  • Query statements have limited expressive power
  • Result list displays only objects that satisfy all criteria
Simple interactive database query
  • Query performed using direct manipulation
  • Requires only consumer software
  • Query statements have limited expressive power
  • Result list displays only objects that satisfy all criteria
Natural-language query
  • Query formulated in "simplified" natural language, thus easy to understand
  • Ambiguities, synonyms, and noise words are hard to resolve
  • Users have problems with properly formulating the query statement because the natural-language use of "and" and "or" conflicts with their logical interpretations
  • Result list displays only objects that satisfy all criteria
Formal query statement
  • Formal query statement has greatest expressive power of all approaches
  • Useful for predefined reports, particularly those that are used on a regular basis
  • Requires experienced users who have knowledge of Boolean operators
  • Query usually pre-programmed and not performed in real-time
  • Result list displays only objects that satisfy all criteria
HTML query interface
  • Query performed using direct manipulation
  • Easy to use
  • Requires only a Web browser on the client side
  • Query statements have limited expressive power
  • Result list displays only objects that satisfy all criteria
Starfield display with dynamic query
  • Query performed using direct manipulation
  • Results of manipulation visible in real-time (<100ms)
  • Starfield display very intuitive (map, timeline)
  • Query statements have limited expressive power
  • Displays only objects that satisfy all criteria
  • Puts high demands on computing resources and requires specialized software
Attribute Explorer
  • Query performed using direct manipulation
  • Results of manipulation visible in real-time
  • Displays all objects, indicates how many criteria an object satisfies (sensitivity information)
  • Brushing reflects manipulations in one histogram in all linked histograms
  • Query statements have limited expressive power
  • Linked histograms (frequency distributions) fairly abstract
  • Overall less intuitive than dynamic queries/starfield displays
  • Puts high demands on computing resources and requires specialized software

Table 1: Pros and cons of the different approaches covered in the two articles

 

Conclusion

It could be well that this article series started off on a rather too basic note. After all, the text-based approaches should already be familiar to most readers. However, I am convinced that there is still a lack of knowledge regarding visualization techniques. All in all, the two articles provide UI designers with a number of alternative design choices for implementing object searches based on attribute values, and designers will surely also pull some selection criteria out of the "quick-and-dirty" comparison table.

 

References

Starfield Displays and Dynamic Queries

  • Starfield display definition (Usability First, glossary)
  • HCIL (University of Maryland): www.cs.umd.edu/projects/hcil
  • Ben Shneiderman (1999). Dynamic queries, starfield displays, and the path to Spotfire. (www.cs.umd.edu/hcil/spotfire)
  • Williamson, Christopher, and Shneiderman, Ben (1992). The Dynamic HomeFinder: Evaluating dynamic queries in a real-estate information exploration system, Proc. ACM SIGIR'92 Conference, Copenhagen, Denmark, 338-346.
  • Spotfire: www.spotfire.com
  • Ahlberg, C. & Shneiderman, B. (1994). Visual information seeking: Tight coupling of dynamic query filters with starfield displays. Proc. ACM CHI '94 Conference, 313-317.

Attribute Explorer

  • Tweedie, L., Spence, R., Williams, D.M.L., & Bhogal, R. (1994). The Attribute Explorer. ACM, Conference Companion Proceedings CHI '94, pp. 436-436. (PDF in ACM Portal)
  • Spence R. & Tweedie, L. (1998). The Attribute Explorer: information synthesis via exploration. Interacting with Computers, 11, pp. 137-146.
  • Robert Spence (2007). Information Visualization (2nd Edition). Prentice-Hall (Pearson).
  • Robert Spence (2000). Information Visualization. Addison-Wesley.
  • Robert Spence (2002). Sensitivity encoding to support information space navigation: a design guideline. Information Visualization, 1(2), pp. 120-120 (HTML)
  • Wittenburg, K., Lanning, T., Heinrichs, M., & Stanton, M. (2001). Parallel bargrams for consumer-based information exploration and choice. ACM, Proceedings of UIST '01, pp. 51-60.
  • Andy Smith (2001): Attribute Explorer - A dynamic query mechanism. (IBM developerWorks; provides a downloadable Java applet)
  • Andy Smith, Simon Moore, & Ryan Bennitt (2003): Visual Attribute Explorer. (IBM alphaWorks; provides a downloadable stand-alone Java prototype of the Attribute Explorer)

 

top top