GRIDS: Interactive Layout Design with Integer Programming

In Proceedings of the ACM Conference on Human Factors in Computing Systems, CHI 2020.
GRIDS teaser
How can machines assist designers in making grid-based layouts?

Generated layouts should ensure key grid layout objectives:

  • Alignment between elements.
  • Overall rectangularity of the composition.
  • Preferential placement of particular elements.

The design process should be supported by:

  • Ensuring real-time feedback with new solutions.
  • Providing suggestions that are systematically diverse.
  • Auto-completing partial design solutions.
  • Finding local solutions within constrained design spaces.

GRIDS GIF
Abstract

Grid layouts are used by designers to spatially organise user interfaces when sketching and wireframing. However, their design is largely time consuming manual work. This is challenging due to combinatorial explosion and complex objectives, such as alignment, balance, and expectations regarding positions. This paper proposes a novel optimisation approach for the generation of diverse grid-based layouts. Our mixed integer linear programming (MILP) model offers a rigorous yet efficient method for grid generation that ensures packing, alignment, grouping, and preferential positioning of elements. Further, we present techniques for interactive diversification, enhancement, and completion of grid layouts. These capabilities are demonstrated using GRIDS1, a wireframing tool that provides designers with real-time layout suggestions. We report findings from a ratings study (N = 13) and a design study (N = 16), lending evidence for the benefit of computational grid generation during early stages of design.

The MILP Layout Generation Engine

Our mixed-integer linear programming (MILP) model ensures real-time generation of good grid layouts. The layout engine is implemented in Python, and uses the Gurobi optimiser. On running the layout engine with an input design task (JSON format), it outputs several design solutions within a short amount of time.
Along with the source code, sample input files are available in our repository at:

https://github.com/aalto-ui/GRIDS

You can also find additional documentation of the mathematical formulations here:
GRIDS Mathematical Formulation, PDF, 145 KB

Publication
paper

PDF, 4.4 MB
Niraj Dayama, Kashyap Todi, Taru Saarelainen, Antti Oulasvirta. 2020. GRIDS: Interactive Layout Design with Integer Programming. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (CHI ’20). 


						
@inproceedings{dayama2020grids,
author = {Dayama, Niraj and Todi, Kashyap and Saarelainen, Taru and Oulasvirta, Antti},
booktitle = {Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (CHI '20)},
title = {{GRIDS: Interactive Layout Design with Integer Programming}},
year = {2020},
publisher = {ACM},
doi = {https://dx.doi.org/10.1145/3313831.3376553},
keywords = {Grid Layouts, Creativity Support, Computational Design, Mixed-Initiative, Optimisation, Design Tools},
series = {CHI '20}}
Contact

For questions and further information, please contact:
Kashyap Todi
kashyap.todi@gmail.com

Acknowledgements: This work has been funded by the European Research Council (ERC) under the European Union’s Horizon 2020 research and innovation programme (grant agreement 637991).