Malleable Overview-Detail Interfaces
Authors
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:
- Analysis of Existing Design Space: Analyze 303 "Overview-Detail" interfaces to summarize a three-dimensional variation model—content, composition, and layout.
- 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.
- 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:
- Proposed a three-dimensional design space (content, composition, layout), summarizing the diversity of related interface designs in practice.
- Developed the "Fluid Attributes" mechanism to assist users in flexibly adjusting the content of overview and detail views.
- 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:
- Enhance support for aggregate attributes in interfaces (e.g., averages, totals).
- Develop tools and frameworks for direct deployment on real-world web pages.
- 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.
Research Questions / Practical Problems
Question signals indexed for this paper.
Research Questions
3- How can users flexibly customize overview-detail interfaces across three dimensions (content, composition, layout)?Category: AI Understanding, Task Delegation, and Algorithm GovernanceSimilar questionsarrow_forward
- How can a fluid property mechanism help users dynamically adjust interface content?Category: AI Understanding, Task Delegation, and Algorithm GovernanceSimilar questionsarrow_forward
- How can AI-assisted features improve users' operational efficiency when customizing overview-detail interfaces?Category: AI Understanding, Task Delegation, and Algorithm GovernanceSimilar questionsarrow_forward
Practical Problems
1- Users waste time switching views and cannot quickly access needed information.Category: AI Understanding, Task Delegation, and Algorithm GovernanceSimilar questionsarrow_forward
- 80%
DataSelfie: Empowering People to Design Personalized Visuals to Represent Their Data
CHI '19· Interactive Data Visualization +1
- 80%
ActiveInk: (Th)Inking with Data
CHI '19· Interactive Data Visualization +1
- 80%
Beyond Instructions: A Taxonomy of Information Types in How-to Videos
CHI '23· Interactive Data Visualization +1
- 67%
InfoNice: Easy Creation of Information Graphics
CHI '18· Interactive Data Visualization +1
- 67%
Comparing Effectiveness and Engagement of Data Comics and Infographics
CHI '19· Interactive Data Visualization +1
- 67%
Decipher: An Interactive Visualization Tool for Interpreting Unstructured Design Feedback from Multiple Providers
CHI '20· Interactive Data Visualization +1
- 67%
TableCanoniser: Interactive Grammar-Powered Transformation of Messy, Non-Relational Tables to Canonical Tables
CHI '25· Interactive Data Visualization +1
- 67%
Does a Picture Paint a Thousand Words? Using Visual and Textual Channels to Understand Attitudes and Beliefs
CHI '26· User Research Methods (Interviews, Surveys, Observation) +2
- 67%
Datastorming: Crafting Data into Design Materials for Design Students’ Creative Data Literacy
C&C '21· Interactive Data Visualization +2
- 67%
Familiarisation: Restructuring Layouts with Visual Learning Models
IUI '18· Interactive Data Visualization +2
Based on Jaccard similarity of research subtopics & professions (≥60%)