Grid-based Genetic Operators for Graphical Layout Generation

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.