Interaction in modern human-computer interfaces is most intuitively initiated in an image-based way. Often images are the key components of an interface. However, too frequently, interfaces are still designed by computer scientists with no explicit education in the aesthetic design of interfaces and images. This article develops a well-defined system of criteria for the aesthetic design of images, motivated by principles of visual information processing by the human brain and by considerations of the visual arts. This theoretic disquisition establishes a framework for the evaluation of images in terms of aesthetics and it serves as a guideline for interface designers by giving them a collection of criteria at hand; how to deal with images in terms of aesthetics for the purpose of developing better user interfaces. The proposed criteria are exemplified by an analysis of the images of the web interfaces of four well known museums.
Top1. Introduction
Images are often the key components of user interfaces. Examples of such interfaces from several applications of augmented reality (i.e., geovisualization, navigation, maintenance, museum guides, etc.) are shown in Figures 1 and 2. Figure 1 shows an image of the environment which is augmented by data indicating a possible path for a boat.
Figure 1. Images as key components of user interfaces: navigation (Adapted from WisdomTools LLC, 2009)
Figure 2. Images as key components of user interfaces: maintenance (Adapted from Ecole Polytechnique Federale de Lausanne, Automatic Control Laboratory, 2011)
One could be of the opinion that such a real-time navigation system has to show “just the image the camera captures”. But the interface designer has to decide for the specification of numerous variables that determine how the captured image is presented in the user interface. To name but a few, she has to choose color space, contrast, dynamic range, spatial arrangement of the image components (e.g., the position of the horizon), depth of field, and focal length. Figure 2 shows an example for maintenance instructions for an engine. The previous statements hold true for this example, as well. Even in a case where some parameters of an image are user-controlled - as is the case for the maintenance example, where the viewing direction is user-controlled – the interface designer still has to control other image parameters (such as the color space or the dynamic range in this example). There are still voices claiming that images in augmented reality applications are “literal depictions of the real-world scene”. However, there is no such thing as a “literal depiction of the real-world”. It simply does not exist, because every image (independent of whether it was generated by a human or by a technical device) can depict only a part and only a particular view or perspective of the real-world. Among the many parameters that determine the appearance of an image are those mentioned earlier (contrast, depth of field, etc.). For a concrete image these parameters have concrete, determined values. The choice of these values is in the responsibility either of the human who generates the image or (in the case of augmented reality applications) in the responsibility of the designer of the computer system which generates the image, and this choice should be a conscious and well-considered decision rather than being left to chance.
Topics such as the importance of aesthetic qualities of graphical elements of user interfaces (Tufte, 1990), the aesthetics of interaction (Norman, 2002), or the aesthetics of websites in particular (Lavie & Tractinsky, 2004) have frequently been addressed. There are also early publications on aesthetics in general, even in the context with mathematics (Birkhoff, 1933), (Bense, 1965). What is underrepresented in the literature is the role of image aesthetics in interfaces. This paper is an attempt to fill this gap. The roles of images in human-computer interaction are manifold. Stone et al. (2005) name four main benefits. Images motivate and attract the attention of the user and have the function to persuade her. They communicate information, which is often exploited in computer-based learning. Furthermore, they have the great power to overcome language barriers, and last but not least they support interaction. Images are especially powerful whenever it is difficult to describe the depicted information by words or numbers. This is the paradigm for most human-computer interaction applications.