An important aspect of screen design is aesthetic evaluation of screen layouts. 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. This article proposes a theoretical approach to capture the essence of artists' insights with fourteen aesthetic measures for graphic displays. The formalized measures include balance, equilibrium, symmetry, sequence, cohesion, unity, proportion, simplicity, density, regularity, economy, homogeneity, rhythm, and order and complexity. The paper concludes with some thoughts on the direction which future research should take.

Keywords: Screen design, interface aesthetics, aesthetic measures, aesthetic characteristics, multi-screen interfaces

1. Introduction

The role of aesthetics in human affairs has been widely documented [1]. Certainly, it is related to our appreciation of computer systems as well. However, some [2; 3] warn against a tendency among designers to emphasize the aesthetic elements of the user interface, because these might degrade usability. In fact, interface aesthetics play a greater role in affecting system usability and acceptability than we might be willing to admit. Careful application of aesthetic concepts can aid:

• Acceptability. Two recent studies [4; 5] show that very high correlations were found between users' perceptions of interface aesthetics and usability. 
• Motivation. Toh [6] found that aesthetically pleasing layouts have a definite effect on the student's motivation to learn based on the ARCS model [14].
• Learnability. Aspillage [7] founded that good graphic design and attractive displays help contribute to the transfer of information.
• Comprehensibility. Tullis [8] found that redesigning a key display from a system for testing telephone lines resulted in a 40% reduction in the time required by the users to interpret the display. In a study of 500 displays, Tullis [9] found that the time it took users to extract information from displays of airline or lodging information was 128% longer for the worst format than for the best.
• Productivity. Keister and Gallaway [10] found that redesigning a series of screens resulted in a 25% reduction in total processing time and a 25% reduction in error rates. 

There are four basic ways to use windows [16].

• Multi-window interfaces: Examples are the IBM OS/2 operating system, most UNIX X-windows applications, and now Microsoft Windows 98
• Multi-document interfaces: For example, Microsoft Word or Excel
• Multi-pane interfaces: Microsoft Paint and Netscape Navigator are examples
• Multi-screen interfaces: Mostly found in One-time GUIs and wizards, and multimedia applications.

2. Aesthetic Measures

Many noteworthy texts discuss theories of design in both fine and commercial art. Arnheim [17] and Dondis [18] are good examples. From the literature on screen design, Galitz’s book on design and layout, The Essential Guide to User Interface Design [19], presents an extensive list of very specific guidelines for the design of screens. This article relies heavily on this and other similar works [20] to help demonstrate our approach. Observe that the range of the following measures is between 0 (worst) and 1 (best).

2.1. Measure of Balance

Balance, illustrated in Figure 1, 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. Dark colours, unusual shapes, and larger objects are heavier, whereas light colours, regular shapes, and 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

(1)

BM_vertical and BM_horizontal are, respectively, the vertical and horizontal balances with

(2)

(3)

with

(4)

a_max is the area of the largest object on the frame with

(5)

where L, R, T, and B stand for left, right, top, and bottom, respectively; a_ij, c_ij, and s_ij are, respectively, the area, colour, and shape of object i on side j; d_ij is the distance between the central lines of the object and the frame; and n_j is the total number of objects on the side. Each colour is given a weighting between 0 (white) and 1 (black). In Addendum A, we describe a measure for describing shapes given by Birkhoff [21].

2.2. Measure of Equilibrium

Equilibrium is a stabilisation, a midway centre of suspension. Equilibrium on a screen is accomplished through centring the layout itself. The centre of the layout coincides with that of the frame. (There are minor deviations from this definition, which we discuss in Section 3.)

Equilibrium is computed as the difference between the centre of mass of the displayed elements and the physical centre of the screen and is given by

(6)

The equilibrium components along the x-axis (EM_x) and y-axis (EM_y) are given by

(7)

(8)

where (x_i,y_i) and (x_c,y_c) are the co-ordinates of the centres of object i and the frame; a_i is the area of the object; b_frame and h_frame are the width and height of the frame; and n is the number of objects on the frame. (Note that the maximum values of |x_i-x_c| and |y_i-y_c| are b_frame/2 and h_frame/2.)

2.3. Measure of Symmetry

Symmetry is axial duplication: A unit on one side of the centre 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

(9)

SYM_vertical, SYM_horizontal, and SYM_radial are, respectively, the vertical, horizontal, and radial symmetries with

(10)

(11)

(12)

where X¢_j, Y¢_j, H¢_j, B¢_j, Q¢_j, and R¢_j are, respectively, the normalised values of X_j, Y_j, H_j, B_j, Q_j, and R_j with

(13)

(14)

(15)

(16)

(17)

(18)

where UL, UR, LL, and LR stand for upper-left, upper-right, lower-left, and lower-right, respectively; (x_ij,y_ij) and (x_c,y_c) are the co-ordinates of the centres of object i on quadrant j and the frame; b_ij and h_ij are the width and height of the object; and n_j is the total number of objects on the quadrant. 

2.4. Measure of Sequence

Sequence, illustrated in Figure 2, 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 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, from bright colours to subdued colours, from colour to black and white, and from irregular shapes to regular shapes. 

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

(19)

with

(20)

(21)

with

(22)

(23)

(24)

(25)

where UL, UR, LL, and LR stand for upper-left, upper-right, lower-left, and lower-right, respectively; A, C, and S stand for size, colour, and shape, respectively; and a_ij, c_ij, and s_ij are, respectively, the area, colour, and shape of object i on quadrant j. The colour range is between 0 (white) and 1 (black). s_ij is calculated as explained in Addendum A. Each quadrant is given a weighting in q. 

2.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

(26)

CM_fl is a relative measure of the ratios of the layout and screen with

(27)

and CM_lo is a relative measure of the ratios of the objects and layout with

(28)

with

(29)

(30)

with

(31)

where b_i and h_i, b_layout and h_layout, and b_frame and h_frame are the widths and heights of object i, the layout, and the frame, respectively; and n is the number of objects on the frame.

2.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 is achieved by using similar sizes, shapes, or colours for related information 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

(32)

UM_form is the extent to which the objects are related in size, shape, and colour with

(33)

and UM_space is a relative measure of the space between groups and that of the margins with

(34)

where a_i, a_layout, and a_frame are the areas of object i, the layout, and the frame, respectively; n_size, n_colour, and n_shape are the numbers of sizes, colours, and shapes used, respectively; and n is the number of objects on the frame.

2.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 [3] describes the following shapes as aesthetically 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)

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

(35)

PM_object is the difference between the proportions of the objects and the closest proportional shapes described by Marcus with

(36)

and PM_layout is the difference between the proportions of the layout and the closest proportional shape with

(37)

with

(38)

(39)

(40)

with

(41)

(42)

where b_i and h_i are the width and height of object i; b_layout and h_layout are the width and height of the layout; and p_j is the proportion of shape j. (Note that the maximum value of (p_j-r_layout) is 0.5.)

2.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 optimising the number of elements on a screen and minimising the alignment points. Tullis [9] has derived a measure of screen complexity for text-based screens based on the work of Bonsiepe [22], 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

(43)

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

2.9. Measure of Density

Density is the extent to which the screen is covered with objects. Density is achieved by minimising screen density levels. A measure of density, derived by Tullis, is the percentage of character positions on the entire frame containing data.

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

(44)

where a_i and a_frame are the areas of object i and the frame; and n is the number of objects on the frame.

2.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 minimising the alignment points.

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

(45)

RM_alignment is the extent to which the alignment points are minimised with

(46)

and RM_spacing is the extent to which the alignment points are consistently spaced with

(47)

where n_vap and n_hap are the numbers of vertical and horizontal alignment points; n_spacing is the number of distinct distances between column and row starting points; and n is the number of objects on the frame.

2.11. Measure of Economy

Economy, illustrated in Figure 3, is the careful and discreet use of display elements to get the message across as simple as possible. Economy is achieved by using as few styles, displays techniques, and colours as possible.

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

(48)

where n_size, n_colour, and n_shape are the numbers of sizes, colours, and shapes used, respectively.

2.12. Measure of Homogeneity

Entropy was developed in physics in the 19th 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 the following

(49)

where S is the entropy of the screen, k is a constant, known as Boltzmann's 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.

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

(50)

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

(51)

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

(52)

where n_UL, n_UR, n_LL, and n_LR 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.

2.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

(53)

The rhythm components are

(54)

(55)

(56)

where X¢_j, Y¢_j, and A¢_j are, respectively, the normalised values of X_j, Y_j, and A_j with

(57)

(58)

(59)

where UL, UR, LL, and LR stand for upper-left, upper-right, lower-left, and lower-right, respectively; (x_ij,y_ij) and (x_c,y_c) are the co-ordinates of the centres of object i on quadrant j and the frame; a_ij is the area of the object; and n_j is the total number of objects on the quadrant. 

2.14. Measure of Order and Complexity

The measure of order is written as the sum 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 linear summation of the weighted measures designated by OM is given by

(60)

with

(61)

where BM is given by (1), EM by (6), SYM by (9), SQM by (19), CM by (26), UM by (32), PM by (35), SMM by (43), DM by (44), RM by (45), ECM by (48), HM by (50) and RHM by (53). The weighing component a is assumed to be a constant. Aesthetic measure M_i has its own weighing component a_i. Choosing weights is one of the optimisation problems that can be addressed with techniques like genetic algorithms. 

3. Conclusions and Future Work

In this article, we have presented a computational theory of evaluating interface aesthetics. We have introduced fourteen aesthetic measures: balance, equilibrium, symmetry, sequence, cohesion, unity, proportion, simplicity, density, regularity, economy, homogeneity, rhythm, and order and complexity. We have demonstrated that aesthetics can be measured objectively for multi-screen interfaces. With some modification, the techniques presented can also be used for other screen types. 

The study described here has suggested some improvements to enhance their usability. A layout is in equilibrium when its centre corresponds approximately to the centre of the frame. Practically speaking, there are however, minor deviations from this definition. Owing to the visual gravitational pull, the balancing centre of the layout will lie somewhat higher than the centre of the frame, thereby compensating for the greater weight of the area's upper half. But such discrepancies are small. 

The formulae outlined in this paper are under continuous review and development. Characteristics that are common to the feeling which gives one an aesthetic 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

The research reported here was supported by IRPA grant 191/9636/0012.

Addendum A: Birkhoff’s Aesthetic Measure

This addendum describes a specific method for describing polygons (shapes) given by Birkhoff [21] by the formula

(62)

with the following definitions.

The complexity C of a polygon is defined as the number of distinct straight lines containing at least one side of the polygon. 

V is a measure of vertical symmetry. V is 1 or 0 according as the polygon is or is not symmetric about a vertical axis.

E is a measure of equilibrium. E is 1 whenever V is 1. E is also 1 if the centre of area K is situated directly above a point D within a horizontal line segment AB supporting the polygon from below in such wise that the lengths AD and BD are both more than 1/6 of the total horizontal breadth of the polygon. E is 0 in any other case when K lies above a point of AB, even if A and B coincide. E is -1 in the remaining cases.

R is a measure of rotational symmetry. R is the smaller of the numbers q/2 and 3 (where 360° /q is the least angle of rotation which rotates the polygon into itself) in the case of rotational symmetry, provided that the polygon has vertical symmetry or else that the minimum enclosing convex polygon has vertical symmetry and that the niches of the given polygon do not abut on the vertices of the enclosing polygon. R is 1 in any other case when q is even (i.e., if there is a central symmetry). R is 0 in the remaining cases.

HV is a measure of the relation of the polygon to a horizontal-vertical network. HV is 2 only when the sides of the polygon lie upon the lines of a uniform horizontal-vertical network, and occupy all the lines of a rectangular portion of the network. HV is 1 if these conditions are satisfied, with one or both of the following exceptions: one line and the others of this type may fall along diagonals of the rectangular portion or of adjoining rectangles of the network; one vertical line and one horizontal line of the portion, and the others of the same type, may not be occupied by a side. At least two vertical and two horizontal lines must be filled by the sides however. HV is also 1 when the sides of the polygon lie upon the lines of a uniform network of two sets of parallel lines equally inclined to the vertical, and occupy all the lines of a diamond-shaped portion of the network, with the following possible exceptions: at most one line and the others of the same type may fall along diagonals of the diamond-shaped portion or of the adjoining diamonds of the network; one line of the diamond-shaped portion and the others of its type may not be occupied by a side. At least two lines of either set of parallel lines in the network must, however, be occupied by the sides. HV is 0 in all other cases.

F is a general negative factor. F is 0 if the following conditions are satisfied: the minimum distance from any vertex to any other vertex or side or between parallel sides is at least 1/10 the maximum distance between points of the polygon; the angle between two non-parallel sides is not less than 20° ; no shift of the vertices by less than 1/10 of the distance to the nearest vertex can introduce a new element or order V, R, or HV; there is no unsupported reentrant side; there is at most one type of niche and two types of directions, provided that vertical and horizontal directions are counted together as one; V and R are not both 0. F is 1 if these conditions are fulfilled with one exception and one only. F is 2 in all other cases.

Using the above conventions, it can be shown that the normalised value of Eq. (62) is

(63)

References

1. Maquet J., The Aesthetic Experience, Yale University Press, New Haven, CT, 1986.
2. Foley J. D., van Dam A., Feiner S. K. and Hughes J. F., Computer Graphics: Principles and Practice, 2^nd ed., Addison-Wesley, Reading, MA, 1990.
3. Marcus A., Graphic Design for Electronic Documents and User Interfaces, ACM Press, New York, 1992.
4. Tractinsky N., Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues, in: CHI '97 Conference Proceedings, Association for Computing Machinery, New York, 1997.
5. Kurosu M. and Kashimura K., Apparent Usability vs. Inherent Usability, in: CHI '95 Conference Companion, Association for Computing Machinery, New York, 1995.
6. Toh S. C., Cognitive and Motivational Effects of Two Multimedia Simulation Presentation Modes on Science Learning, Ph.D. Dissertation, University of Science Malaysia, Malaysia, 1998.
7. Aspillaga M., Screen Design: A Location of Information and Its Effects on Learning, Journal of Computer-Based Instruction 18(3) (1991) 89-92.
8. Tullis T. S., An Evaluation of Alphanumeric, Graphic, and Colour Information Displays, Human Factors 23 (1981) 541-550.
9. Tullis T. S., Predicting the Usability of Alphanumeric Displays, Ph.D. Dissertation, Rice University, Kansas, 1984.
10. Keister R. S. and Gallaway G. R., Making Software User Friendly: An Assessment of Data Entry Performance, in: HFS 27^th Annual Meeting Proceedings,  Human Factors Society, Santa Monica, CA, 1983.
11. Tullis T. S., Screen Design, in: Helander M, ed., Handbook of Human-Computer Interaction, Elsevier Science Publishers, Amsterdam, The Netherlands, 1988,  377-411.
12. Streveler D. J. and Wasserman A. I., Quantitative Measures of the Spatial Properties of Screen Designs, in: INTERACT '84 Conference Proceedings, North Holland, Amsterdam, 1984.
13. Sears A., Layout Appropriateness: Guiding User Interface Design with Simple Task Descriptions, IEEE Transactions on Software Engineering 19(7) (1993) 707-719.
14. Ngo D. C. L., Visit: Visitor Information System Implementation Tool, Ph.D. Dissertation, Trinity College, Dublin, 1994.
15. Ngo D. C. L. and Byrne J. G., Aesthetic Measures for Screen Design, in: OZCHI ’98 Conference Proceedings,  IEEE Computer Society, Los Alamitos, CA, 1998.
16. Arlov L., GUI Design for Dummies,  IDG Books Worldwide, Inc., Foster City, CA, 1997.
17. Arnheim R., Art and Visual Perception,  University of California Press, Berkeley, CA, 1954.
18. Dondis D. A., A Primer of Visual Literacy,  The MIT Press, Cambridge, MA, 1973.
19. Galitz W. O., The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, John Wiley & Sons, Inc., New York, 1997.
20. Reilly S. S. and Roach J W, Improved Visual Design for Graphics Display, CG & A, February (1984) 42-51.
21. Birkhoff G. D., Aesthetic Measure, Harvard University Press, Cambridge, MA., 1933.
22. Bonsiepe G., A Method of Quantifying Order in Typographic Design, Journal of Typographic Research 2 (1968) 203-220.