research-article

ORC Layout: Adaptive GUI Layout with OR-Constraints

Authors:

Christof Lutteroth, and

Wolfgang StuerzlingerAuthors Info & Claims

CHI '19: Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems

May 2019

Paper No.: 413, Pages 1 - 12

https://doi.org/10.1145/3290605.3300643

Published: 02 May 2019 Publication History

Abstract

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.

Supplementary Material

ZIP File (paper413pvc.zip)

Preview video captions

Download
1.15 KB

MP4 File (paper413p.mp4)

Preview video

Download
935.18 KB

References

[1]

Gideon Avrahami, Kenneth P Brooks, and Marc H Brown. 1989. A Two-View Approach to Constructing User Interfaces. ACM SIGGRAPH Computer Graphics 23, 3 (1989), 137--146.

Digital Library

[2]

Greg J. Badros, Alan Borning, and Peter J. Stuckey. 2001. The Cassowary Linear Arithmetic Constraint Solving Algorithm. ACM Trans. Comput.-Hum. Interact 8, 4 (2001), 267--306.

Digital Library

[3]

Thomas Bill, Bertil Lundell, John Alan McDonald, and Michael Sannella. 1992. Bricklayer: Window Layout Using Linear Programming. Technical Report. University of Washington, New York, NY, USA.

[4]

Alan Borning, Bjorn Freeman-Benson, and Molly Wilson. 1992. Constraint Hierarchies. LISP and Symbolic Computation 5, 3 (1992), 223-- 270.

Digital Library

[5]

Alan Borning, Kim Marriott, Peter Stuckey, and Yi Xiao. 1997. Solving Linear Arithmetic Constraints for User Interface Applications. In Proceedings of the 10th Annual ACM Symposium on User Interface Software and Technology. ACM, Banff, Alberta, Canada, 87--96.

Digital Library

[6]

Leonardo De Moura and Nikolaj Bjørner. 2008. Z3: an Efficient SMT Solver. In Proceedings of the Theory and Practice of Software, 14th International Conference on Tools and Algorithms for the Construction and Analysis of Systems (TACAS'08/ETAPS'08). Springer-Verlag, Berlin, Heidelberg, 337--340.

Digital Library

[7]

James Fogarty and Scott E. Hudson. 2003. GADGET: a Toolkit for Optimization-Based Approaches to Interface and Display Generation. In Proceedings of the 16th Annual ACM Symposium on User Interface Software and Technology (UIST '03). ACM, New York, NY, USA, 125--134.

Digital Library

[8]

Krzysztof Z. Gajos, Daniel S. Weld, and Jacob O. Wobbrock. 2010. Automatically Generating Personalized User Interfaces With Supple, In Proceedings of the 9th International Conference on Intelligent User Interfaces. Artif. Intell 174, 12--13, 910--950.

Digital Library

[9]

Krzysztof Z. Gajos, Daniel S. Weld, and Jacob O. Wobbrock. 2010. Automatically Generating Personalized User Interfaces With Supple. Artif. Intell 174, 12--13 (2010), 910--950.

Digital Library

[10]

Krzysztof Z. Gajos, Jacob O. Wobbrock, and Daniel S. Weld. 2008. Improving the Performance of Motor-Impaired Users With AutomaticallyGenerated, Ability-Based Interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '08). ACM, New York, NY, USA, 1257--1266.

Digital Library

[11]

Michael Gleicher. 1993. A Graphics Toolkit Based on Differential Constraints. In Proceedings of the 6th Annual ACM Symposium on User Interface Software and Technology. ACM, New York, NY, USA, 109--120.

Digital Library

[12]

Osamu Hashimoto and Brad A. Myers. 1992. Graphical Styles for Building Interfaces by Demonstration. In Proceedings of the 5th Annual ACM Symposium on User Interface Software and Technology (UIST '92). ACM, New York, NY, USA, 117--124.

Digital Library

[13]

Hiroshi Hosobe. 2000. A Scalable Linear Constraint Solver for User Interface Construction. In Proceedings of the 6th International Conference on Principles and Practice of Constraint Programming (CP '02). Springer-Verlag, Berlin, Heidelberg, 218--232.

Digital Library

[14]

Thibaud Hottelier, Ras Bodik, and Kimiko Ryokai. 2014. Programming by Manipulation for Layout. In Proceedings of the 27th Annual ACM Symposium on User Interface Software and Technology (UIST '14). ACM, New York, NY, USA, 231--241.

Digital Library

[15]

Scott E. Hudson and Shamim P. Mohamed. 1990. Interactive Specification of Flexible User Interface Displays. ACM Trans. Inf. Syst 8, 3 (1990), 269--288.

Digital Library

[16]

Charles Jacobs, Wilmot Li, Evan Schrier, David Bargeron, and David Salesin. 2003. Adaptive Grid-Based Document Layout. In ACM SIGGRAPH 2003 Papers (SIGGRAPH '03). ACM, New York, NY, USA, 838--847.

Digital Library

[17]

Solange Karsenty, James A. Landay, and Chris Weikart. 1993. Inferring Graphical Constraints With Rockit. In Proceedings of the Conference on People and Computers VII (HCI'92). Cambridge University Press, New York, NY, USA, 137--153.

Digital Library

[18]

Christof Lutteroth, Robert Strandh, and Gerald Weber. 2008. Domain Specific High-Level Constraints for User Interface Layout. Constraints 13, 3 (2008), 307--342.

Digital Library

[19]

Christof Lutteroth and Gerald Weber. 2006. User Interface Layout With Ordinal and Linear Constraints. In Proceedings of the 7th Australasian User Interface Conference - Volume 50 (AUIC '06). Australian Computer Society, Inc., Darlinghurst, Australia, Australia, 53-- 60.

Digital Library

[20]

Christof Lutteroth and Gerald Weber. 2008. Modular Specification of GUI Layout Using Constraints. In 2008. ASWEC 2008. 19th Australian Conference on Software Engineering. IEEE, New York, NY, USA, 300--309.

Digital Library

[21]

Ethan Marcotte. 2011. Responsive Web Design. A book apart.

[22]

Brad Myers, Scott E. Hudson, Randy Pausch, and Randy Pausch. 2000. Past, Present, and Future of User Interface Software Tools. ACM Trans. Comput.-Hum. Interact 7, 1 (2000), 3--28.

Digital Library

[23]

Brad A. Myers. 1995. User Interface Software Tools. ACM Transactions on Computer-Human Interaction (1995).

Digital Library

[24]

Brad A. Myers and William Buxton. 1986. Creating Highly-Interactive and Graphical User Interfaces by Demonstration. SIGGRAPH Comput. Graph 20, 4 (1986), 249--258.

Digital Library

[25]

Brad A Myers, Richard G McDaniel, Robert C Miller, Alan S Ferrency, Andrew Faulring, Bruce D Kyle, Andrew Mickish, Alex Klimovitski, and Patrick Doane. 1997. The Amulet Environment: New Models for Effective User Interface Software Development. IEEE Transactions on Software Engineering 23, 6 (1997), 347--365.

Digital Library

[26]

Robert Nieuwenhuis and Albert Oliveras. 2006. On SAT Modulo Theories and Optimization Problems. In Theory and Applications of Satisfiability Testing - SAT 2006. Springer, Berlin, Heidelberg, 156--169.

Digital Library

[27]

Pavel Panchekha and Emina Torlak. 2016. Automated Reasoning for Web Page Layout. SIGPLAN Not 51, 10 (2016), 181--194.

Digital Library

[28]

Erica Sadun. 2013. iOS Auto Layout Demystified. Addison-Wesley Professional, Boston, US.

Digital Library

[29]

Alireza Sahami Shirazi, Niels Henze, Albrecht Schmidt, Robin Goldberg, Benjamin Schmidt, and Hansjörg Schmauder. 2013. Insights Into Layout Patterns of Mobile User Interfaces by an Automatic Analysis of Android Apps. In Proceedings of the 5th ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS '13). ACM, Gothenburg, Sweden, 275--284.

Digital Library

[30]

Adriano Scoditti and Wolfgang Stuerzlinger. 2009. A New Layout Method for Graphical User Interfaces. In Science and Technology for Humanity (TIC-STH), 2009 IEEE Toronto International Conference. CHI 2019, May 4--9, 2019, Glasgow, Scotland Uk Jiang Y., Du R., Lutteroth C., and Stuerzlinger W. IEEE, Toronto, ON, Canada, 642--647.

[31]

Gurminder Singh, Chun Hong Kok, and Teng Ye Ngan. 1990. Druid: a System for Demonstrational Rapid User Interface Development. In Proceedings of the 3rd Annual ACM SIGGRAPH Symposium on User Interface Software and Technology (UIST '90). ACM, New York, NY, USA, 167--177.

Digital Library

[32]

Nishant Sinha and Rezwana Karim. 2015. Responsive Designs in a Snap. In Proceedings of the 2015 10th Joint Meeting on Foundations of Software Engineering. ACM, Bergamo, Italy, 544--554.

Digital Library

[33]

John M Vlissides and Steven Tang. 1991. A Unidraw-Based User Interface Builder. In Proceedings of the 4th Annual ACM Symposium on User Interface Software and Technology. ACM, Hilton Head, South Carolina, 201--210.

Digital Library

[34]

Gerald Weber. 2010. A Reduction of Grid-Bag Layout to Auckland Layout. In Proceedings of the 2010 21st Australian Software Engineering Conference (ASWEC '10). IEEE Computer Society, Washington, DC, USA, 67--74.

Digital Library

[35]

Daniel S. Weld, Corin Anderson, Pedro Domingos, Oren Etzioni, Krzysztof Gajos, Tessa Lau, and Steve Wolfman. 2003. Automatically Personalizing User Interfaces. In Proceedings of the 18th International Joint Conference on Artificial Intelligence (IJCAI'03). Morgan Kaufmann Publishers Inc., San Francisco, CA, USA, 1613--1619. http://dl.acm.org/citation.cfm?id=1630659.1630944

Digital Library

[36]

Brad Vander Zanden and Brad A. Myers. 1990. Automatic, Look-andFeel Independent Dialog Creation for Graphical User Interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '90). ACM, Seattle, Washington, USA, 27--34.

Digital Library

[37]

Brad Vander Zanden and Brad A Myers. 1991. The Lapidary Graphical Interface Design Tool. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, New York, NY, USA, 465--466.

Digital Library

[38]

Clemens Zeidler, Christof Lutteroth, Wolfgang Stuerzlinger, and Gerald Weber. 2013. Evaluating Direct Manipulation Operations for ConstraintBased Layout. In IFIP Conference on Human-Computer Interaction (INTERACT). Springer, Berlin, Heidelberg, 513--529.

[39]

Clemens Zeidler, Christof Lutteroth, Wolfgang Sturzlinger, and Gerald Weber. 2013. The Auckland Layout Editor: An Improved GUI Layout Specification Process. In Proceedings of the 26th Annual ACM Symposium on User Interface Software and Technology (UIST '13). ACM, St. Andrews, Scotland, United Kingdom, 343--352.

Digital Library

[40]

Clemens Zeidler, Christof Lutteroth, and Gerald Weber. 2012. Constraint Solving for Beautiful User Interfaces: How Solving Strategies Support Layout Aesthetics. In Proceedings of the 13th International Conference of the NZ Chapter of the ACM's Special Interest Group on Human-Computer Interaction. ACM, New York, NY, USA, 72--79.

Digital Library

[41]

Clemens Zeidler, Johannes Müller, Christof Lutteroth, and Gerald Weber. 2012. Comparing the Usability of Grid-Bag and Constraint-Based Layouts. In Proceedings of the 24th Australian Computer-Human Interaction Conference (OzCHI '12). ACM, New York, NY, USA, 674--682.

Digital Library

[42]

Clemens Zeidler, Gerald Weber, Alex Gavryushkin, and Christof Lutteroth. 2017. Tiling Algebra for Constraint-Based Layout Editing. Journal of Logical and Algebraic Methods in Programming 89 (2017), 67--94.

Cited By

Jiang Y(2024)Computational Representations for Graphical User InterfacesExtended Abstracts of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613905.3638191(1-6)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613905.3638191
Jiang YLu YKnearem TKliman-Silver CLutteroth CLi TNichols JStuerzlinger W(2024)Computational Methodologies for Understanding, Automating, and Evaluating User InterfacesExtended Abstracts of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613905.3636316(1-7)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613905.3636316
Jiang YZhou CGarg VOulasvirta A(2024)Graph4GUI: Graph Neural Networks for Representing Graphical User InterfacesProceedings of the CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642822(1-18)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642822
Show More Cited By

Index Terms

ORC Layout: Adaptive GUI Layout with OR-Constraints
1. Human-centered computing
  1. Human computer interaction (HCI)
    1. Interactive systems and tools
      1. User interface toolkits

Recommendations

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

OR-constrained (ORC) graphical user interface layouts unify conventional constraint-based layouts with flow layouts, which enables the definition of flexible layouts that adapt to screens with different sizes, orientations, or aspect ratios with only a ...
Read More
ReverseORC: Reverse Engineering of Resizable User Interface Layouts with OR-Constraints
CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

Reverse engineering (RE) of user interfaces (UIs) plays an important role in software evolution. However, the large diversity of UI technologies and the need for UIs to be resizable make this challenging. We propose ReverseORC, a novel RE approach able ...
Read More
The auckland layout editor: an improved GUI layout specification process
UIST '13: Proceedings of the 26th annual ACM symposium on User interface software and technology

Layout managers are used to control the placement of widgets in graphical user interfaces (GUIs). Constraint-based layout managers are among the most powerful. However, they are also more complex and their layouts are prone to problems such as over-...
Read More

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences

CHI '19: Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems

May 2019

9077 pages

ISBN:9781450359702

DOI:10.1145/3290605

General Chairs:
Stephen Brewster
University of Glasgow, Scotland, UK
,
Geraldine Fitzpatrick
TU Wien, Austria
,
Program Chairs:
Anna Cox
University College London, UK
,
Vassilis Kostakos
University of Melbourne, Australia

Copyright © 2019 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Sponsors

SIGCHI: ACM Special Interest Group on Computer-Human Interaction

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 02 May 2019

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

CHI '19

Sponsor:

SIGCHI

CHI '19: CHI Conference on Human Factors in Computing Systems

May 4 - 9, 2019

Glasgow, Scotland Uk

Acceptance Rates

CHI '19 Paper Acceptance Rate 703 of 2,958 submissions, 24%;

Overall Acceptance Rate 6,199 of 26,314 submissions, 24%

Upcoming Conference

CHI PLAY '24

Sponsor:
sigchi

The Annual Symposium on Computer-Human Interaction in Play

October 14 - 17, 2024

Tampere , Finland

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

18
Total Citations
View Citations
1,166
Total Downloads

Downloads (Last 12 months)61
Downloads (Last 6 weeks)7

Other Metrics

View Author Metrics

Citations

Cited By

Jiang Y(2024)Computational Representations for Graphical User InterfacesExtended Abstracts of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613905.3638191(1-6)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613905.3638191
Jiang YLu YKnearem TKliman-Silver CLutteroth CLi TNichols JStuerzlinger W(2024)Computational Methodologies for Understanding, Automating, and Evaluating User InterfacesExtended Abstracts of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613905.3636316(1-7)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613905.3636316
Jiang YZhou CGarg VOulasvirta A(2024)Graph4GUI: Graph Neural Networks for Representing Graphical User InterfacesProceedings of the CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642822(1-18)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642822
Xu PShi WHu XFu HHuang H(2024)GTLayout: Learning General Trees for Structured Grid Layout GenerationComputational Visual Media10.1007/978-981-97-2092-7_7(131-153)Online publication date: 30-Mar-2024
https://doi.org/10.1007/978-981-97-2092-7_7
Hu HDong RGrundy JNguyen TLiu HChen C(2023)Automated Mapping of Adaptive App GUIs from Phones to TVsACM Transactions on Software Engineering and Methodology10.1145/363196833:2(1-31)Online publication date: 22-Dec-2023
https://dl.acm.org/doi/10.1145/3631968
Chan GGuo SKim CConnelly CLee MThomson AKoh E(2023)Detecting Email Components with Constraints: Expressive and Extensible Models in Answer Set ProgrammingExtended Abstracts of the 2023 CHI Conference on Human Factors in Computing Systems10.1145/3544549.3585714(1-8)Online publication date: 19-Apr-2023
https://dl.acm.org/doi/10.1145/3544549.3585714
Jiang YLu YLutteroth CLi TNichols JStuerzlinger W(2023)The Future of Computational Approaches for Understanding and Adapting User InterfacesExtended Abstracts of the 2023 CHI Conference on Human Factors in Computing Systems10.1145/3544549.3573805(1-5)Online publication date: 19-Apr-2023
https://dl.acm.org/doi/10.1145/3544549.3573805
Pan LYu CHe ZShi Y(2023)A Human-Computer Collaborative Editing Tool for Conceptual DiagramsProceedings of the 2023 CHI Conference on Human Factors in Computing Systems10.1145/3544548.3580676(1-29)Online publication date: 19-Apr-2023
https://dl.acm.org/doi/10.1145/3544548.3580676
Wysopal ARoss VPassananti JYu KHuynh BHöllerer T(2023)Level-of-Detail AR: Dynamically Adjusting Augmented Reality Level of Detail Based on Visual Angle2023 IEEE Conference Virtual Reality and 3D User Interfaces (VR)10.1109/VR55154.2023.00022(63-71)Online publication date: Mar-2023
https://doi.org/10.1109/VR55154.2023.00022
Chen YLiu ZTensmeyer CElmqvist NMorariu V(2023)DocDancer: Authoring Ultra-Responsive Documents with Layout Generation2023 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)10.1109/VL-HCC57772.2023.00023(133-138)Online publication date: 3-Oct-2023
https://doi.org/10.1109/VL-HCC57772.2023.00023
Show More Cited By

View Options

Get Access

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

HTML Format

View this article in HTML Format.

Media

Figures

Other

Tables

View Table of Contents