ORCLayout: Adaptive GUI Layout With OR-Constraints

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

Publications

teaser image of ORC Layout: Adaptive GUI Layout With OR-Constraints

ORC Layout: Adaptive GUI Layout With OR-Constraints

Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems (CHI), 2019.
Keywords: GUI builder, layout manager, constraint-based layout, visual interface design, visual programming

Videos

ORC Layout: Adaptive GUI Layout With OR-Constraints


Talks

Cited By

  • ReverseORC: Reverse Engineering of Resizable User Interface Layouts With OR-Constraints. Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems.Yue Jiang, Wolfgang Stuerzlinger, and Christof Lutteroth. source | cite
  • Expanding Interface Design Capabilities Through Semantic and Data-Driven Analyses. University of Washington. Computer Science and Engineering. . Amanda Swearngin. source | cite
  • Scout: Rapid Exploration of Interface Layout Alternatives Through High-Level Design Constraints. CHI '20: Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems. Amanda Swearngin, Chenglong Wang, Alannah Oleson, James Fogarty, and Amy J. Ko. source | cite
  • ORCSolver: An Efficient Solver for Adaptive GUI Layout With OR-Constraints. CHI '20: Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems.Yue Jiang, Wolfgang Stuerzlinger, Matthias Zwicker, and Christof Lutteroth. source | cite
  • Effective Automated Repair of Internationalization Presentation Failures in Web Applications Using Style Similarity Clustering and Search-Based Techniques. Software Testing, Verification, and Reliability. Sonal Mahajan, Abdulmajeed Alameer, Phil McMinn, and William G. J. Halfond. source | cite
  • Solving Hierarchical Soft Constraints With an SMT Solver. ICCAE 2020: Proceedings of the 2020 12th International Conference on Computer and Automation Engineering. Hiroshi Hosobe. source | cite
  • An Intelligent Layout Algorithm for Varaible Screen Resolutions. Hacettepe Üniversitesi, Ankara. Barış Çelik. source | cite
  • Solving Constraint Hierarchies With an SMT Solver . 人工知能基本問題研究会112回 (2020/3). 博史 細部. source | cite
  • EKRAN ÇÖZÜNÜRLÜĞÜNE DUYARLI BİR AKILLI ARAYÜZ YERLEŞTİRME YAKLAŞIMI. Muhendislik Bilimleri ve Tasarim Dergisi. Bar{\i}{\c{s}} Celik and Burkay GEN{\c{C}}. source | cite
  • Engineering Slidable Graphical User Interfaces With Slime. Proceedings of the ACM on Human-Computer Interaction. Arthur Sluyters, Jean Vanderdonckt, and Radu-Daniel Vatavu. source | cite
  • Computational Approaches for Understanding, Generating, and Adapting User Interfaces. ACM Conference on Human Factors in Computing Systems.Yue Jiang, Yuwen Lu, Jeffrey Nichols, Wolfgang Stuerzlinger, Chun Yu, Christof Lutteroth, Yang Li, Ranjitha Kumar, and Toby Li. source | cite
  • A Contextual Framework for Adaptive User Interfaces: Modelling the Interaction Environment. arXiv.2203.16882. Mateusz Dubiel, Bereket Abera Yilma, Kayhan Latifzadeh, and Luis A. Leiva. source | cite
  • Stay In Touch