Graph4GUI: Graph Neural Networks for Representing Graphical User Interfaces

TL;DR

Graph4GUI introduces a graph neural network-based model that effectively captures semantic and visuo-spatial relationships in GUIs, improving design generation and autocompletion tasks with higher accuracy and user preference.

Contribution

The paper presents a novel GNN-based approach for representing GUIs, enabling better layout prediction and design suggestions compared to previous methods.

Findings

Outperforms baseline in GUI autocompletion accuracy

Generated designs are more aligned and visually appealing

Designers find the model useful and efficient as a plug-in

Abstract

Present-day graphical user interfaces (GUIs) exhibit diverse arrangements of text, graphics, and interactive elements such as buttons and menus, but representations of GUIs have not kept up. They do not encapsulate both semantic and visuo-spatial relationships among elements. To seize machine learning's potential for GUIs more efficiently, Graph4GUI exploits graph neural networks to capture individual elements' properties and their semantic-visuo-spatial constraints in a layout. The learned representation demonstrated its effectiveness in multiple tasks, especially generating designs in a challenging GUI autocompletion task, which involved predicting the positions of remaining unplaced elements in a partially completed GUI. The new model's suggestions showed alignment and visual appeal superior to the baseline method and received higher subjective ratings for preference. Furthermore, we demonstrate the practical benefits and efficiency advantages designers perceive when utilizing our model as an autocompletion plug-in.