Grid-based Genetic Operators for Graphical Layout Generation

Proceedings of the ACM on Human-Computer Interaction, EICS 2021.
User Interfaces group, Aalto University
Grid NSGA teaser
Fig. 1. Use of a grid-based crossover operator
How to automatically generate graphical layouts?
  • The process of designing graphical user interfaces remains a time-consuming, challenging, and mostly manual activity
  • The difficulty arises from the large design spaces and from the presence of many objectives
  • We propose grid-based genetic operators to efficiently generate well-designed graphical layouts
  • The results show that our approach can generate meaningful Pareto sets
Abstract

Graphical user interfaces (GUIs) have gained primacy among means of interacting with computing systems, thanks to the way they leverage human perceptual--motor capabilities. However, GUI design remains a mostly manual activity. To design a GUI, one must select its visual, spatial, textual, and interaction properties such that the combination strikes a balance among the relevant human factors. While GUI computational-design problems have been solved for grid layouts through exact methods, no general approach has been proposed that can also produce good results for color-related decisions, which introduce nonlinear design objectives. Although evolutionary algorithms are promising and demonstrate good handling of similar problems in other conditions, genetic operators, depending on how they are designed, may struggle when elements overlap and produce too many infeasible candidate solutions. This paper presents a new approach, with grid-based genetic operators, which is 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. Among those addressed are grid quality, alignment, selection time, clutter minimization, saliency control, color harmony, and grouping of elements.

Materials
Publication
Grid NSGA paper

PDF, 26 MB
Morteza Shiripour, Niraj Ramesh Dayama, and Antti Oulasvirta. 2021. Grid-based Genetic Operators for Graphical Layout Generation. Proc. ACM Hum.-Comput. Interact. 5, EICS, Article 208 (June 2021), 30 pages. https://doi.org/10.1145/3461730 

                            
@article{shiripour2021gridnsga,
    author = {Shiripour, Morteza and Dayama, Niraj Ramesh and Oulasvirta, Antti},
    title = {Grid-Based Genetic Operators for Graphical Layout Generation},
    year = {2021},
    issue_date = {June 2021},
    publisher = {Association for Computing Machinery},
    address = {New York, NY, USA},
    volume = {5},
    number = {EICS},
    url = {https://doi.org/10.1145/3461730},
    doi = {10.1145/3461730},
    journal = {Proc. ACM Hum.-Comput. Interact.},
    month = may,
    articleno = {208},
    numpages = {30},
    keywords = {grid-based genetic operators, user interfaces, many-objective optimization, graphical layout problem, gestalt law, fitts' law}
}
Contact

For questions and further information, please contact:

Morteza Shiripour

Email:
shiripour.morteza (at) aalto.fi

Acknowledgements: This work was funded by Technology Industries of Finland (Grant No. 700047, “Self-Optimizing Web Pages”) and the Academy of Finland (Grant No. 328813, “Human Automata”).