Malleable Overview-Detail Interfaces

Interactive Data VisualizationData StorytellingPrototyping & User TestingUI/UX DesignersHCI Researchers

Research Background and Issues

  • Identified Issues and Challenges: The "Overview-Detail" design pattern is widely used in various information system interfaces, ranging from resource booking to shopping websites. However, these designs are often tailored to general user needs by developers, lacking flexibility to meet personalized user requirements. For instance, existing interfaces may only display prices while neglecting user-prioritized attributes such as ratings or facilities, forcing users to frequently switch between views, thereby increasing complexity.
  • Significance: The aforementioned issues directly impact users' efficiency and experience in information foraging, comprehension, and decision-making. A lack of flexible interfaces may lead to insufficient information representation, making it difficult for users to quickly locate relevant information. Allowing users to customize interfaces can enable designs to better adapt to specific user needs and task contexts.
  • Research Motivation and Related Work: Previous studies have primarily focused on design variations (e.g., nested structures or adaptations for different screen sizes) or providing specific customization features from a system perspective. However, few studies have focused on enabling users to flexibly adjust the "Overview-Detail" pattern. This paper aims to explore how to provide users with flexible interface customization capabilities through three dimensions: core content, composition, and layout.

Solution

  • Proposed Approach: The authors propose the application of the "plasticity concept," enabling users to customize and adjust "Overview-Detail" interfaces through interactive techniques across three dimensions: content (attributes), composition, and layout. These customizations encompass the attributes displayed in the interface, the way views are combined, and the spatial distribution of layouts.
  • Innovations:
    • Introduction of the "Fluid Attributes" mechanism: Allows users to directly extract or hide attributes from detail views and further utilize AI for automatic sorting, generating new attributes, and formatting operations.
    • Support for dynamic combinations and transformations of multiple views, such as lists, maps, and timelines.
    • Provision of user-friendly tools (e.g., mode switching and simple menus) to simplify the adjustment process.
  • Implementation Steps and Key Techniques:
    1. Analysis of Existing Design Space: Analyze 303 "Overview-Detail" interfaces to summarize a three-dimensional variation model—content, composition, and layout.
    2. Development of Interactive Techniques: Based on the design space, provide tools for users to customize interfaces, including the "Attributes Mode," AI-driven attribute operations, and simplified layout selection.
    3. Functional Design and Scenario Validation: Build high-fidelity design probe systems (shopping and hotel booking) to allow users to test the effectiveness of functional customization.

Research Outcomes

  • Specific Outcomes:
    1. Proposed a three-dimensional design space (content, composition, layout), summarizing the diversity of related interface designs in practice.
    2. Developed the "Fluid Attributes" mechanism to assist users in flexibly adjusting the content of overview and detail views.
    3. Experimental validation showed that AI-assisted features significantly improved user operation efficiency.
  • Experimental Results:
    • After completing online shopping and hotel booking tasks, 12 participants generally agreed that the technology was easy to use and addressed limitations of the original systems.
    • User trials demonstrated diverse customization distributions, such as "minimalists" preferring to hide numerous attributes, while "information hoarders" tended to retain all available information.
    • Users performed dynamic adjustments in real-time (e.g., at the start of tasks and during task execution), proving the design's ability to closely adapt to task needs.
  • Advantages Compared to Existing Solutions:
    • Higher user customization possibilities compared to traditional static interfaces.
    • Reduced time wasted on interface switching, improving task efficiency.
    • The use of AI to generate and manipulate new attributes significantly expanded users' ability to define interfaces.
  • Limitations and Future Directions:
    • Limitations: Experiments were conducted only for two specific scenarios (shopping and hotel booking), and the long-term effects of the functionality remain unclear; certain specific variants have not been tested among users.
    • Future Directions:
      1. Enhance support for aggregate attributes in interfaces (e.g., averages, totals).
      2. Develop tools and frameworks for direct deployment on real-world web pages.
      3. Explore the applicability of this approach in other design patterns (e.g., dashboards, chart interfaces).

The above analysis comprehensively discusses the potential and limitations of the "plasticity Overview-Detail interface" from research background to experimental results, providing clear directions for further application and expansion of the study.

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/papers/chi/189243/2025

AdRecommended

Learn AI Coding at CodeNow

open_in_newOpen DOI Link
DOI: https://dl.acm.org/doi/10.1145/3706598.3714164
At a Glance

Paper Snapshot

fact_check
dataset
Source
CHI
calendar_month
Year
2025
emoji_events
Award
No award tagged
group
Authors
4 authors
sell
Subtopics
Interactive Data Visualization, Data Storytelling, Prototyping & User Testing
work
Professions
UI/UX Designers, HCI Researchers
article
Content Status
Full text indexed
hub
Related Papers
10 related papers