Belidor: A Specification Language for Operationalizing Structural Analogies Between User Interfaces

Paper Title

Belidor: A Specification Language for Operationalizing Structural Analogies Between User Interfaces

Publication Info

• Topic area: Specification language for structural analogies in user interfaces.
• Keywords: Belidor, structural analogies, user interfaces, specification language, HCI, interactive systems, design patterns, analogy algorithm, UI semantics, relational model.

Background and Problem

• Problem / challenge: Existing methods for analogical reasoning in user interfaces rely heavily on visual representations, limiting their ability to capture deeper, structural analogies that inform functionality and interaction.
• Significance: A better representation of UI semantics can enable designers to discover and leverage analogies across diverse interfaces, fostering innovation and improving design practices.
• Motivation and related work: Prior work in HCI has focused on visual style transfer and DOM-based analogies, which fail to capture the underlying structures of interactive systems. Inspired by frameworks like the Grammar of Graphics, this paper seeks to foreground structural relationships as a basis for analogy-making.

Solution

• Proposed approach: Belidor, a declarative specification language that emphasizes the structural relationships underlying user interfaces across conceptual, presentation, and behavioral layers.
• Novelty:
  1. Introduction of structures as first-class language constructs to describe UI semantics.
  2. Unified relational model for conceptual, presentation, and behavior layers.
  3. Demonstration of Belidor’s expressivity through examples and case studies.
  4. Development of a simple analogy algorithm using graph edit distance to identify structural analogies.
• Procedure and key techniques:
  • Belidor uses an entity-relationship model embedded in YAML.
  • Specifications describe objects, structures, relations, and actions in interactive systems.
  • Structures (e.g., linear, tree, 2D) are reified to enable comparisons and analogies.
  • A graph edit distance algorithm identifies analogies between pairs of specifications by comparing their structural graphs.

Results

• Concrete findings:
  • Belidor successfully describes a wide range of UIs, including GUIs, screen readers, and hardware interfaces.
  • The analogy algorithm identified strong matches, such as between messaging apps (iMessage and Slack) and between calendars and video editors.
• Advantage over baselines:
  • Unlike visual or DOM-based approaches, Belidor captures deeper structural relationships, enabling more meaningful analogies.
  • Incremental specification allows designers to focus on specific aspects without fully modeling the entire system.
• Experiments / evaluation:
  • Case studies included comparisons of Google Calendar and DaVinci Resolve, Figma and PowerPoint, and tabs across various applications.
  • The analogy algorithm was applied to 45 pairs of specifications, demonstrating its ability to surface meaningful analogies.
• Limitations and future work:
  • Current limitations include the lack of input-binding semantics and computational descriptions.
  • Future work includes studying how designers use Belidor in iterative design, developing a UI framework based on Belidor, and supporting structural design moves.

Summary

Belidor is a declarative specification language that foregrounds the structural relationships underlying interactive systems, enabling designers to identify and operationalize analogies across diverse user interfaces. By reifying structures as first-class concepts, Belidor supports comparisons across conceptual, presentation, and behavior layers. Case studies and a graph-based analogy algorithm demonstrate its utility in surfacing meaningful analogies, such as between calendars and video editors. Future work aims to explore its applicability in iterative design and UI implementation frameworks, with the goal of fostering structural design moves in interface design practice.