The previous sections have demonstrated that colour scheme design is important in user interface design and that there are methods that can be used to select colour schemes likely to have broad appeal. This section will survey the capabilities of existing software for selecting colours and creating colour schemes oriented towards design, with a particular emphasis on user interface colour schemes.
2.10.1 General purpose colour selectors
Figure 2.29: Two colour selectors typical of those in current use, both from Microsoft PowerPoint 2003TM. On the left, a flattened HSL representation, and the right, a form
resembling a colour wheel. Neither supports selecting sets of colours, and both are modal, forcing the choice of colours out of context. It is very common for repeated invocations of either dialog to be necessary, as the new colour (visible in the swatch at bottom right of the dialog) can appear different when viewed in context, the visual impression being affected by the area of the colour and by nearby coloured objects.
The use of colour in the desktop computing environment has changed significantly over the last two decades. Any modern computer is able to display millions of colours, and software for the creation of documents and graphics is routinely able to let the user select the colour of any document item. However, the facilities offered by most colour selectors are oriented towards single colour selection; as illustrated by thePowerPointTM colour selectors shown in figure 2.29, there is little to aid the user in the selection of harmonious colours other than presenting differing views of the colour space. Despite research that indicates that immediate visual feedback improves user performance when choosing colours (Douglas and Kirkpatrick, 1996, 1999), such a facility is rarely available. Almost all colour selectors are modal, forcing the user to choose colours out of context, although this is starting to change, as illustrated by the non-modal colour selector from the
InkScape drawing tool34which is shown in figure 2.30.
Figure 2.30: One of the non-modal colour selectors available in the InkScape drawing tool. The combined colour wheel and hue slice colour selector on the right enables all tints and shades of the selected hue to be seen simultaneously. Dragging the little circle (the selected colour) within the triangular area immediately updates the colour of the selected object. The colours are therefore seen in context, which helps to avoid colour selection errors.
One might expect that the colour selectors in programs oriented towards graphic design and the visual arts would be significantly more sophisticated than those general-purpose selectors surveyed above. This is indeed the case, but the additional facilities are generally more oriented toward professional designers who know how to create and use palettes appropriately, rather than features that would directly aid na¨ıve users when colouring interfaces. For example, products from Adobe’sCreative SuiteTMrange include two features particularly relevant to colour selection. The first is the ability to work in colour spaces suited to the destination domain, such as specific RGB colour spaces or CIELAB in Adobe PhotoshopTM, when manipulating images for on-screen use, or CMYK35 for printed images. The spot colour selector is enhanced (fig. 2.31
left) and able to show views of colour space in ways that make it easier to find ordered sets of colours. Professional designers will often use multiple palettes within a single document, and so sophisticated palette management is supported (fig. 2.31 rightmost image). New palettes can be created by specifying a key colour, with the remaining colours calculated using pre-specified relationships with the key colour. The traditional colour relationships, such as complementary and split-complementary are included,
34
http://www.inkscape.org, accessed May 21, 2010.
35
along with many others oriented to specific colour associations, such as “ice-cream” and “corporate”. The exchange of palettes using either palette files or Internet-based resources is also supported. For example, AdobeIllustratorTM supports the browsing and the importing of user-contributed palettes from Adobe’sKulerTMwebsite36(Adobe Systems, 2009). Once a palette has been imported, the new colours can be easily applied to an open document.
Figure 2.31: Two colour selectors from the AdobeIllustrator CS4TM package illustrating the features offered by professional graphical design tools. On the left, the contents of the thin vertical rainbow-coloured area can be set to show all variations of a particular colour property. The selector on the left displays all the hues in the vertical strip, with the larger area showing the other two colour space dimensions (for the example shown, lightness vertically and saturation horizontally). On the right, an illustration of the palette management facilities. The multi-coloured grid on the web page can be instantly recoloured by clicking on any of the palette sets.
These palettes are excellent starting points for artistically-oriented users, but do not directly address the needs of unskilled users. Programs like IllustratorTM and Pho- toshopTM are intended for use by professional designers who will use the palettes as starting points and modify the colours to incorporate any aesthetic or domain-oriented requirements that they deem appropriate.
2.10.2 Template-based colour scheme design
Users whose specialty is not graphic design would probably prefer a package intended for a non-specialists, such as MicrosoftPowerPointTM. The colouring facilities offered by this program, probably the most widely-used presentation design tool, are based on templates, offering the ability to vary the presentation colours as a group, or altering the colour of individual elements (for details see Moretti and Lyons (2002)). The MicrosoftFrontpageTM website design tool has colour selection features that are based on templates in much the same manner as those of PowerPoint, but augmented to cater for web-specific facilities such as the different colour of visited links or graphical elements used as hyperlinks (fig. 2.32). Template-based systems can work well, as
36
Figure 2.32: Left and centre: the template-oriented approach to colour scheme manage- ment from Microsoft’s web design tool Frontpage 2003TM. The facilities in PowerPoint 2003TMare similar. Complete schemes can be changed or recoloured in toto, but only with the indicated coloured elements. Right: the facilities offered to GUI application developers in Microsoft Visual Studio Express 2008TM. The options, unless altered programmatically, are limited to choosing from the limited palette shown. Microsoft products are illustrated as they are very widely used, and their colour selection facilities are typical of those found in products from other manufacturers.
long as the design is limited to colouring the elements within the predefined templates. However, such a constrained approach does not allow the flexibility to colour user interfaces or websites with an indeterminate number of colourable elements.
Software design environments intended to create runnable desktop applications have strong support for programming features (popup help, program breakpoints and de- bugging support, refactoring etc.), but support for the creation of user interface colour schemes is fairly rudimentary. This is illustrated by the limited colour selection fea- tures (fig. 2.32) in the otherwise sophisticated Visual Studio Express 2008TM37 IDE for C#. This is not surprising, as the typical method of including user-configurable colour scheme – templates – does not generalise well. The range of possible interfaces is so great that it is impossible to create a generally applicable approach based on fixed templates.
37
The Visual Studio suite (there are different versions) is Microsoft’s multi-language software devel- opment environment.