Design and evaluation of a new editor for responsive Graphical User Interfaces

A responsive Graphical User Interface (GUI) dynamically responds to the changes in the size and appearance of a layout while migrating across screens with different sizes/orientations. Ideally, the design of such responsive GUIs is based on a single layout specification that can adapt to different screen sizes by altering the content and size of elements of a GUI to fit the screen of the current device. Yet, many current approaches rely on manually re-designing a GUI multiple times, once for each class of screen size. This work contributes a tool for creating responsive GUIs and provides a practical solution to the challenge of designing a single layout specification for responsive GUIs. To inform this work, I conducted a requirement elicitation study involving 12 expert GUI designers to investigate their experience and challenges with designing responsive GUI layouts. My colleague Yue Jiang and I both did a thematic analysis of the research interviews. The findings suggest that most of the designers who participated did not know how to take full advantage of advanced layout models and instead opted for the direct visual design of multiple individual layout specifications. To address this challenge, I designed the user interface of the novel L3 GUI editor to facilitate the creation of resizable GUIs. Yue Jiang then implemented a prototype of the editor. The L3 editor helps designers by inferring resize behaviors from examples, visualizes important constraints and layout patterns, and provides an animated preview of the resize behavior. I then evaluated the L3 editor in an exploratory user study with 10 participants and found that it made layout resizing behaviors more transparent to designers and that L3 has the potential to reduce the designer's effort in the responsive GUI design process.