Malleable Overview-Detail Interfaces

TL;DR

This work investigates malleable overview-detail interfaces, where end-users customize both the content and spatial arrangement of an overview and its detail views. Through a large-scale content analysis, the authors identify three design-space dimensions—content, composition, and layout—and introduce Fluid Attributes and AI-assisted techniques to surface, hide, sort, filter, generate, and reform attributes across views. A pair of high-fidelity design probes demonstrates that users produce diverse configurations and unique usage patterns, validating the approach and highlighting practical workflows such as multitasking with multiple overviews and task-centric attribute organization. The results suggest broad applicability, outline implementation implications, and chart future directions toward widespread, user-defined abstractions and real-world deployment of malleable interfaces.

Abstract

The overview-detail design pattern, characterized by an overview of multiple items and a detailed view of a selected item, is ubiquitously implemented across software interfaces. Designers often try to account for all users, but ultimately these interfaces settle on a single form. For instance, an overview map may display hotel prices but omit other user-desired attributes. This research instead explores the malleable overview-detail interface, one that end-users can customize to address individual needs. Our content analysis of overview-detail interfaces uncovered three dimensions of variation: content, composition, and layout, enabling us to develop customization techniques along these dimensions. For content, we developed Fluid Attributes, a set of techniques enabling users to show and hide attributes between views and leverage AI to manipulate, reformat, and generate new attributes. For composition and layout, we provided solutions to compose multiple overviews and detail views and transform between various overview and overview-detail layouts. A user study on our techniques implemented in two design probes revealed that participants produced diverse customizations and unique usage patterns, highlighting the need and broad applicability for malleable overview-detail interfaces.

Figures (25)

• Figure 1: (A) Semantic Scholar includes a paper’s title, authors, abstract, and others, but does not include figures in the overview. (B) Airbnb displays pins with prices on a map, representing the nightly prices of each location. Users must click each pin to view details not shown in the overview, such as the paper figures, ratings, or number of bedrooms, and navigate through each full page of details.
• Figure 2: Design space of overview-detail interfaces on the Web: Content, Composition, and Layout.
• Figure 3: Example variations in the content dimension. (A) Indeed displays key attributes in both the overview and detail view. (B) Zillow's map shows prices, but if multiple units are present, it instead shows the number of units. (C) eBay provides the "Add to Watchlist" button in both views, whereas (D) Etsy provides it only in the detail. (E) Gmail cuts off long text with ellipses while (F) Quora does so with a gradient.
• Figure 4: Example variations of the composition dimension. (A) Zillow shows a view composed of both a grid and a map. Southwest presents flight information through both (B) a 5-day table view and (C) a 30-day calendar view. (D) New York Times nests an overview inside a detail view with suggested articles. (F) Discord first shows a tooltip detail view of the user profile, and upon expanding, shows the full detail view.
• Figure 5: Example variations in the layout dimension. (A) MLB’s player profile page maps batting points onto the baseball field; clicking a plot point opens a detail view of a video replay of the point. (B) Ticketmaster’s seating selection page also shows a map overview; when a particular seating section is selected, the overview list changes to match the corresponding section. (C) ESPN shows each player's stats in a game, which can be opened as a dropdown. (D) Weather.com uses a similar dropdown layout, but unlike ESPN, multiple detail views can be opened simultaneously.