Chapter 8 - Visual Design

Chapter 8 - Visual Design

The aims of Art

Once again I warn you against supposing, you who may specially love art, that you will do any good by attempting to revive art by dealing with its dead exterior. I say it is the aims of art that you must seek rather than the art itself; and in that search we may find ourselves in a world blank and bare, as a result of our caring at least for this much art, that we will not endure the shams of it.[1]

Visual design
We are not here to study technology for its own sake. We are to use technology to brighten the dark places of peoples lives. The artistic endeavour in software systems provides the greatest single measure of success or failure from the point of view of the user. And we may as well face up to the fact that no-one will thank us for perfectly designed and executed systems. They are simply invisible, and the more perfect they are, the more invisible they are. The greatest measure of the technical success of a software project it how often it is not thought about. So what are you left with after designing the perfect system, to let people know how superb it is? Yes, you guessed it: its artistry. A software system is living art when it is pleasing to look at, and flows from task to task easily. Display and navigation is all you have. If you cant get from one task to another, and the screen is crammed with dialogs, youre missing the point. This part of design is sadly lacking in so many systems. Yet it is the most striking example of software failure or success. Designing your object system and database well is pointless if all you are going to do is hurl data onto the screen. Some terrible software has looked good. It has won awards. Few awards are won for well architected systems, for software architecture cannot be seen, nor picked up, nor heard. Too many in the software field are rewarded for managing crises. The server has gone down. The system crashed. Those heroes who spend all weekend fixing them are rewarded. The person who prevents the system going down never gets a second thought. They are ghosts. Once a project is finished, the software architect should vanish like a ghost. In an old parable: In ancient China there was a family of healers, one of whom was known throughout the land and employed as physician to a great lord. He was asked who in his family was the greatest healer. He replied:

file:///F|/ztemp/Visual%20Design/chapter8.htm (1 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

I tend to the sick and dying with drastic and dramatic treatments. On occasion someone is cured, and my name is shouted from the rooftops. My elder brother cures sickness when it begins to take root, and his skills are known only here among the local peasants and our neighbours. My eldest brother is able to sense the mere spirit of sickness, and eradicate it before it takes hold. He is unknown outside our home. Visual design is all about why this:

Figure 8.1 joe kane, landscapes Is a better example for us than this:

Figure 8.2 joe kane, gardener The first card offers the services of joe kane, landscapes. There isnt much on the card, just a grey shape with a hole in the shape of a leaf. It is a business card, not an advert, so can afford to be slightly ambiguous. Landscapes are implied by the shape of a hill. All in all, it doesnt strain the eye, and it is moderately subtle. The second example is as blunt as a charcoal pencil. Joe Kane is a gardener, heres his address and phone number, and he mows lawns and does something with trees. Hes a what you see is what you get kind of a person. Honest, straightforward, hard working. He's probably a good bit cheaper than joe kane the landscaper too. So why is the first one best for us?

file:///F|/ztemp/Visual%20Design/chapter8.htm (2 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Firstly, we are creating software, and in your face software soon becomes dull. We need more subtlety, and the gentle arc of joe kane landscapes neatly contains the information. It follows the angle of the 4 as it rises from bottom left, and the leaf, almost invisible, seems well fitted to its container. Joe kane, gardener will soon tire its viewer with its chirpy lawnmower and apple tree. You could even get away with tearing the card down its right hand side and keeping only the informative bit. You would probably want to do the same with your computer screen after a while, but may find it tricky. That, of course, would frustrate you even more. Being inoffensive is often key. Secondly, I offer you the thoughts of Frank Lloyd Wright[2]: Challenge of the Machine. In this day and generation we must recognise that this transforming force whose outward sign and symbol is the thing of brass and steel we call a machine, is now grown to the point that the artist must take it up, no longer to protest. Genius must dominate the work of the contrivance it has created. This plain duty is relentlessly marked out for the artist in this, the Machine Age. He cannot set it aside, although there is involved an adjustment to cherished gods, perplexing and painful in the extreme, and though the fires of long honoured ideals shall go down to ashes. They will reappear, phoenix like, with new life and purposes. Either we take on the challenge of software art, or we get someone on our team who is artistic.

The dialog box

Have you ever had a monologue with a dialog box? The word dialogue comes from the Greek dialogos: a conversation. Does it feel like a conversation? I doubt it. Its more like selecting a few entries from lists, typing in a bit here and there to guttural prompts like User: Hardly a conversation. Wizards are more conversation-like. They tell you about what you are doing, ask you to do one bit of it, then move on to the next bit. Finally, you see a summary of your conversation and you submit it for the record.

Figure 8.3 Keen user interface design Let's list everything wrong with this dialog

file:///F|/ztemp/Visual%20Design/chapter8.htm (3 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

1. It doesnt look very nice. 2. The message is not very timely. Its not telling me Im about to run out, just that Im out. Ive probably noticed anyway. 3. Where is the dialogue? My only possible conversational input is to say OK. 4. It affects my state of mind. It is a taunt. I want to respond with violence, but violence would damage my screen, and possibly myself. Instead I bottle it up and rage at the air. In my annoyance, I dive out of the car, momentarily without my usual concern for safety, and get run over by a truck.

Form, colour and ornament: design ingredients.

Although rather lacking as an example dialog box, it does contain the three visual design ingredients of form, ornament and colour. Form defines what something is. We know this is a dialog because it looks like one. There is some kind of bar across the top, a bit of text in the middle, and a button at the bottom allowing at least some user input. It is something we have come to recognise through our use of computers. I doubt it would mean much to someone unfamiliar with computers, though they could probably guess what was happening. Colour is a visual delineator and highlighter. Colours can be used to subdivide visual elements, and also allow some artistic expression to the user who wants all buttons to be green, and backgrounds to be pink. Ornament or decoration is taking a plain form, and embellishing it using textures, patterns or symbols. We ornament input elements with bevels, or 3d borders. We ornament our windows with close, expand and hide buttons. We ornament many items with small symbols, or icons. Beyond these fundamental design ingredients, we can also add what I shall call dynamic embellishment. When you click a button, it looks like it clicks down. When you hover over an item of interest, a small note pops up explaining what its function is, or a hyperlink underlines itself. Mixing these four ingredients and applying them to your user interfaces is what visual design is all about. You must do the work of a graphic designer and a technologist in bringing your designs to life. A non-responsive screen is unfinished software.

The creative use of white space

In the first example of a business card, there is a lot of free space. Some find this sacrilegious waste of paper offensive, but only when they are doing the designing. They attempt to fill the white space with something of meaning, and in doing so, destroy the
file:///F|/ztemp/Visual%20Design/chapter8.htm (4 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

message. Leaving lots of space in graphics terminology is the creative use of white space. It implies that the space left between items is every bit as important as the items themselves. Indeed, the whiteness itself can hold a message, or add to the ambience of the view.

Now
This one word defines us. We live in the era of the quick fix. I want it, and I want it yesterday. Daddy, I want to go to the park now. You can rely on (any carrier) to get you there on time. Our advertising artistry emphasises lateness is losing. We are under pressure to deliver software immediately. We want fast food, fast cars, trains on time, instant gratification. Microprocessors have to go faster. Gigahertz equals sales. We want everything and everybody out of our way so we can race to the grave right now. Us and the essence of now are interlinked, and we have to provide it. Now means not making your audience think. They have to get the piece of information they want immediately. User interfaces are designed to lead us down the garden path, but rarely do we get to see the garden. Maybe it is the very words user interface. We think of interfaces (and design them) to conform to logic, a defined process. Unfortunately users are people. They are all different, and they want a conversation, not a presentation. User: Grunt. Password: Grunt. User interface is probably one of the worst cliches to come out of computing. Users interact, they do not interface. We are not cyborgs (yet). What do you think of your user? Are they worth a little more effort? When analysing requirements, we create use cases, and create stories and walkthroughs, imagining a conversation between the user and the use case. Then we kill them stone dead with our grunts of request: our dialogs. One day we will be able to walk up to our world portal. We shall look into it and be instantly recognised. Id like a book on graphic design please, you will say, and a cheese salad sandwich. The sandwich will arrive, and you will begin your conversation with your portal so it can get the book which best matches your wishes. What kind of conversation will it be? My guess is you will be presented with four pictures. Your eyes instantly move toward the one most pleasing to them, and you begin drilling down through an inconceivably clever indexing system, offering input along the way. You might simply say: No, How about some mathematical definition of layout? OK, a little less formulaic, and more example based. Your eyes flit to your final selection. Lets have a look at that one. You read through a few sample pages and give it the nod. The e-book reference is added to

file:///F|/ztemp/Visual%20Design/chapter8.htm (5 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

your personal library, and you begin browsing. After a while, in your relaxed way, long past the time of the worship of Now, you have a look through your communications. One of them is your daily business summary. It shows you a vision of your business from precisely your point of view. It took a day or two to design with your information stylist, but it was well worth the effort. Now you know exactly how all aspects of your business are doing with a single glance. What did you see? Was it a page of option buttons and links to data packed reports? Was it a forest of scroll bars, drop down selections and cheesy icons? I bet it wasnt. Of course, now is relative. Business people generally want their business applications NOW, but the same people wouldn't want a their cardiac pacemaker software to be created the same way.

The difference between data and information

Information is an abstraction of data. Just as we abstract away from code to objects to applications to systems as software architects, so data can be abstracted into information.

Figure 8.4 Data Here is some data. We can present this information in a graph.

Figure 8.5 Data abstraction leads to information The graph is a common and familiar form to most people. We have different types, some of which are more common than others, such as a line graph, bar graph, pie chart etc. Were a little carried away on 3D pie charts and histograms at the moment, but that is only because we worship the now and want to be cool. It will fade after a while and we shall see once again in 2D clarity. Then we can create a proper 3D pie chart. Whether

file:///F|/ztemp/Visual%20Design/chapter8.htm (6 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

our third dimension is of the xyz type, or compressed time, is up to us. The graph is only one single step away in abstraction of the data, as the data can be taken from the lines on the graph. Here are some ways of abstracting the same data to appear in an instantly readable way, abstracted two or three steps away from the data, and delivering information.

Figure 8.6 The data abstracted for instant viewing The smiley face on the left says your business is ahead of budget. You dont know how far ahead of budget you are, but you may not care in this momentary glance. The second example shows a bar where the centre line represents the budget (targeted sales perhaps), and the black area represents the ten percent above and below budget. You can see instantly that you are more than ten percent above budget. This is good news. The final offering is merely a graph reduced in size, where the grey area represents the budget, and the line represents the actual. Again, you can see quite clearly you are above budget, and have been since the beginning of the year. When designing sets of reports, the most common (if not the only) top level display is a list of reports. The user clicks one, enters some parameters and gets a pile of data. Data does not equal information. We need to be more creative. Data leads to information. Information leads to understanding. Understanding leads to control. If you present data, then your viewer has to extract the information and then gain the understanding. Our job is to deliver that understanding, then let the viewer drill down into the information, and if necessary into the data.

Reality or understanding?
Do you want to present reality or understanding? In 1933, H.C. Beck created a superb example of information graphics, which remains today in its original implementation, even if subsequently updated, and is copied throughout the world. Here is what existed before:

file:///F|/ztemp/Visual%20Design/chapter8.htm (7 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Figure 8.7 The London Underground map before 1933 Becks map of the London Underground is a landmark of excellent graphic design. The format has not changed, yet it has proven easy to update as new stations and lines have been added to the underground system. Despite its simplicity and extensibility, and the fact that it has been copied ever since for rail and underground systems almost everywhere, it was initially criticised for falsifying the geographical locations of the stations.

file:///F|/ztemp/Visual%20Design/chapter8.htm (8 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Figure 8.8 The London Underground map of today This is often the way of excellence. Around the same time that Beck produced his work, another designer, Alfred John Butts, a New York Architect, was working on a game. In 1938 he began a cottage industry manufacturing and selling his game. It never really caught on, and after a few years he gave up. Nevertheless, his dream survived. Nine years later, in 1947 he tried again, and for five years continued with little success. Then, in 1952, at a time when television was attracting the masses, and promising a dark world of illiterate couch potatoes, his game suddenly took off. Scrabble is the same game now as it was then.
For more on this and other design classics, see 20th Century Design Classics[3]

So we are in a Catch 22 situation. If you design a classic, no-one will accept it. They will need to enforce their point of view on it, ergo (if you will forgive my Latin), you will not create a classic.
Catch 22[4] is the title of a novel. His problem is that you have to be insane to get out of the army. If you are insane, you wont want to.

To learn from Matisse, who declared I do not paint things, I paint only the difference between things. How would you display the summary of business information with only a small area in which to do so?

file:///F|/ztemp/Visual%20Design/chapter8.htm (9 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

It might look like this:

Figure 8.9 Monthly business summary I doubt anyone would respond positively to a suggestion that this is a sufficient summary of one months worth of business information, yet it is perfectly valid. Nothing is shown, which means there is nothing of interest for a business viewer to get worried about. They are on target on all their specified measures, so they can go home, put up their feet, and not worry about anything. But worry they do. It is always better to show something which means there is nothing to show, than to show nothing. What do you have at your disposal for displaying information? According to The Artists guide to composition[5], there are seven media for expression.

Figure 8.10 Diagram composition methods All of these forms are available to us on our computer screens. Some of them, designed for the days of monochrome are used rarely now, and even then only in reproductions of the past. Certainly texture, and possibly tone are not as useful as colour, and do not render very well on our screens. Colour is the most definite modern winner. With colour you can create 3D effects, light and shade, and contrast colours where differences are represented. Colours can give us contours, imply relationships and even have meaning and emotion: Red equals danger; blue equals sad; a yellow zigzag means electricity etc.

The relationships of colour

The choice of colour available to us is vast. It is here that many software products fail because designers choose colours that just happen to appeal to their warped vision of the world. Using colours is interacting with your user, and you do not want to silence them before the conversation starts. Reassure them. Use the system colours they have chosen to colour your palettes of interaction.

file:///F|/ztemp/Visual%20Design/chapter8.htm (10 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Colours have properties which are part of our human psyche. A colour can be warm or cool, light or dark.

Figure 8.11 A colour wheel showing warmth and lightness

Colour Terms
Hue is the everyday name a colour is known by. Red, Brown and Turquoise are all hues. No-one can agree how turquoise is pronounced, let alone what it looks like. There is no definition of what these names mean, though there are colour tables and definitions which use them. Tone is the lightness or darkness of a colour when it is converted to greyscale. A tone is a colours position on the scale between black and white. A tint is a lightening of the tone of a colour, whereas a shade is a darkening of the tone. Note the colour does not change, only its lightness or darkness. Colours on computer screens are often defined as 16, 24 or 32 bit numbers, where the grouped binary digits of the number represent a colour according to a standard colour model. The RGB model is most easily understood. Suppose a number (in hex) is FF8000. This contains FF red, 80 green and 00 blue. Mixed together these give orange. The RGB model also supports an extra byte for a transparency. This is known as the alpha value. FF means full colour, 80 means semi transparent and 00 means fully transparent. Similar to RGB is the CMYK (cyan, magenta, yellow, black) model. RGB is additive, and more relevant to a screen based on light, and CMYK is more in tune with printing as it is the base colours used in many colour printers.

file:///F|/ztemp/Visual%20Design/chapter8.htm (11 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

The HSV model divides the number into hue, saturation and value parts. The hue is defined as the angle around the colour wheel clockwise from red. Saturation, also known as chroma or intensity, is the point between the pure colour and its equivalent tone (or greyscale value). The more grey of the same tone is added to the colour, the less the saturation. Adding white to lighten it increases the value, and black to darken it reduces the value. Colours in printing are often known by Pantone values. They are partially applicable to colours on screen, but only for colour matching print work.

Colour relationships
Here is where many user interfaces become ugly. Complementary colours come from opposite points on the colour wheel. When mixed together, they produce grey. When positioned side by side, they intensify one another and are good for showing comparison. A complementary colour can be found by looking at a colour, then looking at a blank piece of white paper. The afterimage is the complementary colour. On a clock, the complement is at 6 o clock when the colour is at 12. I shall use a 12 point clock to describe all other colour relationships. Split complements match 5 and 7 to a colour at 12. There is some neutrality between the 5 and 7 colours, yet both are complementary to the original. The mixes between 5 and 12, and 7 and 12 are known as near complements. If you wish to show the differences between two related values and one other, display the related ones in the split complements, say blue and green, and the comparator in the original, red. Analogous colours are three or four adjacent colours. They are harmonious and have little contrast so do not jar the eye. Contrast can be added by intensity. This is used often in reports, where similar colours of varying intensity are used to display alternate lines in a report or grid without making it too offensive. Columns or rows of totals may be a shade of an adjacent colour. Equal triads are the 12, 4 and 8 positions. A mix of any two will produce a complement of the third. Using equal triads means the display may lack vitality. Yellow text on a blue background was popular for a while in text editors. Adding red would create an equal triad. Imagine yellow on blue with red text for warning messages. It would look rather demanding. Unequal triads give the widest variety. They are any three colours which do not fall into the previous categories, and have unequal adjacent intervals.

Warm colours advance and cool colours recede

This is what artists learn early on in their career. With it, they can make skies and
file:///F|/ztemp/Visual%20Design/chapter8.htm (12 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

mountains shrink to the backs of their canvases, and bright flowers to stand out in front. It is what makes a room painted blue look larger than one painted orange. The blue recedes, so the walls look further away. Have you ever noticed how mountains and forests in the distance always look a pale blue, almost matching the colour of the sky? This effect is caused by the air between you and there containing water. Water leaches out the colour and detail. In painting, simply adding white can push something back, to make it more distant. So now when you are creating a view in a table with headings and subheadings, if you want the subheadings to stand forward of the heading, use a warmer colour. Be subtle; do not have a red heading and a pale dark blue subtitle, instead tint one colour with a warmer or cooler colour to produce the other.

So how can we use colour?

When you are creating system objects, use system colours. When creating help files, use the default system colour setup. When creating illustrations, or visuals which represent business or technical entities, you have free range. Experiment with your complements and triads. All works of art (the good ones anyway) are composed. Do you think Mona Lisa just happened to sit down that way and Leonardo painted a snapshot? So think about what you are going to display, how you are going to display it, and what colour combination would best bring out the information. Great photographs are composed just the same as great art. Perhaps even more so, for the artist can choose simply to omit what is not visually pleasing: the telegraph wires, electric pylons, ugly shaped clouds. The photographer is not so lucky. Poor composition is why your holiday snaps never manage to capture the place as it looked in the holiday brochure. All software and printed presentation must be composed. It cannot be hurled together. Artists and photographers are lucky. They can choose their own image size, and if others do not like it, they do not look at it. You are stuck with a rather small screen and limited resolution, and a user who likes to resize their view, or change the base font size. And if they want to do their work, they have to look at it.

Fonts
We call them fonts. Printers and graphic artists call them typefaces. Nevertheless, we must approach our use of them in the same way. We are generally worse off than our brothers and sisters in graphic design, because our screen resolution is so much poorer. No graphic designer has to worry about how the size of a pixel will affect their art, and our glorious selection of fonts leads us to the assumption that we can use all of them.

file:///F|/ztemp/Visual%20Design/chapter8.htm (13 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

The bog-eyed monster font may be your favourite. You may like the lovely florid parchment font. Because you like them does not mean you should use them to present information. At best, you can use the font selected by the system, at worst, stick to very plain fonts. Arial or Helvetica, Times new Roman, or fonts devised specifically for computer screen clarity such as verdana. They are the items in your font palette. Do not get artistic. A rule of thumb for graphic designers is never to use more than three fonts in any one piece of work. In software, I recommend never using more than one if you can help it, especially on the same screen, and avoid italics wherever possible. Printed italics are rare, and used only for brief highlights. They are not as clear to read, and reading italics takes longer than reading normal text. On computer screens, italics are more difficult again. Be frugal.

Information graphics
The Visual Display of Quantitative Information[6] discusses the ups and downs of centuries of information display. He refers to graphical embellishments collectively as chartjunk, dividing this into vibrations, grids and ducks. Vibrations such as cross hatching, or regularly repeated small items, can cause the eye to see them as moving. Grids are the overpowering lines behind chart information, which are so detailed that the information takes second place when attracting the viewer. Ducks are embellishment for embellishments sake. You will have seen 3D histograms, 3D pie charts. They are ducks. Excellence in graphical display is
q q q q q q

q q q

Show the information Induce the viewer to think about the information, not the way it is presented Avoid data distortion Present many numbers in a small space Encourage the eye to compare different pieces of data Reveal the data at several different levels of detail from a broad overview to fine detail Serve a clear purpose Be closely integrated with verbal and statistical descriptions of the underlying data Present the data with the absolute minimum of embellishment

file:///F|/ztemp/Visual%20Design/chapter8.htm (14 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Figure 8.12 Overstated graph There are many things wrong with this graph. First, the grid overpowers the data. Text travels in two directions on both axes, making it difficult to read. Finally, the numbers up the left hand side increase in size. There is an implication in this increasing size that 20 is more important than 5. This may be true, but the importance is stated enough in our understanding of the numbers. Increasing its size turns it into a lie. The viewers attention is drawn to the larger number. Already implied in the viewers mind is that 20 is 4 times (more significant than) 5. It is now overstated by being four times as large. The mind of the viewer resolves both of these aspects and decides 20 is now 4 x 4 larger than 5, once for the number, and once for the size. A much cleaner solution would be:

Figure 8.13 Understated graph There is no grid, no lie. The text all travels in the same direction, and there isnt much of it. Yet the meaning is just as obvious.
file:///F|/ztemp/Visual%20Design/chapter8.htm (15 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Data Density and Information clarity

This is the true measure of displayed information: how easy it is to understand, and how clear the data behind it is without having to see it. When deciding on creating graphics to present a point of interest, you should try the following questions: Is a graphic better than a sentence? Is 3D really clearer in this instance than 2D? Is a rendered 3D model necessary, or is a wire frame acceptable? If this is to be printed, is colour an improvement on black and white? Do I really need animation, or is a static image just as clear? Do I need to interact, or is non-interactive sufficient? Can I present this in simple animation instead of using virtual reality?

The golden section

When specifying a preference for one particular rectangle over another, on average, people will increasingly prefer a rectangle which approaches the long to short side ratio of 1.618:1 or approximately 34:21.

Figure 8.14 The golden rectangle, or golden section

This is further discussed in The shapes we need[7]

1.618 is a bit of a magic number. If you divide 1 by 1.618, you get 0.618. 1.6182 = 2.618.

file:///F|/ztemp/Visual%20Design/chapter8.htm (16 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Before you rush back to your design and start hacking in golden rectangles, I should warn you. Although 1.618:1 is the favourite of the masses, it does not mean that everyone prefers this shape, it is merely the rather small majority of 35% of us. The other 65% prefer other dimensions, albeit to a lesser degree (around 20% preferred 2:3, and 3:4 is favoured by less than 5%. There is also a slight difference between men and women, though they both peak at around 35% for the golden section. Interestingly, only around 3% of males and females preferred a square over a rectangle, but this does not mean you should stretch out your square toolbar buttons a little more. You would get less in. We are limited by our technologies. This golden section was much used in Greek Architecture, and has been used in many paintings, in an attempt to get good proportion. It also exists in mathematics, and in nature in the way our features are divided up. In addition to the golden rectangle, we have a golden spiral, where the spiral is marked out, traversing successive edges of golden section rectangles.

Figure 8.15 The golden section spiral This spiral is claimed to exist in natures spirals, for example, on seashells.

Figure 8.16 The golden section in a pentagon The Fibbonaci series is representative of the golden section 1 1 2 3 5 8 13 21 34 55 89 144 Each number in the series is the addition of the two preceding numbers. Dividing one
file:///F|/ztemp/Visual%20Design/chapter8.htm (17 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

number in the series by its predecessor, we get 1 2 1.5 1.6 1.625 1.615 1.619 1.618 1.618 That is, a gradual approach on the golden section. Given a choice, you might like to use the golden section to size up elements of a dialog. Here is an example:

Figure 8.17 Golden Dialog The golden section is used for the shape of the main white window, and for the dialog itself. The dialog is divided horizontally by the golden section between the white window and the pale window with the text (large picture) in it. Not everything uses the golden section; that would be taking it too far. You would be losing functionality for the sake of similarly shaped visual objects.

Figure 8.18 Golden section cats Expecting the golden section to immediately solve all of your display problems is a mistake. It is merely a useful measure of preference. As an example, look at the example above. Fonts are usually designed to aid clarity and enable you to read quickly. This is why most people still prefer paper over video screens. The printed font is far clearer than its video equivalent.
file:///F|/ztemp/Visual%20Design/chapter8.htm (18 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Cats, as shown above, has had the a and s squashed, and the t cropped at the top. The whole font has been stretched upwards, destroying its original aspect ratio. You have an eye. Use it.

The Windows Interface

Visual Interface Design for Windows[8] discusses the design of the Microsoft Windows interface. It shows some fine examples of good design across the whole range of software from interactive childrens education packages to icons. In the early days, Windows was a clunky 3D in your face kind of operating system. When the 32 bit operating systems came along, the 3D aspects has been softened, and many dialogs which had white backgrounds were given grey backgrounds. It was something of an improvement, and there was a style guide for applications, and a sticker, confirming that the software you were about to buy conformed to the new ideal. This was about the time when the internet was changing from a place to share information to a place where people could make money. The internet was flat. It was groovy, coloured, and ruled by graphic artists. Suddenly graphic art became the driving part of company Xs web design. It matched their current printed graphic image. There were still the clunky 3D controls for forms, which looked pretty sad when compared to the beautiful designs they intruded into. We have gone from flat paper, to clunky 3D to smooth 3D, and now were back to flat. It seems that encyclopaedia software, maps, games, childrens information, web sites, video and audio players can be groovy, exciting, and artistic, yet business software has to conform to the ideals of the grey, slightly 3D world of the operating system basics. Why is that? Visual Interface Design rounds off with a collection of great interface work, and the seven pitfalls that user interface designers make. Briefly, they are: 1. Visual inconsistency. You should establish a design strategy before you begin. With web/XML, this is easy, as you can reuse master style sheets. On compiled apps, it is a case of using your eye to line up items on the interface, to make sure they are well proportioned, and not there just because you happen to like it. 2. Lack of restraint. It is better to be consistent, than to reach for the odd superb (in your own very important opinion) output. 3. Overbearing metaphors. We have talked enough about metaphors. Some designers take them too literally in their translation of reality to a computer screen. For example,
file:///F|/ztemp/Visual%20Design/chapter8.htm (19 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

the Lotus Organiser/Diary which had a huge ring binder down the middle. 4. 3D overkill. So many web sites and applications go overboard to show 3D buttons with shadows that change as keys are pressed and mouse devices are hovered or clicked. Be subtle. 5. Too many bright colours. Use as few colours as possible, and make them softer and more neutral, unless you are trying to get your viewers attention. A big red YOUR MACHINE IS ABOUT TO CRASH HORRIBLY across a screen usually gets someones attention, and it may be quite relevant. Otherwise, refrain, be subtle. 6. Bad icons. Drawing icons is quite difficult, especially so for non-artist techies. Icons should be consistent, use consistent colours, and be quite clear as to their meaning. If you cant find a suitable icon, use text. 7. Bad typography. I reckon this should have been number one. It is the greatest failing of techies. Wow what a cool font. Ill use it in all my systems from now on. Then they realise that no-one can read it and decide they have found a far cooler one, something like letters made up from bullet holes in road signs. Bad typography often comes from mixing too many inappropriate fonts. On a computer screen, anything but the clearest fonts used in large measure are an instant turn off. Bad typography is also pages and pages of scrolling Times New Roman 12 point Normal without a break for the eye. There are hundreds of societies and universities with absolutely awful pages, as they were written with the intention of providing text rather than sharing information. Most of them are copyrighted so long ago that the originator has probably forgotten about them.

More on fonts
Fonts are extremely complex. Anyone who has coded how text is displayed on the screen or printed page will have gone through the nightmare already. For those who havent, here is a summary of font terms. They may come in handy one day. To begin, what we techies call a font, a printer calls a typeface. What we call a character, a printer calls a glyph. Most of printings terminology is derived from long ago when printing characters on the page was a painful manual process. Somewhere between carving wooden blocks, and the modern pixel based devices, printing terminology was born. It is steeped in tradition, such as CAPITALS were organised in the wooden case furthest away so the printer had the most common form of letter nearest, i.e. in the lower case. Hence, upper case and lower case letters.

file:///F|/ztemp/Visual%20Design/chapter8.htm (20 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Figure 8.19 Characters The height a character rises above the baseline is called the Ascent. Ascent for a given font or typeface is usually measured by the M glyph. Descent is how far a character drops below the baseline. There are a number of different types of font. In the old days we had bitmapped fonts known as raster fonts. They were quick to draw and designed specifically for fixed size, pixellated displays. Now we have truetype and type1 fonts which are vector fonts, scaled to any size, and suitable for any display medium. We also have two font styles in terms of fixed or variable pitch fonts. Fixed pitch are descended from typewriters where each character is the same width. Variable pitch fonts are descended from printing where characters are separated by the distance most suitable for reading comfortably. External leading is the distance between one line of text and the next. Leading is pronounced like heading, and is derived from the amount of lead (plumbum the metal) placed between the lines of text in printing. Internal leading is the distance from the top of the character cell to the top of the character. This varies from one character to the next, but the internal leading for the font is once again measured to the top of the letter M. Variable pitch fonts use two methods for font spacing. The first method is to give each character or glyph a set of three horizontal distances, a, b and c.

file:///F|/ztemp/Visual%20Design/chapter8.htm (21 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Figure 8.20 abc dimensions of glyphs The first glyph M has a very small a dimension and a zero c dimension. The second glyph f has a negative a and c dimension. When an M is drawn next to another M, the spacing between them is a + c. As c is zero, the distance is a. The second glyph, having negative a and c dimensions means that when the two fs are drawn together, they overlap. The second method of spacing is named kerning. Kerning is a further quality measure in readability, where pairs of characters are drawn differently to the a-b-c spacing. For example, a K followed by an e may be defined as a kerning pair as they will be spaced differently to a Ki or Le combination. Each font carries with it a set of abc dimensions and a kerning pair table. Fonts are further defined by belonging to families. Roman family fonts, for example, Times, are proportional serif fonts. Swiss fonts, for example, Helvetica or Arial, are proportional sans serif fonts.

Figure 8.21 Serif and Sans serif fonts Other font families are script, which resembles handwriting, modern, which is fixed pitch and constant stroke width, and finally decorative, which catches anything not in the other categories. Enough on theory. I shall not trouble you further with diacritics, ligation and kashida, but if you want to display languages other than English, you will come across them. For this, and more discussion on programming fonts, see the Visual Basic Programmer's Guide to the Win32 API[9].

file:///F|/ztemp/Visual%20Design/chapter8.htm (22 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

[insert pages 10 and 11 of Font & Function No12 Autumn 1993 from Adobe Systems][10]

A change of view
There is a good example of the dying 3D approach, and its replacement with subtle tones on Microsofts Developer Network (MSDN)[11]. It is titled Start Making Sense. Here are the before and after interfaces:

Figure 8.22 Pre web, 3D lovelies

file:///F|/ztemp/Visual%20Design/chapter8.htm (23 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

Figure 8.23 Post web, flat, toned rather than coloured

Image types
We use four main image types: vector, bitmap, gif and JPEG. For large diagrams, vector graphics is by far the best method, providing the tools to render it are available. Bitmaps should be kept to an absolute minimum as they are often huge, especially when compared to compressed file formats for all but the smallest icons. Gifs are better than JPEGs for diagrams, where there is a limited colour range and high contrast between the colours. JPEGs are better for photographs and pictures with a lot of colour blending.

Top Left
Light, according to the designers of our operating systems, comes from the top left of the page. It is a part of our western culture. We begin top left when reading a page. If you are defining a 3D look and feel to a particular piece of software, you should keep this in mind while illustrating. If light comes from top left, and you draw all of your interfaces as if the light came from bottom right, all your highlights will look like indents, and viceversa. Your viewer will be confused. It will strain their eyes and brain, trying to realign their expectations. Simply, it will not work for them. Other cultures read from the top right, but that is not reflected in our operating systems.

The rhyme and the reason of graphic design

Good design draws the eye and engages the mind. That is the measure of it. Unfortunately for graphic designers, that is not the limit of it in software. Software also requires usability, and poor usability can destroy your beautiful creations. Usability is a subject in its own right, and dealt with superbly in Dont make me think[12]. As good design catches the eye, usability guides it. In a modern windows style system, people know where to click. They look for the 3D buttons with OK or Cancel on. On the internet, they look for buttons, or the underlined or changed colour of hyperlinks. If you do not lead your users around by the eye, you will lose them.

And finally
The Speaker, Betty Boothroyd, rebuked a [Member of Parliament] for using a cardboard diagram in the [House of] Commons to explain overseas aid figures. She said I have
file:///F|/ztemp/Visual%20Design/chapter8.htm (24 of 25)15.02.2005 23:24:58

Chapter 8 - Visual Design

always believed that all Members of this House should be sufficiently articulate to express what they want to say without diagrams.[13]

References
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. The Aims of Art. William Morris The art and craft of the machine (1904). Frank Lloyd Wright 20th Century Design Classics. Chris Pierce. H.C. Blossom Catch 22. Joseph Heller The artist's guide to composition. Frank Webb. David & Charles The visual display of information graphics. Edward R Tufte. Graphics Press The shapes we need. Kurt Roland. Ginn and Company. Visual Interface Design for Windows. Virginia Howlett. John Wiley Visual Basic Programmer's guide to the Win32 API. Dan Appleman. Ziff-Davis Press Font & Function No12 Autumn 1993. Adobe Systems MSDN article: Start Making Sense. Mike Pietraszak. Microsoft. Don't make me think. Steve Krug. New Riders The Guardian. 7th December 1994

file:///F|/ztemp/Visual%20Design/chapter8.htm (25 of 25)15.02.2005 23:24:58