Constraint Solving for Beautiful User Interfaces: How Solving Strategies Support Layout Aesthetics

Transcription

1 Constrant Solvng for Beautful User Interfaces: How Solvng Strateges Support Layout Aesthetcs Clemens Zedler Department of Computer Scence 38 Prnces Street Auckland 1010, New Zealand Chrstof Lutteroth Department of Computer Scence 38 Prnces Street Auckland 1010, New Zealand Gerald Weber Department of Computer Scence 38 Prnces Street Auckland 1010, New Zealand ABSTRACT Layout managers provde an automatc way to place controls n a graphcal user nterface (GUI). Wth the wde dstrbuton of fully GUI-enabled smartphones, as well as very large or even multple personal desktop montors, the logcal sze of commonly used GUIs has become hghly varable. A layout manager can cope wth dfferent sze requrements and rearrange controls dependng on the new layout sze. However, there has been no research on how the dstrbuton of addtonal or lackng space, to all controls n the layout, effects aesthetcs. Much of the prevous research focuses on dscrete changes to layout. Ths ncludes changng the layout elements [15], or swappng around layout elements [7]. In ths paper we focus strctly on the optmzaton of reszng of GUI components, and n ths area we focus on rather subtle changes. Ths paper descrbes and compares strateges to dstrbute avalable space n a vsual appealng way. All strateges are modeled wth a constrant-based layout manager, snce such a layout manager can be used to descrbe a wde range of layouts. Some aesthetc problems of constrant based layout managers have been dentfed and solutons have been provded. In a user evaluaton three solvng strateges, equal dstrbuton, weghted dstrbuton and a mnmal devaton, have been compared. As a result, the mnmal devaton approach seems to be a good strategy for large and small layout szes. The mnmal devaton and the equal dstrbuton strategy s best at large layout szes whle the weghted dstrbuton approach seems to perform better at small layout szes. Furthermore, the evaluaton shows that layouts wth a hgh degree of symmetry are clearly preferred by the users. Categores and Subject Descrptors H.5.2 [User Interfaces]: Evaluaton/methodology General Terms Expermentaton, Measurement, Performance Permsson to make dgtal or hard copes of part or all of ths work for personal or classroom use s granted wthout fee provded that copes are not made or dstrbuted for proft or commercal advantage and that copes bear ths notce and the full ctaton on the frst page. Copyrghts for components of ths work owned by others than ACM must be honored. Abstractng wth credt s permtted. To copy otherwse, to republsh, to post on servers or to redstrbute to lsts, requres pror specfc permsson and/or a fee. CHINZ 12, July , Dunedn, New Zealand Copyrght 2012 ACM /12/07 $ Keywords Aesthetcs, Constrant Based Layout, GUIs, Layout Manager 1. INTRODUCTION In early GUI frameworks, controls such as buttons or text vews had to be placed manually at a fxed poston and wth a fxed sze, e.g. n Mcrosoft Foundaton Class lbrary (MFC). Ths can become very tedous as soon as new controls have to be nserted or the layout of exstng controls has to be modfed. Modern GUI frameworks solve ths problem by offerng layout managers whch allow developers to poston the controls n a user nterface more abstractly. Rearrangng and modfyng a GUI can become easer and a re-layout of the GUI at dfferent wndow szes can be done automatcally by the layout manager. Furthermore, the use of a layout manager often leads to more consstent GUIs snce t can make sure that the controls, the layout tems of the layout, are well algned and consstently spaced. To setup a GUI usng a layout manager, the developer has to specfy a set of layout specfcatons. To keep thngs as smple as possble for the developer, the layout specfcatons that are requred to defne a layout wth good vsual appearance should be small. Ths means that layout specfcatons usually do not specfy every sngle detal about a layout, but leave some of the detals to the layout manager. Interestng are the cases when the avalable space n a GUI s nsuffcent or when there s more space avalable than needed. Both cases happen regularly when wndows are reszed, e.g. to adjust a GUI to the sze of the avalable screen space. For example, consder a smple layout contanng just two controls n a horzontal row, spannng the complete wndow sze (Fgure 3). Dependng on the wndow sze, the layout manager has to decde what control wdth s the best to yeld a vsually appealng result. An mportant hnt for that decson can be the control s preferred sze, whch descrbes the sze preferred by the control n the absence of any other constrants. Ths paper addresses the followng overall research queston: how should the space avalable n a GUI be dstrbuted among the layout tems? To answer ths queston, we need to consder what layouts are perceved as aesthetcally pleasng, as well as the solvng strateges that determne the layouts. We motvate a mnmal devaton strategy to dstrbute the avalable space. In a constrant based layout system ths can be mplemented by usng a quadratc solvng strategy and we show how ths solvng strategy s superor to a lnear solvng strategy. In ths paper we focus on a subproblem of ths general queston. We focus on a very restrcted class of layouts, and we are consderng a restrcted class of GUIs, namely GUIs that 72

2 are comprsed solely of buttons. Ths s worthwhle snce t allows us to solate possble cross-nfluencng factors. Our restrcted experments yeld nterestng results that can now be tested n other more general classes of layout. In the feld of typesettng and document layout much research has been done about how to create accessble and clear document layouts usng automated layout systems [9]. However, no study has been undertaken as to how dfferent solvng methods compare to each other wth respect to aesthetcs. The compared solvng strateges are equal dstrbuton, weghted dstrbuton and mnmal devaton. All solvng strateges were mplemented and evaluated usng the Auckland Layout Model (ALM) [11] a constrant based layout manager. However, the results presented n ths paper are not lmted to the ALM and can be appled to other layout managers as well. A constrant based layout system s able to model all nterestng layouts and solvng strateges for our research. Ptfalls of the solvng strateges are analyzed and solutons for them are presented. We performed a user evaluaton where the equal dstrbuton, weghted dstrbuton and mnmal devaton strateges were compared to each other. Our study shows that the mnmal devaton strategy gves good results for small and large layout szes, whle the other solvng strateges only demonstrate ther strength ether at small or at large layout szes. In the next secton an ntroducton to layout managers and the dfferent types of common layout classes s gven. Secton 3 gves an overvew of related work, ncludng how other layout manager dstrbute avalable space and how Gestalt prncples are used n other felds to get vsually appealng results. A detaled descrpton of constrant based layout and how systems of layout constrants can be solved usng lnear and quadratc objectve functons s gven n Secton 4. Secton 5 compares the effect of lnear and quadratc objectve functons on the vsual qualty of the layout. In Secton 6 a user evaluaton s presented that provdes answers to the research queston. It shows how the layouts produced by dfferent solvng approaches are perceved aesthetcally by users. The results ndcate whch solvng strateges generally lead to more beautful layouts. 2. LAYOUT MANAGERS (OVERVIEW) In early GUI developer toolkts, GUI tems had to be placed manually n certan fxed poston. Ths statc approach can be tedous and error prone, especally durng the desgn process where GUI tems are moved around qute often. In ths case, already placed tems have to be rearranged when nsertng a new element. A layout manager asssts the developer n settng up dynamc graphcal user nterfaces. GUI tems managed by a layout manager are placed automatcally followng certan rules. Furthermore, the layout manager can adjust the layout, e.g. when the user reszes a wndow. In ths case a layout manager repostons GUI tems dynamcally to ft nto the new sze. Another case s a font change or a change of the applcaton language, e.g. from Englsh to German. Generally, n both cases the dsplayed text wll change ts sze and thus requres the rearrangement of GUI tems. Usng a statc approach makes t frustratng for the developer to handle such cases. However a layout manager handles these use cases wth ease wthout further work from the developer. Anythng that can be placed nto a layout s called a layout tem. The most mportant layout tems are GUI controls, e.g. buttons or text labels. Other mportant layout tems are spacers, whch are nvsble and can be placed between other layout tems. A spacer can occupy a fxed amount of space or can act lke a sprng to push other layout tems asde. In ths way, a spacer can be used to refne a layout and gve t the desred shape. In order to create nested layouts t s mportant to have an tem that can hold another layout. Ths can easly be acheved by treatng a layout as a specal layout tem. In the followng we assume that layout tems are rectangular. In general a layout tem has a mnmal, a maxmal and a preferred sze. The preferred sze s the sze the layout tem should assume f there are no other constrants for the tem sze. Ths can be llustrate wth a pnched sponge whch, after releasng t, expands to ts orgnal or preferred sze. From the sze values for each layout tem n the layout, the correspondng sze values of the complete layout can be calculated. Smlar to a sngle layout tem, the preferred sze of a whole layout s the sze t should assume f there are no other constrants. Notce that n a layout of mnmal sze, not all layout tems may have ther mnmal sze. Ths s because other larger layout tems may be preventng the layout from shrnkng further. In general, a layout or a layout tem has a sze dfferent from ts preferred sze. Thus, there s a sze dscrepancy between the actual sze and the preferred sze. There are dfferent exstng types of layout n varous frameworks (see Secton 3). Most of these frameworks provde specal layout classes for specal types of layout problems, e.g. group layout, grd layout or flow layout. Usually these specal layouts can be combned by creatng nested layouts. These most common layout classes are descrbed brefly n the followng sectons. 2.1 Group Layout A group layout s a smple 1-dmensonal layout that can hold tems sde by sde n a sngle row or column. There are two man varants of ths layout, a horzontal group layout whch can hold a row of tems and a vertcal group layout whch can hold a column of tems. By nestng horzontal and vertcal group layouts many useful layout confguratons can be created. However, ths type of layout s not suffcent for more complex layouts, e.g. a lnk between layout tems n two dfferent group layouts s not possble. 2.2 Grd (Bag) Layout Some of the shortcomngs of a group layout can be avoded by usng a grd layout, also known as a table layout. Here, a layout tem can be placed n a 2-dmensonal table. A layout tem can occupy more than one cell n the grd, and thus t s possble to create complex layouts. Furthermore, t s possble to create a lnk between tems not drectly adjacent, e.g. by placng them n the same row or column. Ths makes the grd layout reasonably flexble and powerful. The grd layout can be tuned by gvng the rows and columns specal weghtngs. Ths s useful n specfyng whch row and column should use more space compared to the other rows and columns. 2.3 Flow Layout A flow layout s bascally a horzontal group layout that can span over multple rows f tems do not ft nto one row. Ths s comparable wth a lne of text n a word processor: f the end of the lne s reached, the text s contnued n the next lne. An example of a flow layout s a button bar that becomes a mult-lne button bar n case the wndow becomes smaller than the button bar wdth. 73

3 2.4 Constrant-Based Layout In a constrant-based layout, the layout specfcatons are descrbed by constrants usng lnear equaltes and nequaltes. An example for a smple GUI constrant for a horzontal two-button layout s button1 rght = button2 left. There are two types of constrants: hard constrants, whch have to be satsfed, and soft constrants, whch can be volated f necessary. The way how soft constrants are solved depends on the mplementaton of the constrant solver and can be used to control the fnal vsual appearance of the layout. Layouts created wth a group or grd layout can alternatvely be created usng a constrant-based layout manager. However, constrant-based layout managers support even more complex layouts, whch makes them very powerful. For example, n a grd layout, layout tems are always algned to a outer fx grd whle n a constrant-based layout a layout tem can be algned relatve to another layout tem and so s not bound to the fx grd. Constrant-based layouts are dscussed n detal n Secton RELATED WORK 3.1 Layout Managers Some of the most promnent GUI frameworks that provde layout mangers are Qt 1, Java AWT [16], Cocoa 2, Wndows Forms [13], GTK+ 3 and wxwdgets 4. Most of these layout managers dstrbute avalable space n a smple way, however, dfferent managers use dfferent methods of dstrbuton. How exactly avalable space s dstrbuted s nether well documented nor s there any explanaton why a partcular method of dstrbuton has been chosen. For example, the Grd Bag Layout from the Java AWT framework dstrbutes the layout sze dscrepancy usng weghts whch can be assgned to columns and rows (weghted dstrbuton). Ths means generally that an tem grows or shrnks by sze tem = dscrepancy weght tem / tems weght. The Qt toolkt follows a dfferent approach and dstrbutes or takes avalable space avalable space equally from all tems n the layout (equally dstrbuton): sze tem = dscrepancy /#tems Another approach s mplemented n the Haku OS 5. Here, for all tems n a group layout the sum of the quadratc tem dscrepances s mnmzed (mnmal devaton). Ths s descrbed n more detal n Secton Smlar to the ALM layout manager used n ths research (see Secton 4), the Java layout class SprngLayout and the layout manager of the Mac OS Cocoa API, Auto Layout, s based on constrants. In Auto Layout, the programmer can specfy lnear constrants n the form y = m x + b between two varables x and y. These varables could, for 1 Qt a cross-platform applcaton and UI framework, Cocoa Auto Layout Gude, apple.com 3 The GTK+ project, 2011, 4 wxwdgets Cross-Platform GUI Lbrary, 2011, The Haku Operatng System, 2011, haku-os.org example, be the wdth or the edge of a layout tem. However, ths approach s not as powerful as general constrantbased layout managers such as ALM, whch allow to specfy more complex constrants and make t possble to create layouts n a more abstract way. For example, constrants wth multple varables or varables not connected to any layout tems are not possble. A wde overvew of dfferent technques for solvng GUI constrants s gven n [1]. Besdes methods of dstrbutng the dscrepancy, other approaches have been tred to adapt a layout to dfferent szes. Supple s an automated system that can adapt layouts to changes n dsplay sze, n partcular to dfferent devces. The system supports dscrete changes of layout tems,.e. t changes the controls that are used wthn an nput form dependng on the avalable space [15]. Optmzatons of more expermental layouts has been studed for the GADGET framework [7]. For example, GADGET targets problems lke how a GUI can be automatcally generated usng certan optmzaton rules. 3.2 Layout Aesthetcs The scentfc feld of Gestalt psychology [10] covers prncples about the percepton of shapes and groups of shapes. For example, the law of equalty states that smlar shapes are perceved as a group, and the law of proxmty states that shapes whch are placed close to each other are perceved as a group. These fndngs can be transferred to user nterfaces, where algned controls are perceved as a group. The law of equalty can be appled when tems are placed n the same row or column and share the same heght or wdth. When tems are algned close to each other the law of proxmty can be appled. Ths can be used to group related controls [8] to acheve a clear layout appearance. Gestalt psychology s the bass for many felds and s used n most aesthetcs related papers. Gestalt prncples can also be appled to conventonal typography [9] as well as to web documents [3]. Here they can help to structure a document to make t easer to read and understand. Another applcaton s the pagnaton problem, whch targets the queston how to best dstrbute content over multple pages, e.g. how to place fgures and text n a complex document to produce vsually pleasng results [14]. In the feld of graph layout, a set of smlar layout aesthetcs has been used to optmze graphs [4]. The knowledge of Gestalt prncples can help to layout UI objects n a more pleasant way [3]. Layout mangers often make t easer to set up good layouts, wthout havng to defne the fnal layout n all ts detals. However, they do not apply Gestalt prncples all by themselves: f Gestalt prncples are used depends on how a GUI desgner specfes a layout, not on the layout manager. 4. CONSTRAINT-BASED LAYOUTS In a constrant-based layout manager, user nterface layouts are specfed mathematcally as constrant problems. Ths makes t possble to create complex and flexble layout specfcatons, and calculate actual layouts usng numercal constrant solvng methods [12]. The Auckland Layout Model (ALM) [11] s the constrant-based layout manager used for ths research, and a sutable representatve of constrant-based layout n general. ALM was chosen because all common layout specfcatons and solvng strateges can be emulated usng ALM. The dscrepancy dstrbuton methods dscussed here can also be used wth other constrant-based layout managers. Each layout tem n ALM s connected to a tab on each of ts four borders; a tab s a horzontal or vertcal grd lne n the layout. Relatons between tabs, and so between 74

4 dfferent layout tems, can be specfed usng layout constrants. For example, to place two buttons besde of each other, the rght border of the left button shares a tab wth the left border of the rght button. A rectangular space, surrounded by tabs, that s occuped by a layout tem s called an area. The developer s able to add arbtrary constrants to the layout specfcaton. For example, an addtonal constrant lke wdth button1 = 2 wdth button2 could be used to ensure that the wdth of button1 s two tmes as bg as the wth of button2. Compared to a grd layout where rows and columns have a fxed order, tabs do not have a strct order whch allows more flexble layouts. There are two knds of constrants used to specfy a layout. Frst, hard-constrants are needed to set the fxed propertes of a layout tem, such as ts mnmum and maxmum sze. Secondly, soft-constrants are used to gve a hnt how a layout tem should look lke, e.g. the tem sze should be close to the preferred tem sze. The actual nfluence of the soft-constrants on the fnal layout vares dependng on the solvng strategy used. 4.1 Specfyng Constrants Constrants that have to be satsfed exactly are called hard-constrants. A hard-constrant could be ether an equalty or an nequalty constrant, and can be descrbed by A x = b A x b equaltes nequaltes Here A s the constrant matrx, x s the tab or varable vector and b s a constant vector. Soft constrants are specfed n the same way as hard constrants, but because they can be volated, t s often possble to prortze them. In case of a conflct between soft constrants, the constrant wth the smallest prorty wll be volated most. Smlar to hard constrants, developers may add custom soft-constrants to a layout specfcaton. The most mportant use case for soft constrants s the specfcaton of preferred szes for layout tems. Preferred sze constrants are a common way to gve layout tems a reasonable sze,.e. make them as close to ther preferred sze as possble, whle stll accommodatng sze adjustments. For example, the preferred wdth of a button s the wdth needed to dsplay the button label plus some extra space for the border. Ths border s actually not completely needed and labels can be abbrevated, so the button could be narrower than the preferred wdth. Smlarly, t s possble to make the button wder than the preferred wdth. The solver has to decde whch wdth s the best, consderng that the tem needs to ft nto the overall layout, e.g. that t algns wth ts neghbors. Usng a preferred wdth soft constrant, t wll choose a sze as close to the preferred wdth as possble. The mathematcally descrpton of soft-constrants depends on the objectve functon used, and s dscussed later n Secton Rows and Columns A layout tem s always connected to two horzontal and two vertcal tabs. The two horzontal tabs can naturally be regarded as a row, and the two vertcal tabs as a column. Multple layout tems sharng the same horzontal or vertcal tabs also share the same row or column, respectvely. In ths way there can be nterruptons n a row or a column, e.g. there could be another tem between two tems n a row that s only connected to one or even none of the horzontal row tabs. Ths s not the tradtonal defnton of rows and columns but allows a smple groupng of the generally unordered tab system. 4.3 Layout Optmzaton A sutable constrant solver for user nterface constrants must be able to solve the hard-constrants (Secton 4.1) and must also handle soft-constrants. Soft-constrants are descrbed separately from hard-constrants by a scalar objectve functon. In general, ths objectve functons s mnmzed whle satsfyng the hard-constrants at the same tme Lnear Objectve Functon The smplest approach for an objectve functon s a lnear objectve functon, whch can be utlzed to descrbe soft-constrants and optmzed usng lnear programmng. Techncally, ths s done by frst addng a hard-constrant for each soft-constrant, of the form a soft, x + s shrnk s grow = b soft. Here, s shrnk and s grow are two new postve slack varables whch express that the soft-constrant can be volated n both drecton. The goal s to keep both slack varables as small as possble to volate the soft-constrant as lttle as possble. The penalty factors p shrnk and p grow can be used to prortze a soft constrant, wth a large penalty factor meanng that growng or shrnkng away from the optmal values s suppressed. Fnally, ths leads to the lnear objectve functon, whch s the weghted sum of all slack varables, and whch must now be mnmzed [11]: p grow, s grow, + p shrnk, s shrnk, mn. (1) soft A sutable solver for ths purpose s lp solve [2], whch uses the smplex algorthm [5]. One of the problems of a lnear objectve functon s that mnmzng (1) generally leads to many vald solutons; the lnear approach s non-determnstc. Ths means that not all soft-constrants are volated n a unform way, e.g. only a few constrants are volated and ts not clear whch constrants are volated Quadratc Objectve Functon A determnstc approach s to mnmze the square of the devaton from a desred target value. For smple preferred sze constrants ths can be wrtten as (x pref ) 2 mn. soft More general, the soft-constrants n matrx form A soft x = b pref can be used to form the quadratc objectve functon 1 2 xt A T softa soft x b T pref A soft x mn. Replacng A T softa soft = G and b T pref A T soft = g T ths could be smplfed to: 1 2 xt Gx + g T x mn Ths s a known quadratc programmng optmzaton problem and could, for example, be solved usng the Actve Set method [6]. To use the Actve Set method, frst a vald 75

5 base soluton for the hard constrants has to been found. Contnung from that base soluton, the Actve Set method mnmzes the quadratc objectve functon, whle stayng n the soluton space of the hard-constrants. Soft constrants can be weghted by a penalty p. For the smple preferred sze constrants, ths leads to the objectve functon p 2 (x pref ) 2 mn. soft Constrants wth larger penaltes p wll be volated less than constrants wth smaller penaltes. Notce that compared to the lnear objectve functon only one penalty factor for growng and shrnkng can be appled. Thus the developer can not specfy f a layout tem s more lkely to grow than to shrnk. However, by combnng two soft nequalty constrants, e.g. x > b and x < b, a smlar growng and shrnkng behavor can be acheved. A soft nequalty constrant s an nequalty constrant that can be volated f necessary. Soft nequalty constrants are not drectly supported usng a quadratc objectve functon but can be constructed from a hard nequalty constrant and a normal soft constrant. To construct a soft nequalty constrant a postve slack varable s has to be added to the basc nequalty. For example, c x < r becomes c x s < r, c x > r becomes c x + s > r. Ths means s can always be chosen to satsfy the nequalty. However, only f other constrants requre to volate the soft nequalty constrant, then s should be greater than zero. Ths can be acheved by addng the soft constrant s = 0 wth a suffcent hgh penalty. 5. AESTHETICS PROBLEMS OF CONSTRAINT-BASED LAYOUT Descrbng soft-constrants usng a lnear or a quadratc objectve functon leads to dfferent behavors when dstrbutng the sze dscrepancy to the layout tems. In ths secton, the behavor of preferred sze soft-constrants s dscussed from an aesthetc pont of vew. 5.1 Lnear Objectve Functons Cause Nondetermnsm An example for a smple homogeneous layout s a layout contanng just three buttons wth exactly the same propertes. Fgure 1 a) shows the resultng layout solved by lp solve (lnear objectve functon). As expected, all hard-constrants are satsfed. The soft-constrants for the frst two buttons are matched exactly, meanng the heght s equal to the preferred sze of the buttons. The only volated soft-constrant s the preferred heght of the thrd button. From the aesthetc pont of vew, ths layout confguraton looks odd. Because all buttons have the same propertes, one would expect that all buttons take the same amount of space. The heght rato between the dfferent buttons s not specfed by the layout, but s a result of how the solver solved the constrants. It s theoretcally even possble for the rato to changes nondetermnstcally durng reszng. Followng Gestalt prncples, the three buttons wth dentcal propertes should be perceved as a group, whch s not the case here. One soluton to ths problem s to manually specfy a sze relaton between the related tems, but ths s extra (a) (b) Fgure 1: Smple three button layout wth all buttons havng the same propertes. The layout s solved usng a) a lnear and b) a quadratc objectve functon. work for the developer. A better soluton s to leverage the advantages of a quadratc objectve functon, whch mnmzes the devaton to the preferred tem sze for each tem, not just the sum of devatons over all the tems. Fgure 1 b) llustrate how a quadratc objectve functon leads to the desred unform result Proportonalty Scale Varables The problem of the lnear objectve functon, as descrbed above, could partally be solved by ntroducng addtonal free scalng varables s. These scalng varables can be used to make the sze of a layout tem proportonal to ther preferred sze. To do so, the preferred sze soft constrants have to be rewrtten to: x x pref s = 0. However, the approach can only be used n specal cases,.e. when all layout tems can get a sze proportonal to ther preferred sze. In case ths requrement s not satsfed anymore, the soft-constrants have to be volated agan whch leads to the same problem of non-determnsm as descrbed prevously. 5.2 Sprng Effects One dsadvantage of mnmzng the devaton to the preferred szes s that ths sometmes leads to an unwanted sprng effect. Ths s an analogy between preferred sze constrant and mechanc sprngs, pullng or pressng an tem to ts preferred sze. The problem occurs when multple sprngs are coupled and thus ther strengths combned to a resultng force. Such a couplng could, for example, be observed n a multrow layout lke n Fgure 2. In the frst row three sprngs and n the second row two sprngs are coupled. Because each button has the same preferred heght, ths results n the same descrptve sprng force F s for each button. Thus the frst row has a sprng force of 3 F s and the second row a force of 2 F s. For the solved layout ths means both rows have a dfferent heght. Ths s certanly a lmtaton of constrant-based layout because snce all tems have the same propertes one would expect, accordng to the equalty Gestalt law, two equal szed rows. In such a case a relaton between rows has to be specfed explctly, e.g. by applyng a hard-constrant that keeps the heght of both row constant. Another, more general soluton s to defne preferred sze constrants on whole rows and columns only. 76

6 Fgure 2: Sprng effect: Three buttons n the frst row pullng stronger to ther preferred sze than the two buttons n the second row. A row or column s defned by two tabs and at least one layout tem between these tabs. Rows are bordered by horzontal tabs and columns by vertcal tabs. Layout tems connected to the same two tabs are assocated wth the same column or row (Secton 4.2). To solve the sprng effect problem, the preferred sze constrant s only appled for rows and columns and not for each layout tem. Snce there could be multple tems n a row or a column, the weghted average of the preferred szes of the tems s used, usng penaltes as weghts. In the upper example, ths has the affect that both rows have the same preferred heght, and thus get the same heght when solvng the layout. 6. EVALUATION There are many ways to place layout tems n a layout. Smlar to a typesettng system, an mportant goal s to to create layouts that are aesthetcally pleasng for the user [9]. In ths secton, we evaluate dfferent solvng strateges wth regard to aesthetc percepton. The dfference n the perceved aesthetcs of layouts generated by dfferent solvng strateges are small and dffcult to measure. For some users t may not be obvous what the dfferences are between the same layout rendered wth dfferent solvng strateges. Furthermore, the crtera of aesthetcs are subjectve and vary between users. An mportant aspect of ths evaluaton s the analyss of the resze behavor of a layout. Layouts should look pleasng at dfferent szes, not just for a partcular ntal sze. Therefore, the evaluaton wll consder dfferent szes of the same GUI, a small sze close to the layout mnmum sze and a large sze approxmately twce as large as the preferred layout sze. Here, three solvng strateges that place tems n a 1-dmensonal and 2-dmensonal layout are analyzed. All layouts and solvng strateges descrbed n the followng were mplemented usng ALM s constrant system. 6.1 Sngle-Row Layouts A very smple layout s a layout consstng of just a sngle row, e.g. a group of buttons arranged besdes each other. Three dfferent solvng strateges to dstrbute the sze dscrepancy to the buttons n the row are evaluated. Frst, equal dstrbuton gves each tem the exact same amount of space n a lne. Here the preferred sze of an tem s not take nto account. Note that the theoretcal mnmum sze of a layout can generally not be reached here,.e. when one of the layout tems reached ts mnmum sze then the other ones cannot be made smaller ether. In practce ths can be solved by volatng the equalty constrant once an tem reaches ts mnmum sze. Secondly, weghted dstrbuton keeps the sze rato between tems n a lne constant. Ths means a weght s assgned to each tem. The layout tem szes are gven by Sze tem = Sze layout w tem/ w. tems For ths evaluaton, the tem weght s chosen as the relatve tem sze at a small ntal layout sze, where the tems are close to ther preferred sze. Thrdly, the tem szes are determned by calculatng the mnmal devaton from the preferred sze for each layout tem. Ths can be acheved wth a solvng strategy that uses a quadratc objectve functon (see Secton 4.3.2). For very large layouts, the mnmal devaton approach converges to the equal dstrbuton approach because the preferred sze becomes small compared to the actual tem sze. For layout szes close to the layout s preferred sze, the result s close to the weghted dstrbuton because the weghts are chosen to match the preferred sze. An example for a smple two-button row at small layout sze s shown n Fgure 3. For smplcty, no tem maxmum sze s taken nto account. Maxmum szes result n more complex layouts and thus make the analyss of the evaluaton results more complcated. For example, when the maxmum of one layout tem n an equally dstrbuton layout s reached, the layout cannot be reszed any further. (a) (b) Fgure 3: Two dfferent solvng strateges for a smple two-button layout: (a) mnmal devaton and (b) equal dstrbuton. 6.2 Mult-Row Layouts Another nterestng queston s how the three dfferent solvng strateges from the prevous secton perform n a mult-row layout. In ths evaluaton, a two-row and a three-row layout s evaluated wth regard to ts perceved aesthetcs. The two-row layout has three buttons n the frst row and two button n the second row. In the threerow layout, another row wth two buttons s appended. The frst case we consdered n ths study s a mnmal devaton approach, where the szes of the tems are chosen as close to ther preferred szes as possble. However, as shown n Fgure 4 (a), ths leads to an rregular, staggered appearance, whch s unusual for mult-row layouts. In mult-row layouts, the tems are usually algned n a grd, whch comes naturally when usng common grd-based layout managers. Therefore, we also evaluate some layouts where the tems are algned n a grd, wth each tem takng up as many cells as seems natural for ther gven preferred sze. More specfcally, we want to compare two dfferent solvng strateges for the grd-algned layouts: ether the space of the tems n the frst row uses an equal dstrbuton, as n Fgure 4 (b), or t uses a weghted dstrbuton, as n Fgure 4 (c). The szes of the tems n the second and thrd row follow from ther algnment wth the frst row. If the mnmal devaton approach were used for the frst row, wth the tems n the second and thrd row beng algned to the frst row, the resultng layout would look very smlar to the cases (b) and (c), dependng on the layout sze, 77

7 Queston Score I easly saw the dfference between the layouts. 1.3 It was easy to judge the dfferent layouts. 0.6 I have experence wth desgnng UIs. 1.3 I have graphcs desgn experence. 0.3 Table 1: Average questonnare ratngs on a standard 5-pont Lkert-scale ( 2 to +2). therefore we dd not examne ths case n separaton. (a) (b) (c) Fgure 4: Three row layout at small layout sze. (a) Mnmal devaton wthout algnment. (b) Equal dstrbuton wth algnment. (c) Weghted dstrbuton wth algnment. 6.3 Methodology Partcpants were asked to compare varous sngle- and mult-row layouts shown on paper. Each layout was rendered at two dfferent wdth: a small wdth close to the mnmal wdth, and a larger wdth about twce as wde as the small wdth. The partcpants were asked to judge the layouts by ther vsual appearance and rank them accordngly, whch s expressed by a score: the worst layout got zero ponts, the layout n between got one pont, and the best layout got two ponts. The partcpants were nstructed to consder f every button gets a reasonable amount of space for ts label. Furthermore, the personal preferences for the button placement and sze should be taken nto account. After judgng the dfferent layouts, the partcpants were asked to fll n a questonnare. The questonnare used a standard 5-pont Lkert-scale, followed by open questons askng the partcpants to descrbe the crtera for ther layout preferences. 6.4 Results The study had 15 partcpants. All of them had a Computer Scence background, and most of them had experence n desgnng graphcal user nterfaces but only casual experence n graphcs desgn. Whle t was easy for them to see the dfferences between the gven layouts, t was not easy for them to judge them (see Table 1). To determne the sgnfcance of the dfferences n preference, a one-sded Welch t-test s used Sgnfcant Preference Dfferences For all the sngle-row layouts, there s no sgnfcant dfference between the mnmal devaton and the equal dstrbuton layouts. For large layouts, ths s expected because mnmal devaton and equal dstrbuton layouts look almost dentcal. For the three-button layout n ts large sze, the mnmal devaton and the equal dstrbuton layouts are sgnfcantly (p < 0.05) better than the weghted dstrbuton layout. For the mult-row layouts, the grd-algned layout s clearly preferred over the unalgned mnmal devaton layout. For the two-row layout, the devaton layout gets only 10% for the small sze, and 15% for the large sze. The scores were even worse for the three-row layout, where only two partcpant lked the mnmal devaton layout. Ths s an nterestng fndng and means a symmetrcal layout where the layout tems borders are algned to each other s more pleasant than a layout where each ndvdual tem gets the space closest to ts preferred space. Ths can be explaned wth Gestalt psychology: objects that are algned to each other are perceved as a group, thus t s easer for us to understand the layout, whch makes t preferable [8]. For the usage of constrant-based layout managers lke ALM, ths ndcates t s better to reuse exstng tabs to create more algnment n layouts Preference Trends Apart form the clear fndngs of the prevous secton, some other nterestng observatons can be made from the taken data. Frst, a smlar tendency as n the mult-row layouts can be seen for the sngle-row layout n the large sze: for large layout szes, the equal dstrbuton layout s more lked than the weghted dstrbuton layout. When combnng the results from the two- and the three-rows layouts, ths tendency s sgnfcant at the p < 0.1 level. A contrary tendency can be seen at small layout szes. For the mult-row layouts at small layout szes, the weghted dstrbuton layout s preferred over the equal dstrbuton layout. When the two- and three-row layout results are combned, ths s sgnfcant at the p < 0.1 level. In the small sngle-row scenaro, where mnmal devaton layout and weghted layout look dentcal, ths observaton cannot be made. However, at least t could be sad that the equal dstrbuton layout does not lead to better results than the weghted dstrbuton layout. To sum up, there s a tendency that at small layout szes weghted dstrbuton layouts are more preferred than equal dstrbuton layouts. At large szes, the equal dstrbuton and mnmal devaton layouts are preferred above the weghted dstrbuton approach. Ths means that the mnmal devaton approach, whch s equal to the weghted dstrbuton at small layout szes and very smlar to the equal dstrbuton at large layout szes, s well-suted for all the szes, small and large. Furthermore, the mnmal devaton soluton scales smoothly down to small layout szes where t seems to be mportant that each tem gets a far amount of the sze dscrepancy. For large layouts, the mnmal devaton approach roughly dstrbutes all layout tem equally, whch has been found to be the most preferred soluton for large layouts Qualtatve Responses When asked about the crtera for preferrng one layout over another, the most frequent answer from the partcpants was that algnment of the buttons s an mportant factor (6 partcpants). For others, enough space for the button labels and the button margns was mportant (3 partcpants). Furthermore, three partcpants stated 78

8 that they prefer layouts wth equal button sze. These qualtatve statements are consstent wth the fndngs from the quanttatve layout evaluaton. Frst, algned mult-row layouts are preferable over unalgned layouts. Secondly, for small layout szes, there s the trend that mnmal devaton layouts, where the sze dscrepancy s unformly dstrbuted on the button margn, are more lked. Thrdly, for large layout szes, each layout tem should get the same amount of space, whch s the case n equal dstrbuton and mnmal devaton layouts. 7. CONCLUSION Layout managers are a convenent way to arrange tems n a layout, ndependent from the actual layout sze. All layout managers need to defne a strategy to dstrbute addtonal or lackng space,.e. the dscrepancy between the preferred and the actual layout sze. Lookng at prncples such as the Gestalt laws, t s clear that the dstrbuton strategy s lkely to affect the aesthetcs of a layout. However, our revew of exstng layout managers shows that there s no agreement on how ths s best done. Usng constrants s the most powerful approach for layout management, and all other approaches can be reduced to t. To deal wth conflctng constrants such as preferred szes, constrant solvers have to optmze an objectve functon. We have dentfed two ssues that affect constrant-based layout managers: a lnear objectve functon can lead to nondetermnstc layouts, and sprng effects can lead to layout dstortons. For the latter one, we have dentfed a soluton that makes sure preferred sze constrants are specfed for rows and columns rather than for ndvdual tems. In an emprcal evaluaton, we have nvestgated the effects of three layout solvng strateges equal dstrbuton, weghted dstrbuton and mnmal devaton on aesthetcs. The evaluaton shows that whle a weghted dstrbuton tends to be preferred at small layout szes, an equal dstrbuton s preferred at large layout szes. As a good tradeoff, the mnmal devaton approach yelds aesthetcally pleasng results at small and large layout szes. Another fndng s that users prefer GUI layouts n whch the tems are algned over layouts wth less algnment a fndng that s consstent wth the Gestalt prncples. [7] J. Fogarty and S. E. Hudson. Gadget: a toolkt for optmzaton-based approaches to nterface and dsplay generaton. In UIST, pages ACM, [8] S. Hem. The resonant nterface: HCI foundatons for nteracton desgn. Pearson/Addson Wesley, [9] D. E. Knuth. The Computers & Typesettng, Vol. A: The Texbook. Addson-Wesley, [10] W. Köhler. Gestalt psychology : an ntrod. to new concepts n modern psychology. Lverght, [11] C. Lutteroth, R. Strandh, and G. Weber. Doman specfc Hgh-Level constrants for user nterface layout. Constrants, 13(3), [12] C. Lutteroth and G. Weber. Modular specfcaton of gu layout usng constrants. In Proceedngs of the 19th Australan Conference on Software Engneerng, pages IEEE Computer Socety, [13] M. MacDonald. User nterfaces n VB. Net: wndows forms and custom control. Apress Seres. Apress, [14] M. F. Plass. Optmal pagnaton technques for automatc typesettng systems. In Internatonal Symposum on Physcal Desgn, [15] D. S. Weld, C. R. Anderson, P. Domngos, O. Etzon, K. Gajos, T. A. Lau, and S. A. Wolfman. Automatcally personalzng user nterfaces. In G. Gottlob and T. Walsh, edtors, IJCAI, pages Morgan Kaufmann, [16] J. Zukowsk. Java AWT reference. O Relly & Assocates, Inc., References [1] G. J. Badros, A. Bornng, and P. J. Stuckey. The cassowary lnear arthmetc constrant solvng algorthm. ACM Trans. Comput.-Hum. Interact., 8(4): , Dec [2] M. Berkelaar, P. Notebaert, and K. Ekland. lp solve: (Mxed nteger) lnear programmng problem solver [3] J. Borchers, O. Deussen, A. Klngert, and C. Knörzer. Layout rules for graphcal web documents. Computers & Graphcs, 20(3): , [4] M. K. Coleman and D. S. Parker. Aesthetcs-based graph layout for human consumpton. Softw. Pract. Exper., 26(12): , Dec [5] G. B. Dantzg. Lnear Programmng and Extensons. Prnceton Unversty Press, Prnceton, NJ, [6] R. Fletcher. Practcal methods of optmzaton; (2nd ed.). Wley-Interscence,