Grid-based Genetic Operators for Graphical Layout Generation

Morteza Shiripour, Niraj Ramesh Dayama, Antti Oulasvirta

Research output: Contribution to journalArticleScientificpeer-review

5 Citations (Scopus)
53 Downloads (Pure)


Graphical user interfaces (GUIs) have gained primacy among the means of interacting with computing systems, thanks to the way they leverage human perceptual and motor capabilities. However, the design of GUIs has mostly been a manual activity. To design a GUI, the designer must select its visual, spatial, textual, and interaction properties such that the combination strikes a balance among the relevant human factors. While emerging computational-design techniques have addressed some problems related to grid layouts, no general approach has been proposed that can also produce good and complete results covering color-related decisions and other nonlinear design objectives. Evolutionary algorithms are promising and demonstrate good handling of similar problems in other conditions, genetic operators, depending on how they are designed. But even these approaches struggle with elements' overlap and hence produce too many infeasible candidate solutions. This paper presents a new approach based on grid-based genetic operators demonstrated in a non-dominated sorting genetic algorithm (NSGA-III) setting. The operators use grid lines for element positions in a novel manner to satisfy overlap-related constraints and intrinsically improve the alignment of elements. This approach can be used for crossovers and mutations. Its core benefit is that all the solutions generated satisfy the no-overlap requirement and represent well-formed layouts. The new operators permit using genetic algorithms for increasingly realistic task instances, responding to more design objectives than could be considered before. Specifically, we address grid quality, alignment, selection time, clutter minimization, saliency control, color harmony, and grouping of elements.

Original languageEnglish
Article number208
Number of pages30
JournalProceedings of the ACM on Human-Computer Interaction
Issue numberEICS
Publication statusPublished - Jun 2021
MoE publication typeA1 Journal article-refereed


  • fitts' law
  • gestalt law
  • graphical layout problem
  • grid-based genetic operators
  • many-objective optimization
  • user interfaces


Dive into the research topics of 'Grid-based Genetic Operators for Graphical Layout Generation'. Together they form a unique fingerprint.

Cite this