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

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. Tosupport 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 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.

[1]  Stefanie Seiler Software For Use A Practical Guide To The Models And Methods Of Usage Centered Design , 2016 .

[2]  Clemens Holzmann,et al.  Measuring Visual User Interface Complexity of Mobile Applications With Metrics , 2018, Interact. Comput..

[3]  Ranjitha Kumar,et al.  Bricolage: example-based retargeting for web design , 2011, CHI.

[4]  Tovi Grossman,et al.  Dream Lens: Exploration and Visualization of Large-Scale Generative Design Datasets , 2018, CHI.

[5]  Abigail Sellen,et al.  Getting the right design and the design right , 2006, CHI.

[6]  Kasper Hornbæk,et al.  Subjunctive interfaces: Extending applications to support parallel setup, viewing and control of alternative scenarios , 2008, TCHI.

[7]  Ronen I. Brafman,et al.  Designing with interactive example galleries , 2010, CHI.

[8]  Alex White,et al.  The Elements of Graphic Design: Space, Unity, Page Architecture, and Type , 2002 .

[9]  Brad A. Myers,et al.  The Lapidary graphical interface design tool , 1991, CHI '91.

[10]  James D. Foley,et al.  A second generation user interface design environment: the model and the runtime architecture , 1993, INTERCHI.

[11]  Richard Mateosian New Tools , 2015, IEEE Micro.

[12]  Marc Fischer,et al.  Robust relational layout synthesis from examples for Android , 2018, Proc. ACM Program. Lang..

[13]  Jeffrey Heer,et al.  Formalizing Visualization Design Knowledge as Constraints: Actionable and Extensible Models in Draco , 2018, IEEE Transactions on Visualization and Computer Graphics.

[14]  Rubaiat Habib Kazi,et al.  DreamSketch: Early Stage 3D Design Explorations with Sketching and Generative Design , 2017, UIST.

[15]  Khoi Vinh Ordering Disorder: Grid Principles for Web Design , 2010 .

[16]  M. Patton Qualitative Research & Evaluation Methods: Integrating Theory and Practice , 2014 .

[17]  Christof Lutteroth,et al.  ORC Layout: Adaptive GUI Layout with OR-Constraints , 2019, CHI.

[18]  Alan Borning,et al.  Constraint-based document layout for the Web , 2000, Multimedia Systems.

[19]  Daniel L. Schwartz,et al.  Prototyping dynamics: sharing multiple designs improves exploration, group rapport, and results , 2011, CHI.

[20]  Brian P. Bailey,et al.  Getting inspired!: understanding how and why examples are used in creative design practice , 2009, CHI.

[21]  Antti Oulasvirta,et al.  Sketchplore: Sketch and Explore with a Layout Optimiser , 2016, Conference on Designing Interactive Systems.

[22]  Jeffrey Nichols,et al.  Improving automatic interface generation with smart templates , 2004, IUI '04.

[23]  Jacob O. Wobbrock,et al.  Aligned Rank Transform , 2016 .

[24]  Takeo Igarashi,et al.  Global beautification of layouts with interactive ambiguity resolution , 2014, UIST.

[25]  P DowSteven,et al.  Parallel prototyping leads to better design results, more divergence, and increased self-efficacy , 2010 .

[26]  N. Chater,et al.  Similarity as transformation , 2003, Cognition.

[27]  William Lidwell,et al.  Universal Principles of Design , 2003 .

[28]  Rastislav Bodík,et al.  Programming by manipulation for layout , 2014, UIST.

[29]  Scott R. Klemmer,et al.  Design as exploration: creating interface alternatives through parallel authoring and runtime tuning , 2008, UIST '08.

[30]  Naghmi Shireen,et al.  GEM-NI: A System for Creating and Managing Alternatives In Generative Design , 2015, CHI.

[31]  Mira Dontcheva,et al.  Rewire: Interface Design Assistance from Examples , 2018, CHI.

[32]  Tingfa Xu,et al.  LayoutGAN: Generating Graphic Layouts with Wireframe Discriminators , 2019, ICLR.

[33]  James A. Landay,et al.  Inferring graphical constraints with Rockit , 1993, INTERCHI.

[34]  Brad A. Myers,et al.  WebCrystal: understanding and reusing examples in web authoring , 2012, CHI.

[35]  James A. Landay,et al.  Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces , 2008, CHI.

[36]  Daniel S. Weld,et al.  Cross-Device Consistency in Automatically Generated User Interfaces , 2004 .

[37]  Peter Norvig,et al.  Artificial Intelligence: A Modern Approach , 1995 .

[38]  Nikolaj Bjørner,et al.  Z3: An Efficient SMT Solver , 2008, TACAS.

[39]  Christof Lutteroth,et al.  Automatic Generation of User Interface Layouts for Alternative Screen Orientations , 2017, INTERACT.

[40]  Elizabeth D. Mynatt,et al.  Side views: persistent, on-demand previews for open-ended tasks , 2002, UIST '02.

[41]  Antonella De Angeli,et al.  Visual diversity and user interface quality , 2015, BCS HCI.

[42]  Scott R. Klemmer,et al.  Programming by a sample: rapidly creating web applications with d.mix , 2007, UIST.

[43]  Daniel L. Schwartz,et al.  Parallel prototyping leads to better design results, more divergence, and increased self-efficacy , 2010, TCHI.

[44]  Brad A. Myers,et al.  Automatic, look-and-feel independent dialog creation for graphical user interfaces , 1990, CHI '90.

[45]  J. J. Higgins,et al.  The aligned rank transform for nonparametric factorial analyses using only anova procedures , 2011, CHI.

[46]  Aaron Hertzmann,et al.  DesignScape: Design with Interactive Layout Suggestions , 2015, CHI.

[47]  Jakob Nielsen,et al.  Heuristic evaluation of user interfaces , 1990, CHI '90.

[48]  Elizabeth D. Mynatt,et al.  Variation in element and action: supporting simultaneous development of alternative solutions , 2004, CHI.

[49]  M. J. Kosters Designing a , 2011 .

[50]  Bill Buxton,et al.  Sketching User Experiences: Getting the Design Right and the Right Design , 2007 .

[51]  Christof Lutteroth,et al.  The Auckland layout editor: an improved GUI layout specification process , 2012, CHINZ '12.

[52]  Ping Luo,et al.  Beyond interface builders: model-based interface tools , 1993, INTERCHI.

[53]  Peter J. Stuckey,et al.  Constraint cascading style sheets for the Web , 1999, UIST '99.

[54]  Krzysztof Z. Gajos,et al.  Automatically generating user interfaces adapted to users' motor and vision capabilities , 2007, UIST.