Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Answers to Exercises, Chapter 10

Test Questions

  1. The answer to this requires a caveat: visual design only affects usability for people who have at least partial vision. It is not relevant to blind people at all, but it is relevant to partially sighted people. At the present time, most of the content of a Web site is conveyed to most of its users by visual means, through a combination of words and pictures. For users without accessibility problems, even the text will be read by the eyes and not listened to as audio. Vision is the primary means of reception when interacting with a site (at present touch is usually the primary means of input and interaction). How information is presented and organized visually is therefore of the highest importance, as the brain tends to interpret visual information in particular ways, and to look for patterns and recognizable elements. If a user's brain can identify the elements of a site quickly and easily, and recognize what they do and how to use them, then that site is usable (at least for that user). The visual organization and presentation of material is the business of visual design.
  2. The following reasoning will be familiar if you have studied probability at all. If you haven't, the argument may seem back to front, but we hope you agree that it makes sense. Chapter 9 provides the rough statistics on how many people suffer from defective colour vision. Let's make the assumption that all the test subjects are Caucasian males. This gives the highest chance that one of our test subjects in the group of twenty people will be colour blind, since there is a 1 in 12 probability that any Caucasian male is colour blind. Putting the statistic another way, there is an 11 in 12 probability that he won't be colour blind. The chance that none of the twenty subjects is colour blind is the product of the probabilities of each subject not being colour blind, that is (11/12)20, which comes to just over 0.175. The probability, therefore, that at least one of the subjects does have red-green defective colour vision is 1-0.175, which is 0.825, in other words 82.5%. This suggests that using a group of twenty Caucasian males would be very likely to catch problems likely to affect users with this sort of colour defect, but by no means certain – there's still nearly a one in five change of missing them. However, if only five test subjects are used – as many usability experts recommend – the probability drops to just 35%. If female and non-Caucasian subjects are included in the group, the probabilities will also drop. Hence the idea that testing on small groups is adequate because people are all more or less the same is not justified. If you follow Jakob Nielsen's advice and discard any outlying data points, you effectively reduce the probability of catching colour-blindness-related usability problems to zero.

    Considerations such as these apply not just to colour blindness, but to any condition that only affects a certain proportion of the global Web community, and should be borne in mind when interpreting the results of usability tests carried out on small groups of subjects. (That is, nearly all usability tests.)

  3. The Web page illustrated in Figure 10.2 contains the following visual design faults: There is very low contrast between the black text and maroon background, making it very difficult to read the text or the navbar links. The navigational features are not grouped together and are very hard to locate, and the font size used for them is far too small relative to the other features on the page. There is no layout grid or other organizing visual structure, making it difficult to identify the different parts of the page and the way in which they relate to one another. This also makes the page look chaotic and unattractive. The site's logo is placed in the middle of the page, breaking up the content. The heading (Lorem Ipsum) is removed from the page's content in such a way that it is no longer tied to that content. The search box appears in the middle of the page and is removed from the search button, so that a user could not even know that it was the box for entering search terms. Its placement also breaks up the page's content. The body text is not laid out in a consistent way, and is not consistently placed with respect to the photographs, so that the user would be unsure which bit of text related to which picture. A significant amount of space is wasted at the top of the page, making the page harder to use for people with small screens than it need be, and increasing the necessity to scroll. The text column appears over-wide for easy reading. The dark maroon background does not show the photos to good advantage; if photographs are to be included then it should be assumed that they need to be presented in a way that shows their content as clearly as possible.
  4. Gestalt theories of visual perception have considerable relevance to the visual design of Web pages – perhaps more even than to the design of printed pages, because of a Web page's interactive and functional features. It is necessary that a visitor to a Web page can quickly and easily identify the main features of that page. This identification is particularly affected by what gestalt theory recognizes as grouping, especially by proximity of elements, similarity of elements, symmetry, and the distinction between figure and ground (or in this case more likely content of all types and background). The idea that the whole is different from and greater than the sum of its parts is also relevant to Web page design, as to any type of visual design. A Web page is made up of many different parts, which together create a general impression upon the visitor to the site. This impression is often created very quickly.

    The navbar is perhaps the most important element in Web design that depends upon gestalt principles. Without clear navigation a site is unusable, so it is essential that visitors can quickly identify which of the elements on the page are navigational, and readily understand how to use them. Navbars therefore usually make use of grouping, symmetry and proximity of elements.

    Another way in which gestalt principles are of great importance to the visual side of Web design is in the visual relation between the different pages of a site. Generally it is desirable that the visitor can easily recognize that a set of pages all belong to one site. In the case of very well-known sites, a quick look at a single page is often enough to identify the whole site. This is achieved by applying gestalt principles across the different pages of a site. In this case principles of symmetry and grouping are applied across a set of pages. For example, the navbar appears in the same place on every page, so does the company logo, search box, shopping basket or any other information or imagery that is repeated on multiple pages. Layout of the page's content will follow consistent rules from page to page, and the same fonts will be used for the same purposes. The use of colour will also be consistent – background colour or text colour will not vary between one page and another unless a change of colour is used to signify some other change – in which case gestalt principles are also being applied, by using the visitor's ability to quickly recognize the dissimilarity between pages.

    A third way in which some aspects of Web design depend upon gestalt principles is in the manner certain elements of the content of a page are presented and grouped. We referred to the example of the week's weather forecast in the book. Have a look at Figure 10.6 on page 560, and at a real weather forecasting site, such as the BBC's weather pages. To present the information clearly, much use is made of principles of grouping, proximity, symmetry and the distinction between figure and ground.

  5. The signifier is a sign – for example, a symbol, a word or a sound. The signifier has no inherent meaning in itself (to understand this, think for example of the No Entry signinternational "No Entry" sign, a red circle with a horizontal white rectangle in the middle. In itself, it means nothing.) The signified is the thing which a sign identifies. The relation between the signifier and the sign is arbitrary, and is only understood by learning the conventions of that particular system of signs. (We learn that the circle with rectangle sign means "no entry", but we could not guess this any other way.) There may be several signifiers for a single signified – consider the case of the elephant. One type of animal, but many words in many different languages which signify it.

    Web designers need to think about the possible meanings of any signs (other than natural language) which they may use on a Web page. Designers need to remember that there is no necessary connection between the signifier and the signified - each sign can only be understood within a conventional system. At times signs have been used for functional elements of pages - for example, a magnifying glass or pair of binoculars has been used to signify "Search". There is no agreed convention for the use of such signs, nor is their meaning necessarily obvious. (Do you usually look for things you want to find with a magnifying glass? Surely a magnifying glass is generally used to make something which is already visible appear at a larger size.) Designers should therefore be very wary of using any symbols that do not have clear and internationally agreed meanings.

  6. Designers who try to create fixed-grid layouts tend to use px units for dimensions and coordinates, so that the size and position of every element is specified with pixel precision. Users with narrow screens will have to scroll horizontally if the width of the designed page exceeds the width of their screen. Since designers frequently use big screens, and some of them use all the space available to them, this happens quite often. On the other hand, if a page is designed with fixed dimensions for a narrow screen, users with wide screens who use all the available space for their browser windows will see vast areas of blank space beside the page's content. Worst of all, users who need to increase the size of the font used to display the page will see the text overflowing the fixed-size containers allocated to it, so that the page degenerates into a mess of overlapping text and images. This is never acceptable.
  7. Fortunately, it is not necessary to consider all 54 possible cases. If the width of the innermost div is specified in mm units, it will stay the same width whatever happens. If the font size is altered, the text within it will reflow, but the width of the element will not change. Similarly, if the innermost width is specified in em units, the width of the inside div will change with the font size, but be unaffected by the width of the window, irrespective of the units in which the other two elements are specified. Hence, the only complicated case is that of an innermost div whose width is specifed in %. This will always adjust itself to be the same proportion of the middle div, so the innermost div only changes size if the middle-level div does. The following table summarizes the possibilities when the innermost div's width is specified as a percentage.
    OuterInnerFont sizeWindow size
    mmmmnono
    emvariesno
    %nono
    emmmnono
    emvariesno
    %variesno
    %mmnono
    emvariesno
    %variesvaries
  8. Centring a wide navbar over a narrower text column can be done in many different ways, depending on the markup used and the units in which the widths are specified. Here is one way that uses minimal markup. Please note that it is not the only way of doing it.
    
    <ul class="navbar">
    	<li>home</li>
          other navbar entries as li elements
    </ul>
    <p>
    	body text as simple paragraphs or whatever
    </p>
       ....
    
    and the following stylesheet rules:
    body {
    	font: normal 1em/1.5em Arial, sans-serif;
    	width: 35em;
    	padding: 0 25%;
    	margin: 0;
    }
    .navbar {
    	display: block;
    	font: normal small-caps bold 2em/3em Arial, sans-serif;
    	list-style: none;
    	width: 200%;
    	margin-left:-50%;
    	padding: 0;
    	text-align: center;
    }
    .navbar li {
    	display: inline;
    	padding: 0 1em;
    }
    

    The idea is to add 25% padding to each side of the body to accommodate the navbar, whose width is set explicitly to double that of the body, as required, and then move the navbar left the appropriate amount so that its box is centred within the page. (Note that the margin-left is specified as a percentage of the navbar's width.) The text-align property is set to center so that the items in the navbar are centred within its box.

  9. A user's response to the colours on a Web page may be influenced by many factors, including: how the designer's colours actually appear on the particular equipment the user is looking at, the user's personal colour vision, their personal tastes, their cultural environment and background, colour conventions the user is (or is not) familiar with, current fashion, and perhaps on the user's mood.
  10. The first factor that determines whether a visitor to a page sees the same colours as the designer did is whether the user has specified their own stylesheet, or set a browser preference that overrides all colour specifications on the page. (For example, in Firefox, unchecking 'Allow pages to choose their own colours...'.) Other factors that might affect the colours actually seen when the page is displayed include the monitor's type (CRT or flat panel), its quality and age, and whether it has been calibrated, the amount of VRAM installed on the computer (which determines how many colours can be displayed simultaneously), the operating system and any settings that affect the number of colours displayed. Additionally, the colours that are seen will be affected by the lighting conditions under which the page is viewed and the acuity of the viewer's colour vision. All these factors will affect both the colours seen by the user and those seen by the designer, so it is only in the rare case that all of them match that both will see the same colours.
  11. Anyone over the age of about 40 begins to lose the ability to distinguish between close tonal values, and this gets worse as people get older. Anyone of any age with one of a range of sight problems from short-sightedness to colour blindness to partial sight will also find it difficult to distinguish between elements close in tonal value. In total, a very large number of Web users around the world will have some difficulty in seeing elements close in tone, and many will have serious difficulty. Even people with good vision will find a page with good tonal contrast easier to read. There is therefore every reason to use good tonal contrast, and no good reason not to. The elements on a Web page that should contrast most strongly with one another are, broadly speaking, whichever elements it is most important that (sighted) users can see. These would normally include all the navigational elements, the site logo or identifier, and all text. (If there is text on the page which it is not important that people can read then you should question whether it should be there at all.) Where use is made of signs and other visual elements with meaning – for example in a weather forecast page – then these too should use high contrast, usually between the sign and its background.
  12. There are many ways in which text can be made to stand out from the rest of the page. They include making it larger or bolder, setting it in a different, more striking font, positioning it so that it stands apart from the rest of the page, for example by putting white space around it, and placing it on a differently coloured background from the rest of the page. Figures 10.29 and 10.30 show some examples.
  13. If images are turned off in the browser, the background GIF text will not be displayed. If CSS is implemented and enabled, the negative text-indent value will cause the heading's content to be moved off the screen. In combination, these two effects will cause the heading to vanish entirely. This is unlikely, but not inconceivable. For instance, it is possible that this combination of circumstances would arise if a user had a low bandwidth connection, or one for which they had to pay for data transfer according to its volume, but was using a modern browser. An alternative way of handling image replacement is to use JavaScript.

Discussion Topics: Hints and Tips

  1. Look at some pages of different search results from Google images. Which of the small pictures stands out on each page and why? If possible, try looking at the screen upside down (or take a snapshot of the page and turn it upside down in a program like Photoshop). Do the same pictures still stand out? Is it for the same reasons? In what way is a Web page different from an image? Does this mean that different principles will apply if Web pages are displayed at thumbnail size?
  2. Browse around the Web and make a note of all the iconic symbols you see, whether it was clear what they signified, and whether you think it would be clear to users from different parts of the world or with different levels of vision. Can you think of groups of users for whom symbols might be easier to understand than text? Can you think of situations where a symbol might convey meaning more quickly and easily than text?
  3. This question was inspired by the layout of the site Design Observer. Here (at the time of writing), they have used a three-column layout with the main content in a wider column at the left, and ancilliary material in two narrower columns on the right. But it's easy to see it as a two-column layout, with the right half split into two.
  4. Think about the results that might occur if Web designers did not concern themselves with colour, and what effects those might have on the potential users of different kinds of sites. Think about situations in which visitors to a site might require colour information, and situations where colour might not be essential but could perhaps be useful or persuasive in some way. Think about the role colour plays in your own life.
  5. Any of the techniques for making text stand out from its surroundings mentioned in the answer to Test Question 12 can be used to draw readers' attention to important text. In addition, its position on the page will help determine whether skimmers read it: the first couple of lines of each paragraph that can be seen without scrolling are likely to be read. The question then becomes one of writing: how do you make sure that the text you want to be read can be positioned and called out while still retaining some semblance of coherent prose? One answer is to throw everything else out, but this would be unwise – there are degrees of importance, and if you can persuade somebody to read the most important words, they may go on to look at the rest. Try looking at a Web page you are not familiar with quickly, leaving it and writing down what you can remember reading. Then go back to the page and see if you can identify what elements of the design made you recall that particular text.

Practical Tasks: Hints and Tips

  1. If you are still unsure what constitutes good visual design, go back through the chapter and make a checklist of the points covered. Then match each site you look at against that list. When you visit a new site, assess how long it takes you to find your way around and recognize all the elements on a page. Generally, the best designed sites will also be the quickest to find your way around.
  2. Make a "bad design" checklist in the same way as you made the "good" list in the last assignment and use it to help you if you aren't sure. If you find a site that you really struggle to use, start with that one, and identify why it is so hard to use.
  3. There are absolutely no "right" answers about colour. Response to colour is both physiologically determined and psychologically subjective, and is further influenced by culture and fashion. It is reasonable to expect other people's responses to be different from your own, and interesting to try to understand why – if indeed there is a reason that can be articulated. If there is a consensus within your group about a particular colour, can you determine why?
  4. It can be difficult to see differences in tonal values. You may find it helps to half-close your eyes when trying to assess the tonal range of a set of colours. If when you put your screen into greyscale to test your results you find that you made a lot of mistakes in your assessment of the tonal values, go back to full colour and see whether – with the tonal value information from your notes on the greyscale version – you can now see the differences that you could not see before. If not don't worry. Some people find it much harder to see these differences than others, which is why high contrast makes page elements easier to see.
  5. Don't just copy or adapt examples you have seen around the Web, but approach this design task by applying the fundamental principles. Perhaps you will come up with an original way of organizing the navbar. Remember that gestalt principles are of particular importance in navbar design.
  6. Think carefully about the application of gestalt principles and layout grids for this one. Look at how listings of job vacancies are displayed in other media. You could follow the example of a newspaper, and try to pack many announcements into a single page. You will then need to look at ways of clearly distinguishing the different jobs. Alternatively, you might want to create something like the notice boards in employment agencies, where the jobs are pinned up on cards. Here, there is usually plenty of white space to set off each card. Remember that on the Web you have colour to play with for free, whereas colour printing is expensive, so newspapers and so on don't make as much use of colour as they could.