Expresso: Building Responsive Interfaces with Keyframes

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

“…Such editing of a UI's appearance has been well studied [60,73] and found to be developer-friendly, especially when compared to specifying interactive behaviors directly [46]. Similar to Expresso [33], ReverseORC developers also specify UI exemplars simply by dragging and resizing elements, and this was already demonstrated to be easy and useful by Expresso. The usefulness of the resulting ORC specifications has been validated in [30,31].…”

“…Flow Dynamic Layouts Layouts Topology Most previous RE work + Constraint-based RE [37] + Model-driven RE [56,57] + ∼ Expresso [33] ∼ InferUI [2] + ReverseORC + + + a GUI on a device with a smaller size. For traditional GUIs, Edwards et al [14] and Olsen et al [53] proposed to modify interfaces by replacing drawing objects and intercepting API commands in applications with specific toolkit implementations.…”

“…VIPS [5] presented an approach for web content structure analysis based on visual representation. Similar to ReverseORC's exemplar-based layout design, Expresso [33] allows designers to specify samples of a web UI at different sizes. Expresso then either linearly interpolates widget positions and sizes between the given UI sizes ('keyframes'), or lets them jump discontinuously, as specified by the designer.…”

“…After all the above pairing operations, 𝑆1𝐶𝑢𝑟𝑟 and 𝑆2𝐶𝑢𝑟𝑟 contain all the nodes that cannot be paired with any node in the other layout tree. If 𝑠1 ∈ 𝑆1𝐶𝑢𝑟𝑟 and 𝑠2 ∈ 𝑆2𝐶𝑢𝑟𝑟 have the same relative position among their sibling nodes, i.e., the number of paired nodes before them are the same, then we infer that 𝑠1 in 𝑆1 is replaced by 𝑠2 in 𝑆2 (Line [29][30][31][32][33]. All the remaining 𝑠1 ∈ 𝑆1𝐶𝑢𝑟𝑟 are removed from 𝑆1 and 𝑠2 ∈ 𝑆2𝐶𝑢𝑟𝑟 are added in 𝑆2 (Line 34-39).…”

“…Researchers have proposed several approaches that can be used to modify a GUI if it is not automatically adapted to the user's requirements or if the adaptation is sub-optimal, e.g., when using CHI '21, May 8-13, 2021, Yokohama, Japan [37] + Model-driven RE [56,57] + ∼ Expresso [33] ∼ InferUI [2] + ReverseORC + + + a GUI on a device with a smaller size. For traditional GUIs, Edwards et al [14] and Olsen et al [53] proposed to modify interfaces by replacing drawing objects and intercepting API commands in applications with specifc toolkit implementations.…”