The Way We Notice, That's What Really Matters: Instantiating UI Components with Distinguishing Variations

TL;DR

This paper introduces a novel approach for generating and visualizing meaningful variations of UI components to aid developers in exploring design spaces more effectively.

Contribution

It presents a method combining symbolic inference and LLM-driven sampling to generate realistic, distinguishing variations of UI components, implemented in the Celestial tool.

Findings

Developers found the variations useful for comparison and mapping.

Mimetic instantiations were validated as domain-relevant.

Celestial transformed component instantiation into a structured activity.

Abstract

Front-end developers author UI components to be broadly reusable by parameterizing visual and behavioral properties. While flexible, this makes instantiation harder, as developers must reason about numerous property values and interactions. In practice, they must explore the component's large design space and provide realistic and natural values to properties. To address this, we introduce distinguishing variations: variations that are both mimetic and distinct. We frame distinguishing variation generation as design-space sampling, combining symbolic inference to identify visually important properties with an LLM-driven mimetic sampler to produce realistic instantiations from its world knowledge. We instantiate distinguishing variations in Celestial, a tool that helps developers explore and visualize distinguishing variations. In a study with front-end developers (n=12), participants found these variations useful for comparing and mapping component design spaces, reported that mimetic instantiations were domain-relevant, and validated that Celestial transformed component instantiation from a manual process into a structured, exploratory activity.