Constraint solving for beautiful user interfaces: how solving strategies support layout aesthetics

Layout managers provide an automatic way to place controls in a graphical user interface (GUI). With the wide distribution of fully GUI-enabled smartphones, as well as very large or even multiple personal desktop monitors, the logical size of commonly used GUIs has become highly variable. A layout manager can cope with different size requirements and rearrange controls depending on the new layout size. However, there has been no research on how the distribution of additional or lacking space, to all controls in the layout, effects aesthetics. Much of the previous research focuses on discrete changes to layout. This includes changing the layout elements [15], or swapping around layout elements [7]. In this paper we focus strictly on the optimization of resizing of GUI components, and in this area we focus on rather subtle changes. This paper describes and compares strategies to distribute available space in a visual appealing way. All strategies are modeled with a constraint-based layout manager, since such a layout manager can be used to describe a wide range of layouts. Some aesthetic problems of constraint based layout managers have been identified and solutions have been provided. In a user evaluation three solving strategies, equal distribution, weighted distribution and a minimal deviation, have been compared. As a result, the minimal deviation approach seems to be a good strategy for large and small layout sizes. The minimal deviation and the equal distribution strategy is best at large layout sizes while the weighted distribution approach seems to perform better at small layout sizes. Furthermore, the evaluation shows that layouts with a high degree of symmetry are clearly preferred by the users.