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

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 】 1

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

Flow Layout BBC News x Limitation: cannot restrict positions and relative sizes 3

Constraint-based Layout Constraints: Same size Size(Red1) == Size(Red2) == … Same height as above Height(Blue) == Height(Red) Double width as above Width(Blue) == Width(Red) * 2 x Limitations: 1. Widgets cannot move relative to other ones. 2. Device diversity a long-term challenge. 4

OR-constrained Layouts (ORC Layouts) Goal: Unify constraint-based and flow layouts Approach: OR-constraints Output: Input: x 1. A set of constraints 1. Widget sizes 2. Widget min/pref/max sizes 2. Widget positions 3. Window size 5

OR-Constraints Constraint1 OR Constraint2 OR Constraint3 … Soft Soft Soft Hard x • Hard Constraints must be satisfied. • Soft Constraints are satisfied if possible. Their importance depends on weights. 6

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

Z3 Solver OR Constraints → more branches Microsoft Z3 Solver: x • Can solve OR-constraints • Support incremental solving (fast if #widget not too large) 8

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

Pattern #1: Connected Layout Pattern x Top toolbar widgets → left toolbar 10

Pattern #1: Connected Layout Pattern x Left toolbar widgets → top toolbar 11

Pattern #2: Balanced Flow Layout Pattern x 6 widgets → Each row has 1 OR 2 OR 3 OR 6 widgets in the toolbar 12

Pattern #3: Alterative Positions Pattern x Left Toolbar Top Toolbar OR (weights depend on which one you prefer) 13

Pattern #4: Flowing Widgets around a Fixed Area x 14

Pattern #5: Optional Layout Pattern x Less important 15

Pattern #6: Alternative Widget Layout Pattern x 16

Limitations • Patterns restrict what designers can create. • Manual ORC specification potentially error-prone. • Non-interactive solving time for larger number of widgets Z3 Solver Time (Logarithmic ) 72.75 100 Running Time (Seconds) x 20.37 6.02 10 0.78 1 16 50 100 150 200 0.11 0.1 # Widgets Z3 Solver Time 17

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

Co-authors x Ruofei Du Christof Lutteroth Wolfgang Stuerzlinger 19

Thank you! Yue Jiang: yuejiang@cs.umd.edu https://cs.umd.edu/~yuejiang Contributions: • Add OR-constraints to standard hard/soft constraint systems. • Adapt layouts to screens with different screen sizes, orientations, and aspect ratios with only a single specification. x • Unify flow & constraint-based layouts. 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 20