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.
VIDEO
Publications 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, interactive graphics
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 | search Expanding Interface Design Capabilities Through Semantic and Data-Driven Analyses . University of Washington. Computer Science and Engineering. . Amanda Swearngin . source | cite | search 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 | search 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 | search 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 | search 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 | search An Intelligent Layout Algorithm for Varaible Screen Resolutions . Hacettepe Üniversitesi, Ankara. Barış Çelik . source | cite | search Solving Constraint Hierarchies With an SMT Solver . 人工知能基本問題研究会112回 (2020/3). 博史 細部 . source | cite | search 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 | search 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 | search 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 | search 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 | search The Influence of Target Layout and Target Graphic Type on Searching Performance Based on Eye-tracking Technology . Frontiers in Psychology. Yaxue Zuo , Jin Qi , Zhijun Fan , Zhenya Wang , Huiyun Xu , Shurui Wang , Nieqiang Zhang , and Jie Hu . source | cite | search The Future of Computational Approaches for Understanding and Adapting User Interfaces . CHI 2023 EA. Yue Jiang , Yuwen Lu , Christof Lutteroth , Toby Li , Jeffrey Nichols , and Wolfgang Stuerzlinger . source | cite | search 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 | search