Clemens Zeidler

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.

The Auckland layout editor: an improved GUI layout specification process

Constraint-based layout managers are more powerful than the common grid, grid-bag, and group layout managers. However, they are also more complex and come with potential problems such as over-constrained specifications and overlap in a GUI. Current GUI builders have little support for layout constraints, and it is not clear how such constraints can be made easily accessible to GUI designers. We will demonstrate a GUI builder -- the Auckland Layout Editor (ALE) -- that addresses these challenges, by allowing GUI designers to specify constraint-based layouts using only simple mouse operations. ALE guarantees that all operations lead to sound specifications, making sure that the layout is solvable and non-overlapping. To achieve the latter, we propose an algorithm that automatically generates the missing constraints that are necessary to keep a layout non-overlapping. Todays applications need to run on multiple devices with different screen sizes. For this a layout must have a good appearance at different sizes. To aid the designer in creating a layout with good resizing behavior, we propose a novel automatic layout preview, which displays the layout at its minimal and at an enlarged size chosen to visualize layout problems directly.

The auckland layout editor: an improved GUI layout specification process

Layout managers are used to control the placement of widgets in graphical user interfaces (GUIs). Constraint-based layout managers are among the most powerful. However, they are also more complex and their layouts are prone to problems such as over-constrained specifications and widget overlap. This poses challenges for GUI builder tools, which ideally should address these issues automatically. We present a new GUI builderthe Auckland Layout Editor (ALE)that addresses these challenges by enabling GUI designers to specify constraint-based layouts using simple, mouse-based operations. We give a detailed description of ALEs edit operations, which do not require direct constraint editing. ALE guarantees that all edit operations lead to sound specifications, ensuring solvable and non-overlapping layouts. To achieve that, we present a new algorithm that automatically generates the constraints necessary to keep a layout non-overlapping. Furthermore, we discuss how our innovations can be combined with manual constraint editing in a sound way. Finally, to aid designers in creating layouts with good resize behavior, we propose a novel automatic layout preview. This displays the layout at its minimum and in an enlarged size, which allows visualizing potential resize issues directly. All these features permit GUI developers to focus more on the overall UI design.

Evaluating Direct Manipulation Operations for Constraint-Based Layout

Layout managers are used to control the placement of widgets in graphical user interfaces (GUIs). Constraint-based layout managers are more powerful than other ones. However, they are also more complex and their layouts are prone to problems that usually require direct editing of constraints. Today, designers commonly use GUI builders to specify GUIs. The complexities of traditional approaches to constraint-based layouts pose challenges for GUI builders.

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

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.

An Evaluation of Stacking and Tiling Features within the Traditional Desktop Metaphor

Having many open windows on the desktop can lead to various usability problems. Window content may get occluded by other windows and working with multiple windows may get cumbersome. In this paper, we evaluate the idea to integrate stacking and tiling features into the traditional desktop metaphor. For this purpose we introduce the Stack & Tile window manager, which allows users to stack and tile arbitrary windows into groups that can be moved and resized similar to single windows. To evaluate if stacking and tiling can improve productivity, we conducted an experimental evaluation. We found that participants were able to perform various multi-window tasks and switch between tasks significantly faster using Stack & Tile. Furthermore, we found that the time to set up a Stack & Tile window group is reasonably low. Stack & Tile is open-source and has been used for over two years now. To evaluate its usefulness in practice, we conducted a web-based survey that reveals how people are actually using the new stacking and tiling features.

Automatic Generation of User Interface Layouts for Alternative Screen Orientations

Creating multiple layout alternatives for graphical user interfaces to accommodate different screen orientations for mobile devices is labor intensive. Here, we investigate how such layout alternatives can be generated automatically from an initial layout. Providing good layout alternatives can inspire developers in their design work and support them to create adaptive layouts. We performed an analysis of layout alternatives in existing apps and identified common real-world layout transformation patterns. Based on these patterns we developed a prototype that generates landscape and portrait layout alternatives for an initial layout. In general, there is a very large number of possibilities of how widgets can be rearranged. For this reason we developed a classification method to identify and evaluate “good” layout alternatives automatically. From this set of “good” layout alternatives, designers can choose suitable layouts for their applications. In a questionnaire study we verified that our method generates layout alternatives that appear well structured and are easy to use.

Tiling Algebra for Constraint-based Layout Editing

Abstract The constraint-based layout model is a very powerful model to describe a wide range of graphical user interface (GUI) layouts, based on linear constraints. However, the advantages of the constraint-based layout model come at a price: layout designers have to ensure layouts are sound, i.e., they are solvable and items in the layout do not overlap each other. Keeping a layout sound is non-trivial since editing one constraint may have undesirable effects on other constraints. In this article, we propose a new formalism for constraint-based layouts which we call a tiling algebra. Editing operations on layouts are specified algebraically, which guarantees that these operations keep a layout sound. We propose to model tiling operations with two operators that are isomorphic cancellative semigroup operators with involution if seen as binary operators. While these semigroup operators alone already cover an interesting subset of layouts, called fragments, we show that there are more involved layouts, such as the pinwheel layout, which cannot be modeled with these operators alone. For this reason we introduce a third operator which is isomorphic to a Boolean conjunction. Our approach helps to describe constraint-based layouts correctly and to make layout editing robust. We apply the proposed algebra to two real constraint-based systems, which illustrate how it can be used to support sound layout creation and modification.

An evaluation of advanced user interface customization

Many graphical user interfaces (GUIs) are customizable. While there are many approaches to user interface customization, most of them are fairly simplistic, e.g., they only allow users to customize menus and toolbars. However, one can think of more advanced customization approaches that allow more complex GUI layout customizations and even functional customization. Functional customization goes deeper into the application logic and makes it possible to change the behavior of an application. In this paper we target two open questions: (1) Are technical users able to use such advanced customization approaches? (2) Would technical users apply such approaches in practice? We introduce prototypical systems for layout and functional customization of GUIs. In a user study, these systems were evaluated to address the research questions mentioned above. 18 technical users were given customization tasks for three layout and two functional customization scenarios. The participants were observed during the tasks and were asked to complete questionnaires. The results indicate that users are able to use the proposed customization systems, and would also employ them in practice. This suggests that it would be beneficial to include such customization facilities into current and future applications.

Towards a Framework for Privacy-Preserving Data Sharing in Portable Clouds

Cloud storage is a cheap and reliable solution for users to share data with their contacts. However, the lack of standardisation and migration tools makes it difficult for users to migrate to another Cloud Service Provider (CSP) without losing contacts, thus resulting in a vendor lock-in problem. In this work, we aim at providing a generic framework, named PortableCloud, that is flexible enough to enable users to migrate seamlessly to a different CSP keeping all their data and contacts. To preserve the privacy of users, the data in the portable cloud is concealed from the CSP by employing encryption techniques. Moreover, we introduce a migration agent that assists users in automatically finding a suitable CSP that can satisfy their needs.