Evaluating Interface Esthetics

Knowledge and Information Systems (2002) 4: 46–79Ownership and Copyrightc© Springer-Verlag London Ltd. 2002

Evaluating Interface Esthetics

David Chek Ling Ngo1, Lian Seng Teo1 and John G. Byrne2

1Faculty of Information Technology, Multimedia University, Cyberjaya, Malaysia2Department of Computer Science, Trinity College, Dublin, Ireland

Abstract. Gestalt psychologists promulgated the principles of visual organization in theearly twentieth century. These principles have been discussed and re-emphasized, and theirimportance and relevance to user interface design are understood. However, a limitednumber of systems represent and make adequate use of this knowledge in the formof a design tool that supports certain aspects of the user interface design process. Thegraphic design rules that these systems use are extremely rudimentary and often vastlyoversimplified. Most of them have no concept of design basics such as visual balanceor rhythm. In this paper, we attempt to synthesize the guidelines and empirical datarelated to the formatting of screen layouts into a well-defined model. Fourteen estheticcharacteristics have been selected for the purpose. The results of our exercise suggest thatthese characteristics are important to prospective viewers.

Keywords: Esthetic characteristics; Esthetic measures; Interface esthetics; Multi-screeninterfaces; Screen design

1. Introduction

The role of esthetics in human affairs has been widely documented (Hambidge,1919; Birkhoff, 1933; Eysenk, 1941; Hambidge, 1968; Maquet, 1986; Maniere,1992; Alexander, 1997; Iwamiya and Takaoka, 2000). Certainly, it is relatedto our appreciation of computer systems as well. However, some (Foley et al,1990; Marcus, 1992) warn against a tendency among designers to emphasize theesthetic elements of the user interface, because these might degrade usability.In fact, interface esthetics play a greater role in affecting system usability andacceptability than we might be willing to admit. Careful application of estheticconcepts can aid:

Received 5 May 1999Revised 17 July 2000Accepted 27 November 2000

Evaluating Interface Esthetics 47

• Acceptability. Two recent studies (Kurosu and Kashimura, 1995; Tractinsky,1997) show that very high correlations were found between users’ perceptionsof interface esthetics and usability.

• Learnability. Toh (1998) found that esthetically pleasing layouts have a definiteeffect on the student’s motivation to learn. Aspillage (1991) found that goodgraphic design and attractive displays help contribute to the transfer of infor-mation. A study by Grabinger (1991) indicated that organization and visualinterest are important criteria in judging the readability and studyability of thereal screens. Screens that are plain, simple, unbalanced, and bare are perceivedas undesirable.

Given the critical role that esthetics plays in human-computer interaction, it isimportant to understand what characteristics of visually pleasing objects influenceuser acceptance and performance. The purpose of this paper is to identify a set ofscreen characteristics that appear to be important determinants of acceptance andperformance, and to describe a formal model for measuring those characteristics.(This paper is extended from Ngo, 1994; Ngo and Byrne, 1998; Ngo et al, 2000.This study differed from earlier studies in that the formulae were further refinedto incorporate more relevant esthetic components that might help explain ourexperience with, and evaluation of, computer esthetics.)

2. Related Research

Gestalt psychologists promulgated the principles of visual organization in theearly twentieth century. These principles have been discussed and re-emphasized,and their importance and relevance to user interface design is understood. Asurvey (Mosier and Smith, 1995) was conducted of people who had received a re-port on guidelines for designing user interface software. Analysis of questionnaireresponses indicates that design guidelines are generally considered useful, but thatthere are significant problems in the practical application of guidelines. For effec-tive application, generally stated guidelines must be translated into system-specificdesign rules. However, a limited number of systems represent and make adequateuse of this knowledge in the form of a design tool that supports certain aspectsof user interface design process. These include two classes of tools: evaluationand critiquing tools, and design environments.

2.1. Evaluation and Critiquing Tools

Early examples of tools that analyze alphanumeric screens are Tullis’s (1988)Display Analysis Program and Streveler and Wasserman’s (1984) system. Tullisinvestigated predicting user performance for static alphanumeric displays. Heexplored the relationship between several metrics including overall density of thescreen, local density of the screen, grouping of objects, and layout complexity andthe time required for users to extract information from the display. He conductedseveral experiments and developed equations that could predict search times andpreference ratings. Streveler and Wasserman described a system for quantitativelyassessing screen formats that has many parallels with Tullis’s model. Streveler andWasserman describe three basic techniques for analyzing screen formats: ‘boxing’analysis, ‘hot-spot’ analysis, and ‘alignment’ analysis.

48 D. C. L. Ngo et al.

The movement toward GUIs with richer fonts and layout possibilities hasreduced interest in these metrics, but better analyses of layouts seem possible(Shneiderman, 1998). While it is conceivable to define a set of variables thatcharacterize the key attributes of many alphanumeric display formats, such atask seems difficult for graphic displays because of their much greater complexity.Our model extends the general research objective to include multi-screen inter-faces, which are mostly found in one-time GUIs and wizards, and multimediaapplications. (With some modification, some of the techniques presented can alsobe used for other graphic screen types.)

2.2. Design Tools

Well-known systems that incorporate design rules include Automated PictorialEXplanation (APEX) (Feiner, 1991), which designs and renders sequences ofpictures intended to show how to perform simple actions; A Presentation Tool(APT) (Mackinlay, 1986), which uses graphical languages to automatically designgraphical presentations of relational information; ACE (Meier, 1988), whichassigns a color to interface objects based on their functions and their relationsto each other; Designer (Weitzman, 1986; Hollan et al, 1987), which providesvisual expertise to analyze the design and synthesize design alternatives; and acomputer-based consultant called VIDEO (Johnson et al, 1986), which incorpor-ates principles of good visual design.

The graphic design rules that these systems use are extremely rudimentaryand often vastly oversimplified. Most of them have no concept of design basicssuch as visual balance or rhythm. While esthetic guidelines exist to help designerscreate attractive displays, the state of esthetic theory is relatively primitive. Thatis, although rules of some kind exist, they have not been formally codified.We have introduced mathematical formulas for the esthetic considerations thatmany present. The objective treatment of esthetic issues in this paper adds muchto the current body of work. In deriving the screen format characteristics, wereviewed and synthesized the literature related to visual design. The result was thederivation of 14 new measures that can be used to describe the spatial propertiesof any multi-screen interface: balance, equilibrium, symmetry, sequence, cohesion,unity, proportion, simplicity, density, regularity, economy, homogeneity, rhythm,and order and complexity. We implemented what we felt to be a reasonableset of objectively defined characteristics for describing screen formats that shouldresult in a measure that could accurately define important determinants of systemacceptability.

Many noteworthy texts discuss theories of design in both fine and commercialart. Good examples include Arnheim (1954), Dondis (1973), Norman (1990),Bertin (1983), and Tufte (1983, 1990, 1996). For our purposes, an extensive list ofvery specific guidelines for the design of graphic screens is needed to accuratelyrepresent the underlying characteristics of screen formats that the guidelinessuggested as important determinants of user acceptance or performance. Fromthe literature on screen design, a selection of studies (Reilly and Roach, 1984,1986; Berryman, 1990; Galitz, 1993, 1994; Mullet and Sano, 1995; Zelanski andFisher, 1995; Galitz, 1997) present extensive lists of specific esthetic guidelines forcreating attractive displays. This article relies heavily on their descriptive work tohelp demonstrate the codification of graphic design criteria into a formal modelthat can be used by a design tool.


3. Esthetic Measures

We have identified 14 important characteristics of esthetically pleasing objects:balance, equilibrium, symmetry, sequence, cohesion, unity, proportion, simplicity,density, regularity, economy, homogeneity, rhythm, and order and complexity.Keep in mind that this discussion does not focus on the words on the screen,but on the perception of structure created by such concepts as spacing andborders. We also confine ourselves to study only the dimension and position ofrectangular regions, because of space limitation. The findings from this study mayeasily generalize to other relevant design elements (such as color, shape). Observethat the range of the measures is between 0 (worst) and 1 (best).

3.1. Measure of Balance

Balance can be defined as the distribution of optical weight in a picture. Opticalweight refers to the perception that some objects appear heavier than others.Larger objects are heavier, whereas small objects are lighter. Balance in screendesign is achieved by providing an equal weight of screen elements, left and right,top and bottom.

Balance is computed as the difference between total weighting of componentson each side of the horizontal and vertical axis and is given by

BM = 1 − |BM vertical| + |BM horizontal|2

∈ [0, 1] (1)

BM vertical and BM horizontal are, respectively, the vertical and horizontal balanceswith

BM vertical =wL − wR

max (|wL|, |wR |) (2)

BM horizontal =wT − wB

max (|wT |, |wB |) (3)

with

wj =

nj∑i

aijdij j = L, R, T , B (4)

where L, R, T , and B stand for left, right, top, and bottom, respectively; wj isthe total weight of side j; aij is the area of object i on side j; dij is the distancebetween the central lines of the object and the frame; and nj is the total numberof objects on the side.

Figure 1 presents ‘good’ and ‘bad’ versions in balance study. Table 1 presentsthe element configurations of the screens. As Table 2 indicates, the balancemeasure shows that the good version is better. In Fig. 1(a) balance is achievedby providing an equal weight of screen elements, left and right, top and bottom.Figure 1(b) shows a layout in visual imbalance (it looks as if it will topple over).

BM vertical is the normalized difference between total weighting of objects oneach side of the vertical axis. Better values are associated with smaller differences.Positive values indicate that there is more weight on the right side of the frame,while negative values indicate that there is more weight on the left side. BM vertical

is 0 when there is an equal weight of objects. Figure 1(a) yields a better value(−0.026 for 1(a) and −0.653 for 1(b)). The negative values indicate that the right


(a) (b)

Fig. 1. Two versions of screens in balance study. (a) The good version. (b) The bad version.

Table 1. Summary of layout properties

Layout Object X Y Width Height

Fig. 1(a) 1 60 40 185 41(600 × 320) 2 60 100 185 121

3 60 240 185 414 360 180 185 415 360 40 185 1216 360 240 185 41

Fig. 1(b) 1 120 20 185 41(600 × 320) 2 380 20 185 121

3 120 200 185 414 120 80 185 415 380 150 185 1216 120 140 185 41

Table 2. Computation of balance value

Fig. 1(a) Fig. 1(b)

BM vertical −0.02632 −0.65328BM horizontal 0.11322 0.49479BM 0.93023 0.42597

sides of both screens are heavier than their left sides, but in different degrees.BM horizontal is the normalized difference between total weighting of objects oneach side of the horizontal axis. Positive values indicate that the top half ofthe frame is heavier than the bottom half, while for negative values the bottomhalf is heavier. A better value is computed for Fig. 1(a) (0.113) than for 1(b)(0.495). Substituting each pair of balance values into equation (1) yields theoverall measures for the two screens. Figure 1(a) (0.930) is measured higher than1(b) (0.426).

3.2. Measure of Equilibrium

Equilibrium is a stabilization, a midway center of suspension. Equilibrium ona screen is accomplished through centering the layout itself. The center of thelayout coincides with that of the frame. (There are minor deviations from thisdefinition, which we discuss in Conclusions and Future Work.)


(a) (b)

Fig. 2. Two versions of screens in equilibrium study. (a) The good version. (b) The bad version.

Equilibrium is computed as the difference between the center of mass of thedisplayed elements and the physical center of the screen and is given by

EM = 1 − |EM x| + |EM y|2

∈ [0, 1] (5)

The equilibrium components along the x-axis (EM x) and y-axis (EM y) are givenby

EM x =2∑n

i ai(xi − xc)

bframe

∑ni ai

(6)

EM y =2∑n

i ai(yi − yc)

hframe

∑ni ai

(7)

where (xi, yi) and (xc, yc) are the coordinates of the centers of object i and theframe; ai is the area of the object; bframe and hframe are the width and height ofthe frame; and n is the number of objects on the frame. Note that the maximumvalues of |xi − xc| and |yi − yc| are bframe/2 and hframe/2.

Figure 2 presents ‘good’ and ‘bad’ versions in equilibrium study. Table 3presents the element configurations of the screens. As Table 4 indicates, theequilibrium measure shows that the good version is better. In Fig. 2(a) equilibriumis achieved by centering the layout itself. The center of the layout shown inFig. 2(b) lies somewhat lower than the center of the frame.

EM x is the normalized x-coordinate of the center of mass of the objects.Better (smaller) values are related to how closely the center coincides with thatof the frame. Positive values indicate that the center is situated on the right sideof the frame, and negative values on the left side. EM x is 0 when the center liessomewhere along the y-axis. Figure 2(a) yields a better value (0.007 for 2(a) and−0.501 for 2(b)), since the x-coordinate of its center corresponds approximatelyto that of the center of the frame. The small positive value shows that its center isslightly to the right of the center of the frame. Similarly, EM y is the normalizedy-coordinate of the center of mass of the objects. Positive values indicate thatthe center lies on the bottom half of the frame, and negative values on the tophalf. EM y is 0 when the center lies somewhere along the x-axis. There is anotheradvantage for Fig. 2(a), with a better value (0.030 for 2(a) and 0.274 for 2(b)).The positive values show that the centers for both screens lie somewhat lowerthan the center of the frame. Substituting each pair of equilibrium values into




Fig. 2(a) 1 60 40 185 41(600 × 320) 2 60 120 185 81

3 60 240 185 414 360 40 185 415 360 200 185 816 360 120 185 41

Fig. 2(b) 1 10 56 185 41(600 × 320) 2 10 100 185 41

3 10 143 185 814 10 230 185 815 200 220 185 416 200 270 185 41

Table 4. Computation of equilibrium value

Fig. 2(a) Fig. 2(b)

EM x 0.00667 −0.50070EM y 0.02991 0.27414EM 0.98171 0.61258

equation (5) yields the overall measures for the two screens. Figure 2(a) yields ahigher value (0.982 for 2(a) and 0.612 for 2(b)).

3.3. Measure of Symmetry

Symmetry is axial duplication: a unit on one side of the center line is exactlyreplicated on the other side. Vertical symmetry refers to the balanced arrangementof equivalent elements about a vertical axis, and horizontal symmetry about ahorizontal axis. Radial symmetry consists of equivalent elements balanced abouttwo or more axes that intersect at a central point.

Symmetry, by definition, is the extent to which the screen is symmetrical inthree directions: vertical, horizontal, and diagonal, and is given by

SYM = 1 − |SYM vertical| + |SYM horizontal| + |SYM radial|3

∈ [0, 1] (8)

SYM vertical, SYM horizontal, and SYM radial are, respectively, the vertical, horizontal,and radial symmetries with

SYM vertical =

|X ′UL − X ′

UR |+|X ′LL − X ′

LR |+|Y ′UL − Y ′

UR | + |Y ′LL − Y ′

LR |+|H ′

UL − H ′UR |+|H ′

LL − H ′LR |+|B′

UL − B′UR |+|B′

LL − B′LR |+

|Θ′UL − Θ′

UR |+|Θ′LL − Θ′

LR |+|R′UL − R′

UR |+|R′LL − R′

LR |12

(9)


SYM horizontal =

|X ′UL − X ′

LL|+|X ′UR − X ′

LR |+|Y ′UL − Y ′

LL| + |Y ′UR − Y ′

LR |+|H ′

UL − H ′LL|+|H ′

UR − H ′LR |+|B′

UL − B′LL|+|B′

UR − B′LR |+

|Θ′UL − Θ′

LL|+|Θ′UR − Θ′

LR | + |R′UL − R′

LL|+ |R′UR − R′

LR |12

(10)

SYM radial =

|X ′UL − X ′

LR | + |X ′UR − X ′

LL| + |Y ′UL − Y ′

LR | + |Y ′UR − Y ′

LL|+|H ′

UL − H ′LR | + |H ′

UR − H ′LL| + |B′

UL − B′LR | + |B′

UR − B′LL|+

|Θ′UL − Θ′

LR | + |Θ′UR − Θ′

LL| + |R′UL − R′

LR | + |R′UR − R′

LL|12

(11)

X ′j , Y

′j , H

′j , B

′j , Θ′

j , and R′j are, respectively, the normalized values of

Xj =

nj∑i

∣∣xij − xc∣∣ j = UL,UR, LL, LR (12)

Yj =

nj∑i

∣∣yij − yc∣∣ j = UL,UR, LL, LR (13)

Hj =

nj∑i

hij j = UL,UR, LL, LR (14)

Bj =

nj∑i

bij j = UL,UR, LL, LR (15)

Θj =

nj∑i

∣∣∣∣ yij − yc

xij − xc

∣∣∣∣ j = UL,UR, LL, LR (16)

Rj =

nj∑i

√(xij − xc

)2+

(yij − yc

)2j = UL,UR, LL, LR (17)

where UL, UR, LL, and LR stand for upper-left, upper-right, lower-left, andlower-right, respectively; Xj is the total x-distance of quadrant j, Yj is the totaly-distance, Hj is the total height, Bj is the total width, Θj is the total angle, andRj is the total distance; (xij , yij) and (xc, yc) are the coordinates of the centers ofobject i on quadrant j and the frame; bij and hij are the width and height of theobject; and nj is the total number of objects on the quadrant.

Figure 3 presents ‘good’ and ‘bad’ versions in symmetry study. Table 5 presentsthe element configurations of the screens. As Table 6 indicates, the symmetrymeasure shows that the good version is better. In Fig. 3(a) symmetry is achievedby replicating elements left and right of the screen center line. Figure 3(b) presentsan asymmetrical design.

SYM vertical is the extent to which the screen is symmetrical in the verticaldirection. It is the overall difference between six attributes of objects (x-distance,y-distance, height, width, angle, and distance) on each side of the vertical axis.


(a) (b)

Fig. 3. Two versions of screens in symmetry study. (a) The good version. (b) The bad version.



Fig. 3(a) 1 180 140 81 21(600 × 320) 2 340 40 145 61

3 120 40 141 614 340 140 85 215 340 200 185 1016 80 200 185 101

Fig. 3(b) 1 10 10 81 21(600 × 320) 2 200 110 145 61

3 10 130 141 614 200 290 85 215 200 180 185 1016 10 200 185 101

Table 6. Computation of symmetry value

Fig. 3(a) Fig. 3(b)

SYM vertical 0.01229 0.79328SYM horizontal 0.22264 0.60672SYM radial 0.22264 0.79328SYM 0.84747 0.26891

Better values are associated with smaller differences. A better value is computedfor Fig. 3(a) (0.012) than for 3(b) (0.793). SYM horizontal is a measure of symmetry inthe horizontal direction. The values show that Fig. 3(a) (0.223) is measured morepositive than 3(b) (0.607). SYM radial is a measure of symmetry in the diagonaldirections. Figure 3(a) shows a higher degree of radial symmetry. The SYM radial

value for Fig. 3(a) (0.223) is 0.570 less than that for 3(b) (0.793). Substituting eachset of symmetry values into equation (8) yields the overall symmetry measuresfor the two layouts. Figure 3(a) yields a significantly higher value (0.847 for 3(a)and 0.269 for 3(b)).

3.4. Measure of Sequence

Sequence in design refers to the arrangement of objects in a layout in a way thatfacilitates the movement of the eye through the information displayed. Normallythe eye, trained by reading, starts from the upper left and moves back and forth


(a) (b)

Fig. 4. Two versions of screens in sequence study. (a) The good version. (b) The bad version.

across the display to the lower right. Perceptual psychologists have found thatcertain things attract the eye. It moves from big objects to small objects.

Sequence, by definition, is a measure of how information in a display isordered in relation to a reading pattern that is common in Western cultures andis given by

SQM = 1 −∑

j=UL,UR,LL,LR

|qj − vj |8

∈ [0, 1] (18)

with

{qUL, qUR, qLL, qLR} = {4, 3, 2, 1} (19)

vj =

4 if wj is the largest in w

3 if wj is the 2nd largest in w

2 if wj is the 3rd largest in w

1 if wj is the smallest in w

j = UL, UR, LL, LR (20)

with

wj = qj

nj∑i

aij j = UL, UR, LL, LR (21)

w = {wUL, wUR, wLL, wLR} (22)

where UL, UR, LL, and LR stand for upper-left, upper-right, lower-left, andlower-right, respectively; wj is the total weight of quadrant j; and aij is the areaof object i on quadrant j. Each quadrant is given a weighting in q.

Figure 4 presents ‘good’ and ‘bad’ versions in the sequence study. Table 7presents the element configurations of the screens. As Table 8 indicates, thesequence measure shows that the good version is better. In Fig. 4(a) sequence isachieved by arranging elements to guide the eye through the screen in a left-to-right, top-to-bottom pattern. The eye starts from the upper left and moves backand forth across the display to the lower right. The opposite is true for Fig. 4(b),where an arrangement and flow cannot be detected.

Each quadrant has a reading value based on a left-to-right, top-to-bottompattern; the upper-left quadrant has a value of 4, the upper-right quadrant avalue of 3, the lower-left quadrant a value of 2, and the lower-left quadrant avalue of 1. SQM is the overall difference between these values and the rankingsof total weighting of objects that appeared in different quadrants of the screen,




Fig. 4(a) 1 40 20 261 141(600 × 320) 2 380 20 181 141

3 80 220 181 814 420 219 101 81

Fig. 4(b) 1 320 170 261 141(600 × 320) 2 40 170 181 141

3 360 20 181 814 80 20 101 81

Table 8. Computation of sequence value

Fig. 4(a) Fig. 4(b)

SQM 1.00000 0.25000

where the heaviest quadrant is assigned a 4, the second heaviest a 3, and so on.SQM is 1 when the objects are distributed hierarchically among the differentquadrants in the shape of z. A higher value is computed for Fig. 4(a) (1.000) thanfor 4(b) (0.250). Note that Fig. 4(a) yields the highest possible value.

3.5. Measure of Cohesion

In screen design, similar aspect ratios promote cohesion. The term aspect ratiorefers to the relationship of width to height. Typical paper sizes are higher thanthey are wide, while the opposite is true for typical VDU displays. Changingthe aspect ratio of a visual field may affect eye movement patterns sufficientlyto account for some of the performance differences. The aspect ratio of a visualfield should stay the same during the scanning of a display.

Cohesion, by definition, is a measure of how cohesive the screen is and isgiven by

CM =|CM fl | + |CM lo|

2∈ [0, 1] (23)

CM fl is a relative measure of the ratios of the layout and screen with

CM fl =

cfl if cfl 6 1

1

cflOtherwise

(24)

with

cfl =hlayout/blayout

hframe/bframe(25)

where blayout and hlayout and bframe and hframe are the widths and heights of thelayout and the frame, respectively.

CM lo is a relative measure of the ratios of the objects and layout with

CM lo =

∑ni ti

n(26)


(a) (b)

Fig. 5. Two versions of screens in cohesion study. (a) The good version. (b) The bad version.



Fig. 5(a) 1 60 180 181 101(600 × 320) 2 340 40 181 101

3 340 180 181 1014 60 40 181 101

Fig. 5(b) 1 190 20 50 130(600 × 320) 2 190 160 50 130

3 360 20 50 1304 360 160 50 130

Table 10. Computation of cohesion value

Fig. 5(a) Fig. 5(b)

CM lo 0.93686 0.47203CM fl 0.98021 0.43457CM 0.95853 0.45330

with

ti =

ci if ci 6 1

1

ciOtherwise

(27)

with

ci =hi/bi

hlayout/blayout(28)

where bi and hi are width and height of object i; and n is the number of objectson the frame.

Figure 5 presents ‘good’ and ‘bad’ versions in the cohesion study. Table 9presents the element configurations of the screens. As Table 10 indicates, thecohesion measure shows that the good version is better. In Fig. 5(a) cohesion isachieved by maintaining the aspect ratio of a visual field. Use of the screen inFig. 5(b) may be affected by inconsistent aspect ratio of screen elements.

CM fl gives the degree of similarity between the aspect ratios of the layout andthe frame. Better values are associated with higher similarities. A better value iscalculated for Fig. 5(a) (0.937) than for 5(b) (0.472). CM lo is the overall measureof the differences between the aspect ratios of the objects and the frame. The


(a) (b)

Fig. 6. Two versions of screens in unity study. (a) The good version. (b) The bad version.

CM lo values reflect a similar superiority of Fig. 5(a) (0.980 for 5(a) and 0.434for 5(b)). Substituting each pair of cohesion values into equation (23) yields theoverall measures for the two layouts. Figure 5(a) (0.958) is measured higher than5(b) (0.453).

3.6. Measure of Unity

Unity is coherence, a totality of elements that is visually all one piece. With unity,the elements seem to belong together, to dovetail so completely that they are seenas one thing. Unity in screen design is achieved by using similar sizes and leavingless space between elements of a screen than the space left at the margins.

Unity, by definition, is the extent to which the screen elements seem to belongtogether and is given by

UM =|UM form| + |UM space|

2∈ [0, 1] (29)

UM form is the extent to which the objects are related in size with

UM form = 1 − nsize − 1

n(30)

and UM space is a relative measure of the space between groups and that of themargins with

UM space = 1 − alayout − ∑ni ai

aframe − ∑ni ai

(31)

where ai, alayout, and aframe are the areas of object i, the layout, and the frame,respectively; nsize is the number of sizes used; and n is the number of objects onthe frame.

Figure 6 presents ‘good’ and ‘bad’ versions in unity study. Table 11 presents theelement configurations of the screens. As Table 12 indicates, the unity measureshows that the good version is better. In Fig. 6(a) unity is achieved by usingsimilar sizes and leaving less space between elements of a screen than the spaceleft at the margins. The elements are related in size and they are grouped togetherand surrounded by white space. The items in Fig. 6(b) look as if they are readyto move out from the screen.

Better (higher) UM form values are associated with fewer object sizes used.UM form is 1 if the layout uses only one size. The UM form value for Fig. 6(a)




Fig. 6(a) 1 110 70 181 81(600 × 320) 2 110 170 181 81

3 310 70 181 814 310 170 181 81

Fig. 6(b) 1 10 10 140 80(600 × 320) 2 10 230 180 80

3 410 10 180 804 490 230 100 80

Table 12. Computation of unity value

Fig. 5(a) Fig. 5(b)

UM form 1.00000 0.50000UM space 0.92264 0.12500UM 0.96132 0.31250

shows that it is clearly the best format, since it yields the highest value (1.000).Figure 6(b) yields a poorer value (0.500). Better (higher) UM space values areclosely related to how tightly the screen is packed. UM space is 1 when there isno space between objects, and 0 when there is no space left at the margins. TheUM space values reflect a similar superiority of Fig. 6(a) (0.923 for 6(a) and 0.125for 6(b)). Substituting each pair of unity values into equation (29) yields theoverall measures for the two layouts. The esthetic value for Fig. 6(a) (0.961) is0.649 more than that for 6(b) (0.312).

3.7. Measure of Proportion

Down through the ages, people and cultures have had preferred proportionalrelationships. What constitutes beauty in one culture is not necessarily consideredthe same by another culture, but some proportional shapes have stood the test oftime and are found in abundance today. Marcus (1992) describes the followingshapes as esthetically pleasing:

• square (1 : 1);

• square root of two (1 : 1.414);

• golden rectangle (1 : 1.618);

• square root of three (1 : 1.732);

• double square (1 : 2).

In screen design, esthetically pleasing proportions should be considered for majorcomponents of the screen, including windows and groups of data and text.

Proportion, by definition, is the comparative relationship between the dimen-sions of the screen components and proportional shapes and is given by

PM =|PM object| + |PM layout|

2∈ [0, 1] (32)


PM object is the difference between the proportions of the objects and the closestproportional shapes described by Marcus by

PM object =1

n

n∑i

(1 − min (|pj − pi|, j = sq, r2, gr, r3, ds)

0.5

)(33)

pi =

ri if ri 6 1

1

riOtherwise

(34)

with

ri =hi

bi(35)

where bi and hi are the width and height of object i. Note that the maximumvalue of (pj − pi) is 0.5.

PM layout is the difference between the proportions of the layout and the closestproportional shape with

PM layout = 1 − min (|pj − playout|, j = sq, r2, gr, r3, ds)

0.5(36)

with

playout =

rlayout if r 6 1

1

rlayoutOtherwise

(37)

with

rlayout =hlayout

blayout(38)

where blayout and hlayout are the width and height of the layout. Note that themaximum value of (pj − playout) is 0.5.

pj is the proportion of shape j with

{psq, pr2, pgr, pr3, pds} =

{1

1,

1

1.414,

1

1.618,

1

1.732,1

2

}(39)

where sq, r2, gr, r3, and ds stand for square, square root of two, golden rectangle,square root of three, and double square, respectively.

Figure 7 presents ‘good’ and ‘bad’ versions in proportion study. Table 13presents the element configurations of the screens. As Table 14 indicates, theproportion measure shows that the good version is better. In Fig. 7(a) proportionis achieved by creating objects with esthetically pleasing proportions. The itemsare close approximations to the proportional rectangles described by Marcus.These proportions cannot be recognized in the items in Fig. 7(b).

Better (higher) PM object values are related to how proportionate the objectsare. An important point about Fig. 7(a) is that it yields the highest possible value(0.895) for the number of objects (4), since all the components are equivalent toan esthetic rectangle, namely double square. Using an unknown shape, Fig. 7(b)yields a significantly lower value (0.371). Better (higher) PM layout values are relatedto how well the layout is proportionate. Again, a better value is computed forFig. 7(a) (0.966) than for 7(b) (0.464). Substituting each pair of proportion values


(a) (b)

Fig. 7. Two versions of screens in proportion study. (a) The good version. (b) The bad version.



Fig. 7(a) 1 100 40 181 81(600 × 320) 2 100 200 181 81

3 320 40 181 814 320 200 181 81

Fig. 7(b) 1 40 100 221 41(600 × 320) 2 40 180 221 41

3 340 100 221 414 340 180 221 41

Table 14. Computation of proportion value

Fig. 7(a) Fig. 7(b)

PM object 0.89503 0.37104PM layout 0.96590 0.46449PM 0.93046 0.41777

into equation (32) yields the overall measures for the two layouts. Figure 7(a)yields a higher esthetic value (0.930 for 7(a) and 0.418 for 7(b)).

3.8. Measure of Simplicity

Simplicity is directness and singleness of form, a combination of elements thatresults in ease in comprehending the meaning of a pattern. Simplicity in screendesign is achieved by optimizing the number of elements on a screen and minimiz-ing the alignment points. Tullis (1984) has derived a measure of screen complexityfor text-based screens based on the work of Bonsiepe (1968), who proposed amethod of measuring the complexity of typographically designed pages throughthe application of information theory. It involves counting the number of differentrows or columns on the screen that are used as starting positions of alphanumericdata items. Information theory is then used to calculate the complexity of thisarrangement of starting positions.

An easier method of calculation is

SMM =3

nvap + nhap + n∈ [0, 1] (40)


(a) (b)

Fig. 8. Two versions of screens in simplicity study. (a) The good version. (b) The bad version.



Fig. 8(a) 1 220 70 160 160(600 × 320)

Fig. 8(b) 1 100 70 160 50(600 × 320) 2 320 200 160 50

3 210 130 160 60

Table 16. Computation of simplicity value

Fig. 8(a) Fig. 8(b)

SMM 1.00000 0.33333

where nvap and nhap are the numbers of vertical and horizontal alignment points;and n is the number of objects on the frame.

Figure 8 presents ‘good’ and ‘bad’ versions in simplicity study. Table 15presents the element configurations of the screens. As Table 16 indicates, thesimplicity measure shows that the good version is better. In Fig. 8(a) simplicity isachieved by minimizing the number of elements on a screen and the alignmentpoints. Figure 8(b) has a lower simplicity measure since it has more items andalignment points.

SMM is inversely proportional to the sum of the numbers of alignment pointsand screen objects: as the summation decreases, SMM tends to increase. Highervalues are associated with smaller number of objects used and related to howwell the objects are aligned. SMM is 1 if there is only one object used. Figure 8(a)is clearly the best case, since it yields the highest value (1.000). The value for Fig.8(b) is 0.667 less than that for 8(a).

3.9. Measure of Density

Density is the extent to which the screen is covered with objects. Density isachieved by restricting screen density levels to an optimal percentage. A measureof density, derived by Tullis, is the percentage of character positions on the entireframe containing data.


(a) (b)

Fig. 9. Two versions of screens in density study. (a) The good version. (b) The bad version.



Fig. 9(a) 1 90 20 190 120(600 × 320) 2 90 165 190 120

3 335 20 190 1204 335 165 190 120

Fig. 9(b) 1 10 10 190 90(600 × 320) 2 10 220 190 90

3 10 115 190 904 205 10 190 905 205 219 190 906 205 115 190 907 400 10 190 908 400 219 190 909 400 115 190 90

Table 18. Computation of density value

Fig. 9(a) Fig. 9(b)

DM 0.95000 0.39688

Instead of looking at characters, our measure deals with objects with

DM = 1 − 2

∣∣∣∣0.5 −∑n

i ai

aframe

∣∣∣∣ ∈ [0, 1] (41)

where ai and aframe are the areas of object i and the frame; and n is the number ofobjects on the frame. Assume that the optimum screen density level for graphicscreens is 50%.

Figure 9 presents ‘good’ and ‘bad’ versions in density study. Table 17 presentsthe element configurations of the screens. As Table 18 indicates, the densitymeasure shows that the good version is better. In Fig. 9(a) density is achieved byrestricting screen density levels to an optimal percentage. Figure 9(b) presents acluttered, cramped layout.

DM is the extent to which the percentage of object areas on the entire frameis 50. Higher values are related to how closely the level is 50. DM is 1 when thedensity level is 50. Figure 9(a) yields a significantly higher value (0.950 for 9(a)and 0.397 for 9(b)).


(a) (b)

Fig. 10. Two versions of screens in regularity study. (a) The good version. (b) The bad version.

3.10. Measure of Regularity

Regularity is a uniformity of elements based on some principle or plan. Regularityin screen design is achieved by establishing standard and consistently spacedhorizontal and vertical alignment points for screen elements, and minimizing thealignment points.

Regularity, by definition, is a measure of how regular the screen is and isgiven by

RM =|RM alignment| + |RM spacing|

2∈ [0, 1] (42)

RM alignment is the extent to which the alignment points are minimized with

RM alignment =

1 if n = 1

1 − nvap + nhap

2nOtherwise

(43)

and RM spacing is the extent to which the alignment points are consistently spacedwith

RM spacing =

1 if n = 1

1 − nspacing − 1

2(n − 1)Otherwise

(44)

where nvap and nhap are the numbers of vertical and horizontal alignment points;nspacing is the number of distinct distances between column and row startingpoints; and n is the number of objects on the frame.

Figure 10 presents ‘good’ and ‘bad’ versions in regularity study. Table 19presents the element configurations of the screens. As Table 20 indicates, theregularity measure shows that the good version is better. In Fig. 10(a) regularityis achieved by establishing standard and consistently spaced horizontal andvertical alignment points. The items in Fig. 10(b) are unequally spaced.

Better (higher) RM alignment values are closely related to how well the objectsare aligned. RM alignment is 1 if the object number is 1. For the same numberof objects, a higher value is computed for Fig. 10(a) (0.667) than for 10(b)(0.278). The higher value is due to the smaller number of alignment points. Better(higher) RM spacing values are related to how equally the objects are spaced. Givena constant number of objects, as the distance number increases, RM spacing tendsto decrease. RM spacing is 1 if the number of distinct distances between alignment




Fig. 10(a) 1 100 20 121 81(600 × 320) 2 100 120 121 81

3 100 220 121 814 240 20 121 815 240 120 121 816 240 220 121 817 380 20 121 818 380 120 121 819 380 220 121 81

Fig. 10(b) 1 60 20 121 81(600 × 320) 2 85 120 121 81

3 60 220 121 814 243 20 121 815 262 118 121 816 240 219 121 817 440 20 121 818 420 120 121 819 430 219 121 81

Table 20. Computation of regularity value

Fig. 10(a) Fig. 10(b)

RM alignment 0.66667 0.27778RM spacing 0.93750 0.43750RM 0.80208 0.35764

points is 1. For the same number of objects, Fig. 10(a) yields a higher value (0.937for 10(a) and 0.437 for 10(b)), since the distance number is smaller. Substitutingeach pair of regularity values into equation (42) yields the overall regularitymeasures for the two layouts. Figure 10(a) (0.802) is measured higher than 10(b)(0.358).

3.11. Measure of Economy

Economy is the careful and discreet use of display elements to get the messageacross as simply as possible. Economy is achieved by using as few sizes as possible.

Economy, by definition, is a measure of how economical the screen is and isgiven by

ECM =1

nsize∈ [0, 1] (45)

where nsize is the number of sizes.Figure 11 presents ‘good’ and ‘bad’ versions in economy study. Table 21

presents the element configurations of the screens. As Table 22 indicates, theeconomy measure shows that the good version is better. In Fig. 11(a) economyis achieved by using as few sizes as possible. Figure 11(b) has a lower economymeasure since it uses more sizes.

ECM is inversely proportional to the number of different object sizes: asthe number increases, ECM tends to decrease. Higher values are associated withfewer sizes used. ECM is 1 if the number is 1. Figure 11(a) uses one size with a


(a) (b)

Fig. 11. Two versions of screens in economy study. (a) The good version. (b) The bad version.



Fig. 11(a) 1 120 40 121 81(600 × 320) 2 120 200 121 81

3 360 40 121 814 360 200 121 81

Fig. 11(b) 1 120 40 121 81(600 × 320) 2 120 200 101 81

3 360 40 81 814 360 200 61 81

Table 22. Computation of economy value

Fig. 11(a) Fig. 11(b)

ECM 1.00000 0.25000

value of 1.000, while 11(b) uses four different sizes measuring 0.250. The SMMvalue is substantially better for Fig. 11(a) than for 11(b).

3.12. Measure of Homogeneity

Entropy was developed in physics in the nineteenth century and was applied laterin astronomy, chemistry and biology. Entropy influenced almost every science. Weinterpret the statistical entropy concept for screen design. The entropy equationis given by

S = k logW (46)

where S is the entropy of the screen; k is a constant, known as Boltzmann’sconstant; and W is a measure of the degree of homogeneity.

Since increases or decreases of W are equivalent respectively to increases ordecreases of S , we can conveniently work with W below rather than with S . Therelative degree of homogeneity of a composition is determined by how evenlythe objects are distributed among the four quadrants of the screen. The degreeof evenness is a matter of the quadrants that contain more or less nearly equalnumbers of objects.


(a) (b)

Fig. 12. Two versions of screens in homogeneity study. (a) The good version. (b) The bad version.



Fig. 12(a) 1 120 60 161 81(600 × 320) 2 120 180 161 81

3 320 60 161 814 320 180 161 81

Fig. 12(b) 1 120 20 161 81(600 × 320) 2 120 120 161 81

3 320 220 161 814 120 220 161 81

Table 24. Computation of homogeneity value

Fig. 12(a) Fig. 12(b)

W 24.00000 560.00000Wmax 24.00000 2520.00000HM 1.00000 0.22222

Homogeneity, by definition, is a measure of how evenly the objects aredistributed among the quadrants and is given by

HM =W

Wmax∈ [0, 1] (47)

W is the number of different ways a group of n objects can be arranged for thefour quadrants when nj is the total number of objects in quadrant j, that is

W =n!∏

j=UL,UR,LL,LR

nj=

n!

nUL!nUR!nLL!nLR!(48)

where nUL, nUR , nLL, and nLR are the numbers of objects on the upper left, upperright, lower left, and lower-right quadrants, respectively; and n is the number ofobjects on the frame.

W is maximum when the n objects are evenly allocated to the various quad-rants of the screen, as compared to more or less uneven allocations among thequadrants, and thus

Wmax =n!

n4! n

4! n

4! n

4!

=n!(n4!)4

(49)

Figure 12 presents ‘good’ and ‘bad’ versions in homogeneity study. Table 23presents the element configurations of the screens. As Table 24 indicates, the


homogeneity measure shows that the good version is better. In Fig. 12(a) homo-geneity is achieved by distributing the objects evenly among the four quadrantsof the screen. The items in Fig. 12(b) are not evenly distributed.

Higher values are closely related to how evenly the objects are distributed. HMis 1 when the objects are evenly distributed among the quadrants. Figure 12(a)(1.000) is measured higher than 12(b) (0.222). Note that Fig. 12(a) yields thehighest possible value.

3.13. Measure of Rhythm

Rhythm in design refers to regular patterns of changes in the elements. This orderwith variation helps to make the appearance exciting. Rhythm is accomplishedthrough variation of arrangement, dimension, number and form of the elements.The extent to which rhythm is introduced into a group of elements depends onthe complexity (number and dissimilarity of the elements).

Rhythm, by definition, is the extent to which the objects are systematicallyordered and is given by

RHM = 1 − |RHM x| + |RHM y| + |RHM area|3

∈ [0, 1] (50)

The rhythm components are

RHM x =

|X ′UL − X ′

UR | + |X ′UL − X ′

LR |+|X ′

UL − X ′LL| + |X ′

UR − X ′LR |+

|X ′UR − X ′

LL| + |X ′LR − X ′

LL|6

(51)

RHM y =

|Y ′UL − Y ′

UR | + |Y ′UL − Y ′

LR |+|Y ′

UL − Y ′LL| + |Y ′

UR − Y ′LR |+

|Y ′UR − Y ′

LL| + |Y ′LR − Y ′

LL|6

(52)

RHM area =

|A′UL − A′

UR | + |A′UL − A′

LR |+|A′

UL − A′LL| + |A′

UR − A′LR |+

|A′UR − A′

LL| + |A′LR − A′

LL|6

(53)

X ′j , Y

′j , and A′

j are, respectively, the normalized values of

Xj =

nj∑i

|xij − xc| j = UL,UR, LL, LR (54)

Yj =

nj∑i

|yij − yc| j = UL,UR, LL, LR (55)

Aj =

nj∑i

aij j = UL,UR, LL, LR (56)


(a) (b)

Fig. 13. Two versions of screens in rhythm study. (a) The good version. (b) The bad version.



Fig. 14(a) 1 60 20 141 41(600 × 320) 2 140 100 141 41

3 140 180 141 414 60 260 141 415 320 20 141 416 400 100 141 417 400 180 141 418 320 259 141 41

Figure 14(b) 1 14 13 162 60(600 × 320) 2 195 18 60 21

3 15 136 181 314 233 183 181 1215 202 56 141 516 45 84 141 417 422 183 169 608 520 250 71 61

Table 26. Computation of rhythm value

Fig. 13(a) Fig. 13(b)

RHM x 0.00000 0.61725RHM y 0.00312 0.60857RHM area 0.00000 0.63547RHM 0.99896 0.37957

where UL, UR, LL, and LR stand for upper left, upper right, lower left, andlower right, respectively; Xj is the total x-distance of quadrant j, Yj is the totaly-distance, and Aj is the total area; (xij , yij) and (xc, yc) are the coordinates ofthe centers of object i on quadrant j and the frame; aij is the area of the object;and nj is the total number of objects on the quadrant.

Figure 13 presents ‘good’ and ‘bad’ versions in rhythm study. Table 25 presentsthe element configurations of the screens. As Table 26 indicates, the rhythmmeasure shows that the good version is better. In Fig. 13(a) rhythm is achievedby variation of arrangement, dimension, number and form of the elements. Theelements in Fig. 13(b) constitute a chaotic, confusing, disorganized appearance.

RHM x is the extent to which rhythm is introduced through variation ofarrangement of the objects in the horizontal direction. It is the overall differencebetween the x-distances of objects that appeared in different quadrants of the


screen. Better (smaller) values are associated with smaller differences. The RHM x

value for Fig. 1(a) shows that it is the best format, since it yields a 0 (best).Similarly, RHM y is a measure of rhythm through variation of arrangement ofthe objects in the vertical direction. The RHM y values reflect a similar superiorityof Fig. 13(a) (0.003 for 13(a) and 0.608 for 13(b)). The value for Fig. 13(a) is 0.605less than that for 13(b). RHM area is a measure of rhythm through variation ofdimension of the objects. It is the overall difference between the areas of objectsthat appeared in different quadrants. There is another advantage for Fig. 13(a).It yields a 0 (best), while a value of 0.635 is computed for 13(b). Substitutingeach set of rhythm values into equation (50) yields the overall measures for thetwo layouts. Figure 13(a) (0.999) is measured higher than 13(b) (0.379).

3.14. Measure of Order and Complexity

The measure of order is written as an aggregate of the above measures for alayout. The opposite pole on the continuum is complexity. The scale created mayalso be considered a scale of complexity, with extreme complexity at one end andminimal complexity (order) at the other.

The general form of the measure is given by

OM = g{fi(Mi)} ∈ [0, 1] (57)with{M1, M2, M3, M4, M5, M6, M7, M8, M9, M10, M11, M12, M13}

= {BM ,EM , SYM , SQM ,CM ,UM ,PM , SMM ,DM ,RM ,ECM ,HM ,RHM }(58)

where fi( ) is a function of Mi and is functionally related to the measurablecriteria which characterize g{ }; and BM is given by (1), EM by (5), SYM by(8), SQM by (18), CM by (23), UM by (29), PM by (32), SMM by (40), DM by(41), RM by (42), ECM by (45), HM by (47), and RHM by (50).

Specifically, the function fi( ) describes the local characteristics of each pro-posed measure. Different measures may have different characteristic functions torelate to the non-linearity of their parameters. fi( ) is also determined by theidentified criteria (e.g., sizes, shapes) in the measurement equation. In large, fi( )aims to describe how each criterion in the proposed measures contributes tothe overall measure, namely OM . The function g{ } defines the way in whicheach measure contributes to the OM computation; essentially, g{ } should bean integrating function in a n-dimension space, where n depends upon the prob-lem domain and is 13 in this paper. It also describes how OM behaves withrespect to accumulative or combination effects of all f( ), such as saturation andimmunization.

One easy way of interpreting equation (57) would be to convert the computedvalues to z-scores, and then simply add them together. Birkhoff (1933) proposeda specific method for describing polygons based on such a linear approach.It involves calculating the sum of four esthetic measures: vertical symmetry,equilibrium, rotational symmetry, and polygon relation. Likewise, equation (57)can be written as the linear summation of the weighted measures with

g{ } =1

m

m∑i

αifi(Mi) =1

13

13∑i

αiMi ∈ [0, 1], 0 6 αi 6 1 (59)


Fig. 14. For legend see next page.


Fig. 14. Output from the analysis program for a poorly designed screen.

Each esthetic measure Mi has its own weighing component αi, which is assumedto be a constant. (Determining weights is one of the multidimensional optimiza-tion problems that are application specific. A paper presenting a solution usingobjective-based evolutionary programming is under review at the present time.)Equation (59) is used to perform OM calculations in this paper, and all theweighting components are set to 1, supposing that all these measures are equallyimportant.

4. Esthetic Measures in an Analysis Program

A program for measuring these 14 screen format characteristics was written inthe C programming language. The input to the program is a model example ofthe screen to be analyzed, drawn over the original screen using a screen editor.

A pair of model and real versions of one of the screens used in the followingexercise is shown in Fig. 14, along with the output from the program. Theoutput contains results of the 14 measurements (balance, equilibrium, symmetry,sequence, cohesion, unity, proportion, simplicity, density, regularity, economy,homogeneity, rhythm, and order and complexity).


Fig. 15. Exploring Ancient Architecture, by Medio Multimedia, Inc.

Fig. 16. Exploring Ancient Architecture, by Medio Multimedia, Inc.

Fig. 17. The main menu of the CITY-INFO kiosk.


Fig. 18. A regional map showing Oregon Employment Division kiosk locations.

Fig. 19. Title screen from Ebook’s A Survey of Western Art.

Fig. 20. A screen by CRoM, Inc.




Fig. 15 1 80 53 70 70(319 × 221) 2 80 128 70 70

3 168 53 70 704 168 128 70 705 6 5 306 16

Fig. 16 1 6 5 306 16(319 × 221) 2 6 25 140 112

3 32 150 88 524 200 25 112 177

Fig. 17 1 23 29 64 58(320 × 240) 2 93 29 64 58

3 163 29 64 584 233 29 64 585 23 91 134 586 163 91 134 587 23 153 64 588 93 153 64 589 163 153 64 58

10 233 153 64 58

Fig. 18 1 94 2 220 44(320 × 240) 2 0 104 84 136

3 94 50 226 1604 94 218 176 22

Fig. 19 1 159 81 62 86(641 × 437) 2 224 81 62 86

3 289 81 62 864 353 81 62 865 418 81 62 866 159 169 62 867 224 169 62 868 289 169 62 869 353 169 62 86

10 418 169 62 8611 159 256 62 8612 224 256 62 8613 289 256 62 8614 353 256 62 8615 418 256 62 86

Fig. 20 1 46 70 499 76(640 × 480) 2 537 438 81 36

3 430 435 79 374 26 2 79 365 129 1 79 386 43 163 502 187 6 456 286 18

Having developed a program for measuring these characteristics of screenformats, the next task was to determine how these characteristics actually relateto the esthetics of a screen. That was the purpose of the following exercise.

5. Validation of the Measures

The objectives of this exercise were to establish esthetic values for a set of realscreens using our measures for comparison with viewers’ ratings of the layouts,


Table 28. Computation of esthetic value for six layouts

Fig. 15 Fig. 16 Fig. 17 Fig. 18 Fig. 19 Fig. 20

BM 0.87412 0.63771 0.99625 0.64216 0.89884 0.35711EM 0.99368 0.98150 1.00000 0.98134 0.98488 0.80272SYM 0.66871 0.57828 0.99850 0.44697 0.74258 0.45146SQM 1.00000 0.50000 1.00000 0.25000 1.00000 0.50000CM 0.71578 0.74103 0.80116 0.72686 0.71232 0.67934UM 0.52435 0.32515 0.87668 0.14543 0.99050 0.10784PM 0.89779 0.83207 0.86859 0.79443 0.88041 0.73442SMM 0.27273 0.30000 0.17647 0.30000 0.13043 0.14286DM 0.69493 0.72407 0.82188 0.40792 0.57105 0.41532RM 0.51250 0.37500 0.79722 0.37500 0.81310 0.08333ECM 0.50000 0.25000 0.50000 0.25000 1.00000 0.14286HM 0.69444 0.00463 1.00000 0.00714 0.00340 0.00001RHM 0.66176 0.54721 0.99840 0.46527 0.73516 0.45306OM 0.69314 0.52282 0.83347 0.44558 0.72790 0.37464

Table 29. Median of the sample

Layout Fig. 15 Fig. 16 Fig. 17 Fig. 18 Fig. 19 Fig. 20

Median High Medium High Medium High Low

and to see how consistent they are. Samples of all screens are shown in Figs 15–20.Table 27 presents the element configurations of the screens, and their estheticvalues, according to our formulae, are summarized in Table 28. All values are inpixels. As indicated by the overall measure OM in Table 28, Figs 15, 17, and 19are measured high, whereas Figs 16, 18, and 20 low. Of the layouts we consider,Fig. 17 has the highest esthetic value and Fig. 20 the lowest.

On a visual basis, the formulae clearly separate Figs 15, 17, and 19 fromFigs 16, 18, and 20. The former group of screens shows strong esthetic andorganizational qualities. Figures 15, 17, and 19 are esthetically balanced withwell-defined areas, multiple columns of graphics, and with white space that isaround the exterior screen margins. The other screens (16, 18, 20) show threecharacteristics that are viewed negatively: they are fragmented (mean UM =0.193), irregular (mean RM = 0.278), and intricate (mean ECM = 0.214). All thescreens (15–20) are rather complex (mean SMM ratings = 0.220).

Next, we examined viewer judgements about the esthetics of these layouts.Participants were 180 undergraduate students in a Malaysian university. Subjectswere members of a variety of information technology classes and received creditfor participating in the study. Although subjects were members of informationtechnology classes, they were not familiar with screen design concepts. The sixdesign layouts on gray scale transparencies were displayed in a large classroom,using an overhead screen projector. Each layout was displayed for about 20seconds. During that time, participants rated each layout on a low–medium–highscale regarding how beautiful it was. The median for the ratings was calculatedto show the relative esthetics of the six screens, according to the viewers (seeTable 29).

By and large, the relative ratings by the viewers are consistent with thoseobtained using the proposed computational measures. Figures 15, 17, and 19were rated higher than Figs 16, 18, and 20. To the viewers, the screens in thelatter group are much more open, plainer, and less interesting than those inthe former group. Figures 15, 17, and 19 present three layouts that have high


computed values and were rated high on esthetics by the viewers. Figure 20, thelowest measured screen, was rated low. Figures 16 and 18 with moderate OMwere rated medium. A relatively high relationship was obtained between thesetwo data, which suggests that our model is somewhat related to the viewers’perceptions of esthetics.

6. Conclusions and Future Work

In this article, we have presented a computational theory of evaluating interfaceesthetics. The results of our informal study have confirmed the effectiveness ofthe model, but at the same time they have also suggested some improvementsto enhance its usability. We can increase scope to include the color, tone, andshape of objects in balance, for example. A designer can control some elementsof composition to achieve balance. For instance, color is visually heavier thanblack and white; big things are visually heavier than little things; black isvisually heavier than white; irregular shapes are visually heavier than regularshapes. By controlling the color, size, tone, and shape of objects in a design,one distributes the visual weight and thus influences balance. Much of thedescriptive work has already been done (Tjalve, 1979; Zelanski and Fisher, 1995;Simpson, 1998). Second, a layout is in equilibrium when its center correspondsapproximately to the center of the frame. Practically speaking there are, however,minor deviations from this definition. Owing to the visual gravitational pull, thebalancing center of the layout will lie somewhat higher than the center of theframe, thereby compensating for the greater weight of the area’s upper half. Butsuch discrepancies are small.

There are many interesting research topics involving the computation anduse of our formulae. First, experiments must be conducted to provide additionalempirical validation of the formulae and the conventions. It should be emphasizedthat we have had to make two assumptions, namely, (1) that the interactionbetween the selected characteristics is linear, and (2) that all these characteristicsare equally important. Future research should focus on investigating the interplaybetween the selected characteristics, which, contrary to our original assertion,may be non-linear. Additional research is also necessary to evaluate the effectsof different weighting strategies. (Weighting deals with the problem that we careabout some characteristics more than others.) Characteristics that are commonto the feeling which gives one an esthetic experience should not be limited tothe few – more accordant ordering principles with appropriate design conventionsmust be found if this approach is to be improved.

Acknowledgements. We thank the anonymous reviewers and the executive editor, DrXindong Wu, for their thoughtful comments and suggestions. We also thank Mr BoonLeong Law for his help in conducting the experiments and analyzing the data. The researchreported here was supported by IRPA grant 191/9636/0012.

References

Alexander C (1997) The nature of order. Oxford University Press, New YorkArnheim R (1954) Art and visual perception. University of California Press, Berkeley, CAAspillage M (1991) Screen design: a location of information and its effects on learning. Journal of

Computer-Based Instruction 18(3): 89–92


Berryman G (1990) Notes on graphic design and visual communication (rev. edn). Crisp, Menlo Park,CA

Bertin J (1983) Semiology of graphics. University of Wisconsin Press, Madison, WIBirkhoff GD (1933) Aesthetic measure. Harvard University Press, Cambridge, MABonsiepe G (1968) A method of quantifying order in typographic design. Journal of Typographic

Research 2: 203–220Dondis DA (1973) A primer of visual literacy. MIT Press, Cambridge, MAEysenk HJ (1941) The empirical determination of an aesthetic formula. Psychological Review 48:

83–92Feiner S (1991) An architecture for knowledge-based graphical interfaces. In Sullivan JW, Tyler SW

(eds). Intelligent user interfaces. ACM Press, New York, pp 259–279Foley JD, van Dam A, Feiner SK, Hughes JF (1990) Computer graphics: principles and practice (2nd

edn). Addison-Wesley, Reading, MAGalitz WO (1993) User interface screen design. QED, Boston, MAGalitz WO (1994) It’s time to clean your windows: designing GUIs that work. Wiley–QED, New

YorkGalitz WO (1997) The essential guide to user interface design. Wiley, New YorkGrabinger RS (1991) Computer screen designs: viewer judgements. Educational Technology Research

and Development 41(2): 35–73Hambidge J (1919) The Greek vase. Yale University Press, New Haven, CTHambidge J (1968) Dynamic symmetry. Dover Press, Mineola, NYHollan J, Hutchins E, McCandless T, Rosenstein M, Weitzman L (1987) Graphical interfaces for

simulation. Advances in Man–Machine Systems Research 3: 129–163.Iwamiya T, Takaoka K (2000) Katachi: the essence of Japanese design. Chronicle Books, San

Francisco, CAJohnson DH, Hartson HR, Ehrich RW, Roach JW, Reilly SS, Siochi AC, Tatem JE (1986) The

dialogue author, In Ehrich RW, Williges RC (eds). Human–computer dialogue design. ElsevierScience, Amsterdam, pp 109–163

Kurosu M, Kashimura K (1995) Apparent usability vs. inherent usability. In Companion of theannual ACM SIGCHI conference on human factors in computing systems (CHI ’95). ACM Press,New York, pp 292–293

Mackinlay J (1986) Automatic design of graphical presentations. PhD dissertation, Stanford Univer-sity, Stanford, CA

Maniere AT (1992) Aesthetics, mind, nature. Praeger Press, New YorkMaquet J (1986) The aesthetic experience. Yale University Press, New Haven, CTMarcus A (1992) Graphic design for electronic documents and user interfaces. ACM Press, New YorkMeier B (1988) ACE: a colour expert system for user interface design. In Proceedings of the ACM

SIGGRAPH symposium on user interface software. ACM Press, New York, pp 117–128Mosier JN, Smith SL (1995) Application of guidelines for designing user interface software. In Perlman

G, Green GK, Wogalter MS (eds). Human factors perspectives on human–computer interaction:selections from Proceedings of Human Factors and Ergonomics Society annual meetings, 1983–1994. HFES, Santa Monica, CA, pp 34–37

Mullet K, Sano D (1995) Designing visual interfaces: communication oriented techniques. SunSoftPress, Mountain View, CA

Ngo DCL (1994) VISIT: visitor information system implementation tool. PhD dissertation, TrinityCollege Dublin, Ireland

Ngo DCL, Byrne JG (1998) Aesthetic measures for screen design. In Calder P, Thomas B (eds). Pro-ceedings of the Australian computer human interaction conference (OzCHI ’98). IEEE ComputerSociety, Los Alamitos, CA, pp 64–71

Ngo DCL, Samsudin A, Abdullah R (2000) Aesthetic measures for assessing graphic screens. Journalof Information Science and Engineering 16(1): 97–116

Norman DA (1990) The design of everyday things. Doubleday, New YorkReilly SS, Roach JW (1984) Improved visual design for graphics display. IEEE Computer Graphics

and Applications 4(2): 42–51Reilly SS, Roach JW (1986) Designing human/computer interfaces: a comparison of human factors

and graphic arts principles. Educational Technology 26(1): 36–40Shneiderman B (1998) Designing the user interface: strategies for effective human–computer interac-

tion (3rd edn). Addison-Wesley, Reading, MASimpson JW (1998) Creating meaning through art. Prentice-Hall, Englewood Cliffs, NJStreveler DJ, Wasserman AI (1984) Quantitative measures of the spatial properties of screen designs.

In Shackel B (ed). Proceedings of the 1st IFIP international conference on human–computerinteraction (INTERACT ’84). North-Holland, Amsterdam, pp 81–89


Tjalve E (1979) A short course in industrial design. Newne-Butterworths, Boston, MAToh SC (1998) Cognitive and motivational effects of two multimedia simulation presentation modes

on science learning. PhD dissertation, University of Science Malaysia, MalaysiaTractinsky N (1997) Aesthetics and apparent usability: empirically assessing cultural and method-

ological issues. In Pemberton S (ed). Proceedings of the annual ACM SIGCHI conference onhuman factors in computing systems (CHI ’97). ACM Press, New York, pp 115–122

Tufte ER (1983) The visual display of quantitative information. Graphics Press, Cheshire, CTTufte ER (1990) Envisioning information. Graphics Press, Cheshire, CTTufte ER (1996) Visual explanations: images and quantitative, evidence and narrative. Graphics Press,

Cheshire, CTTullis TS (1984) Predicting the usability of alphanumeric displays. PhD dissertation, Rice University,

Houston, TXTullis TS (1988) Screen design. In Helander M (ed). Handbook of human–computer interaction.

Elsevier Science, Amsterdam, pp 377–411Weitzman L (1986) Designer: a knowledge-based graphic design assistant. Technical report, ICS

Report 8609, University of California, San Diego, CAZelanski P, Fisher MP (1995) Design principles and problems (2nd edn). Harcourt Brace College,

Fort Worth, TX

Author Biographies

David Chek Ling Ngo was born in Malaysia in 1966. He received a BAIdegree in Microelectronics and Electrical Engineering in 1990 and a PhDdegree in Computer Science in 1995, both from Trinity College Dublin,Ireland. He is a Senior Lecturer and Associate Dean of the Faculty ofInformation Technology at Multimedia University, Malaysia. At the sameuniversity, he is Chairman of the Center for Multimedia Computing. Heis a Member of Inspire Group’s Board of Directors and Advisory Board.He serves as a Technical Assessment Consultant at the Ministry of Science,Technology and Environment, Multimedia Development Corporation, andMSC Venture Corporation. He is an Honorary Consultant of the Schoolof Information Technology at Han Chiang College. He is Co-Chairman ofthe 1997 National Conference on Research and Development in Computer

Science and its Applications (REDECS ’97). He has published more than 40 papers in scientificjournals and international conferences. His current research interests center on esthetic measuresfor screen design, automatic screen design, proportioning systems in screen design, and educationalhypermedia.

Teo Lian Seng received the degree of Bachelor of Electrical Engineering withfirst class honors from Universiti Teknologi Malaysia. After that, he com-pleted his PhD research in artificial intelligence from the same university.Currently, he holds a position as Head of Department of Information Tech-nology in New Era College, Malaysia. His research focuses are on appliedartificial intelligence techniques in information technology and engineeringrelated fields.

John G. Byrne is currently Professor and Head of the Computer Science Department at Trinity

College Dublin, Ireland. He is Director of Broadcom Eireann Research Ltd. He has publishednumerous papers in leading journals and major conferences and has received substantial grants froma variety of agencies. His current research interests include document image processing and appliednumerical methods.

Correspondence and offprint requests to: David Chek Ling Ngo, Faculty of Information Technology,

Multimedia University, 63100 Cyberjaya, Malaysia. Email: [email protected]

Documents

Evaluating Interface Esthetics