Improving the usability of constraint-based layout for UI development in mobile apps

When designing user interfaces, developers want to be able to position objects in a structured way such that controls are clear and neat.  In the past, absolute positioning and grids have been used for this purpose.  However, such rigid layout doesn’t now allow adaptive layout for interfaces that run on a variety of screen sizes or that need different control sizes due to application being internationalised into foreign languages.  For this reason, Apple introduced constraint-based GUI layout under the name Auto Layout for iOS developers.  With Auto Layout developers specify constraints between objects that must be maintained, including priorities for which constraints to drop if not all can be satisfied.  Android has followed, recently adding constraint-layout to Android.  Both these constraint-based layout systems are based on the Cassowary algorithm, developed in part by Monash researchers.

While constraint-based layout is powerful, it can be difficult for users to understand the interactions and behaviour for the sometimes complex systems of constraints they have produced.  While this problem has been explored for the use of constraint-based tools in diagram editors, there is a need to create tools to better help users understand and debug problems with constraints they have specified for GUI layout.