New open source software eases the pain of multiple UI designs

The ORC Layout (OR-constraint Layout) software is being launched at the ACM CHI Conference on Human Factors in Computing Systems in Glasgow, Scotland, today (7 May 2019). The software, a collaboration between the University of Bath, University of Maryland and Simon Fraser University offers a new approach to UI design based on flexible principles to intelligently suggest layouts for different screens.

Currently a user interface (UI) has to be built for every different type of screen, such as desktop, tablet and mobile phone, as well as the orientations -- portrait and landscape, which is not only very time consuming, but increases the chances of errors creeping in as it becomes hard to keep track of changes and iterations.

Some software already exists to help automate this process, but both existing approaches have severe limitations.

The first, traditional constraint-based layout, applies rigid rules to design, for instance always placing one icon below another. However this rigidity can cause problems when changing size and orientation, leading to ugly or confusing UI.

The second method is flow layout, whereby components of the screen design can automatically move into new rows or columns as space runs out. But it is limited in the way that alignment of components can be specified.

ORC Layout merges the strengths of these two approaches by allowing designers to use all the features of traditional constraint-based layout and flow layout together and specify flexible alternatives for UI components and widgets. For example, designers can specify which widgets are essential and which are optional. By using Boolean logic, ORC Layout can automatically suggest intuitive alternative layouts for different screens.

Dr Christof Lutteroth from the University of Bath's Department of Computer Science, who worked on the software, said: "ORC Layout can be applied to any device, to any platform, and the idea is really very simple: if there's no space for the toolbar at the top of the screen, why not put it onto the left of the screen or the bottom of the screen? This is exactly what designers have to do when thinking about different screens.

"In our new layout method we bring all these alternatives together. For instance a designer can start with a desktop screen and design it the way they want, then start marking elements as optional if there's not enough space, looking at what happens when screen is rotated.

"By putting all the alternatives together, no matter what kind of device, ORC can automatically figure out what the best alternatives are for you. It's really quite exciting as it really changes the design process to make it simpler, but also reduces potential for problems -- such as forgetting to update one version of a UI."

The team sees the software as having widespread applications in modern web design, document formatting and app layouts.

The research is published in CHI Conference on Human Factors in Computing Systems Proceedings. The team now wants to continue to work on optimising the ORC Layout software, including by reducing the computing power it requires.

The ORC layout team will present the research at ACM CHI Conference on Human Factors in Computing Systems in Glasgow, Scotland, today at 11AM.