Comparing the usability of grid-bag and constraint-based layouts

Abstract

While the usability of GUI design methods has been studied in general, the usability of layout specification methods is largely unexplored.In this paper we provide an empirical comparison of two popular GUI layout models, grid-bag layout and constraint-based layout. While the grid-bag layout is a powerful layout model, the constraint-based layout is able to generate even more general and flexible layout configurations. We performed a controlled experiment with postgraduate students of Computer Science and Software Engineering, measuring efficiency, accuracy and preference for typical layout specification and editing tasks.The results show significant differences between both layout models: the initial specification of GUIs is faster with a grid-bag layout whereas editing of existing complex layouts is faster and more accurate with a constraint-based layout. The study shows that constraint-based layout, although it may seem more complicated at first glance, can compete with and in some cases even outperform more conventional techniques in terms of their usability.

Evaluating Direct Manipulation Operations for Constraint-Based Layout

“…For this comparison we chose the GUI builder in MS Visual Studio 2010 (VS) as a representative for the state of the art, since it was popular at the time of the study. A prior study compared the usability of the gridbag and the constraint-based layout model, finding that the gridbag layout model has advantages in the creation of new layouts [19]. This supports our choice of a gridbag GUI builder such as VS for comparison with ALE when investigating H1.…”

“…A previous usability comparison between constraint-based and grid-based layout models [19] used printed screenshots and sketching. This comparison found that the constraint-based layout model is a competitive alternative to the grid-bag layout model and performs better for editing existing layouts.…”

GRIDS: Interactive Layout Design with Integer Programming

“…A benefit of constraint solving is that a layout can be defined by means of simple constraints. On the other hand, specifying a layout fully using just constraints quickly becomes complex [61]. To our knowledge, no constraints-based method has been proposed that ensures proper packing of elements and takes care of objectives like alignment, rectangularity, and grouping.…”

Automatic Generation of User Interface Layouts for Alternative Screen Orientations

“…Constraintbased layouts, such as Auto Layout 4 , are often used to make a layout resizable [8,[36][37][38]. Hottelier et al [39] proposed a technique which allows designers to generalize and specialize constraint-based layout specifications using direct manipulation.…”