Evaluating Interface Esthetics

Knowledge and Information Systems (2002) 4: 4679
Ownership and Copyright

c Springer-Verlag London Ltd. 2002

Evaluating Interface Esthetics

David Chek Ling Ngo1 , Lian Seng Teo1 and John G. Byrne2
1 Faculty
of Information Technology, Multimedia University, Cyberjaya, Malaysia

of Computer Science, Trinity College, Dublin, Ireland
2 Department
Abstract. Gestalt psychologists promulgated the principles of visual organization in the

early twentieth century. These principles have been discussed and re-emphasized, and their
importance and relevance to user interface design are understood. However, a limited
number of systems represent and make adequate use of this knowledge in the form
of a design tool that supports certain aspects of the user interface design process. The
graphic design rules that these systems use are extremely rudimentary and often vastly
oversimplified. Most of them have no concept of design basics such as visual balance
or rhythm. In this paper, we attempt to synthesize the guidelines and empirical data
related to the formatting of screen layouts into a well-defined model. Fourteen esthetic
characteristics have been selected for the purpose. The results of our exercise suggest that
these characteristics are important to prospective viewers.
Keywords: Esthetic characteristics; Esthetic measures; Interface esthetics; Multi-screen
interfaces; 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 related
to our appreciation of computer systems as well. However, some (Foley et al,
1990; Marcus, 1992) warn against a tendency among designers to emphasize the
esthetic elements of the user interface, because these might degrade usability.
In fact, interface esthetics play a greater role in affecting system usability and
acceptability than we might be willing to admit. Careful application of esthetic
concepts can aid:
Received 5 May 1999
Revised 17 July 2000
Accepted 27 November 2000
47
Acceptability. Two recent studies (Kurosu and Kashimura, 1995; Tractinsky,

1997) show that very high correlations were found between users perceptions
of interface esthetics and usability.
Learnability. Toh (1998) found that esthetically pleasing layouts have a definite
effect on the students motivation to learn. Aspillage (1991) found that good
graphic design and attractive displays help contribute to the transfer of information. A study by Grabinger (1991) indicated that organization and visual
interest are important criteria in judging the readability and studyability of the
real screens. Screens that are plain, simple, unbalanced, and bare are perceived
as undesirable.
Given the critical role that esthetics plays in human-computer interaction, it is
important to understand what characteristics of visually pleasing objects influence
user acceptance and performance. The purpose of this paper is to identify a set of
screen characteristics that appear to be important determinants of acceptance and
performance, 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 refined
to incorporate more relevant esthetic components that might help explain our
experience with, and evaluation of, computer esthetics.)
2. Related Research
Gestalt psychologists promulgated the principles of visual organization in the
early twentieth century. These principles have been discussed and re-emphasized,
and their importance and relevance to user interface design is understood. A
survey (Mosier and Smith, 1995) was conducted of people who had received a report on guidelines for designing user interface software. Analysis of questionnaire
responses indicates that design guidelines are generally considered useful, but that
there are significant problems in the practical application of guidelines. For effective application, generally stated guidelines must be translated into system-specific
design rules. However, a limited number of systems represent and make adequate
use of this knowledge in the form of a design tool that supports certain aspects
of user interface design process. These include two classes of tools: evaluation
and critiquing tools, and design environments.
2.1. Evaluation and Critiquing Tools

Early examples of tools that analyze alphanumeric screens are Tulliss (1988)
Display Analysis Program and Streveler and Wassermans (1984) system. Tullis
investigated predicting user performance for static alphanumeric displays. He
explored the relationship between several metrics including overall density of the
screen, local density of the screen, grouping of objects, and layout complexity and
the time required for users to extract information from the display. He conducted
several experiments and developed equations that could predict search times and
preference ratings. Streveler and Wasserman described a system for quantitatively
assessing screen formats that has many parallels with Tulliss model. Streveler and
Wasserman 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 has
reduced interest in these metrics, but better analyses of layouts seem possible
(Shneiderman, 1998). While it is conceivable to define a set of variables that
characterize the key attributes of many alphanumeric display formats, such a
task seems difficult for graphic displays because of their much greater complexity.
Our model extends the general research objective to include multi-screen interfaces, which are mostly found in one-time GUIs and wizards, and multimedia
applications. (With some modification, some of the techniques presented can also
be used for other graphic screen types.)
2.2. Design Tools

Well-known systems that incorporate design rules include Automated Pictorial
EXplanation (APEX) (Feiner, 1991), which designs and renders sequences of
pictures intended to show how to perform simple actions; A Presentation Tool
(APT) (Mackinlay, 1986), which uses graphical languages to automatically design
graphical presentations of relational information; ACE (Meier, 1988), which
assigns a color to interface objects based on their functions and their relations
to each other; Designer (Weitzman, 1986; Hollan et al, 1987), which provides
visual expertise to analyze the design and synthesize design alternatives; and a
computer-based consultant called VIDEO (Johnson et al, 1986), which incorporates principles of good visual design.
The graphic design rules that these systems use are extremely rudimentary
and often vastly oversimplified. Most of them have no concept of design basics
such as visual balance or rhythm. While esthetic guidelines exist to help designers
create attractive displays, the state of esthetic theory is relatively primitive. That
is, although rules of some kind exist, they have not been formally codified.
We have introduced mathematical formulas for the esthetic considerations that
many present. The objective treatment of esthetic issues in this paper adds much
to the current body of work. In deriving the screen format characteristics, we
reviewed and synthesized the literature related to visual design. The result was the
derivation of 14 new measures that can be used to describe the spatial properties
of 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 reasonable
set of objectively defined characteristics for describing screen formats that should
result in a measure that could accurately define important determinants of system
acceptability.
Many noteworthy texts discuss theories of design in both fine and commercial
art. Good examples include Arnheim (1954), Dondis (1973), Norman (1990),
Bertin (1983), and Tufte (1983, 1990, 1996). For our purposes, an extensive list of
very specific guidelines for the design of graphic screens is needed to accurately
represent the underlying characteristics of screen formats that the guidelines
suggested as important determinants of user acceptance or performance. From
the literature on screen design, a selection of studies (Reilly and Roach, 1984,
1986; Berryman, 1990; Galitz, 1993, 1994; Mullet and Sano, 1995; Zelanski and
Fisher, 1995; Galitz, 1997) present extensive lists of specific esthetic guidelines for
creating attractive displays. This article relies heavily on their descriptive work to
help demonstrate the codification of graphic design criteria into a formal model
that can be used by a design tool.
49
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 and
borders. We also confine ourselves to study only the dimension and position of
rectangular regions, because of space limitation. The findings from this study may
easily generalize to other relevant design elements (such as color, shape). Observe
that 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. Optical
weight refers to the perception that some objects appear heavier than others.
Larger objects are heavier, whereas small objects are lighter. Balance in screen
design 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 components
on each side of the horizontal and vertical axis and is given by
|BM vertical | + |BM horizontal |
[0, 1]
(1)
2
and BM horizontal are, respectively, the vertical and horizontal balances
BM = 1
BM vertical
with
BM vertical =
BM horizontal
with
wj =
nj
X
wL wR
max (|wL |, |wR |)
wT wB
=
max (|wT |, |wB |)
aij dij
j = L, R, T , B
(2)
(3)
(4)
where L, R, T , and B stand for left, right, top, and bottom, respectively; wj is
the total weight of side j; aij is the area of object i on side j; dij is the distance
between the central lines of the object and the frame; and nj is the total number
of objects on the side.
Figure 1 presents good and bad versions in balance study. Table 1 presents
the element configurations of the screens. As Table 2 indicates, the balance
measure shows that the good version is better. In Fig. 1(a) balance is achieved
by 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 on
each 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
50
D. C. L. Ngo et al.
(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
Width
Height
Fig. 1(a)
(600 320)
1
2
3
4
5
6
60
60
60
360
360
360
40
100
240
180
40
240
185
185
185
185
185
185
41
121
41
41
121
41
Fig. 1(b)
(600 320)
1
2
3
4
5
6
120
380
120
120
380
120
20
20
200
80
150
140
185
185
185
185
185
185
41
121
41
41
121
41
Table 2. Computation of balance value

Fig. 1(a)
BM vertical 0.02632
BM horizontal 0.11322
BM
0.93023
Fig. 1(b)
0.65328
0.49479
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 on
each side of the horizontal axis. Positive values indicate that the top half of
the frame is heavier than the bottom half, while for negative values the bottom
half 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 the
overall measures for the two screens. Figure 1(a) (0.930) is measured higher than
1(b) (0.426).
3.2. Measure of Equilibrium

Equilibrium is a stabilization, a midway center of suspension. Equilibrium on
a screen is accomplished through centering the layout itself. The center of the
layout coincides with that of the frame. (There are minor deviations from this
definition, which we discuss in Conclusions and Future Work.)
(a)
51
(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 the

displayed elements and the physical center of the screen and is given by
|EM x | + |EM y |
[0, 1]
(5)
2
The equilibrium components along the x-axis (EM x ) and y-axis (EM y ) are given
by
P
2 ni ai (xi xc )
P
(6)
EM x =
bframe ni ai
EM = 1
EM y =
Pn
ai (yi yc )
P
hframe ni ai
i
(7)
where (xi , yi ) and (xc , yc ) are the coordinates of the centers of object i and the
frame; ai is the area of the object; bframe and hframe are the width and height of
the frame; and n is the number of objects on the frame. Note that the maximum
values of |xi xc | and |yi yc | are bframe /2 and hframe /2.
Figure 2 presents good and bad versions in equilibrium study. Table 3
presents the element configurations of the screens. As Table 4 indicates, the
equilibrium measure shows that the good version is better. In Fig. 2(a) equilibrium
is achieved by centering the layout itself. The center of the layout shown in
Fig. 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 that
of the frame. Positive values indicate that the center is situated on the right side
of the frame, and negative values on the left side. EM x is 0 when the center lies
somewhere 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 approximately
to that of the center of the frame. The small positive value shows that its center is
slightly to the right of the center of the frame. Similarly, EM y is the normalized
y-coordinate of the center of mass of the objects. Positive values indicate that
the center lies on the bottom half of the frame, and negative values on the top
half. EM y is 0 when the center lies somewhere along the x-axis. There is another
advantage 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 lower
than the center of the frame. Substituting each pair of equilibrium values into
52
D. C. L. Ngo et al.
Layout
Object
Width
Height
Fig. 2(a)
(600 320)
1
2
3
4
5
6
60
60
60
360
360
360
40
120
240
40
200
120
185
185
185
185
185
185
41
81
41
41
81
41
Fig. 2(b)
(600 320)
1
2
3
4
5
6
10
10
10
10
200
200
56
100
143
230
220
270
185
185
185
185
185
185
41
41
81
81
41
41
Table 4. Computation of equilibrium value

EM x
EM y
EM
Fig. 2(a)
Fig. 2(b)
0.00667
0.02991
0.98171
0.50070
0.27414
0.61258
equation (5) yields the overall measures for the two screens. Figure 2(a) yields a
higher 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 exactly
replicated on the other side. Vertical symmetry refers to the balanced arrangement
of equivalent elements about a vertical axis, and horizontal symmetry about a
horizontal axis. Radial symmetry consists of equivalent elements balanced about
two or more axes that intersect at a central point.
Symmetry, by definition, is the extent to which the screen is symmetrical in
three directions: vertical, horizontal, and diagonal, and is given by
SYM = 1
|SYM vertical | + |SYM horizontal | + |SYM radial |

[0, 1]
3
(8)
SYM vertical , SYM horizontal , and SYM radial are, respectively, the vertical, horizontal,
and radial symmetries with
0
0
0
0
0
0
0
0
|XUL
XUR
|+|XLL
XLR
|+|YUL
YUR
| + |YLL
YLR
|+
0
0
0
0
0
0
0
0
HUR
|+|HLL
HLR
|+|BUL
BUR
|+|BLL
BLR
|+
|HUL
SYM vertical =
0
0
0
0
RUR
|+|RLL
RLR
|
|0UL 0UR |+|0LL 0LR |+|RUL
12
(9)
53
0
0
0
0
0
0
0
0
|XUL
XLL
|+|XUR
XLR
|+|YUL
YLL
| + |YUR
YLR
|+
0
0
0
0
0
0
0
0
HLL
|+|HUR
HLR
|+|BUL
BLL
|+|BUR
BLR
|+
|HUL
0
0
0
0
RLL
|+ |RUR
RLR
|
|0UL 0LL |+|0UR 0LR | + |RUL
12
SYM horizontal =
(10)
0
0
0
0
0
0
0
0
|XUL
XLR
| + |XUR
XLL
| + |YUL
YLR
| + |YUR
YLL
|+
0
0
0
0
0
0
0
0
HLR
| + |HUR
HLL
| + |BUL
BLR
| + |BUR
BLL
|+
|HUL
0
0
0
0
RLR
| + |RUR
RLL
|
|0UL 0LR | + |0UR 0LL | + |RUL
12
SYM radial =
(11)
Xj0 ,
Yj0 ,
Hj0 ,
Xj =
Bj0 ,
0j ,
and
Rj0
nj
X

xij xc
are, respectively, the normalized values of

j = UL, UR, LL, LR
(12)
j = UL, UR, LL, LR
(13)
Yj =
nj
X

yij yc
i
Hj =
nj
X
hij
j = UL, UR, LL, LR
(14)
bij
j = UL, UR, LL, LR
(15)
Bj =
nj
X
i
j =
Rj =

nj
X
yij yc

xij xc
i
nj q
X
xij xc
j = UL, UR, LL, LR

2
+ yij yc
2
j = UL, UR, LL, LR
(16)
(17)
where UL, UR, LL, and LR stand for upper-left, upper-right, lower-left, and
lower-right, respectively; Xj is the total x-distance of quadrant j, Yj is the total
y-distance, Hj is the total height, Bj is the total width, j is the total angle, and
Rj is the total distance; (xij , yij ) and (xc , yc ) are the coordinates of the centers of
object i on quadrant j and the frame; bij and hij are the width and height of the
object; and nj is the total number of objects on the quadrant.
Figure 3 presents good and bad versions in symmetry study. Table 5 presents
the element configurations of the screens. As Table 6 indicates, the symmetry
measure shows that the good version is better. In Fig. 3(a) symmetry is achieved
by replicating elements left and right of the screen center line. Figure 3(b) presents
an asymmetrical design.
SYM vertical is the extent to which the screen is symmetrical in the vertical
direction. 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.
54
D. C. L. Ngo et al.
(a)
(b)
Fig. 3. Two versions of screens in symmetry study. (a) The good version. (b) The bad version.

Layout
Object
Width
Height
Fig. 3(a)
(600 320)
1
2
3
4
5
6
180
340
120
340
340
80
140
40
40
140
200
200
81
145
141
85
185
185
21
61
61
21
101
101
Fig. 3(b)
(600 320)
1
2
3
4
5
6
10
200
10
200
200
10
10
110
130
290
180
200
81
145
141
85
185
185
21
61
61
21
101
101
Table 6. Computation of symmetry value

SYM vertical
SYM horizontal
SYM radial
SYM
Fig. 3(a)
Fig. 3(b)
0.01229
0.22264
0.22264
0.84747
0.79328
0.60672
0.79328
0.26891
Better values are associated with smaller differences. A better value is computed
for Fig. 3(a) (0.012) than for 3(b) (0.793). SYM horizontal is a measure of symmetry in
the horizontal direction. The values show that Fig. 3(a) (0.223) is measured more
positive than 3(b) (0.607). SYM radial is a measure of symmetry in the diagonal
directions. 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 each
set of symmetry values into equation (8) yields the overall symmetry measures
for 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 that
facilitates the movement of the eye through the information displayed. Normally
the eye, trained by reading, starts from the upper left and moves back and forth
55
(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 that
certain things attract the eye. It moves from big objects to small objects.
Sequence, by definition, is a measure of how information in a display is
ordered in relation to a reading pattern that is common in Western cultures and
is given by
P
|qj vj |
SQM = 1
j=UL,UR,LL,LR
[0, 1]
(18)
with
{qUL , qUR , qLL , qLR } = {4, 3, 2, 1}
4 if
3 if
vj =
2 if
1 if
with
wj = qj
nj
X
aij
wj
wj
wj
wj
is
is
is
is
the
the
the
the
largest in w
2nd largest in w
3rd largest in w
smallest in w
j = UL, UR, LL, LR
(19)
j = UL, UR, LL, LR
(20)
(21)
w = {wUL , wUR , wLL , wLR }
(22)
where UL, UR, LL, and LR stand for upper-left, upper-right, lower-left, and
lower-right, respectively; wj is the total weight of quadrant j; and aij is the area
of 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 7
sequence measure shows that the good version is better. In Fig. 4(a) sequence is
achieved by arranging elements to guide the eye through the screen in a left-toright, top-to-bottom pattern. The eye starts from the upper left and moves back
and 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-bottom
pattern; the upper-left quadrant has a value of 4, the upper-right quadrant a
value of 3, the lower-left quadrant a value of 2, and the lower-left quadrant a
value of 1. SQM is the overall difference between these values and the rankings
of total weighting of objects that appeared in different quadrants of the screen,
56
D. C. L. Ngo et al.
Layout
Object
Width
Height
Fig. 4(a)
(600 320)
1
2
3
4
40
380
80
420
20
20
220
219
261
181
181
101
141
141
81
81
Fig. 4(b)
(600 320)
1
2
3
4
320
40
360
80
170
170
20
20
261
181
181
101
141
141
81
81
Table 8. Computation of sequence value

SQM
Fig. 4(a)
Fig. 4(b)
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 different
quadrants in the shape of z. A higher value is computed for Fig. 4(a) (1.000) than
for 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 ratio
refers to the relationship of width to height. Typical paper sizes are higher than
they are wide, while the opposite is true for typical VDU displays. Changing
the aspect ratio of a visual field may affect eye movement patterns sufficiently
to account for some of the performance differences. The aspect ratio of a visual
field should stay the same during the scanning of a display.
Cohesion, by definition, is a measure of how cohesive the screen is and is
given by
|CM fl | + |CM lo |
[0, 1]
2
CM fl is a relative measure of the ratios of the layout and screen with
cfl if cfl 6 1
CM fl =
1
Otherwise
cfl
CM =
(23)
(24)
with
cfl =
hlayout /blayout
hframe /bframe
(25)
where blayout and hlayout and bframe and hframe are the widths and heights of the
layout and the frame, respectively.
CM lo is a relative measure of the ratios of the objects and layout with
Pn
ti
(26)
CM lo = i
n
57
(a)
(b)
Fig. 5. Two versions of screens in cohesion study. (a) The good version. (b) The bad version.
Layout
Object
Width
Height
Fig. 5(a)
(600 320)
1
2
3
4
60
340
340
60
180
40
180
40
181
181
181
181
101
101
101
101
Fig. 5(b)
(600 320)
1
2
3
4
190
190
360
360
20
160
20
160
50
50
50
50
130
130
130
130
Table 10. Computation of cohesion value

CM lo
CM fl
CM
with
ci
ti =
1
ci
Fig. 5(a)
Fig. 5(b)
0.93686
0.98021
0.95853
0.47203
0.43457
0.45330
if ci 6 1
Otherwise
(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 objects
on the frame.
Figure 5 presents good and bad versions in the cohesion study. Table 9
cohesion measure shows that the good version is better. In Fig. 5(a) cohesion is
achieved by maintaining the aspect ratio of a visual field. Use of the screen in
Fig. 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 and
the frame. Better values are associated with higher similarities. A better value is
calculated for Fig. 5(a) (0.937) than for 5(b) (0.472). CM lo is the overall measure
of the differences between the aspect ratios of the objects and the frame. The
58
D. C. L. Ngo et al.
(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.434
for 5(b)). Substituting each pair of cohesion values into equation (23) yields the
overall measures for the two layouts. Figure 5(a) (0.958) is measured higher than
5(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 seen
as one thing. Unity in screen design is achieved by using similar sizes and leaving
less 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 belong
together and is given by
|UM form | + |UM space |
[0, 1]
2
is the extent to which the objects are related in size with
UM =
UM form
(29)
nsize 1
(30)
n
is a relative measure of the space between groups and that of the
UM form = 1
and UM space
margins with
UM space
P
alayout ni ai
P
=1
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 on
the frame.
Figure 6 presents good and bad versions in unity study. Table 11 presents the
element configurations of the screens. As Table 12 indicates, the unity measure
shows that the good version is better. In Fig. 6(a) unity is achieved by using
similar sizes and leaving less space between elements of a screen than the space
left at the margins. The elements are related in size and they are grouped together
and surrounded by white space. The items in Fig. 6(b) look as if they are ready
to 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)
59

Layout
Object
Width
Fig. 6(a)
(600 320)
1
2
3
4
110
110
310
310
70
170
70
170
181
181
181
181
Height
81
81
81
81
Fig. 6(b)
(600 320)
1
2
3
4
10
10
410
490
10
230
10
230
140
180
180
100
80
80
80
80
Table 12. Computation of unity value

UM form
UM space
UM
Fig. 5(a)
Fig. 5(b)
1.00000
0.92264
0.96132
0.50000
0.12500
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 are
closely related to how tightly the screen is packed. UM space is 1 when there is
no space between objects, and 0 when there is no space left at the margins. The
UM space values reflect a similar superiority of Fig. 6(a) (0.923 for 6(a) and 0.125
for 6(b)). Substituting each pair of unity values into equation (29) yields the
overall measures for the two layouts. The esthetic value for Fig. 6(a) (0.961) is
0.649 more than that for 6(b) (0.312).
3.7. Measure of Proportion

Down through the ages, people and cultures have had preferred proportional
relationships. What constitutes beauty in one culture is not necessarily considered
the same by another culture, but some proportional shapes have stood the test of
time and are found in abundance today. Marcus (1992) describes the following
shapes 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 major
components of the screen, including windows and groups of data and text.
Proportion, by definition, is the comparative relationship between the dimensions of the screen components and proportional shapes and is given by
PM =
|PM object | + |PM layout |

[0, 1]
2
(32)
60
D. C. L. Ngo et al.
PM object is the difference between the proportions of the objects and the closest
proportional shapes described by Marcus by

n
min (|pj pi |, j = sq, r2, gr, r3, ds)
1X
(33)
1
PM object =
n i
0.5
ri if ri 6 1
(34)
pi =
1 Otherwise
ri
with
hi
(35)
ri =
bi
where bi and hi are the width and height of object i. Note that the maximum
value of (pj pi ) is 0.5.
PM layout is the difference between the proportions of the layout and the closest
proportional shape with
PM layout = 1
with
playout
min (|pj playout |, j = sq, r2, gr, r3, ds)

0.5
rlayout
=
1
rlayout
(36)
if r 6 1
Otherwise
(37)
with
rlayout =
hlayout
blayout
(38)
where blayout and hlayout are the width and height of the layout. Note that the
maximum value of (pj playout ) is 0.5.
pj is the proportion of shape j with

1
1 1
1 1
,
,
,
,
(39)
{psq , pr2 , pgr , pr3 , pds } =
1 1.414 1.618 1.732 2
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 13
proportion measure shows that the good version is better. In Fig. 7(a) proportion
is achieved by creating objects with esthetically pleasing proportions. The items
are 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 objects
are. 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 to
an 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 related
to how well the layout is proportionate. Again, a better value is computed for
Fig. 7(a) (0.966) than for 7(b) (0.464). Substituting each pair of proportion values
61
(a)
(b)
Fig. 7. Two versions of screens in proportion study. (a) The good version. (b) The bad version.

Layout
Object
Width
Height
Fig. 7(a)
(600 320)
1
2
3
4
100
100
320
320
40
200
40
200
181
181
181
181
81
81
81
81
Fig. 7(b)
(600 320)
1
2
3
4
40
40
340
340
100
180
100
180
221
221
221
221
41
41
41
41
Table 14. Computation of proportion value

PM object
PM layout
PM
Fig. 7(a)
Fig. 7(b)
0.89503
0.96590
0.93046
0.37104
0.46449
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 that
results in ease in comprehending the meaning of a pattern. Simplicity in screen
design is achieved by optimizing the number of elements on a screen and minimizing the alignment points. Tullis (1984) has derived a measure of screen complexity
for text-based screens based on the work of Bonsiepe (1968), who proposed a
method of measuring the complexity of typographically designed pages through
the application of information theory. It involves counting the number of different
rows or columns on the screen that are used as starting positions of alphanumeric
data items. Information theory is then used to calculate the complexity of this
arrangement of starting positions.
An easier method of calculation is
SMM =
3
[0, 1]
nvap + nhap + n
(40)
62
D. C. L. Ngo et al.
(a)
(b)
Fig. 8. Two versions of screens in simplicity study. (a) The good version. (b) The bad version.

Layout
Object
Width
Height
Fig. 8(a)
(600 320)
220
Y
70
160
160
Fig. 8(b)
(600 320)
1
2
3
100
320
210
70
200
130
160
160
160
50
50
60
Table 16. Computation of simplicity value

SMM
Fig. 8(a)
Fig. 8(b)
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 15
simplicity measure shows that the good version is better. In Fig. 8(a) simplicity is
achieved by minimizing the number of elements on a screen and the alignment
points. Figure 8(b) has a lower simplicity measure since it has more items and
alignment points.
SMM is inversely proportional to the sum of the numbers of alignment points
and screen objects: as the summation decreases, SMM tends to increase. Higher
values are associated with smaller number of objects used and related to how
well 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 is
achieved by restricting screen density levels to an optimal percentage. A measure
of density, derived by Tullis, is the percentage of character positions on the entire
frame containing data.
63
(a)
(b)
Fig. 9. Two versions of screens in density study. (a) The good version. (b) The bad version.

Layout
Object
Width
Height
Fig. 9(a)
(600 320)
1
2
3
4
90
90
335
335
20
165
20
165
190
190
190
190
120
120
120
120
Fig. 9(b)
(600 320)
1
2
3
4
5
6
7
8
9
10
10
10
205
205
205
400
400
400
10
220
115
10
219
115
10
219
115
190
190
190
190
190
190
190
190
190
90
90
90
90
90
90
90
90
90
Table 18. Computation of density value

DM
Fig. 9(a)
Fig. 9(b)
0.95000
0.39688
Instead of looking at characters, our measure deals with objects with

Pn

ai

DM = 1 2 0.5 i [0, 1]
aframe
(41)
where ai and aframe are the areas of object i and the frame; and n is the number of
objects on the frame. Assume that the optimum screen density level for graphic
screens is 50%.
Figure 9 presents good and bad versions in density study. Table 17 presents
the element configurations of the screens. As Table 18 indicates, the density
measure shows that the good version is better. In Fig. 9(a) density is achieved by
restricting screen density levels to an optimal percentage. Figure 9(b) presents a
cluttered, cramped layout.
DM is the extent to which the percentage of object areas on the entire frame
is 50. Higher values are related to how closely the level is 50. DM is 1 when the
density level is 50. Figure 9(a) yields a significantly higher value (0.950 for 9(a)
and 0.397 for 9(b)).
64
D. C. L. Ngo et al.
(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. Regularity
in screen design is achieved by establishing standard and consistently spaced
horizontal and vertical alignment points for screen elements, and minimizing the
alignment points.
Regularity, by definition, is a measure of how regular the screen is and is
given by
|RM alignment | + |RM spacing |
[0, 1]
(42)
2
RM alignment is the extent to which the alignment points are minimized with
if n = 1
1
(43)
RM alignment =
1 nvap + nhap Otherwise
2n
and RM spacing is the extent to which the alignment points are consistently spaced
with
if n = 1
1
(44)
RM spacing =
1 nspacing 1 Otherwise
2(n 1)
RM =
where nvap and nhap are the numbers of vertical and horizontal alignment points;
nspacing is the number of distinct distances between column and row starting
points; and n is the number of objects on the frame.
Figure 10 presents good and bad versions in regularity study. Table 19
regularity measure shows that the good version is better. In Fig. 10(a) regularity
is achieved by establishing standard and consistently spaced horizontal and
vertical alignment points. The items in Fig. 10(b) are unequally spaced.
Better (higher) RM alignment values are closely related to how well the objects
are aligned. RM alignment is 1 if the object number is 1. For the same number
of 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. Given
a constant number of objects, as the distance number increases, RM spacing tends
to decrease. RM spacing is 1 if the number of distinct distances between alignment
65

Layout
Object
Width
Height
Fig. 10(a)
(600 320)
1
2
3
4
5
6
7
8
9
100
100
100
240
240
240
380
380
380
20
120
220
20
120
220
20
120
220
121
121
121
121
121
121
121
121
121
81
81
81
81
81
81
81
81
81
Fig. 10(b)
(600 320)
1
2
3
4
5
6
7
8
9
60
85
60
243
262
240
440
420
430
20
120
220
20
118
219
20
120
219
121
121
121
121
121
121
121
121
121
81
81
81
81
81
81
81
81
81
Table 20. Computation of regularity value

RM alignment
RM spacing
RM
Fig. 10(a)
Fig. 10(b)
0.66667
0.93750
0.80208
0.27778
0.43750
0.35764
points is 1. For the same number of objects, Fig. 10(a) yields a higher value (0.937
for 10(a) and 0.437 for 10(b)), since the distance number is smaller. Substituting
each pair of regularity values into equation (42) yields the overall regularity
measures 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 message
across 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 is
given 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
economy measure shows that the good version is better. In Fig. 11(a) economy
is achieved by using as few sizes as possible. Figure 11(b) has a lower economy
measure since it uses more sizes.
ECM is inversely proportional to the number of different object sizes: as
the number increases, ECM tends to decrease. Higher values are associated with
fewer sizes used. ECM is 1 if the number is 1. Figure 11(a) uses one size with a
66
D. C. L. Ngo et al.
(a)
(b)
Fig. 11. Two versions of screens in economy study. (a) The good version. (b) The bad version.

Layout
Object
Width
Height
Fig. 11(a)
(600 320)
1
2
3
4
120
120
360
360
40
200
40
200
121
121
121
121
81
81
81
81
Fig. 11(b)
(600 320)
1
2
3
4
120
120
360
360
40
200
40
200
121
101
81
61
81
81
81
81
Table 22. Computation of economy value

ECM
Fig. 11(a)
Fig. 11(b)
1.00000
0.25000
value of 1.000, while 11(b) uses four different sizes measuring 0.250. The SMM
value 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 later
in astronomy, chemistry and biology. Entropy influenced almost every science. We
interpret the statistical entropy concept for screen design. The entropy equation
is given by
S = k log W
(46)
where S is the entropy of the screen; k is a constant, known as Boltzmanns

constant; and W is a measure of the degree of homogeneity.
Since increases or decreases of W are equivalent respectively to increases or
decreases of S, we can conveniently work with W below rather than with S. The
relative degree of homogeneity of a composition is determined by how evenly
the objects are distributed among the four quadrants of the screen. The degree
of evenness is a matter of the quadrants that contain more or less nearly equal
numbers of objects.
67
(a)
(b)
Fig. 12. Two versions of screens in homogeneity study. (a) The good version. (b) The bad version.
Layout
Object
Width
Height
Fig. 12(a)
(600 320)
1
2
3
4
120
120
320
320
60
180
60
180
161
161
161
161
81
81
81
81
Fig. 12(b)
(600 320)
1
2
3
4
120
120
320
120
20
120
220
220
161
161
161
161
81
81
81
81
Table 24. Computation of homogeneity value

W
Wmax
HM
Fig. 12(a)
Fig. 12(b)
24.00000
24.00000
1.00000
560.00000
2520.00000
0.22222
Homogeneity, by definition, is a measure of how evenly the objects are

distributed among the quadrants and is given by
W
[0, 1]
(47)
Wmax
W is the number of different ways a group of n objects can be arranged for the
four quadrants when nj is the total number of objects in quadrant j, that is
HM =
n!
Q
W =
nj
n!
nUL !nUR !nLL !nLR !
(48)
j=UL,UR,LL,LR
where nUL , nUR , nLL , and nLR are the numbers of objects on the upper left, upper
right, lower left, and lower-right quadrants, respectively; and n is the number of
objects on the frame.
W is maximum when the n objects are evenly allocated to the various quadrants of the screen, as compared to more or less uneven allocations among the
quadrants, and thus
Wmax =
n!
n n n n
4!4!4!4!
n!

n 4
4!
(49)
Figure 12 presents good and bad versions in homogeneity study. Table 23

68
D. C. L. Ngo et al.
homogeneity measure shows that the good version is better. In Fig. 12(a) homogeneity is achieved by distributing the objects evenly among the four quadrants
of the screen. The items in Fig. 12(b) are not evenly distributed.
Higher values are closely related to how evenly the objects are distributed. HM
is 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 the
highest possible value.
3.13. Measure of Rhythm

Rhythm in design refers to regular patterns of changes in the elements. This order
with variation helps to make the appearance exciting. Rhythm is accomplished
through variation of arrangement, dimension, number and form of the elements.
The extent to which rhythm is introduced into a group of elements depends on
the complexity (number and dissimilarity of the elements).
Rhythm, by definition, is the extent to which the objects are systematically
ordered and is given by
|RHM x | + |RHM y | + |RHM area |
[0, 1]
3
The rhythm components are
RHM = 1
(50)
0
0
0
0
|XUL
XUR
| + |XUL
XLR
|+
0
0
0
0
XLL
| + |XUR
XLR
|+
|XUL
0
0
0
0
XLL
| + |XLR
XLL
|
|XUR
6
RHM x =
(51)
0
0
0
0
|YUL
YUR
| + |YUL
YLR
|+
0
0
0
0
YLL
| + |YUR
YLR
|+
|YUL
RHM y =
0
0
0
0
YLL
| + |YLR
YLL
|
|YUR
6
(52)
|A0UL A0UR | + |A0UL A0LR |+

|A0UL A0LL | + |A0UR A0LR |+
|A0UR A0LL | + |A0LR A0LL |
6
Xj0 , Yj0 , and A0j are, respectively, the normalized values of
RHM area =
Xj =
nj
X
(53)
|xij xc |
j = UL, UR, LL, LR
(54)
|yij yc |
j = UL, UR, LL, LR
(55)
Yj =
nj
X
i
Aj =
nj
X
i
aij
j = UL, UR, LL, LR
(56)
69
(a)
(b)
Fig. 13. Two versions of screens in rhythm study. (a) The good version. (b) The bad version.
Layout
Object
Width
Fig. 14(a)
(600 320)
1
2
3
4
5
6
7
8
60
140
140
60
320
400
400
320
20
100
180
260
20
100
180
259
141
141
141
141
141
141
141
141
Height
41
41
41
41
41
41
41
41
Figure 14(b)
(600 320)
1
2
3
4
5
6
7
8
14
195
15
233
202
45
422
520
13
18
136
183
56
84
183
250
162
60
181
181
141
141
169
71
60
21
31
121
51
41
60
61
Table 26. Computation of rhythm value

RHM x
RHM y
RHM area
RHM
Fig. 13(a)
Fig. 13(b)
0.00000
0.00312
0.00000
0.99896
0.61725
0.60857
0.63547
0.37957
where UL, UR, LL, and LR stand for upper left, upper right, lower left, and
lower right, respectively; Xj is the total x-distance of quadrant j, Yj is the total
y-distance, and Aj is the total area; (xij , yij ) and (xc , yc ) are the coordinates of
the 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 presents
the element configurations of the screens. As Table 26 indicates, the rhythm
measure shows that the good version is better. In Fig. 13(a) rhythm is achieved
by variation of arrangement, dimension, number and form of the elements. The
elements in Fig. 13(b) constitute a chaotic, confusing, disorganized appearance.
RHM x is the extent to which rhythm is introduced through variation of
arrangement of the objects in the horizontal direction. It is the overall difference
between the x-distances of objects that appeared in different quadrants of the
70
D. C. L. Ngo et al.
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 of
the objects in the vertical direction. The RHM y values reflect a similar superiority
of Fig. 13(a) (0.003 for 13(a) and 0.608 for 13(b)). The value for Fig. 13(a) is 0.605
less than that for 13(b). RHM area is a measure of rhythm through variation of
dimension of the objects. It is the overall difference between the areas of objects
that 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). Substituting
each set of rhythm values into equation (50) yields the overall measures for the
two 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 a
layout. The opposite pole on the continuum is complexity. The scale created may
also be considered a scale of complexity, with extreme complexity at one end and
minimal complexity (order) at the other.
The general form of the measure is given by
OM = g{fi (Mi )} [0, 1]
with
{M1 , M2 , M3 , M4 , M5 , M6 , M7 , M8 , M9 , M10 , M11 , M12 , M13 }
(57)
= {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 measurable
criteria 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 proposed measure. Different measures may have different characteristic functions to
relate to the non-linearity of their parameters. fi ( ) is also determined by the
identified criteria (e.g., sizes, shapes) in the measurement equation. In large, fi ( )
aims to describe how each criterion in the proposed measures contributes to
the overall measure, namely OM . The function g{ } defines the way in which
each measure contributes to the OM computation; essentially, g{ } should be
an integrating function in a n-dimension space, where n depends upon the problem domain and is 13 in this paper. It also describes how OM behaves with
respect to accumulative or combination effects of all f( ), such as saturation and
immunization.
One easy way of interpreting equation (57) would be to convert the computed
values to z-scores, and then simply add them together. Birkhoff (1933) proposed
a 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
1 X
1X
i fi (Mi ) =
i Mi [0, 1],
m i
13 i
m
g{ } =
13
0 6 i 6 1
(59)
71
Fig. 14. For legend see next page.
72
D. C. L. Ngo et al.
Fig. 14. Output from the analysis program for a poorly designed screen.
Each esthetic measure Mi has its own weighing component i , which is assumed
to be a constant. (Determining weights is one of the multidimensional optimization problems that are application specific. A paper presenting a solution using
objective-based evolutionary programming is under review at the present time.)
Equation (59) is used to perform OM calculations in this paper, and all the
weighting components are set to 1, supposing that all these measures are equally
important.
4. Esthetic Measures in an Analysis Program

A program for measuring these 14 screen format characteristics was written in
the C programming language. The input to the program is a model example of
the 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 following
exercise is shown in Fig. 14, along with the output from the program. The
output 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.
73
74
D. C. L. Ngo et al.
Fig. 18. A regional map showing Oregon Employment Division kiosk locations.
Fig. 19. Title screen from Ebooks A Survey of Western Art.
Fig. 20. A screen by CRoM, Inc.
75

Layout
Width
Fig. 15
(319 221)
Object
1
2
3
4
5
80
80
168
168
6
53
128
53
128
5
70
70
70
70
306
Height
70
70
70
70
16
Fig. 16
(319 221)
1
2
3
4
6
6
32
200
5
25
150
25
306
140
88
112
16
112
52
177
Fig. 17
(320 240)
1
2
3
4
5
6
7
8
9
10
23
93
163
233
23
163
23
93
163
233
29
29
29
29
91
91
153
153
153
153
64
64
64
64
134
134
64
64
64
64
58
58
58
58
58
58
58
58
58
58
Fig. 18
(320 240)
1
2
3
4
94
0
94
94
2
104
50
218
220
84
226
176
44
136
160
22
Fig. 19
(641 437)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
159
224
289
353
418
159
224
289
353
418
159
224
289
353
418
81
81
81
81
81
169
169
169
169
169
256
256
256
256
256
62
62
62
62
62
62
62
62
62
62
62
62
62
62
62
86
86
86
86
86
86
86
86
86
86
86
86
86
86
86
Fig. 20
(640 480)
1
2
3
4
5
6
7
46
537
430
26
129
43
6
70
438
435
2
1
163
456
499
81
79
79
79
502
286
76
36
37
36
38
18
18
Having developed a program for measuring these characteristics of screen

formats, the next task was to determine how these characteristics actually relate
to 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 real
screens using our measures for comparison with viewers ratings of the layouts,
76
D. C. L. Ngo et al.
Table 28. Computation of esthetic value for six layouts

BM
EM
SYM
SQM
CM
UM
PM
SMM
DM
RM
ECM
HM
RHM
OM
Fig. 15
Fig. 16
Fig. 17
Fig. 18
Fig. 19
Fig. 20
0.87412
0.99368
0.66871
1.00000
0.71578
0.52435
0.89779
0.27273
0.69493
0.51250
0.50000
0.69444
0.66176
0.69314
0.63771
0.98150
0.57828
0.50000
0.74103
0.32515
0.83207
0.30000
0.72407
0.37500
0.25000
0.00463
0.54721
0.52282
0.99625
1.00000
0.99850
1.00000
0.80116
0.87668
0.86859
0.17647
0.82188
0.79722
0.50000
1.00000
0.99840
0.83347
0.64216
0.98134
0.44697
0.25000
0.72686
0.14543
0.79443
0.30000
0.40792
0.37500
0.25000
0.00714
0.46527
0.44558
0.89884
0.98488
0.74258
1.00000
0.71232
0.99050
0.88041
0.13043
0.57105
0.81310
1.00000
0.00340
0.73516
0.72790
0.35711
0.80272
0.45146
0.50000
0.67934
0.10784
0.73442
0.14286
0.41532
0.08333
0.14286
0.00001
0.45306
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 1520.
Table 27 presents the element configurations of the screens, and their esthetic
values, according to our formulae, are summarized in Table 28. All values are in
pixels. As indicated by the overall measure OM in Table 28, Figs 15, 17, and 19
are 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 from
Figs 16, 18, and 20. The former group of screens shows strong esthetic and
organizational qualities. Figures 15, 17, and 19 are esthetically balanced with
well-defined areas, multiple columns of graphics, and with white space that is
around the exterior screen margins. The other screens (16, 18, 20) show three
characteristics that are viewed negatively: they are fragmented (mean UM =
0.193), irregular (mean RM = 0.278), and intricate (mean ECM = 0.214). All the
screens (1520) 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. Subjects
were members of a variety of information technology classes and received credit
for participating in the study. Although subjects were members of information
technology classes, they were not familiar with screen design concepts. The six
design layouts on gray scale transparencies were displayed in a large classroom,
using an overhead screen projector. Each layout was displayed for about 20
seconds. During that time, participants rated each layout on a lowmediumhigh
scale regarding how beautiful it was. The median for the ratings was calculated
to show the relative esthetics of the six screens, according to the viewers (see
Table 29).
By and large, the relative ratings by the viewers are consistent with those
obtained using the proposed computational measures. Figures 15, 17, and 19
were rated higher than Figs 16, 18, and 20. To the viewers, the screens in the
latter group are much more open, plainer, and less interesting than those in
the former group. Figures 15, 17, and 19 present three layouts that have high
77
computed values and were rated high on esthetics by the viewers. Figure 20, the
lowest measured screen, was rated low. Figures 16 and 18 with moderate OM
were rated medium. A relatively high relationship was obtained between these
two 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 interface
esthetics. The results of our informal study have confirmed the effectiveness of
the model, but at the same time they have also suggested some improvements
to enhance its usability. We can increase scope to include the color, tone, and
shape of objects in balance, for example. A designer can control some elements
of composition to achieve balance. For instance, color is visually heavier than
black and white; big things are visually heavier than little things; black is
visually heavier than white; irregular shapes are visually heavier than regular
shapes. By controlling the color, size, tone, and shape of objects in a design,
one distributes the visual weight and thus influences balance. Much of the
descriptive work has already been done (Tjalve, 1979; Zelanski and Fisher, 1995;
Simpson, 1998). Second, a layout is in equilibrium when its center corresponds
approximately to the center of the frame. Practically speaking there are, however,
minor deviations from this definition. Owing to the visual gravitational pull, the
balancing center of the layout will lie somewhat higher than the center of the
frame, thereby compensating for the greater weight of the areas upper half. But
such discrepancies are small.
There are many interesting research topics involving the computation and
use of our formulae. First, experiments must be conducted to provide additional
empirical validation of the formulae and the conventions. It should be emphasized
that we have had to make two assumptions, namely, (1) that the interaction
between the selected characteristics is linear, and (2) that all these characteristics
are equally important. Future research should focus on investigating the interplay
between the selected characteristics, which, contrary to our original assertion,
may be non-linear. Additional research is also necessary to evaluate the effects
of different weighting strategies. (Weighting deals with the problem that we care
about some characteristics more than others.) Characteristics that are common
to the feeling which gives one an esthetic experience should not be limited to
the few more accordant ordering principles with appropriate design conventions
must be found if this approach is to be improved.
Acknowledgements. We thank the anonymous reviewers and the executive editor, Dr
Xindong Wu, for their thoughtful comments and suggestions. We also thank Mr Boon
Leong Law for his help in conducting the experiments and analyzing the data. The research
reported here was supported by IRPA grant 191/9636/0012.
References
Alexander C (1997) The nature of order. Oxford University Press, New York
Arnheim R (1954) Art and visual perception. University of California Press, Berkeley, CA
Aspillage M (1991) Screen design: a location of information and its effects on learning. Journal of
Computer-Based Instruction 18(3): 8992
78
D. C. L. Ngo et al.
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, WI
Birkhoff GD (1933) Aesthetic measure. Harvard University Press, Cambridge, MA
Bonsiepe G (1968) A method of quantifying order in typographic design. Journal of Typographic
Research 2: 203220
Dondis DA (1973) A primer of visual literacy. MIT Press, Cambridge, MA
Eysenk HJ (1941) The empirical determination of an aesthetic formula. Psychological Review 48:
8392
Feiner S (1991) An architecture for knowledge-based graphical interfaces. In Sullivan JW, Tyler SW
(eds). Intelligent user interfaces. ACM Press, New York, pp 259279
Foley JD, van Dam A, Feiner SK, Hughes JF (1990) Computer graphics: principles and practice (2nd
edn). Addison-Wesley, Reading, MA
Galitz WO (1993) User interface screen design. QED, Boston, MA
Galitz WO (1994) Its time to clean your windows: designing GUIs that work. WileyQED, New
York
Galitz WO (1997) The essential guide to user interface design. Wiley, New York
Grabinger RS (1991) Computer screen designs: viewer judgements. Educational Technology Research
and Development 41(2): 3573
Hambidge J (1919) The Greek vase. Yale University Press, New Haven, CT
Hambidge J (1968) Dynamic symmetry. Dover Press, Mineola, NY
Hollan J, Hutchins E, McCandless T, Rosenstein M, Weitzman L (1987) Graphical interfaces for
simulation. Advances in ManMachine Systems Research 3: 129163.
Iwamiya T, Takaoka K (2000) Katachi: the essence of Japanese design. Chronicle Books, San
Francisco, CA
Johnson DH, Hartson HR, Ehrich RW, Roach JW, Reilly SS, Siochi AC, Tatem JE (1986) The
dialogue author, In Ehrich RW, Williges RC (eds). Humancomputer dialogue design. Elsevier
Science, Amsterdam, pp 109163
Kurosu M, Kashimura K (1995) Apparent usability vs. inherent usability. In Companion of the
annual ACM SIGCHI conference on human factors in computing systems (CHI 95). ACM Press,
New York, pp 292293
Mackinlay J (1986) Automatic design of graphical presentations. PhD dissertation, Stanford University, Stanford, CA
Maniere AT (1992) Aesthetics, mind, nature. Praeger Press, New York
Maquet J (1986) The aesthetic experience. Yale University Press, New Haven, CT
Marcus A (1992) Graphic design for electronic documents and user interfaces. ACM Press, New York
Meier 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 117128
Mosier JN, Smith SL (1995) Application of guidelines for designing user interface software. In Perlman
G, Green GK, Wogalter MS (eds). Human factors perspectives on humancomputer interaction:
selections from Proceedings of Human Factors and Ergonomics Society annual meetings, 1983
1994. HFES, Santa Monica, CA, pp 3437
Mullet K, Sano D (1995) Designing visual interfaces: communication oriented techniques. SunSoft
Press, Mountain View, CA
Ngo DCL (1994) VISIT: visitor information system implementation tool. PhD dissertation, Trinity
College Dublin, Ireland
Ngo DCL, Byrne JG (1998) Aesthetic measures for screen design. In Calder P, Thomas B (eds). Proceedings of the Australian computer human interaction conference (OzCHI 98). IEEE Computer
Society, Los Alamitos, CA, pp 6471
Ngo DCL, Samsudin A, Abdullah R (2000) Aesthetic measures for assessing graphic screens. Journal
of Information Science and Engineering 16(1): 97116
Norman DA (1990) The design of everyday things. Doubleday, New York
Reilly SS, Roach JW (1984) Improved visual design for graphics display. IEEE Computer Graphics
and Applications 4(2): 4251
Reilly SS, Roach JW (1986) Designing human/computer interfaces: a comparison of human factors
and graphic arts principles. Educational Technology 26(1): 3640
Shneiderman B (1998) Designing the user interface: strategies for effective humancomputer interaction (3rd edn). Addison-Wesley, Reading, MA
Simpson JW (1998) Creating meaning through art. Prentice-Hall, Englewood Cliffs, NJ
Streveler 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 humancomputer
interaction (INTERACT 84). North-Holland, Amsterdam, pp 8189
79
Tjalve E (1979) A short course in industrial design. Newne-Butterworths, Boston, MA

Toh SC (1998) Cognitive and motivational effects of two multimedia simulation presentation modes
on science learning. PhD dissertation, University of Science Malaysia, Malaysia
Tractinsky N (1997) Aesthetics and apparent usability: empirically assessing cultural and methodological issues. In Pemberton S (ed). Proceedings of the annual ACM SIGCHI conference on
human factors in computing systems (CHI 97). ACM Press, New York, pp 115122
Tufte ER (1983) The visual display of quantitative information. Graphics Press, Cheshire, CT
Tufte ER (1990) Envisioning information. Graphics Press, Cheshire, CT
Tufte ER (1996) Visual explanations: images and quantitative, evidence and narrative. Graphics Press,
Cheshire, CT
Tullis TS (1984) Predicting the usability of alphanumeric displays. PhD dissertation, Rice University,
Houston, TX
Tullis TS (1988) Screen design. In Helander M (ed). Handbook of humancomputer interaction.
Elsevier Science, Amsterdam, pp 377411
Weitzman L (1986) Designer: a knowledge-based graphic design assistant. Technical report, ICS
Report 8609, University of California, San Diego, CA
Zelanski 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 BAI
degree in Microelectronics and Electrical Engineering in 1990 and a PhD
degree in Computer Science in 1995, both from Trinity College Dublin,
Ireland. He is a Senior Lecturer and Associate Dean of the Faculty of
Information Technology at Multimedia University, Malaysia. At the same
university, he is Chairman of the Center for Multimedia Computing. He
is a Member of Inspire Groups Board of Directors and Advisory Board.
He serves as a Technical Assessment Consultant at the Ministry of Science,
Technology and Environment, Multimedia Development Corporation, and
MSC Venture Corporation. He is an Honorary Consultant of the School
of Information Technology at Han Chiang College. He is Co-Chairman of
the 1997 National Conference on Research and Development in Computer
Science and its Applications (REDECS 97). He has published more than 40 papers in scientific
journals and international conferences. His current research interests center on esthetic measures
for screen design, automatic screen design, proportioning systems in screen design, and educational
hypermedia.
Teo Lian Seng received the degree of Bachelor of Electrical Engineering with
first class honors from Universiti Teknologi Malaysia. After that, he completed his PhD research in artificial intelligence from the same university.
Currently, he holds a position as Head of Department of Information Technology in New Era College, Malaysia. His research focuses are on applied
artificial intelligence techniques in information technology and engineering
related 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 published
numerous papers in leading journals and major conferences and has received substantial grants from
a variety of agencies. His current research interests include document image processing and applied
numerical methods.
Correspondence and offprint requests to: David Chek Ling Ngo, Faculty of Information Technology,
Multimedia University, 63100 Cyberjaya, Malaysia. Email: david.ngo@mmu.edu.my

Evaluating Interface Esthetics

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Evaluating Interface Esthetics

Uploaded by

Copyright:

Available Formats

Knowledge and Information Systems (2002) 4: 4679

Ownership and Copyright