Programming by manipulation for layout

Hottelier, Thibaud; Bodik, Ras; Ryokai, Kimiko

doi:10.1145/2642918.2647378

Cited by 27 publications

(21 citation statements)

References 24 publications

Supporting

Mentioning

Contrasting

Order By: Relevance

“…Using incremental solving, it can perform better if the current constraint system is similar to the previous one. Z3 has previously been suggested for solving formalized CSS layout specifications [27] and to support layout editing with direct manipulation of individual constraints [14]. Yet, Z3 has not been used for general GUI/widget layout with OR-constraints before.…”

Section: Layout Solversmentioning

confidence: 99%

ORC Layout

Jiang

Lutteroth

et al. 2019

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

View full text Add to dashboard Cite

b) ORC Layout (a) two flow layouts nested in a grid Figure 1: Examples of GUIs combining elements of grid and flow layouts, which can only be realized with ORC layouts. Both (a) and (b) show the results before and after resizing the window. (a) shows a traditional solution with two flow layouts nested in a grid. It looks irregular since the original sizes of the widgets in the toolbars are not the same. Using ORC layouts in (b), we can add constraints that cross-cut the GUI hierarchy, ensuring that the tool buttons all have the same size and hence consistent appearance. ABSTRACTWe propose a novel approach for constraint-based graphical user interface (GUI) layout based on OR-constraints (ORC) in standard soft/hard linear constraint systems. ORC layout unifies grid layout and flow layout, supporting both their features as well as cases where grid and flow layouts individually fail. We describe ORC design patterns that enable designers to safely create flexible layouts that work across different screen sizes and orientations. We also present the Permission to make digital ORC Editor, a GUI editor that enables designers to apply ORC in a safe and effective manner, mixing grid, flow and new ORC layout features as appropriate. We demonstrate that our prototype can adapt layouts to screens with different aspect ratios with only a single layout specification, easing the burden of GUI maintenance. Finally, we show that ORC specifications can be modified interactively and solved efficiently at runtime. CCS CONCEPTS• Human-centered computing User interface toolkits. KEYWORDSGUI builder, layout manager, constraint-based layout, visual interface design, visual programming ACM Reference Format:

show abstract

Section: Layout Solversmentioning

confidence: 99%

ORC Layout

Jiang

Lutteroth

et al. 2019

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

View full text Add to dashboard Cite

show abstract

“…Victor's prototype interactive drawing editor [7], Apparatus [34], and Programming by Manipulation [21] provide expressive direct manipulation capabilities that serve as a way to build programs in restricted, domain-specific languages. By design, these tools tend to prohibit or discourage the user from manipulating content via the "indirect" mechanism of code.…”

Section: Related Workmentioning

confidence: 99%

Programmatic and direct manipulation, together at last

et al. 2016

View full text Add to dashboard Cite

Direct manipulation interfaces and programmatic systems have distinct and complementary strengths. The former provide intuitive, immediate visual feedback and enable rapid prototyping, whereas the latter enable complex, reusable abstractions. Unfortunately, existing systems typically force users into just one of these two interaction modes.We present a system called SKETCH-N-SKETCH that integrates programmatic and direct manipulation for the particular domain of Scalable Vector Graphics (SVG). In SKETCH-N-SKETCH, the user writes a program to generate an output SVG canvas. Then the user may directly manipulate the canvas while the system immediately infers a program update in order to match the changes to the output, a workflow we call live synchronization. To achieve this, we propose (i) a technique called trace-based program synthesis that takes program execution history into account in order to constrain the search space and (ii) heuristics for dealing with ambiguities. Based on our experience with examples spanning 2,000 lines of code and from the results of a preliminary user study, we believe that SKETCH-N-SKETCH provides a novel workflow that can augment traditional programming systems. Our approach may serve as the basis for live synchronization in other application domains, as well as a starting point for yet more ambitious ways of combining programmatic and direct manipulation.

show abstract

“…Constraintbased layouts, such as Auto Layout 4 , are often used to make a layout resizable [8,[36][37][38]. Hottelier et al [39] proposed a technique which allows designers to generalize and specialize constraint-based layout specifications using direct manipulation. Xu et al proposed methods that make it easier for designers to beautify UIs by inferring layout constraints [40] and to arrange graphic elements with commands [41] based on the way they are visually grouped.…”

Section: Related Workmentioning

confidence: 99%

Automatic Generation of User Interface Layouts for Alternative Screen Orientations

Zeidler

Weber

Stuerzlinger

et al. 2017

Human-Computer Interaction - INTERACT 2017

View full text Add to dashboard Cite

Abstract. Creating multiple layout alternatives for graphical user interfaces to accommodate different screen orientations for mobile devices is labor intensive. Here, we investigate how such layout alternatives can be generated automatically from an initial layout. Providing good layout alternatives can inspire developers in their design work and support them to create adaptive layouts. We performed an analysis of layout alternatives in existing apps and identified common realworld layout transformation patterns. Based on these patterns we developed a prototype that generates landscape and portrait layout alternatives for an initial layout. In general, there is a very large number of possibilities of how widgets can be rearranged. For this reason we developed a classification method to identify and evaluate "good" layout alternatives automatically. From this set of "good" layout alternatives, designers can choose suitable layouts for their applications. In a questionnaire study we verified that our method generates layout alternatives that appear well structured and are easy to use.

show abstract

Programming by manipulation for layout

Cited by 27 publications

References 24 publications

ORC Layout

ORC Layout

Programmatic and direct manipulation, together at last

Automatic Generation of User Interface Layouts for Alternative Screen Orientations

Contact Info

Product

Resources

About