aesthetic primitives of images for · pdf fileaesthetic primitives of images for visualization...

11
in: Proceedings of the 11th International Conference on Information Visualisation, pp. 316-325, Zurich, Switzerland, July 2-6, 2007. Aesthetic Primitives of Images for Visualization Gabriele Peters Universit¨ at Dortmund, Informatik VII, Otto-Hahn-Str. 16, D-44227 Dortmund, Germany [email protected] Abstract Images play an important role in visualization. As users are more willing to adopt a product if it evokes pleasurable feelings the aesthetic appeal of interfaces becomes more im- portant. Thus, there is a growing need to generate also im- ages which appear aesthetically to the user. Starting with the modularities of the human visual system, we derive six dimensions of visual aesthetics. For each dimension we ex- plore, inspired by principles of the visual arts and insights of cognitive neuroscience, which pecularities of the dimen- sions are particularly adequate for an aesthetic impression. Accompanied by a fair number of image examples, these considerations result in an easy to understand guideline for computer scientists and interface designers how to deal with images in terms of aesthetics. 1. Introduction The roles of images 1 in visualization are manifold. Stone et al. [1] name four main benefits. Images motivate and at- tract the attention of the user and have the function to per- suade her. They communicate information, which is often exploited in computer-based learning. Furthermore, they have the great power to overcome language barriers, and 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. For example, in web de- sign images are utilized mainly for two different purposes. They can have the function to attract the user and may be used as anticipation of the overall topic of the website. On the other hand, small thumbnails promote interaction. In e-learning images usually are the support of the informa- tion, that should be conveyed by the course. Other examples of interfaces from several applications of augmented reality 1 The term ”images” is used here in the sense of pictures, i.e., pho- tographs or drawings. It does not denote diagrams or charts. Figure 1. Images as key components of visu- alization: navigation and maintenance. (geovisualization, navigation, maintenance and repair, and a museum guide) where images are the key components of the visualization, are shown in figures 1 and 2. The left pic- ture of figure 1 shows an image of the environment which is augmented by data indicating a possible path for a ve- hicle. 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. The right part of figure 1 shows an example for maintenance instructions for an engine. The previous statements hold true for this example, as well. The last example is given in figure 2. A virtual guide for the Guggenheim Museum Bil- bao refers the visitor to architectural features of the building or gives explanations of exhibits. Two screenshots from the user interface are shown. In the context of information vi- sualization and human-computer interaction topics such as the importance of aesthetic qualities of graphical elements of user interfaces [2] or the aesthetics of interaction [3] have frequently been addressed. Also the relation between vi- sual and verbal information in presentations has been dealt with [4]. What is underrepresented in the literature is the role of image aesthetics in visualization. This paper is an

Upload: lyduong

Post on 06-Mar-2018

216 views

Category:

Documents


3 download

TRANSCRIPT

in: Proceedings of the 11th International Conference on Information Visualisation, pp. 316-325, Zurich, Switzerland,July 2-6, 2007.

Aesthetic Primitives of Images for Visualization

Gabriele PetersUniversitat Dortmund, Informatik VII, Otto-Hahn-Str. 16, D-44227 Dortmund, Germany

[email protected]

Abstract

Images play an important role in visualization. As usersare more willing to adopt a product if it evokes pleasurablefeelings the aesthetic appeal of interfaces becomes more im-portant. Thus, there is a growing need to generate also im-ages which appear aesthetically to the user. Starting withthe modularities of the human visual system, we derive sixdimensions of visual aesthetics. For each dimension we ex-plore, inspired by principles of the visual arts and insightsof cognitive neuroscience, which pecularities of the dimen-sions are particularly adequate for an aesthetic impression.Accompanied by a fair number of image examples, theseconsiderations result in an easy to understand guidelinefor computer scientists and interface designers how to dealwith images in terms of aesthetics.

1. Introduction

The roles of images1 in visualization are manifold. Stoneet al. [1] name four main benefits. Images motivate and at-tract the attention of the user and have the function to per-suade her. They communicate information, which is oftenexploited in computer-based learning. Furthermore, theyhave the great power to overcome language barriers, andthey support interaction. Images are especially powerfulwhenever it is difficult to describe the depicted informationby words or numbers. This is the paradigm for most human-computer interaction applications. For example, in web de-sign images are utilized mainly for two different purposes.They can have the function to attract the user and may beused as anticipation of the overall topic of the website. Onthe other hand, small thumbnails promote interaction. Ine-learning images usually are the support of the informa-tion, that should be conveyed by the course. Other examplesof interfaces from several applications of augmented reality

1The term ”images” is used here in the sense of pictures, i.e.,pho-tographs or drawings. It does not denote diagrams or charts.

Figure 1. Images as key components of visu-alization: navigation and maintenance.

(geovisualization, navigation, maintenance and repair, anda museum guide) where images are the key components ofthe visualization, are shown in figures 1 and 2. The left pic-ture of figure 1 shows an image of the environment whichis augmented by data indicating a possible path for a ve-hicle. One could be of the opinion that such a real-timenavigation system has to show ”just the image the cameracaptures”. But the interface designer has to decide for thespecification of numerous variables that determine how thecaptured image is presented in the user interface. To namebut a few, she has to choose color space, contrast, dynamicrange, spatial arrangement of the image components (e.g.,the position of the horizon), depth of field, and focal length.The right part of figure 1 shows an example for maintenanceinstructions for an engine. The previous statements holdtrue for this example, as well. The last example is given infigure 2. A virtual guide for the Guggenheim Museum Bil-bao refers the visitor to architectural features of the buildingor gives explanations of exhibits. Two screenshots from theuser interface are shown. In the context of information vi-sualization and human-computer interaction topics such asthe importance of aesthetic qualities of graphical elementsof user interfaces [2] or the aesthetics of interaction [3] havefrequently been addressed. Also the relation between vi-sual and verbal information in presentations has been dealtwith [4]. What is underrepresented in the literature is therole of image aesthetics in visualization. This paper is an

Figure 2. Images as key components of visu-alization: museum guide (project AMIRE ofC-LAB, Paderborn, Germany).

attempt to fill this gap. To identify aesthetic dimensionsthat, on the one hand, allow for the evaluation of the aes-thetic qualities of an image and, on the other hand, enablean interface designer to adapt her tools to the needs of theuser, we have to start at the user, i.e., the human, and haveto know basics about human visual information processing.In section 2 we summarize results from cognitive neuro-science, that give an understanding of the basic principlesof the human visual system. This system solves a percep-tual problem by filtering out the salient features of an objectfrom the details and varieties of its appearance. This is akinto visual artist’s abilities to cull from the sensory manifoldsthose image features that enhance the clarity of the repre-sentation. Thus, cognitive neuroscience as well as artisticprinciples give us clues to definedimensions of visual aes-thetics. These dimensions are the starting point for section 3where we investigate for each dimension (e.g.,spatial or-ganization) which specific characteristics (e.g.,the goldenmean) would best evoke an aesthetic experience. Thesecharacteristics we callaesthetic primitives.

2. Dimensions of visual aesthetics

We start with an overview of the human visual systemin subsection 2.1 and draw the conclusion in subsection 2.2that the basic dimensions that constitute an aesthetic expe-rience can directly be derived from the modularity of ourvisual system.

2.1. Modularity of the human visual system

The human visual system is organized as a parallel, mod-ular system. It processes different attributes of a visualscene, such ascolor and motion, in different, specializedsubdivisions of the brain. These cortical areas are dedicatedto the analysis of a single property of the visual scene, only.The left part of figure 3 shows a human brain from the me-dial side with some of these areas. From the retina the vi-sual information is carried along theoptic pathway to theprimary visual cortex (V1) at the back of the brain. Signals

Figure 3. Cortical areas of the human visualsystem dedicated to different visual modular-ities. (Images taken from [9].)

carrying information oncolor, motion, form, anddepth aretransported to V1 and are collected into specialized com-partments in V1. Both, directly and via an intermediate areacalled V2, V1 sends this information further on to other spe-cialized areas. Acolored stimulus leads to an activation inV1 and in a complex of areas called V4. Analogously, amoving visual pattern activates V1 and an area called V5located on the outside surface of the hemispheres (right partof figure 3). Form is processed in several parts spread outover the cortex. There are cells in V1 that respond to ori-ented lines, but also cells in other areas such as V2 and V3respond selectively to orientation. Another intersting modu-larity that has its own representation in the brain is thebodyand parts of it, such as faces and hands. In the monkey tem-poral cortex cells have been identified which are responsiveto differentbody posture and movement [5]. The humanfusiform gyrus (in the left part of figure 3 marked by theturquoise color) is important for the perception of faces.The functional specialization of the human visual systemand the independence of its modules is also reflected by thefact that the brain needs different amounts of time to per-ceivecolor, form, andmotion. Color is perceived beforeform which is perceived beforemotion [6]. It also has beenshown in a behavioral study thatmotion perception is sen-sitive to luminance, but not tocolor cues [7].

2.2. Correlation to the aesthetic experience

The above mentioned modules of the visual system(color, form, motion, body parts) and other not mentionedones (such asdepth and spatial organization) are also at-tributes that have been important for the formal aspects ofvisual arts, and thus for aesthetics. We speak of the aes-thetics of color or the aesthetics of portrait painting, asif there are also different categories of aesthetics. Thesecategories seem to correspond to the modules of visualperception [8, 9]. Neuroscience studies revealed that the

Figure 4. Only a Few Strong Colors and Com-plementary Contrast.

judgement of a painting as beautiful or ugly correlates withspecific brain structures, principally the orbito-frontalcor-tex [10]. But Zeki suggests that there is not one visual aes-thetic ”sense” only but many, each tied to a different special-ized processing system. Different attributes of the formalaspect of art excite different groups of cells in the brain, thusthere is also a functional specialization in aesthetics [9]. Itis intersting to study patients with brain lesions in differentparts of the visual system. A patient of Sacks suffered fromachromatopsia due to a damage to area V4, which is ded-icated to color processing [11]. This patient was an artistand before his attack he had a preference for the colorfulpaintings of the Impressionists. However, the deteriorationof V4 changed the aesthetic quality of these works for him,as he could not perceive color anymore. Also his own paint-ings became grayish and dirty, but his form vision was notimpaired, so he still could sketch objects and enjoy the aes-thetic quality of forms. Latto posed the question as to whysome features -aesthetic primitives - of the modularitiesprovoke a stronger aesthetic impression than others [8]. Hecame to the conclusion that a property of a stimulus is in-trinsically interesting if it resonates with mechanisms ofthevisual system. Aesthetic primitives isolate or exaggerateone of the processes of the human visual system by evok-ing maximal responses of those cells in the brain dedicatedto that special attribute. They are aesthetically moving be-cause they blend with our brains. Summarizing, we sug-gest the basic dimensions of visual aesthetics to be exactlythe different modularities of the human visual system. Themost important of them arecolor, form, spatial organiza-tion, motion, depth, and thehuman body.

3. Aesthetic primitives of vision

Having identified the main dimensions of visual aesthet-ics, we will consider the question now, which pecularities ofthese dimensions are capable of evoking an aesthetic sensa-tion. Those pecularities we will callaesthetic primitives.Many books have been filled with principles of lay-out andarrangement of color and form in visual arts, whether it isdrawing, painting, or photography. In this section we referto the classic benchmark by Feininger [12] as it summarizes

Figure 5. Monochrom coloration and colorcircle by Goethe.

the basic principles of aesthetic composition and is still areference for photographers and artists. For each primitivedescribed in this section we give an example, mostly in fromof a photograph2, but the described principles hold true forall kinds of images.

3.1. Color

Color is a modularity of the visual system, which just inthe context of beauty is an important means to evoke aes-thetic experiences. We examine three properties of colorand its distribution in an image, which are known to appealto our aesthetic sense.Only a few strong colors. Less is more. Two to threestrong colors usually are the maximum for an image still tobe pleasant to the eyes. If more than a few strong colors oc-cur in an image usually the effect of beauty is lost. (Maybethis corresponds to the isolated process in the human visualsystem triggered by only one special visual attribute whichwas mentioned in subsection 2.2.) In principle, color in animage should correlate with its content [12]. If color is notthe salient feature of an object depicted in the image, as itholds true, e.g., for a butterfly, the visual system of the ob-server is overcharged and an aesthetic impression is missed.An example is shown in the left image of figure 4. The or-ange color of the turbans of the musicians is the dominantproperty of them in this image. Thus, they are depicted insuch a way that the orange color is also the dominant prop-erty of the whole image. All other colors are subordinate oreven non-colors. Also the right image of figure 4 gets bywith only a few strong colors, the yellow of the taxis andthe red rear lights of the cars. An exaggeration of this ruleis monochromaticity, the deliberate choice of only one maincolor. Quite aesthetic results can be achieved if only a smallrange of colors adjacent in the color circle (see below) arechosen, e.g., only red, brown, and orange tones in a pictureof autumn foliage. The left images of figure 5 show an ex-ample of this principle, where only a brown tone is used.Such a subtle monochrom coloration allows for the accen-tuation of important elements which come to the fore (such

2If not otherwise stated all photographs are taken from [13].

Figure 6. Exploitation of the dynamic range.

as the bench and the person in these examples).Complementary contrast. Complementary colors arepairs of colors that are in some way opposites of each other.The traditional set of complementary pairs in art are redand green, blue and orange, and yellow and purple. Theyface each other in the color circle, as, e.g., advocated byGoethe [14] (figure 5). Two complementary colors rein-force themselves mutually in their luminance. By a mod-erate application of this effect the attention of the observercan be directed. The most beautiful effect often is achievedif the complementary colors are the only strong colors. Thehindu picture of figure 4 with the dominant orange of theturbans and the contrasting blue tone of the blanket mayhold as an example for this effect, as well. The comple-mentary contrast becomes evident in two phenomenons, thesimultaneous and the sucessive contrast, where the nonex-istent complementary color is anticipated either simultane-ously in the environment of an existent color or immedi-ately after the exposure of a color, respectively. Colloqui-ally speaking, the human visual system requests the com-plementary completion and generates it on its own authorityif it is not present. This can hold as another argument thatsupports the thesis of the foundation of aesthetics in cogni-tive neuroscience.Exploitation of the dynamic range. Exploitation of thedynamic range concerns the distribution of tonal values inan image. Although it applies for colored as well as forblack and white images the principle is best explained bymeans of gray value images. The dynamic range describesthe ratio of luminance values from the brightest highlightsto the deepest shadows in an image. Our visual system canperceive much a greater dynamic range than that which canbe rendered in an image via a monitor or a print. Whenwe consider the instantaneous dynamic range (where ourpupil opening is unchanged) this ratio is indicated between1:1000 and 1:10,000 [15]. But our visual system is ex-tremely adaptive and the dynamic range actually changesdepending on brightness and contrast of a scene. If we con-sider situations where our pupil opens and closes for vary-ing light, we can see over a range of nearly 1:1,000,000. Incontrast to this, the dynamic range of prints is about 1:250and those of monitors can reach values of about 1:1000. To

Figure 7. Clarity and simplicity of form.

come back to aesthetics, one can say that an image lookspleasing to the eye if the display medium (print or monitor)is able to render the dynamic range of the depicted scenein a similar way as it is perceived by the human visual sys-tem. The contrast ratio of an image should be controlledin such a way that the wide range of intensity levels fromthe brightest light to the deepest shadow is represented inan image. As a rule of thumb, an image is said to be aes-thetic only if the full tonal range is present and, in addition,the tonal values are distributed in a well-balanced manner.The images of figure 6 can pass off as examples for that.The histogram of an image can serve as an indicator foran advantageous distribution. An overall Gaussian shapewhich covers the whole range of gray level values is a goodprecondition for an aesthetic image. It indicates that bothshadow and highlight detail is captured. In general, thevery bright and dark parts of an image should only take upsmall portions of an image, just as it holds true for the im-ages of figure 6. A technique that should be mentioned inthis context is Ansel Adams’zone system [16]. With thissystem he gave a recipe to bridge the gap between the lim-ited dynamic range of prints or monitors in comparison toour visual system. The zone system allows for the prints ormonitor displays to approximate the way the world looks toour eyes. It does this by providing a simple way to controlthe contrast of images. Although originally developed forfilm negatives, its principles can easily be adopted for dig-ital imaging. Another technique worth mentioning is highdynamic range imaging [17]. As a field primarily evolved incomputer graphics, it provides a set of methods to generatean image of high dynamic range, e.g., from multiple expo-sures of the same scene. The source images are overlappedand masked appropriately so that the resulting compositerepresents a wider gamut of colors and tones.

3.2. Form

Form provides the source of information necessary forbasic survival function such as navigation, recognition ofprey, predators, and mates, as well as for high level behav-iors such as reading. But the shape of objects does not onlyallocate essential information on the world surrounding us,

Figure 8. Animal silhouettes: statue of a dogby Alberto Giacometti (”Le Chien”, 1951) and”The Horse in Motion” by Eadweard Muy-bridge (taken from [18]).

it is also a source of aesthetic sensation.Clarity of form. When we speak of form in the contextof elements constituting an image we usually mean linesand surfaces. Lines can actually be present by the contrastgradient or color changes or they can emerge through ourperception. Elements of an image can be arranged in such away that they are connected by imaginary lines. Those canbe attributed by their orientation, as well. An image, that ap-peals favorably to our visual system, should comprise onlya few predominant orientations in any case, either evolvingfrom actual lines, by edges and boundaries of surfaces, orby imaginary lines. The main orientations of the left im-age of figure 7 are constituted only by straight lines (ver-ticals, horizontals, and diagonals), those of the right imageof the same figure by straight and curved lines and concen-tric ovals. The few and overall shapes of these images areconsistent, simple, and clearly recognizable. This is whatFeininger means when he speaks of clarity and simplicitiyof form [12]. Curved lines seem to appear beautiful if theyobey a continuous function (yet in the mathematical sense)and take a uniform course within the image as a whole.Silhouettes. Feininger explicitly lists silhouettes as compo-nents of aesthetic images (”outlines which are typical for anobject, vigorous and unusual; clear silhouettes” [12]). Alsoartists from other disciplines have realized the value of sil-houettes for the visual effect. Giacometti with his sculp-tures of men and animals can hold as an example. Thestrong impact of his works is achieved mainly by their sil-houettes, viewed from a distance [19], rather than by theirthree-dimensionality. Giacometti was a master in reducingobjects to their characteristic outlines. The left part of fig-ure 8 shows an example. Another prominent example is theseries of photographs of moving humans and animals byMuybridge (right part of figure 8). Here the outlines of theobjects play a decisive role in the aesthetic classificationofhis works, as well. But not only shapes of animals and hu-mans are perceived as beeing beautiful, also the silhouettesof other objects can be aesthetic elements of an image, suchas the couple under the umbrella in the left image of fig-ure 9 or the bench in the left image of figure 5. As a rule of

Figure 9. Silhouettes of other objects, clarityof spatial organization, and golden mean.

Figure 10. Human silhouettes. Photographsby G. Peters (”Dark Days - Venice”, 2006).

thumb, one can say, that silhouettes appear beautiful, if theycapture the main characteristics of an object. The outlineof the object should either be clearly identifiable or graphi-cally interesting. In addition, silhouettes are supposed to besharp-edged and clearly distinctable from the backgroundrather than ambiguous and bleary. However, this last ruledoes not apply unrestrictedly. The shape of the human bodycan be regarded as an exception to this rule, as already indi-cated by the fact that the human brain handles body shapesseparately. Apparently, human silouettes can evoke a senseof beauty even if they are depicted in a blurry fashion (seefigure 10).

3.3. Spatial organization

Not only the shapes of the elements constituting an im-age are of importance for its aesthetic appearance, but alsotheir mutual spatial relations in the two-dimensional surfaceof the image play a major role for the aesthetics of an imageas a whole. Analogously to the form primitiveclarity in thelast subsection, we will here comment on the aesthetic prim-itive clarity of spatial organization. Other aesthetic primi-tives of spatial organization are thegolden mean, textureand pattern, andrhythm, repetition, and variation.Clarity of spatial organization. Feininger argued that clar-ity and simplicity of spatial organization is the silver bulletfor an aesthetic image [12]. Too many objects in a singleimage cause confusion and derangement. An image shouldnot be overloaded by details, as well. The middle image offigure 9 shows an example which demonstrates the power of

Figure 11. Texture and pattern.

spatial organization. The attention of the viewer is focussedon the person in the center, although the visible parts of theboy occupy only a very small portion in the image. This ef-fect is only in part due to the form contrast between curvedand straight lines, but mainly due to the spatial arrangementof the image elements. In general, an image appears aes-thetically, if no element neither can be omitted nor can beadded without destroying the visual balance. There are alsosome more restrictive rules concerning the distribution oflight and dark parts of an image. The usual way to scan animage is supposed to be from the left upper part diagonallyto the right lower part. Accordingly, the most importantportion of an image is the left upper part, because here theimage inspection starts. As humans are more inclined toexamine lighter parts of an image rather than darker parts,an image should have its lighter parts in the upper left, itsdarker parts in the lower right, just as exemplified by thepictures of figure 7.Golden mean. The golden mean denominates a particularratio of an asymmetric line division. Whereas symmetryappears rather statical and boring, divisions in accordancewith the golden mean are considered as beeing harmonicand interesting. A line should be divided in such a way thatthe ratio of the smaller parta to the larger partb is the sameas the ratio of the larger partb to the wholea + b. Put informulas it reads like this:φ = a/b = b/(a + b). Theonly positive solution isφ = (

√5 − 1)/2 ≈ 3/5 ≈ 0.618,

which is the geometric definition of the golden mean. It hasthe continued fraction expansionφ = 1/(1 + 1/(1 + . . .))and the best rational approximations toφ are given bythe convergents of this infinite continued fraction, arrivedat by cutting it off at different levels in the expansion:1/1, 1/2, 2/3, 3/5, . . . Thus, the convergents of the goldenmean are the ratios of successive Fibonacci numbers [20].Therefore, a division of a line, surface, or volume in the

ratio of about3 : 5 appears harmonic. From antiquity un-til today φ has constantly been present in art. Even acientChinese paintings show the golden mean in an accuracy ofthree decimal places. The main explanation for the usage ofthis proportion in art is that it is found frequently in nature,e.g., in sea shells or in human proportions. Figure 9 showsan image constructed according to the rule of the goldenmean. The woman is placed approximately in the goldenmean. The majority of the images in this article obey thisconstruction rule, in particular the left images of figure 5.Texture and pattern. Texture denotes the structural char-acteristics of a surface. The number of the different di-mensions of texture is still discussed, but is probably fiveor larger. For example in a classical study [21] texturewas classified into coarseness, contrast, directionality,line-likeness, regularity, and roughness.Patterns are regular vis-ible surface structures which underlie a more or less repet-itive entity. These structures can be graphical ones, whichmeans that they are arrangements of combinations of certainvisual themes (e.g., stripes, or checked patterns). Natureisfull of patterns. Sand dunes, tree branches, and snowflakesdisplay most beautiful patterns, to name but a few. It is anopen question as to why patterns evoke aesthetic feelings inhumans, but our visual system seems to look for patternsin visual stimuli even if they are actually not present. Weare able to detect an organizing principle (i.e., somethingmeaningful) even in arbitrary structures of low informationcontent such as clouds. This phenomenon is known asclus-tering illusion [22]. For Feininger [12] ”pattern, rhythm,and repetition of interesting, related forms” is one of the tenmost important properties of an aesthetic image. Examplesfor images which appeal mainly because of their overall pat-tern and texture character are given in figure 11. The imageson the left are made up of fairly regular patterns, those onthe right display more random textures, but for all holds truethat the entire image plane is filled with consistent structureand thus evokes a wholistic impression. Other examplesof images mainly beeing effective because of patterns aregiven in figure 13, and maybe even the images of figure 7work partly because of their pattern character.Rhythm, repetition, and variation. Many visual patternsare strongly related to repeated shapes or objects. Thesecopies can occur in regular spatial distances or they can bearranged arbitrarily. Patterns of largest relevance for ani-mals are those of medium entropy. Regarding aestheticsconditions are similar. Perfect symmetry in images as wellas chaos (or noise) are not ranked beautiful. Figure 12demonstrates the beauty of repetition by copying singleslices of an image and combining them without modifica-tion. Repeated structures are also present in the images offigure 7 and contribute to their aesthetic appeal. As purerepetition often is said to be monotonous another princi-ple of art consists invariation, which means an instance

Figure 12. Repetition.

Figure 13. Rhythm and variation. Pho-tographs by G. Peters (”Streifzuge”, 2000).

of change in present stuctures. This is usually applied toincrease the visual interest. Figure 13 shows variations overa theme, namely stripe patterns in animal fur. Another ex-ample is given in figure 11. Variation of the overall stripepattern is realized here in the lower left image by the de-tails of the different letters.Visual rhythm is the last aes-thetic primitive of spatial organization we will explain. It isan artistic principle closely connected to repetition and of-ten described by the flow of how the viewer’s eye is drawnacross an image, for example, whether the eye is forced tojump rapidly or glide smoothly from one image element tothe next. The most common explanation as to why humansappreciate rhythm, either in music or in the visual arts, isthat it recalls how we walk and the heartbeat we heard inthe womb. There are several types of visual rhythm [23].These include3: Regular rhythms: ab ab . . . is the mostcommon type. Another example isabbb abbb . . . The pic-ture in figure 12 exploits the schemaaaa bbb ccc . . . Alter-nating rhythms: for example:aba cdc aba efe aba . . .Progressive rhythms: Progression occurs when there is agradual increase or decrease in the size, number, or someother quality of the elements repeated. A sample patternwould be:ab aabb aaabbb . . . The left image of figure 7 dis-plays a progressive rhythm. In figure 13 the effect of visualrhythm is even more evident: in the upper left image theviewer’s gaze is led horizontally from the left to the right

3In the following examples, let the lettersa, b, etc. stand for visualelements of any sort.

Figure 14. Blur. Upper row: motion blur,lower row: panning blur.

by the arrangement of the vertical stripes, whereas in themiddel picture of the same row it is directed more smoothlyand diagonally from the upper left to the lower right.

3.4. Motion

Motion inherently is an aesthetic cue because it refers tolife and action. As this article is about images rather thanmovies, we will illuminate the means by which motion canbe conveyed in an image. Calder, most famous for inventingthe mobile, used black, white, and red as the only colors forhis kinetic sculptures, because he was of the opinion that allother colors would confuse the clarity of motion [24]. Thisopinion is interesting because of the coincidence with thefunctional specialization of the color and motion pathwaysin our visual system, mentioned at the end of subsection 2.1.According to Calder, motion is most effectively representedby placing highly contrastive surfaces side by side. Trans-lated into images, this means that motion is best expressedin an image (even a color image), if it is based on contrastchanges, rather than color. The graphical means by whichthis can be realized are manifold. We will concentrate hereon two of the most expressive motion symbols,blur and thedepiction ofdistinct motion phases.Blur. Blur is an indicator for movement. Feininger definesit as ”unsharpness in one direction”, namely the direction ofthe moving object [12]. The stronger the blur, the strongerthe impression of speed. In photography4 it can be achievedeither by a static camera taking a moving object (so-calledmotion blur) or panning the camera with a moving object(so-calledpanning blur). Blur as an indicator for motionis an aesthetic primitive if the blurred parts of the imagecontain lines or stripes of high contrast rather than beeing

4It is irrelevant whether the image was generated with a camera,whether it was painted, or created with computer graphic techniques. Whatcounts is the visual impression obtained by the described techniques.

Figure 15. Distinct motion phases. Left: Mar-cel Duchamp’s ”Nude Descending a Stair-case”, 1911-12, right: double exposure indi-cating slight movement.

of homogeneous luminance. The upper row of figure 14shows two examples of motion blur. Note the high contrastchanges in the blurred regions. The same holds true for theimages in the lower row. Here the blur was induced by apanning of the camera. In the left image it was panned withthe walking woman, thus she is depicted almost sharply. Inthe right image the camera was panned with the right car.Again, in both images the blurred regions exhibit high con-trasts, which is essential to evoke an aesthetic impression.Distinct motion phases. Another technique to illustratemovement in images is the depiction of a number of dis-tinct motion phases simultaneously in a single image. Itshigh aesthetic appeal is probably partly due to the elementof repetition. A series of sharp, slightly different, partlyoverlapping copies of an object, which is captured in dif-ferent phases of movement, can symbolize the concept ofmotion in a graphically smart way. Duchamp practised thisprinciple in his famous painting pictured in figure 15. Inphotography distinct motion phases are usually obtained bymultiple exposures of a object (right image of figure 15).

3.5. Depth

As the image plane is two-dimensional, the three-dimensional world has to be simulated by means of artisticdevices. A number of basic techniques of picture languagecan be used to create the illusion of depth in an image. Ex-amples of these techniques are: controlling the variationbetween sizes of depicted objects, overlapping them, andplacing those that are on the depicted ground as lower whennearer and higher when deeper [23]. We concentrate hereon the depiction oflinear perspective, the contrast betweensharpness and unsharpness, and betweenlight and shadow.Linear perspective. The invention of linear perspectivedates to the early 1400s, with Filippo Brunelleschi’s ex-periments in perspective painting. It works by followinggeometric rules for rendering objects as they appear to thehuman eye. For instance, we see parallel lines as converging

Figure 16. Linear perspective.

Figure 17. Sharpness and unsharpness.

in the distance, although in reality they do not. The lines ofbuildings and other objects in a picture are slanted inwardmaking them appear to extend back into space. If length-ened, these lines will meet at the vanishing point along animaginary horizontal line representing the eye level [23].Examples for images composed in linear perspective, eachwith its vanishing point in the center, are given in figure 16.Sharpness and unsharpness. In contrast to blur, which isunsharpness in one direction, unsharpness here is more gen-erally defined by an absence of high frequency content. Thevisual impression of the contrast between sharp and unsharpparts of an image can act quite aesthetic on the viewer. Thiscan be exploited for the purpose of focussing attention tothe important image elements. The most common applica-tion of this principle can be found in potrait photography,where a large aperture is used to obtain a small depth offield, which results in an unsharp background and thus em-phasizes the portrayed person (figure 17).Light and shadow. How the shape of a three-dimensionalobject may be recovered from shading in a two-dimensionalimage is still the subject of a large field of research in ma-chine vision, calledshape from shading [25]. Different illu-mination conditions cause different shadings of the objectswe perceive. Somehow our brain is able to suggest the fromof an object from this shading. Put in terms of image ar-eas, the human visual system is able to perceive depth fromthe distribution of light and shadow in an image. A strongvisual effect is achieved, if objects are depicted as if illumi-nated under extreme conditions. We often find sharp con-trasts then on the surface of the object and our recognitionis accompanied by a feeling of beauty. This principle is em-ployed, e.g., in the pictures of figure 18.

Figure 18. Light and shadow.

Figure 19. Human body. Left: part of a sculp-ture by Alberto Giacometti (”Le Place”, 1948-49), right: photographs by Eadweard Muy-bridge (taken from [18]).

3.6. Human body

As already mentioned in subsection 2.1 the human bodyand its parts such as hands and heads take up a special po-sition in visual information processing, which reflects theimportance of these visual stimuli for our survival. Also inour aesthetic sensation it seems to be worth to be regardedas a separate category. A concept which is important in thiscontext is that of theprincipal axes of an object.Principal axes. Principal axes are axes of symmetry orelongation around which the local parts of objects aregrouped in order to constitute their global form. If an ob-ject is enlarged, shrunk, or rotated around its principal axisthe relationship between the parts and the principal axis re-mains constant across all variations. Principal axes are con-sidered as aesthetic primitives [8]. Supporting argumentsfor this opinion can be derived from the arts as well asfrom cognitive neuroscience. Stick figures have been usedby artists ever since, even humans in cave paintings havebeen depicted by means of their principal axes. On theother hand, it has been shown in a study that little animalmodels made of pipe-cleaners are sufficient to represent theanimals [26]. They are easily recognizable altough no infor-mation on the surface of the shape is present. The authorssupposed, that the success is due to the correspondence be-tween the pipe-cleaners and the axes of the volumes theystand for. To come back to aesthetics, Giacometti again pro-

Figure 20. Silhouettes of the human body.Photographs by G. Peters (”Dark Days - NewYork”, 2006).

vides examples for the thesis that the human body intrinsi-cally is capable of evoking a feeling of beauty. What distin-guishes his statues is the fact that they almost only consistof their principal axes. Giacometti reduces the body to itsbasic shape, and thus we recognize the concept of a humanat once (left image of figure 19). Sartre put this as follows:”As soon as I see them [these figures], they spring into myvisual field as an idea before my mind; the idea alone isat one stroke all that it is.” [19]. Other examples are givenagain by a motion study of Muybridge in figure 19, this timeboxing men, and the shapes of humans in figure 20, whichillustrate both, the aesthetic primitive of silhouettes dealtwith in subsection 3.2, as well as the beauty of the humanbody defined by its principal axes. It seems that the hu-man body does not appear beautiful arbitrarily, but becauseits shape, especially in the exaggerated version of principalaxes, corresponds to the simplifications and transformationsour visual system performs to analyze and represent it.

4 Summary

In the context of human-computer interaction users aremore willing to adopt a product if it evokes pleasurable feel-ings. In addition, the acceptance of an application has se-vere implications for its safety. Disregarded for a long time,the aesthetic appeal of interfaces recently becomes moreimportant. In this article we addressed only one elementof interfaces, namely images. The best content of an imagedoes not reach the recipient, if the image is designed poorlyand thus appears confusing or ugly. Motivated by the mod-ularity of the human visual system we have identified sixdimensions of visual aesthetics. For each dimension we ex-

plored the conditions and properties that enhance the clar-ity or vividness of the visual presentation. Theseaestheticprimitives are justified in an interdisciplinary fashion by theway how sensory information is processed by our visualsystem, as well as by approved practices of artists. We didnot address here the question how more than one of theseprimitives can be combined in a single image. Also excep-tions to the rules stated in section 3 have not been subjectof our considerations. Clearly, not all aesthetic images obeythe stated rules of image composition. Of course, there areexceptions and often just famous works of art break thesebasic rules. But to keep control over the process of generat-ing appealing images it is necessary to break the rulescon-sciously rather than randomly or just by exploration. Andfor that purpose interface designers have to be aware of thebasic aesthetic primitives. Summarizing, we list here, instriking terms, the directives for image composition for thesix identified dimensions of visual aesthetics. These direc-tives should not be adhered to too seriously but rather beregarded as rules of thumb.Color: use a few strong colorsonly; often complementary contrasts are effective; exploitthe dynamic rangeForm: forms should be clear and sim-ple; silhouettes are aestheticSpatial organization: spatialorganization of image elements should be clear and sim-ple; apply the rule of the golden mean; attain a wholisticimpression by textures and patterns; apply variations to pat-terns and take care for the visual rhythm induced by repe-tition of elementsMotion: express motion by blur of highcontrast; distinct motion phases are aesthetically appealingDepth: illustrate linear perspective; exploit the contrast be-tween sharpness and unsharpness; the distribution of lightand shadow may evoke the impression of depthHumanbody: let the pricipal axes of the human body be clearlyvisible.

References

[1] Stone, D., Jarett, C., Woodfoffe, M. and Minocha, S.:User Interface Design and Evaluation. Morgan Kauf-mann Publishers/Elsevier, 2005.

[2] Tufte, E.: Envisioning Information. Gra. Press, 1990.

[3] Norman, D.: Emotion and Design: Attractive ThingsWork Better. Interact. Magazine, ix(4), 36-42, 2002.

[4] Ware, C.: Information Visualization: Perception forDesign. Morgan Kaufman, 2004.

[5] Perrett, D. I., Rolls, E. T., and Caan, W.: ThreeStages in the Classification of Body Movements byVisual Neurons. In: Images and Understanding, 94–107, Cambridge University Press, 1990.

[6] Moutoussis, K. and Zeki, S.: A Direct Demonstrationof Perceptual Asynchrony in Vision. Proc. R. Soc.Lond. B., 264, 393–397, 1997.

[7] Ramachandran, V. S. and Gregory, R. L.: Does ColourProvide an Input to Human Motion Perception? Na-ture 275, 55–56, 1978.

[8] Latto, R.: The Brain of the Beholder. in: The ArtfulEye, 66–94, Oxford University Press, 1995.

[9] Zeki, S.: Inner Vision. Oxford University Press, 1999.

[10] Kawabata, H. and Zeki, S.: Neural Correlates ofBeauty. Journal of Neurophysiology, 91(4), 1699–1705, American Physiological Society, 2004.

[11] Sacks, O. and Wasserman, R.: The Painter who be-came Color Blind. NY Rev. Books, 34, 25–33, 1987.

[12] Feininger, A.: Die hohe Schule der Fotografie. ECONDusseldorf und Wien, 1961.

[13] Peters, G.: www.eyeszeit.net, 2007.

[14] Goethe, J. W. v.: Zur Farbenlehre. Tubingen, 1810.

[15] McHugh, S. T.: Cambridge in Color.www.cambridgeincolour.com, 2007.

[16] Adams, A.: The Negative. New York Graphic Society,Little, Brown, and Company, 1981.

[17] Reinhard, E., Ward, G., Pattanaik, S., and Debevec, P.:High Dynamic Range Imaging: Acquisition, Display,and Image-Based Lighting. Morgan Kaufmann, 2005.

[18] Muybridge,E.:AnimalLocomotion.Philadelphia,1887.

[19] Sartre, J.-P.: The Search for the Absolute. in: Exhi-bition of Sculptures, Paintings, Drawings [by AlbertoGiacometti], New York: Pierre Matisse Gallery, 1948.

[20] Cartwright, J., Gonzalez, D., Piro, O., and Stanzial, D.:Aesthetics, Dynamics, and Musical Scales: A GoldenConnection. J. New Mus. Res. (31), pp. 51-58, 2002.

[21] Tamura, H., Mori, S., and Yamawaki, T.: TexturalFeatures Corresponding to Visual Perception. IEEETrans. Sys., Man, Cybern., 8(6), pp. 460–472, 1978.

[22] Gilovich, T., Vallone, R., and Tversky, A.: The hothand in basketball: On the misperception of randomsequences. Cog. Psy., vol. 17, pp. 295-314, 1985.

[23] Delahunt, M. R.: Rhythm. ArtLex Art Dictionary,http://www.artlex.com, February 17, 2007.

[24] Calder,A.:TemoignagesPourl’ArtAbstrait. in: Alvard,J., Gindertael, R., eds., Ed. Art d’aujourd’hui, 1952.

[25] Zhang, R., Tsai, P.-S., Cryer, J. E., and Shah, M.:Shape from Shading: A Survey. IEEE Trans. onPAMI, 21(8), 1999.

[26] Marr, D. and Nishihara, H. K.: Representation andRecognition of the Spatial Organization of Three-Dimensional Shapes. Proc. R. Soc. of London, B, vol.200, pp. 269–294, 1978.