Computational models and experimental investigations of effects of balance and symmetry on the aesthetics of text-overlaid images

https://doi.org/10.1016/j.ijhcs.2009.08.008Get rights and content

Abstract

This article describes computational models based on principles of visual weights to compute the symmetry and balance of text-overlaid images. Two experiments were conducted to investigate the effects of symmetry and balance on the aesthetic appeal of text-overlaid images. In the first experiment, five color photos were used to compose a set of test images overlaid with a paragraph of Chinese texts as the stimuli. Contrastly, the second experiment applied monochrome photos to compute the stimuli. The positions of the text overlay were determined by varying the balance and symmetry in order to validate computational aesthetic quantification algorithms with subjective ratings. The stimuli were rated by 20 subjects in each experiment using the ratio-scale magnitude estimation method against a benchmark image for each photo. Results from both experiments show that subjects are adept at judging symmetry and balance in both the horizontal and vertical directions. Subjects are also adept at judging radial symmetry about the center point of an image. The experiments also established a relationship between a higher averaged visual balance and the aesthetic appeal of text-overlaid images. Symmetry in either direction, however, did not result in any proportional relations to the aesthetic appeal.

Introduction

Aesthetics has conventionally played a significant role in commercial product developments, marketing strategies, retail environments, and so on (Green and Jordan, 2001; Kotler and Rath, 1984; Russell and Pratt, 1980; Whitney, 1988). In the field of human–computer interactions (HCI), traditional researchers, to evaluate the performance of the interfaces of computer systems, have often emphasized objective performance criteria like time to learn, error rate, and time to complete a task (Butler, 1996). Increasingly, researchers and practitioners have begun to emphasize considerations of aesthetics in interface design and to investigate its impact on the overall experiences of users when interacting with a computer system (Liu, 2003a, Liu, 2003b). Evidence in support of the importance of aesthetics in various aspects of computing has emerged recently. For example, recent empirical studies suggested that the aesthetic aspect of various computing systems serves an important role in shaping user attitudes in general (e.g., Hassenzahl, 2004; Karvonen, 2000; Lindgaard and Dudek, 2002a, Lindgaard and Dudek, 2002b, Lindgaard and Dudek, 2003; Tractinsky, 1997; Tractinsky et al., 2000). It was found that subjective evaluations of usability and aesthetics are correlated depending on the user’s background, goal, task, and application type (Ben-Bassat et al., 2006; De Angeli et al., 2006; Hartmann et al., 2007; Schmidt, et al., 2009). In the context of multimedia web page design, aesthetics was also found to be an important determinant of user preferences of the sites. For example, Bauerly and Liu, 2006, Bauerly and Liu, 2008a, Bauerly and Liu, 2008b investigated the effects of web page compositions on user preferences and the value of interactive genetic algorithms (IGAs) in representing the process of change in user preference of web pages. Schenkman and Jonsson (2000) found that beauty was a primary predictor of overall impression and preferences of web sites, while van der Heijden (2003) linked perceived attractiveness of a website to the usefulness, ease of use, and enjoyment perceived by users. Research has also suggested a relationship between aesthetics and e-trust or m-loyalty in E-commerce (Cyr et al., 2006; Karvonen, 2000). Indeed, the sensory experience of a website may often determine whether a user stays and shops (Jiang and Benbasat, 2003; Rosen and Purinton, 2004). Overall, these previous studies illustrate the complexity and intricacy of the issues involved with respect to the effect of aesthetics in visual interfaces of general information systems. Although the exact mechanisms that link the affective and cognitive evaluations of the visual interfaces are not yet clear, it is certain that aesthetics has played a non-negligible role in general visual interface designs for computer systems.

The type of visual interface addressed in this study is the “text-overlaid image”, which usually consists of a large-size “background image” with a small number of texts overlaid on it (refer to Fig. 2 for an example). An example application is an online greeting card (or postcard) service that dynamically positions user-input texts over a selected background image. In such applications, there is a need to automatically overlay the texts on the pictorial image because the image and texts are generally randomly selected and composed together on-the-fly. Existing services of this kind provide only a small number of style templates upon which the user’s message is positioned at a pre-determined location on the background image. Another example is the dynamic text formatting used in PowerPoint-like slide presentations. When a user switches a background image for the slides, it is preferred that the layout of the texts in a slide can be automatically reorganized according to the selected background image. Applications using this kind of interface typically are graphic-intensive multimedia applications that attempt to use the background images to generate appropriate affects. To consider the overall aesthetics of the final presentation, there is a need for appropriate tools to measure aesthetics with which the dynamically composed images can be created. To address this issue, this study was designed to develop a quantitative metrics of perceived aesthetics of text-overlaid images. Such metrics of aesthetics can be potentially applied in an optimization engine that helps to dynamically compose multimedia presentations on-the-fly, based on optimization algorithms that maximize the objective functions of aesthetics.

Research on visual interfaces with aesthetic considerations has traditionally defined visual aesthetics using various qualitative design principles. For example, Reiser and Reiser (1995) created a list of aesthetic considerations specific to multimedia presentations but without knowing quantitatively where an optimal design space exists. Indeed, there have been only a small number of studies that aimed to develop computation models for the aesthetics of visual interfaces. Ngo et al. (2000) developed computation models quantifying various page layout design principles including balance, symmetry, density, and so on, but as yet there are no concrete experimental evaluations to verify these proposed computation models. Bauerly and Liu (2006) proposed computation models of symmetry and balance. Evaluation experiments conducted showed that symmetry is closely related to the aesthetic appeal of pages with abstract black image blocks. Contrarily, the number of image blocks was shown to be the main composition element related to the aesthetic appeal of pages with realistic images.

Overall, previous studies aiming to develop computation models of visual aesthetics of layout designs focused on pages composed of large chunk of texts interlaced with a small number of relatively small-sized images. This study, in contrast, considers pages where small amounts of text are to be overlaid upon large-sized color background images. Previous computation models of aesthetics are not applicable in such a context mainly because they do not consider the color information for objects in a page. Studies by Bauerly and Liu (2006) and Ngo et al. (2000) considered each image inside the page as a “black” rectangular block when computing balance and symmetry. We intend to place texts upon color images and thus the color information of each pixel should be considered when computing balance or symmetry. For example, a pixel with a large color contrast to the background region generally appears “visually heavier” than one with a lower color contrast. In addition, previous studies considered texts regions as “white-spaces” and thus balance and symmetry are based totally upon the pictorial images. This is not the case for applications of text-overlaid images where the fonts are, in general, relatively large and thus the texts are perceptually quite different from other bitmap pixels. Therefore, the pixels of the texts should be counted when computing balance and symmetry. As described in Section 2, our model considers each character of text as a rectangular color block with dimensions equal to that of the character.

Our research goal is to develop computational models to measure the overall aesthetics of text-overlaid images. This is done in a quantitative manner through the development and validation of numerical quantifications of essential composition elements for text-overlaid images. As the first step towards this long-term goal, in line with research by Bauerly and Liu (2006), this study mainly concerns two very important composition elements, symmetry and balance, that we believe play the major roles in the visual aesthetics of text-overlaid images. In this study, these two basic compositional attributes are quantified on individual scales. In the following sections, we first describe the computation models for balance and symmetry based on pixelated and segmented images. Experiments to verify the proposed computation models are described. We also investigate the relationships between the visual appeal of text-overlaid images with the computed values of balance and symmetry. Conclusions and future work are then addressed.

Section snippets

Image quantification methods

The algorithms for computing balance and symmetry were designed in an attempt to mimic the human cognitive representations of the attributes of symmetry and balance. In the following we describe essential principles for developing these models that are based mainly on the concept of “visual weight”. Arnheim, 1974, Arnheim, 1988 described a formally balanced composition as a perceptual phenomena based on balancing the visual weight of objects in a page. Several major factors such as size,

Experiment 1 – color images

Experiment 1 was conducted to determine whether the proposed computational metrics of symmetry and balance can reflect the human subject ratings of those attributes, and to determine whether there is a relationship between the computational metrics and subject ratings of aesthetic appeal of color text-overlaid images. Realistic color photos overlaid with a paragraph of shadowed Chinese texts were shown to human subjects. Numerical values representing symmetry and balance were computed based on

Experiment 2 – monochrome images

The main purpose here is to verify the generality of the results investigated in Experiment 1. In contrast to Experiment 1, in which color photos were used to compose text-overlaid images as stimuli, Experiment 2 applied monochrome photos for composing the images. We first changed the color scheme of each of five color photos applied in Experiment 1 to monochrome. The proposed segmentation-based approach described above was then applied to detect the background region of each of the monochrome

Conclusions

Fairly little work has been done that would allow us to build a complete computational model of what it means for an image to be aesthetically composed. The central purpose of this study was to create methods to quantitatively analyze the aesthetics of a text-overlaid image such that a best position for overlaying the texts on a background image can be obtained automatically. Computational models for symmetry (horizontal, vertical, and radial) and balance (horizontal and vertical) were

References (35)

  • M. Bauerly et al.

    Evaluation and improvement of interface aesthetics with an interactive genetic algorithm (IGA)

    International Journal of Human-Computer Interaction

    (2008)
  • T. Ben-Bassat et al.

    Economic and subjective measures of the perceived value of aesthetics and usability

    ACM Transactions on Computer-Human Interaction

    (2006)
  • K.A. Butler

    Usability engineering turns 10

    Interactions

    (1996)
  • Comaniciu, D., Meer, P., 1997. Robust analysis of feature spaces: color image segmentation. In: Proceedings of the IEEE...
  • De Angeli, A., Sutcliffe, A., Hartmann, J., 2006. Interaction, usability and aesthetics: what influences users’...
  • W.S. Green et al.

    Pleasure with Products: Beyond Usability

    (2001)
  • R.H. Hall et al.

    The impact of web page text-background colour combinations on readability, retention, aesthetics, and behavioral intention

    Behaviour & Information Technology

    (2004)
  • Cited by (0)

    View full text