El Videojuego SMOG

The colour scheme of a user interface can significantly affect a user’s perception of a software artifact, the credibility of an online site, and the user’s desire to use (or continue to use) a system. It is therefore important to ensure that an interface colour scheme gives a positive impression. However, this is complicated by the difficulty in defining, a-priori, exactly which features are important. It is difficult to define what makes particular interface colour scheme pleasing or appropriate, suitable for a particular context or culture, or pleasing to a particular individual.

Colour space is three dimensional, and the representation of colours may be encoded in many ways, some mathematically tractable, some not, and of these colour spaces, some are more useful in the design of colour schemes than others. Human colour vision is quite tolerant of changes in the viewing conditions. This, combined with the standardisation of display technology, has meant that electronically encoded images can be decoded and displayed with widely acceptable colour rendering, with no particular effort on the part of the viewer. This is not so for those with colour vision deficiencies, but most impairments cause altered colour perception, not colour-blindness, and affect only a small percentage of the population.

The light from an object might be thought sufficient to define its colour, but colour itself is a perceptual phenomenon, and this perception is affected by factors other than the spectral power distribution of light from an object. These factors include the saturation and adjacency of other coloured objects and the viewing conditions. These factors, along with the “composition” of a scene, affect the holistic impression of a set of coloured objects when seen together. If the effect of the combination is pleasing, the arrangement is said to be harmonious.

Colour harmony is therefore a concept that is easy to understand intuitively, but difficult to define more precisely. Nevertheless, the factors that appear necessary for an arrangement to appear harmonious have been studied and, while the findings are not in complete agreement, there are models that, given set of objects, will determine the appropriate values of lightness and saturation for each object. Hue can then be chosen to give a final colour scheme with broad appeal.

Methods of selecting harmonious colour arrangements have been derived by consid- ering the aesthetic aspects of images, but these methods do not include factors necessary to ensure that an interface will be usable. The most important omitted consideration is the readability of text. This has been found to be strongly dependent on the contrast of the text with its background. Simple colour space distance is insufficient to guarantee readability, as lightness contrast has been found to be more important than contrasts of hue or saturation. Importantly, there are contrast guidelines that can be used to ensure text is readable.

The methods used to create interface colour schemes range from the completely manual selection of colours for individual interface elements, through to completely automatic systems that produce a single final colour scheme. Manually selecting indi- vidual colours is the most flexible, but is also the most problematic for artistically na¨ıve developers. Completely automatic systems also have problems: their schemes are not always successful, and they do not allow the sometimes subtle colour preferences of the developer to be incorporated in the colouring. To aid artistically unskilled developers, the optimum method would be somewhere in between: it would guide the user towards schemes that are likely to be appealing, and it would have enough flexibility to allow the developer’s judgement to influence the colours selected.

The systems for automated colour scheme creation discussed in this chapter use several different methods. Some incorporate sets of rules relating to colour harmony, which are by their nature generic, and therefore incomplete. Some allow the specifi- cation of constraints pertaining to the interface itself, and some constrain the colours

to suit the intended audience. Some have methods for searching or constraint satis- faction, performed either automatically or manually. None of the systems intended to produce a single complete colour scheme can be relied upon to be successful, due to the incompleteness of the colour harmony heuristics, unstated requirements relating to the intended use, and the subjectivity of human colour preference. Rather, as explored in Terry and Mynatt (2002), it is highly desirable to combine the guided creation of new designs with iterative assessment and the ability to explore multiple alternatives, a facility available in few of the surveyed systems.

It is now time to investigate, in more detail, how a system could be structured that allows such a generative approach to colour scheme creation. It would blend automatic design with human exploration and assessment to aid in the design of user interface colour schemes. The next chapter will describe how the building blocks of such a system may be designed, and show how these could be composed into an architecture to enable the design of user interface colour schemes.

Chapter 3

The conceptual foundations of an

automatic interface colouring

system

This research explores the extent to which the design of user interface colour schemes can be automated to aid software and web developers who are unskilled in the use of colour. The aim is to help choose a set of colours for the individual elements within a user interface so that the resulting scheme will please the developer, suit the intended use, and appear to be well designed. However, the colours within a scheme, while defined for individual interface elements, are best not chosen in isolation, as the effect of a colour scheme is holistic. Therefore, the method used to select colours for each interface element should take this holistic impression into account.

Artistic models of colour harmony attempt to model this holistic impression, or more accurately, to define relationships between the colours of elements in a scheme so that the holistic effect is pleasing. However, the models do not include interface- specific considerations, nor the suitability of any particular hues, which are important if the interface is to be both usable and be coloured appropriately for its intended use. Therefore, any attempt to fully automate the design of an interface colour scheme using such models is unlikely to be successful. The difficulty in automating the design of a colour scheme becomes clear when the number of interacting factors affecting the choice of colours in an interface is considered. These include:

factors relating to the structure of a colour scheme:

• the colours of individual objects are usually chosen so that strongly saturated colours are not assigned to large areas to avoid garish schemes that can be visually overpowering, distracting, and unpleasant to use.

• when seen together as a complete scheme, the holistic effect of the coloured elements should have a pleasing aesthetic effect.

• the colours that may be used for elements are mutually constrained. The flexibility in colour choice will decrease as objects are coloured, as the colours

interface-specific factors:

• non-decorative text should be readable.

• the colouring of items should reflect any structural and semantic relation- ships in the user interface.

“soft” factors:

The appropriate colours for a particular interface may be influenced by ill-defined factors, such as:

• the need to elicit a particular impression from the viewer in response to the overall scheme (e.g. restful, fresh, sophisticated).

• the prior associations given to particular colours.

• the emotive impact of particular colours.

• the culture of the intended audience.

• subtle aesthetic effects. As a simple example, a scheme may look better when colours are used in a particular way; e.g. using colour c1 for element1

and c2 for element2 may look better than the other way around, even if

the areas of element1 and element2 are the same and the overall balance is

unaffected.

• the subtle effects that can cause some hues to appear more suitable or pleas- ing than others (e.g. even among all the greens that may appear “fresh,” some will appeal more than others).

The first two items (colour scheme structure and interface-specific factors) pertain to the relationships between the colours of the interface rather than the particular colours used. It is these colour relationships that the artistic colour harmony models partially address. The “soft” factors relating to the actual hues used in the scheme are not addressed by the artistic colour harmony models, but are important for an appropriate interface colouring, and therefore a means of allowing for such effects should be included. This can be addressed by designing a colour scheme in stages.

The first stage would consider the only lightness and saturation relationships be- tween the coloured items in the scheme, but not hue. This would result in a colour scheme devoid of actual colours – an abstract colour scheme – that satisfies the inter- element relationships for colour harmony and interface-specific factors.

Once these relationships have been determined, the second stage could address the assignment of appropriate overall hues to satisfy the soft factors. However as the selecting the hues should not alter any of the inter-element relationships defined in the first stage, the colours in a scheme will change in concert – setting or changing the colour of any one element will change them all – therefore, the adjustment of hues in the second stage changes the colour scheme holistically.

The combination of a harmonious inter-element relationships and holistic colour selection would result in an overall colour scheme that satisfies both the requirements of a usable and harmonious user interface colour scheme and the “soft” requirements related to the intended audience and aesthetics. However, the selection of hues that satisfy all the subtle and interacting constraints is difficult to define algorithmically, but is something that human can discern with little effort by inspection. Therefore, the proposed approach is for the automatic creation to pertain to the structure of the colour scheme – the relationships between the coloured elements – and the selection of actual hues to be left for the developer, who will automatically avoid inappropriate choices.

Developers, even those with limited colour expertise, are likely to have preferences about how a scheme should be coloured, both in terms of the relational aspects (the first stage), and the appropriate hues (the second stage). They should therefore be able to specify such preferences, without needing or using any specialist knowledge. Minimising the input required from developers and extracting as much data as possible from the interface to be coloured will make it less likely that developers may misinterpret, or being unable to supply, any details relating to the colour scheme.

This chapter explores these ideas and partitions the functionality into conceptual building blocks. The next chapter will show how these conceptual blocks can be mapped to an implementation which can be used to generate schemes to test the viability of the approach.

Although the ideas explored in the thesis are related to aesthetics, it is recognised that there other important contributions to the aesthetic quality of an interface, such as the layout and placement of interface elements and the choice and size of fonts. Such considerations are outside the scope of this project, and are assumed to have already been optimised.

3.1

Augmenting colour harmony heuristics for use in GUI

design

Conventional colour harmony heuristics, such as the use of sets of colours related by a perceptual ordering, or the requirement for visual balance, are based solely on aes- thetics. They do not address the semantic relationships between the elements in a user interface and they may therefore select colours that harmonise, but impair the usability of the interface. In a colour scheme that has been produced by following such heuristics, there is no guarantee that controls will be visible or that textual elements will be readable against their backgrounds. In an interface, usability considerations – the readability of the text and the distinguishability of controls – are paramount. Therefore, the existing theories of colour harmony must be extended to guarantee that such semantically important detail is clearly visible.

Semantic and aesthetic considerations

The starting point for the colouring process is an interface that is complete, apart from its colour scheme. The aesthetic appeal of a colour scheme is affected not only by the colours of the objects themselves, but also by how those objects are arranged with respect to one another. However, even though the object placement is fixed, differing colours will produce schemes that are more (or less) pleasing.

The visual impact of the placement of coloured objects falls into the realm of art and aesthetics. This topic has been explored by many artists. For example, Mondrian created many works exploring the visual effect of the placement of solidly coloured areas, samples of which are illustrated in workbook of colour exercises by Hornung (2005). Kandinsky also explored colour and form in his later work (Beckes-Malorny, 2007). The research into evaluating aesthetics is ongoing (Ngo et al., 2002), but as the placement of the interface elements is predetermined, but the measures of aesthetics not related to colour harmony are not relevant here. The only degree of freedom is colour.

Interlinked with the effects of object placement are the effects of simultaneous con- trast, where the apparent colour of an object is affected by the colours of nearby objects (see sec. 2.2.6 for details). There is no well-accepted algorithmic method for the eval- uation of simultaneous contrast effects, nor is it clear that these effects need to be included in a system for user interface colour scheme design. Therefore, the proposed architecture does not attempt to incorporate the visual effects of object placement (including simultaneous contrast). Rather, it is left to the human developer to select colour schemes from those created automatically where the visual arrangement is ap- pealing, and ignore those schemes where the colours of nearby and juxtaposed elements do not enhance the overall scheme.

The placement of controls in an interface is not arbitrary: the designer of the interface will have placed the controls to visually encode relationships between form and function. Two techniques are commonly used: (i) placing related items in visually distinct groups, either by proximity or by using container controls with borders; (ii) using the same or similar colours for related controls. The developer must be able to ensure that these semantically important groupings are reflected in any subsequently generated colour scheme.

Incorporating developer-specified aesthetic constraints

How, then, should these underlying semantics be expressed? Program development and web design environments are not designed to capture information oriented towards colour scheme design (e.g. the desired emotive impact of the interface or details of the intended user group). While it would be ideal to capture this information automatically, it is not easy even to define what information is actually required.

As discussed in section 2.11, the visual and emotive appeal of colours are not only difficult to define, but their fuzzy nature would also make them difficult to encode in any comprehensive way, and any simple rule-based approach would be prone to error. This difficulty in definition and encoding also applies to the suitability of a colour

scheme for a particular audience1. These ill-defined factors are ones that a human can assess quickly, without necessarily being able to explain how.

To allow the automatic creation of colour schemes appropriate for a particular audience, a significant amount of ill-specified data (e.g. the colours to be included2_,

cultural context, age range of the target audience, gender, emotive associations, real- world associations etc.) would be required from the developer before scheme creation could commence. This is inconsistent with the requirement that a minimal amount of non-specialist input be required from the developer, so this requirement is addressed in two ways; requiring some input from the developer (the next section) and allowing any automatically created scheme to be adjusted after creation (sec. 3.9).