ORCSolver: An Efficient Solver for Adaptive GUI Layout with OR-Constraints

Jiang, Yue; Stuerzlinger, Wolfgang; Zwicker, Matthias; Lutteroth, Christof

doi:10.1145/3313831.3376610

Cited by 22 publications

(14 citation statements)

References 86 publications

Supporting

Mentioning

Contrasting

Order By: Relevance

“…Modern GUI layout models are mostly constraint-based [38,74] and used together with UI builders, which can create layout constraints based on direct manipulation [32,60,69,73]. Jiang et al [30] proposed ORC Layout, an approach for constraintbased layouts based on OR-constraints (ORC). An OR-constraint is a disjunctive constraint, where only one disjunctive part needs to be true.…”

Section: Related Work 21 Resizable Ui Layoutmentioning

confidence: 99%

“…ORC Layout is a powerful, high-level layout specification method; it enables users to describe layouts with dynamic behaviors that adapt to screens with very different sizes, orientations, and aspect ratios, using only a single layout specification. ORCSolver [31] is a novel solving technique to efficiently solve ORC Layout specifications. ReverseORC uses ORC Layout to express the captured dynamic layout behaviors.…”

Section: Related Work 21 Resizable Ui Layoutmentioning

confidence: 99%

“…Given only widget placements for different UI sizes of an existing GUI, ReverseORC identifies how layout behaviours are encoded in the UI and generates a corresponding layout specification. The new layout specification is expressed using ORC Layout [30], an approach for constraint-based layouts based on OR-constraints (ORC). ORC Layout is a powerful tool that allows designers to express modern resizable UI layouts in a mathematical, platform-independent manner, as constraint optimization problems.…”

Section: Introductionmentioning

confidence: 99%

See 2 more Smart Citations

ReverseORC: Reverse Engineering of Resizable User Interface Layouts with OR-Constraints

Jiang

Stuerzlinger

Lutteroth

2021

Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

Self Cite

View full text Add to dashboard Cite

Figure 1: Reverse engineering of the MS Word "ribbon" toolbar. ReverseORC samples the user interface (UI) at different sizes and reconstructs parsimonious layout specifications for each size. It then detects changes between the layout specifications using a novel diff algorithm for layouts, and matches the changes with corresponding layout patterns to reconstruct a UI with the same resize behaviours as the original. We visualize the overall quality of reconstruction at different sizes in an error map by color-coding structural error (shades of yellow), transition error (blue/green), and 'fault lines' (black) indicating potentially inconsistent behaviors.

show abstract

Section: Related Work 21 Resizable Ui Layoutmentioning

confidence: 99%

Section: Related Work 21 Resizable Ui Layoutmentioning

confidence: 99%

Section: Introductionmentioning

confidence: 99%

See 1 more Smart Citation

ReverseORC: Reverse Engineering of Resizable User Interface Layouts with OR-Constraints

Jiang

Stuerzlinger

Lutteroth

2021

Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

Self Cite

View full text Add to dashboard Cite

show abstract

“…Several prior works have investigated computational techniques to assist designers during layout design. Constraint-based tools [2,5,12,15,31,41] support specifying constraints, or rules, that elements within a GUI needed to follow. This enables designers to specify an initial design, which can be automatically adapted based on aspects such as screen resolution or aspect ratio.…”

Section: Optimisation For Ui Designmentioning

confidence: 99%

Interactive Layout Transfer

Dayama

Santala

Brückner

et al. 2021

26th International Conference on Intelligent User Interfaces

View full text Add to dashboard Cite

show abstract

“…al. [23] apply constraints to generate layouts adapted to alternate screen dimensions or orientations.…”

Section: Related Workmentioning

confidence: 99%

Scout: Rapid Exploration of Interface Layout Alternatives through High-Level Design Constraints

Swearngin

Wang

Oleson

et al. 2020

Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems

View full text Add to dashboard Cite

Although exploring alternatives is fundamental to creating better interface designs, current processes for creating alternatives are generally manual, limiting the alternatives a designer can explore. We present Scout, a system that helps designers rapidly explore alternatives through mixed-initiative interaction with high-level constraints and design feedback. Prior constraint-based layout systems use low-level spatial constraints and generally produce a single design. To support designer exploration of alternatives, Scout introduces high-level constraints based on design concepts (e.g., semantic structure, emphasis, order) and formalizes them into low-level spatial constraints that a solver uses to generate potential layouts. In an evaluation with 18 interface designers, we found that Scout: (1) helps designers create more spatially diverse mobile interface layouts with similar quality to those created with a baseline tool and (2) can help designers avoid a linear design process and quickly ideate layouts they do not believe they would have thought of on their own.

show abstract

ORCSolver: An Efficient Solver for Adaptive GUI Layout with OR-Constraints

Cited by 22 publications

References 86 publications

ReverseORC: Reverse Engineering of Resizable User Interface Layouts with OR-Constraints

ReverseORC: Reverse Engineering of Resizable User Interface Layouts with OR-Constraints

Interactive Layout Transfer

Scout: Rapid Exploration of Interface Layout Alternatives through High-Level Design Constraints

Contact Info

Product

Resources

About