Criterios de orden del material

Once the interface has been characterised and the developer has specified a set of colouring constraints and a wireframe archetype, it is possible to allocate a position on the wireframe for each interface element. If the maximum length of a wireframe segment from the origin is±1, and if any orientation of the wireframe is possible, then only points within a unit sphere can occur within a colour scheme. Limiting randomly selected colours to the points within this sphere limits distances is useful, as it limits the maximum distance in the abstract colour space.

4.4.1 Creating prototypical colour molecules in abstract colour space

The interface characterisation phase allowed the developer to indicate the number and composition of the colour atoms (elements or groups) in the interface. The positions of the colour atoms on the wireframe defines the lightness and saturation of the related elements, and therefore defines the colour relationships between them. There is a large number of possible positions. As an initial allocation, the atoms could be positioned randomly on the wireframe, or fixed points could be chosen and the colour atoms allocated to these points randomly.

The method used in the Colour Harmoniser prototype when initially creating colour molecules is to randomly allocate atoms to a fixed points chosen to be as far from each other as possible. This maximizes the average colour difference between adjacent atoms, and, for some orderings, will result in distinguishable (or readable) interface elements. The method used to choose the fixed points depends on the wireframe. For single line wireframes, the atoms are evenly spaced, as shown in figure 4.8.

For wireframes composed of multiple straight-line sections (e.g. split-complementary), the atoms are allocated to each segment in turn. For curved wireframes, the points are allocated at equal rotational angles from the centre. The actual distances will vary, but precision is not necessary, as the atom positions will be altered later to find an arrange-

ment that satisfies all the constraints. Figure 4.9 illustrates the full set of wireframes supported by the Colour Harmoniser prototype, showing an initial set of positions and the placement of the wireframe in the abstract 3D colour space.

It is very unlikely that any of initial orderings will exactly satisfy the colour strength balance and readability/distinguishability constraints, but some orderings will approach this ideal more closely than others. For example, some orderings will allocate a textual item and its background to widely separated points on the wireframe. If the wireframe is tilted (e.g. to 45◦ to the vertical), more widely-separated wireframe positions will have greater lightness difference and are more likely to satisfy the readability criterion than orderings in which the atoms are closer (and the ∆L is correspondingly lower). The evaluation of distinguishability is similar to that of readability, but is evaluated from the less restrictive ∆E (rather than ∆L) separation, so more separated items will have better distinguishability, and for colour balance, some orderings will be more balanced than others. To satisfy all the criteria at the same time, it is very likely that the atoms will need to be moved from their initial positions.

4.4.2 Augmenting the wireframe with achromatic colours

The wireframe upon which a colour scheme is based strongly affects the range of possible colours. Monochromatic colour schemes use one hue; complementary schemes use two; split-complementary schemes use three; less commonly used wireframes, such as those based on curves (e.g. circular/elliptical) use many.

In the initial development of the prototype, the schemes produced were colourful and balanced, but often too colourful for a graphical user interface. It wasn’t that colour was being used badly: there was just too much of it – everything was coloured. This overuse of colour is not particular to interface colour schemes, it also applies to art:

“color can overwhelm. . . one must understand that when it comes to color lessis often

more – a lesson taught us by the masters but ignored by many artists” – Singer (1976), cited in Edwards (1993). The primary role of an interface is to convey information, and the use of too much colour can be distracting. It is therefore desirable to provide a means of moderating the use of coloured elements. Comparing schemes on the web and desktop GUI interfaces with those produced by the prototype, the reason for the difference easy to see: black, white and shades of grey were missing from the schemes produced by the prototype. These achromatic shades are widely used in real interfaces, but cannot (with the exception of mid-grey) occur in a colour scheme based purely on any of the common wireframe shapes.

To address this, an option was added to allow blacks, whites and different greys to appear in the final colour scheme. This is implemented by extending the wireframe to include an additional path, along the lightness axis7. This is a simple but significant augmentation of the wireframe archetype. It allows the user to choose (for exam- ple) a complementary colour scheme enhanced by the addition of black, white and grey elements, instead of a scheme consisting totally of complementary colours. This modifi-

7

the vertical (y axis) in the abstract colour space is mapped to lightness in the abstract-to-real colour space mapping.

Complementary Split-Complementary Monochromatic

Elliptical Analogous – side view Analogous – top view

Figure 4.9: The colour scheme wireframes supported by the Colour Harmoniser prototype. The top row shows the wireframes for most frequently used colour schemes: complementary, split-complementary, and monochromatic (where only one hue is used). The monochro- matic wireframe includes a pragmatic optimisation: it stops short of the black-white axis, so that the lightest and darkest elements contain a touch of colour, resulting in a more sophisticated looking scheme. On the bottom-left is the elliptical path suggested by Mun- sell. The bottom-centre and bottom-right figures show the analogous wireframe used in the prototype. The analogous scheme is often shown as an arc on a full saturation colour wheel, but this is too restrictive for use in the prototype: changes in lightness are obtained by tilting the wireframe from the horizontal; changes in saturation by using a different radius for the top and the bottom of the wire, as shown in the bottom-centre figure; and changes in hue by tilting the wire from the vertical, which changes the rotational angle for the different atoms, as shown in the bottom-right figure.

cation can be applied to any of the balanced (complementary, split-complementary and elliptical) wireframes. With the addition of the black-white axis, the resulting schemes more closely approximate many of the more visually appealing interface colour schemes used on websites and in desktop applications.

The use of achromatic colours does not appear to disturb the colour harmony, and, by simplifying the scheme, accentuates those elements that are coloured.