International Journal of Human-Computer Studies
Computational models and experimental investigations of effects of balance and symmetry on the aesthetics of text-overlaid images
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)
- et al.
Computational modeling and experimental investigation of effects of compositional elements on interface and design aesthetics
International Journal of Human-Computer Studies
(2006) - et al.
Design aesthetics leading to m-loyalty in mobile commerce
Information and Management
(2006) - et al.
What is this evasive beast we call user satisfaction?
Interacting with Computers
(2003) - et al.
Website design: viewing the web as a cognitive landscape
Journal of Business Research
(2004) - et al.
Evaluating the consistency of immediate aesthetic perceptions of web pages
International Journal of Human-Computer Studies
(2006) - et al.
What is beautiful is usable
Interacting with Computers
(2000) Factors influencing the usage of websites: the case of a generic portal in the Netherlands
Information and Management
(2003)Art and Visual Perception
(1974)The Power of the Center
(1988)- et al.
Effects of symmetry and grouping on interface and design aesthetics
International Journal of Human-Computer Interaction
(2008)