Answers to Exercises, Chapter 11

These are answers to the exercises in the 3rd edition of Digital Multimedia (published February 2009) only. Do not try to use them in conjunction with the 2nd edition.

Test Questions

1. The gestalt principles of visual perception identify five ways in which we recognize grouping of objects in a visual field.

   First, we use proximity. That is, if we perceive that several objects are close together, and are separated from other objects by a larger distance, then we consider the cluster of objects to be a group, distinct from any other groups we can see.

   Second, we rely on similarity. If several objects share some aspect of their appearance, such as their colour or their shape, we may consider them to be a group even if they are not close together.

   Third, symmetry causes us to link two elements conceptually where one is a reflection or rotated version of the other. We may even see the whole as a single object.

   Fourth, closure causes us to combine visual elements in our minds to create a whole, if by doing so we can see those elements as parts of a single larger object, even when some of the parts are missing from the visual field.

   Finally, the figure-ground phenomenon provides a special sort of grouping, where we can see two objects or groups in a visual field, but not both at once. The negative space around a group of objects (such as simple dots), or enclosed by them, may itself appear to be a distinct object in some cases. The objects surrounding the empty space which suggests a shape become grouped together to form a background (the "ground"), thus allowing the negative object to be perceived as the "figure". In a true figure-ground phenomenon the ojects themselves must also be capable of being perceived as the figure.

   These gestalt principles are illustrated in Figure 11.5 on page 433 and Figure 11.6 on page 435.

2. Applying gestalt principles to page design is a good way of making the structure of a page (as expressed for the purpose of processing by programs in its markup) explicit to people looking at the page: markup groups elements of the document, gestalt-based design groups visual objects in the browser window. Thus, you would use gestalt principles to emphasize or make clear the structures making up the page, and this in turn should make the page easy to use.

   The navbar is a classic example, where proximity and similarity are used to group the collection of navigational links (probably marked up as a list in XHTML) into a unified visual entity. Even the use of a consistent font, colour and size for navbar items makes important use of the principle of similarity.

   Other examples you will see in contemporary Web pages include the grouping of links to related sites in a block on the side of the page, and the grouping of the collection of information about the site into a footer at the bottom of the page. These items are always grouped by proximity, by being placed together in a distinct block on the page, and are sometimes distinguished from the rest of the page by having a different-coloured background, applying the principle of similarity inversely. This technique (applying similarity inversely) may also be used to make important elements – such as the shopping basket on an e-commerce site, or the "submit" button on a form – stand out from the rest of the page by virtue of their difference from the other elements on the page.

   Gestalt principles, particularly similarity and proximity, underlie the conventional typographical conventions that the Web has adapted from print media. For instance, headings are usually set in a distinctive type style, with more space above than below, so that they define the start of a new section, separate from the one preceding it, with the heading visually linked to the following material.

   An application of similarity that is unique to the Web is the use of distinctive styling for inline links (even if this is just an underline). This allows us to recognize all links as being similar in kind, and in some way distinct from the rest of the text on the page.

3. The signifier is the form of a sign – that is, what the sign looks, sounds, feels, smells or tastes like. In natural language, a signifier is a word or combination of words. In visual communication, the signifier may be an icon or any other visual element. The signified is the meaning or concept which the sign refers to. A word, such as "butterfly", is a signifier, whether written or spoken. A picture of a butterfly is also a signifier for the same signified. In this example, the signified is the actual flying insect (or perhaps the whole class of insects, depending on the context). The relationship between the signifier and the signified is always and necessarily arbitrary. The signified is referred to by different words (signifers) in other languages. In sign language the signifier is a sequence of gestures.

   In the geological slide player:

   • The large image of the geological slide, being an image and not the slide itself, is a signifier.
   • The cross-hairs are a conventional signifier identifying the centre of the round window.
   • The four player controls on the upper part of the control panel are the conventional signifiers for controlling playback, but because of the way the movie being controlled was constructed, here they signify starting, stopping and stepping the rotation of the slide.
   • Similarly, the slider is a signifier indicating the angular position and at the same time signifies the operation of rotation by dragging.
   • The two buttons at the bottom left of the control panel and the Set button are signifiers for the operations described in the text.
   • The numerical read-outs signify the current angle of rotation, the base angle for measurements and the angular difference, as described in the text.

4. Visual hierarchy is the hierarchical structure of a visual field defined by the relative dominance between the objects in the field. Dominance usually occurs by way of a violation of the gestalt principles that causes objects to stand out instead of being seen as part of a group.

   XHTML documents have a hierarchical structure, expressed in the nesting of elements. Visual hierarchy can be used to express this structure visually. For instance, the items in a list should be grouped together within the list using hierarchical principles: the individual items are made subordinate to the list as a whole by, for example, placing them close together but surrounding the entire list by a significant amount of white space, which sets the list apart from the other items on the page, making it into a distinct visual element. Visual hierarchy is also used as an expression of emphasis, as when headers are made to stand out or an emphasized element is distinguished typographically, or by colour, etc.

   It is common to use one or more images to alter the visual hierarchy. For instance, on a news site, it is normal to use an image at the top of a story, which inevitably dominates the text, irrespective of any typographical structure that has been employed.

5. There are three classes of problem that can result from inappropriate colour choices when designing an interface: physical (i.e. accessibility) problems, usability problems and cultural problems.

   Physical problems are due to the fact that some people cannot reliably distinguish between certain colours, most commonly red and green. If you use red text on a green background and both colours have similar tonal values, the text will be unreadable by some people. (We expand on this point in Chapter 13.) The consequences will be more or less serious depending on the text in question. If navbars are displayed in inappropriate colour combinations, colour-blind users will be unable to get around the site; they may not even see the navbar at all. If colours are used as an indicator of errors – for example, when form fields are filled in with unacceptable values – the warnings may not be seen. These problems can be avoided by always ensuring that there is enough tonal contrast (difference in brightness) between text and its background regardless of the colours used, or between other superimposed elements that need to be distinguished and the background, and by making sure that information is never conveyed by colour alone.

   Usability problems will obviously result from the physical problems described above, but inappropriate choice of colours may lead to other usability problems. In particular, colour contributes to the gestalt principle of similarity, so making related elements, such as the items in a navbar, different colours will cause problems, because they will disrupt the gestalt grouping. Such problems are avoided by paying attention to gestalt principles.

   Defying conventional connotations of colours may also be problematical. For instance, red often denotes a warning, so where there are two choices, one of which is dangerous, if one of them is red, it should be the dangerous one.

   Cultural problems may result from assuming that certain colours have the same significance for everyone. In fact, the connotations of different colours vary widely around the world. This may lead you to convey the wrong mood or impression to visitors from cultures different from your own. Research is one way to avoid these problems, but sometimes the different meanings ascribed to colours may be incompatible. Again, the best approach is to avoid trying to convey information of any sort by the use of colour alone.

6. Answer (c) is the case. Images can only fit on a grid if they have one of a limited number of sizes. They don't all have to be the same size: use of a grid doesn't demand that you fit every object on the page into a single grid cell, you can span several vertically or horizontally without disrupting the grid layout. Nor do they have to be the same aspect ratio: one image may span two cells horizontally but be just one cell deep, while another image may span two cells in each direction, for example. Their aspect ratios will be different, but the grid will be preserved. (Actually, grid layouts often have gutters between cells, so spanning images will necessarily have a different aspect ratio from ones that only occupy a single cell, even if the number of horizontal and vertical cells spanned is the same. a/b ≠ (2a+k)/(2b+k))

Discussion Topics: Hints and Tips

1. In this chapter we have tried to show that visual design is an essential component of usability, but not everyone shares this opinion. You will be able to find "usability experts" whose studies of user behaviour take no account of visual design, and who treat it as mere decoration. You should consider whether this view is supported by the evidence.
2. This is a complex question, and you should not try to answer it without looking at guides to graphic design and many examples of design – both on and off the Web. You will need a good understanding of gestalt principles before you can consider the question properly.
3. Think about ways of disrupting the principles behind grouping – something that stands out won't appear to be part of a group.
4. Start by looking at some multimedia interfaces on your screen while setting the display to grey scale and see how this affects the appearance and usability. Then go back into colour and see how the colours are being used and whether they are working.

5. Graphics designers periodically write articles with titles like "Beyond the Grid", suggesting that grid principles are outdated – often the thesis is that the dynamic nature of screen-based media makes print-based ideas obsolete. Nevertheless, most designs do end up using a grid, consciously or not. Do you think that layouts that don't use a grid can still be functional or are they just design gimmicks that may appeal to the eye but don't convey information efficiently?

   As a helpful exercise, look at some multimedia interfaces (not just Web pages) and see whether a layout grid can be superimposed on them.

Practical Tasks: Hints and Tips

1. The gestalt principles and ideas of semiotics may not be applied in a conscious or deliberate way. You will need to look at the visual structure of the site and see how it can be analyzed using these ideas, rather than trying to reverse-engineer the design.
2. Figure 11.11 is an example of the type of effect we are considering in this exercise. You can use any of Photoshop's selection tools, including the magic wand. The tool will determine the sort of selection you make, and thus the result you achieve by desaturating. You will often get the best result by selecting an area you want to keep in colour, then inverting the selection (Select>Inverse in Photoshop). Then remove the colour from the inverted selection (Image>Adjustment>Desaturate). You can also experiment with modifying the edge of the selection (feathering etc.). This may make a prettier result, but does it alter the way in which the colouration builds a visual hierarchy?
3. If you want to get away from your computer, do this by cutting rectangles out of coloured paper and arranging them using a set square and ruler.