ORC Layout: Adaptive GUI Layout with OR-Constraints Yue Jiang - - PowerPoint PPT Presentation

1

ORC Layout: Adaptive GUI Layout with OR-Constraints

Yue Jiang

University of Maryland, College Park

Ruofei Du

Google, San Francisco

Christof Lutteroth

University of Bath, Bath, United Kingdom

Wolfgang Stuerzlinger SIAT, Simon Fraser University, Vancouver, Canada

】

x

2

Motivation

Need to design different GUI layouts for different screen sizes, orientations, and aspect ratios.

x

3

Limitation: cannot restrict positions and relative sizes

Flow Layout

BBC News

x

4

Constraint-based Layout

Limitations:

• 1. Widgets cannot move relative to other ones.

Same size Same height as above Double width as above Size(Red1) == Size(Red2) == … Height(Blue) == Height(Red) Width(Blue) == Width(Red) * 2

Constraints:

• 2. Device diversity a long-term challenge.

x

5

Goal: Unify constraint-based and flow layouts

OR-constrained Layouts (ORC Layouts)

Input:

• 1. A set of constraints
• 2. Widget min/pref/max sizes
• 3. Window size

Output:

• 1. Widget sizes
• 2. Widget positions

Approach: OR-constraints

x

6

Constraint1 OR Constraint2 OR Constraint3 …

Soft Soft Soft Hard

OR-Constraints

• Hard Constraints must be satisfied.
• Soft Constraints are satisfied if possible.

Their importance depends on weights.

x

7

OR-Constraints

to the right of the previous widget OR at the beginning of the next row (larger weight) (smaller weight)

x

8

Microsoft Z3 Solver:

Z3 Solver

OR Constraints → more branches

• Support incremental solving

(fast if #widget not too large)

• Can solve OR-constraints

x

9

ORC Patterns

Better approach: Designers → choose a template & modify parameters System → automatically maintain low-level constraints Low-level constraints tedious and error prone

x

10

Pattern #1: Connected Layout Pattern

Top toolbar widgets → left toolbar

x

11

Pattern #1: Connected Layout Pattern

Left toolbar widgets → top toolbar

x

12

6 widgets

Pattern #2: Balanced Flow Layout Pattern

→ Each row has 1 OR 2 OR 3 OR 6 widgets in the toolbar

x

13

(weights depend on which one you prefer)

Pattern #3: Alterative Positions Pattern

Top Toolbar Left Toolbar OR

x

14

Pattern #4: Flowing Widgets around a Fixed Area

x

15

Pattern #5: Optional Layout Pattern

Less important

x

16

Pattern #6: Alternative Widget Layout Pattern

x

17

Limitations

• Patterns restrict what designers can create.
• Manual ORC specification potentially error-prone.

0.11 0.78 6.02 20.37 72.75 0.1 1 10 100

16 50 100 150 200

Running Time (Seconds) # Widgets

Z3 Solver Time (Logarithmic) Z3 Solver Time

• Non-interactive solving time for larger

number of widgets

x

18

• ORC Layouts
• Introduce OR-constraints
• Unify flow & constraint-based layouts
• Enrich GUI layout design space

Conclusion

x

19

Co-authors

Wolfgang Stuerzlinger Christof Lutteroth Ruofei Du

x

20

Yue Jiang†, Ruofei Du†‡, Christof Lutteroth

§, and Wolfgang Stuerzlinger ¶

†University of Maryland, College Park ‡Google LLC

§University of Bath, Bath, United Kingdom ¶Simon Fraser University, Vancouver, BC, Canada

Contributions:

• Add OR-constraints to standard hard/soft constraint systems.
• Adapt layouts to screens with different screen sizes,
• rientations, and aspect ratios with only a single specification.
• Unify flow & constraint-based layouts.

Yue Jiang: yuejiang@cs.umd.edu

https://cs.umd.edu/~yuejiang

Thank you!