12.1. On the Use of Color

12.1.1. Basic Definitions & Understandings
12.1.2. Human Perceptions
12.1.3. Illusions in Color
12.1.4. Benefits of Color
12.1.5. Problems with Color
12.1.6. Guidelines for Design
12.1.7. Contrast
12.1.8. Conclusion

12.2. Typography

12.2.1. History
12.2.2. Type Structure

12.2.2.1. Size & Measures
12.2.2.2. Kerning
12.2.2.3. Justification
12.2.2.4. Whitespace

12.2.3. Illusion
12.2.4. Feeling & Rhythm

12.2.4.1. Contrast

12.2.5. Layouts
12.2.6. Color in Type
12.2.7. Signs

12.3. Forms & Proportions

12.3.1. Color & Shapes
12.3.2. Psychological Properties
12.3.3. Depth
12.3.4. Conclusions

12.4. Assignments: Color
12.5. Assignments: Typography
12.6. Assignments: Forms & Signs
12.7. References

12. Color, Signs, Typography & Form

Not surprisingly there are considerable relationships between these subjects. Moreover, it is impossible to separate these subjects when discussing interface design. A single note does not make a musical composition, neither does a single color make a painting, nor a single letter a word, or a group of words a poem. The use of color, signs, typography, and form requires a visual perception of the whole composition of an interface, as opposed to relying on an understanding of the pieces. Furthermore, the psychic effect or human perception may differ considerably from the underlying physics. The designer of interfaces probably has more flexibility to deal with these areas than other types of designers in more traditional design work. Nothing is necessarily static on the computer and there is far more opportunity to either come up with rich creative designs or, conversely, to screw up completely!

Too often design is viewed as a process of following the past. For many years the only accepted place for the engine in an automobile was the front of the car because this is where the horse used to be. This led to much more complicated mechanisms to deliver power to the wheels than if the engine had been put in the rear. The ethic of design should be to accomplish the purpose for which the object intended. However, color, signs, typography, and form integrate into a single perception of both visual clarity and artistic quality of the design. Today all of these properties may be varied and tailored in the electronic document to create interfaces, multimedia material and data presentations.

Occasionally in the literature on these subjects one will find reference to the Bauhaus school of art in Wimar Germany. Many of the artists and designers trained in this school have developed some of the fundamental understandings of these areas that are utilized today. Many of the references quoted for this chapter are well worth exploring for further insight.

The main objectives of interface design is to relay as much information as possible and to do so in a clear and concise format which avoids ambiguity and minimizes information overload. The complementary objective is to do so in an artistically pleasing manner.

• The production of works of art
• Presentation of realistic three dimensional figures
• Very complex mappings and designs requiring a large number of colors on the same screen.
• Animation and shading requirements for realistic motion
• Marketing such as in ecommerce

There is a great deal of difference between the physics of color and the perception of color by the human eye. For example, colors can appear different to the human eye as a result of the background color against which they are presented and as a result of the size of the colored area. Some combinations of color can cause virtual images and even dizziness for many people. Color combinations can make objects appear closer or farther, larger or smaller, and enhance or detract the ability of the eye to focus on an object. Sometimes, many colors and/or bright colors are used in an effort to look pretty, but after a short while become tiring to look at or confusing to read.

Early studies of color, which influenced guidelines established in the 1980's, were done on search and recognition tasks for colored lights on panels such as aircraft display panels. Although they are valuable, they did not sufficiently control the three factors of saturation, brightness and hue. It was not always clear whether hue was the only variable in the tests of color combinations. Furthermore the computer screen is far more variable in these dimensions than the situations that were the targets of these early studies.

In recent years, studies have been done on reading exercises on color CRTs. How color influences visual performance, in recognizing digits or reading, is not well known. However, some tests have shown higher error rates in colors at either end of the spectrum than those in the center. In recent tests where color combinations were tested with backgrounds of equal brightness (Matthews, Lovasik, Mertens, 1989), there was little difference in performance over a number of hours in any of the color combinations tested. Ultimately any color combination may be acceptable, given a large enough high luminance contrast, but desaturated color combinations tend to yield the best results.

Although a number of studies show that there is little difference in performance due to color, care must still be taken in design to ensure other components of display designs do not interact with color to influence performance. Since considerable research has been done in the use of color in graphics, guidelines for graphics are more specific than those for text.

It is believed that visual signals are processed by at least three separate processing systems in the brain, each with its own distinct function. These three systems process information separately with respect to: (1) color, (2) shape perception, and (3) movement, location and spatial organization. Color perception has low acuity and no depth perception, shape perception responds to color contrast, while movement and depth perceptions are color blind. For example, shading (for depth perception) need not be the same color as the object. Since these three areas are processed independently, we can consider them as parallel capabilities by the human cognitive process.

The spacing and arrangement of data (margins and layout) can have a relatively greater effect on CRT (Choice Reaction Time) reduction than color. However, the use of color for redundant coding does clearly improve overall performance both with respect to speed and/or error reduction. Similarly, in comparing shape and color coding in highly dense situation displays, it has been shown that the redundant use of color (in addition to shape) reduced both CRT and the error rate. Redundant coding is definitely productive in nature with respect to user performance. The same result has been shown in using colors together with blinking to grab the user's attention.

Three separate dimensions or factors are needed to specify a color:

On the average, people can name about eleven colors and the common names used are: white, gray, black, red, green, yellow, blue, pink, brown, orange, and purple. However, people can distinguish more than this. Some experimental work has estimated that there are about 35,000 elementary color sensations. Experts in the use of color often can distinguish more than 50 unique colors by name.

• The colors on the screen (red, green, and blue, known as RGB) are created by an additive light source; as you add more colors the image lightens toward white. Colors used for printing (cyan, magenta, yellow, and black, known as CMYK) are subtractive; as you add more colors, the image becomes darker. Yet another model uses the factors of hue, lightness and saturation (HLS) for a paint mixing standard. Each of these standards will yield different results. Anyone who has prepared a beautiful screen and then sought to reproduce it on a printer will recognize the lack of consistent results. For example, colored graphs that are easy to see on a dark CRT are often hard to make out when plotted in the same colors on a white piece of paper. Hence there is a real need for serious standards that can be used in any industry that deals with colors as a principle concern (e.g. painting, filming, publishing, etc.)

RGB Color Space: This utilizes red, green and blue as the fundamental dimensions and is commonly used for additive color situations such as computer displays. The three dimensional space is characterized by the following points on a cube: black (0,0,0), red (1,0,0), blue (0,0,1), green (0,1,0), yellow (1,1,0), magenta (1,0,1), cyan (0,1,1), and white (1,1,1).

NCS Color Space: This is called the Natural Color System and utilizes hue, blackness, and chromaticness. It is based upon color pairs that define the "natural" dimensions: red-green, blue-yellow, and black-white.

People subjectively describe colors as having four primary colors (red, green, blue and yellow). There appear to be two separate pathways to the brain for color. One that is more sensitive to the red and green color and the other to the blue and yellow colors. A third pathway dealing with luminance is also indicated (black and white). These different pathways seem to be the resulting signal process from three different types of light receptors (cones) within the eye. The NCS color schema was designed to reflect this physiological understanding of color perception.

CNS color space: This is called the Color Naming System and it is based upon hue, saturation, and lightness. It uses numeric scales with specific points on the scales named as follows:

There are many other standard color spaces which reflect a given industry standard. For example. the YIQ Color Space used in the TV industry, and the CIE Color Space is a system based upon exact measurements (XYZ) of color phosphors used in computer displays.

Similar to most simple lenses, the lens of the human eye is not color corrected. This effect, called chromostereopsis, causes the different wavelengths of light corresponding to different colors to be focused at different distances behind the lens, forcing the lens to constantly re-focus to view different adjacent colors at the same time. The lens of the eye focuses wavelengths with the longer wavelengths focusing further back than the shorter ones. The more the eye muscles try to focus on colors far apart on the spectrum at the same time the greater strain on the eye. The can cause various types of illusions such as incorrect size differences or distance determinations. This can cause some colors to appear out of focus when another color is the primary object of the focus (called chromatic aberration). Trying to focus on red and blue simultaneous when there in close proximity is an example of this problem.

The human retina has photosensitive cells that translate all visible light entering the eye into electrical impulses. These impulses are then transmitted via the optical nerve to the brain. The brain then interprets the information it receives. The retina of the eye has two types of color receptors: rods and cones. The rods are primarily used for night vision while the cones are used for day vision. The rods will respond to a lower threshold of light than the cones and are utilized for night vision where the light level is too low to provide any color distinction. When a person makes a sudden change from a light to a dark situation it takes time for the changeover of vision to occur. Rods are more sensitive to higher frequency (shorter wave length, red) light and cones are more sensitive to lower frequency (longer wave length, blue) light.

The center of the retina has the highest density of receptors and a greater proportion of rods. This results in the yellow and reds being more recognized at the center and blue on the peripheral. This, for example, makes focusing on small blue objects difficult. We would not, as an illustration, use blue as a type font color. This is common mistake found on the WEB. If one must use blue it should be a blue-black that was commonly used for pen ink. The cones which are most sensitive to color but require more brightness are distributed in color sensitivity according to 64% for red, 32% for green, and only 4% for blue. There is so much blue (the sky and large bodies of water) that evolution has seemed to give us a physiological ability to prevent the eye from being attracted to blue.

With age the lens develops a yellow coating which filters shorter wavelengths reducing blue detection. Also, the fluids in the eye become less transparent causing colors to become less vivid and of lower perceived brightness. Older people need higher brightness levels to distinguish colors.

More than 8% of males and less than 1% of females have some kind of color perception deficiency. The most common color deficiencies are:
 

*	Protanpopia: causes a person to confuse red and orange with yellow and green.
*	Dueteropia: inability to distinguish between gray and purple.
*	Trianopia: confusion of green and blue and gray with violet.

The same color may appear different to two different individuals. Furthermore, the brain may impose certain emotional reactions to color in a specific context. We expect certain objects to have certain colors like the normal colors of ham and eggs. However, if the ham and eggs presented to us turns out to be green, it could well be that some people would have a strong negative reaction toward the possibility of eating that food. Experiences and culture influence our reactions to colors. While white clothing is associated with weddings in the West, it is associated with funerals in the Orient.

It was Goethe, the German poet (1747-1832), who evolved the first version of the artists color wheel as an investigation into determining the psychological color ordering as opposed to Newton's linear wavelength ordering. His color wheel had six equal divisions of color: red, orange, yellow, green, blue, and violet. His interpretation of these colors was:
 

Red:	The color of imagination, it evokes a festive mood and is the color of heroes (e.g., blood), the  mother color of earth tones.
Cyan:	The compliment of red, is the color of the sky, is on the edge of coolness and warmth. It is a quiet color.
Green:	It is often associated with forest and nature.
Magenta:	It is the complement of green and does not often appear in nature. It is an unhappy color and related to royalty and the church.
Blue:	It evokes a quiet mood and is suggestive of understanding. It expands space (e.g., sky and ocean).
Yellow:	It is the happy color, the closest to sunlight and suggests a happy and intense mood.

Goethe also produced an equilateral triangle of colors containing nine interior colors with the primaries red, yellow, blue at the corners, the secondaries on the outside, and the tertiaries on the inside. He then attributes the following emotional "sets" of colors:
 

Lucid:	red, orange, yellow
Serious:	red, purple, blue
Mighty:	red, orange, purple
Serene:	orange, yellow, green
Melancholic:	purple, green, blue

While the specifics of Goethe's interpretations vary with culture and time, the relationships of color, as exhibited by the modern versions of the color wheel, is the basis of artistic use of color.

Stare at a single spot in an area of red for some minutes, then quickly shift the focus the eye to an area of white. Those with normal vision will perceive green or blue green instead of white. This green is the complementary color of red or red-orange. This is called the illusion of after-image, or simultaneous contrast. One explanation is that by fatiguing the red sensitive parts of the eye, the sensitivity to yellow and blue is heightened which results (through) mixing a perception of green. No one is insulated from possible color illusions in perception and the artist makes constructive use of these illusions in the creation of works of art.

A white square on a black background will look larger than the same sized black square on a white background. Brighter colors reach out an overflow the boundaries as perceived by the eye and darker colors, on a relative bases, contract. A yellow square on white looks darker with an emotional effect of warmth. The same yellow square on black acquires extreme brilliance and cold, aggressive expression. The colors of red and blue also placed upon white and black backgrounds have related impacts. Warm tones appear larger than cool tones.

Cool and light tones appear lighter and less substantial. Warm and dark tones appear heavier and denser. One can actually modify the apparent weight of an object by the color it is painted. If one watches a silver colored plane take off and exactly the same plane pained a camouflage drab gray, it will appear that the drab gray plane had to work much harder to get off the ground.

Contrasting stripes, such as the Zebra has, make it more difficult to judge changes of speed in the motion of the object. This pattern was used on some World War I battle ships to cause humans to misjudge firing ranges. Many tropical fish species depend on this sort of color camouflage to confuse predators. This sort of illusion can be quite significant in a game or where rapid animation is involved such as the simulation of a physical process. Sometimes the colors we use to try and depict different speed contours in water motion, or some other simulation situation, can make it more difficult to observe what we wish to make visible.

The greater the contrast between two colors that are brought into contact the greater will be the effect of the contrast. We perceive a contrast that is actually greater than the one present. The maximum condition occurs when one color surrounds another. This is called the illusion of simultaneous contrast in that both the tones brought into contact are affected. When one chooses a color in isolation and then puts it into a picture the result can appear different from the original choice. This illusion applies to value, hue and intensity contrasts. A good color choice system for users would allow them to test colors within combinations with other colors being used. The current systems that merely give users a series of color squares to choose from are clearly meant for only those users who do not really understand color.

Colors have both spatial and vibration or motion illusions. When the six hues, yellow, orange, red, violet, blue, and green are placed next to each other on a black background, the light yellow appears to advance and the violet lurks in the depth of the black background. If the background color is white, it is the violet that seems to advance while the yellow sinks back into the background. The other colors are in-between in their effect. In fact, it was discovered in 1915 that the depth perception of the six fundamental hues on a black background conform the ratio of the Golden Section in their gradation of depth. The Golden Section ratio for two line segments is the same ratio for the sides of the Golden Rectangle which we will discuss later. The Golden section of a line can be defined as the proportion given by dividing a line at a point such that the shorter part is in the same proportion (r) to the longer part as the longer part is to the whole:

For example, the depth perception from yellow to orange relative to orange to red follows the Golden Section.

The quantity of color, both in size and repetition or recurrence, creates differences in the "temperature", tempo, or rhythm of a color composition. A related effect is the volume of a color. For example the color of coffee in a mug or in a glass appears as a very different brown. Mountains in the distance will take on the blue of the sky regardless of whether they are covered with trees or bare rock. Water colors are volume colors in that added layers increase the darkness, weight, and intensity of a color; while oil pigments are surface colors and do not change because of layering. The ability to vary brightness on a CRT means that CRT colors are volume colors, more like water colors than oil colors.

An additive mixture of colors (using light as in a projector or CRT) and the subtractive mixture of colors (mixing paints) can lead to very different results when attempting to arrive at the same color. An optical mixture usually means the loss of less light than a mixing of pigments. A subtractive mixture is not as light as the lighter of the color parents, nor as dark as the darker one. Lighter colors can appear to be closer than darker ones leading to a space or distance illusion.

As with others senses (e.g. sound, temperature) people cannot easily perceive an equality of changes in the underlying physical variables. One must make logarithmic or geometric progressive changes for individuals to be able to detect differences in stimulus. These sensation changes follow the original Weber-Fechner Law:

The visual perception of an arithmetical (linear) progression depends upon a physical geometric (non linear) progression.

If one looks at the steps going down into a swimming pool painted blue, one can not easily distinguish the edge of the steps farther down. While the increasing blueness is proportional to height, our perception does not detect enough distinction farther down in depth provided by the single step interval.

Two colors can also become one color to the eye (Bezold effect). This was quite commonly utilized by impressionist painters. Green could be produced by yellow and blue in small dots being applied to a canvas. This illusion is at the heart of the 3 and 4 color process for printing.

A group of colors that appear to go well together are usually termed as being harmonious in nature. Usually such combinations look pleasant, even artistic, and tend to minimize the types of illusions that produce after images and other types of visual tension. While we provide below some suggested harmonies, such recipes, like any good dish, demands tasting and perhaps some adjustment in a given situation.

• Designate or emphasize a specific target in a crowded display
• Provide a sense of realism or virtual realism
• Segment or distinguish an area of the display
• Provide warning signals or signify low probability events
• Group, categorize, and chunk information
• Imply certain physical states
• Convey emotional content
• Provide an aesthetically pleasing display
• Provide information coding

• Distract the user when inadequately used.
• Dependent on viewing and stimulus conditions
• Be ineffective for color deficient individuals.
• Result in information overload
• Unintentionally conflict with cultural conventions
• Cause unintended visual effects and discomfort

Color can be used for additional coding such as to identify similar elements in a complex display. For example, for a presentation of water flow in a model of a river system, different colors can be used to represent different speeds in the flow of the and/or different degrees of turbulence. In this example we are utilizing color to present what the human eye cannot normally perceive from a realistic view of the situation. We do this also on maps to represent elevation or other geographical properties..

Color can be utilized to make objects appear more realistic. Clearly in many areas of design, such as interior decorating, the results are not entirely meaningful unless presented in color.

Color can be used to display and convey emotion such as the warning of 'red' and the OK to proceed of 'green.' A person may be 'feeling blue,' or 'green with envy,' or so angry that they are 'seeing red.' Red can mean both stop and it can mean take immediate action, or it can mean 'hot,' 'dangerous,' or 'on' (rather than off). However, the meaning of the color can vary according to the object it colors. While blue and green, are in general an attractive color, if we apply them to food, specifically meat they give and impression of mold and putrefaction.

The most exciting color is red. Violet and blue are the most subduing; green the most tranquil and neutral; yellow the most cheerful. The favorite color of most women is red; most men prefer blue. Blue is also a favorite of older people, probably due to the fact that as we grow older the lens of the human eye grows yellowed. Yellow filters out blue light. The lens of a child may filter out only 10 percent of the potential blue light, but the lens of an elderly person may absorb as much as 85 percent. This makes blue more unusual and attractive to the older person.

Colors of greatest appetite appeal, useful in food advertising, are orange, clear yellow, vermilion red, light green, tan, and brown. In the spring of the year, tinted and pastel colors have great appeal. While in the autumn, the public taste shifts to the richer shades of red, green, brown, or purple. Highly styled merchandise usually calls for unusual hues, while volume merchandise is moved with primitive colors like red, blue, green, and white. Dark colors tend to make objects look heavier and closer; lighter colors tend to make things look lighter and more distance.

Color can be very useful as a redundant coding scheme. For example, in a large desktop with many icons, one might use a specific color to indicate which icons have files attached. Colors could designate the age of the icon or document since last used. The association of age and the fading/darkening of colors is almost intuitive in the human mind since it reflects the process in nature. New documents would appear white, older yellow, and older yet light brown (paper yellows and darkens with age).

Color does enhance appeal and the artistic look of screens. This does affect, at least in the short term, the reactions a user has to a system. If the color of an item to be located is unique and known ahead, then the speed of location and recognition can be 200% greater than that for black and white recognition of an object.

There are some aspects of color that are independent of language and seem to be common to a wide range of cultures. Related to different conceptual notions in different languages are day and night (white and black), fire and blood (red), the sun (yellow), vegetation (green), the sky (blue), water (blue), and the ground (brown). Both fire and blood bring and association of danger (stop for red) and green means "food" or the concept of proceed (go).

More specifically in western culture we have the following common color meanings

Furthermore there are efforts to arrive at color standards such as those recommended by the American National Standards Institute (ANSI)

The more widespread cultural norms are contained in the following table.

When one is dealing with motion on the screen such as in the use of animation, the colors and the patterns of the color introduce a whole new category of problem. Motion of any sort can interact with the properties of color and even the way users carry out an interaction might result in color problems that were unanticipated by the designer. While artists make use of many of the types of color illusions to create great art, interface designers do not normally have that training and expertise.

Color aesthetics include at least two other dimensions besides impression (visual). There is expression (emotional) and construction (symbolic). In some cultures color signifies status. For example the Roman Catholic Church hierarchy has colors that distinguish rank: cardinal crimson and papal white. In China, yellow was the color of the emperor and only he could wear that color. Color has historically signified strata, mythological meanings, and religious ideas. While there are many cultural differences there are also surprising cultural similarities.

White is used for funerals by the Chinese and for Weddings in the West. However, the meaning for the Chinese is that white signifies kingdom of purity and heaven to which the dead are going. Somehow, the underlying symbol of purity and white are the same for both. In most primitive languages the color to evolve after black and white enters the language is red, the color of blood.

Color can easily be misused if guidelines are not followed carefully. Complexities of adequate color use are due to deficiencies in color perception and differing emotional response to colors. Moreover, bright colors seen for a long period can easily cause fatigue. What may first appear to be pleasing to the eye can become extremely bothersome with prolonged usage. This results in a number of conservative guidelines for color design which can keep a designer, who is not an artist, from making a serious mistake. Meaningless introduction of color to an interface can reduce user performance to about one third of what it is with only black and white.

Use colors conservatively, generally 4-5 colors, at most 7. One of the best color sets are red, yellow, green, blue and white (with good two color pairs of red/green and yellow/blue). Do not use more than one highly saturated, spectrally extreme color on the screen at the same time. When a number of such colors are used at the same time the eye needs to take time to refocus as it scans from one to the other.

Even though we can discriminate many thousands of different colors, the number that we can identify absolutely seems to be about eleven for the average individual. If someone is an expert on color (e.g., an artist) this number can be increased to about fifty. Once again a design system for an artist and non-artist differs considerably in requirements just for this single dimension of color. The need to simultaneously distinguish colors is apparently limited by short term memory so that if the user is making associations between colors and semantic concepts the limit is seven.

An eleven color set that allows colors to fall into separate linguistic categories for chunking is:

However these eleven colors, which are rarely confused by humans, can also sometimes make a display look somewhat garish.

Code colors in spectral order (ROY G BIV). Given objects of the same size, the color can make an object appear closer or farther according to spectral wavelength. In the following common coding red, orange, and yellow objects would appear as being to the front, green objects would appear as being in the middle and blue, indigo, and violet objects would appear as being at the back. This is provided the colors had the same hue and saturation and the objects were similar in size. The continuum from closer to farther appearance is as follows:

For the color coding of information maintain adequate hue difference. Some recommended hue combinations for 5 to 8 colors to use in coding are:

5:	red, yellow, green, blue, white
6:	cyan, green, amber, red, magenta, blue
7:	cyan, green, yellow, orange, red, magenta, blue
8:	cyan, green, yellow, orange, red, magenta, purple, blue

Hue, saturation, and luminance differences may be used to obtain a set of colors that contrast maximally. Using colors that differ in both chromaticity and luminance means that a color deficient individual stands a good chance of being able to distinguish the resulting color code. If one has a three dimensional color space that is perceptually linear in nature then one can utilize distance between the colors as a meaningful measure of contrast. An example of such a set using RGB coding is:
 

A design should work in black, white, and shades of gray before applying color or no color combination will be any good. The basic tool for a designer is a good color wheel. The primary colors in a color wheel are: red, blue and yellow. The secondary colors are: green, orange, purple. Going around the Color Wheel we have the colors in the following order: red , purple, blue, green yellow, orange. Complementary colors are pairs of colors arranged opposite (a primary and a secondary: red with green). Placed side by side, these cause vibrations.

Your screen color is obtained by mixing red, green, and blue light (RGB) and are additive. All three together forms white. On paper pigment is an opaque substance that absorbs light. Since each pigment takes away color this is a subtractive process. The subtractive primaries are cyan, yellow, and magenta (CYM). All three together produces black. This leads to considerable difference between what you see on the screen and what you may produce on a color printing device. For consistency you have to develop a Palette of colors and compare their screen appearance to the final form.

Colors that sit next to each other in the color wheel are spectral neighbors (blue and green, red and orange, yellow and green). These pairs can be used for shadowing or to suggest dimension, low contrast situations. Avoid these when you need a distinct visual boundary between touching colors. Colors opposite one another on the color wheel are far apart visually and if they are fully saturated and placed side by side they will appear to move or vibrate. If two such colors need to touch, one should reduce the saturation of one of them and/or use a thin white or black line to create a boundary between them.

A triad is three colors equally spaced around the wheel (use of an equilateral triangle) and they are usually quite pleasing to the eye (blue, red, and yellow; or orange, green, purple). Any equal sided figure (square, pentagon) will give a set of pleasing colors if inscribed within the color wheel and rotated to any position. Another rule to determine the harmony of colors is that two or more colors are mutually harmonious if their mixture yields a neutral gray, complementary. One also obtains harmony by ordering colors in their actual application by hue.

Use foveal (central) and peripheral colors appropriately. Blue should be used for large areas (like the sky). Red and green is best at the center of the screen or visual field. Black, gray, white, yellow are also good peripheral or large area colors. However, do not use adjacent colors that differ in blue, black, yellow, as this difference can only be detected in the peripheral of the retina and will cause the boundary between two such colors to appear to be fuzzy. Instead use adjacent colors that differ significantly in hue and value. Clearly, one would also not use peripheral colors, such as blue, for thin lines or text. Edges can be made quite sharp with the use of neutral colors (i.e., gray, black, or white) to outline images.

Use colors that exhibit minimum shift in color due to size if the colors change in size in the imagery. Size influences the perception of value and chrome. In dark viewing situations, present text, thin lines, small shapes in light colors (white, yellow, or red) on medium dark backgrounds (blue, green, dark/dull red, dark gray). In bright light viewing situations use dark colors such as black or violet, for text, thin lines, small objects on light backgrounds (white, light gray, light blue, light green, etc.). In both situations chose the highest contrast combination for text and the background it is on. A bright red object will always seem larger than the same object in a cool blue. Avoid saturated red and blue in conjunction as this combination will produce changes in other neighboring colors.

When displaying a chart containing just a few colors, the complement of one of the colors should be used in the background. With an image containing many different colors, a neutral (gray) background should be used. A neutral or muted color for the display background will minimize interference with the subject matter.

Simultaneous use of high-chrome spectrally extreme colors cause vibrations, illusions of shadows, and after images. The color combinations to avoid in any sort of repetitive pattern or large adjacent areas are: red/green; blue/yellow; green/blue; and red/blue. For some people these combinations can actually induce dizzy spells and after images can persist for hours after being on the screen. This phenomenon can further be worsened in animation situations.

Always allow users the ability to adjust the use of colors or to request a monochrome version of the screens. Somewhere between 8% and 12% of the males and between 1% and 2% of the females in the U.S. suffer from some form of color deficiency (these are based upon U.S. population studies). If you impose a fixed set of color choices you may be denying use of the system to these individuals. Furthermore older people need much brighter or higher contrast situations then do younger ones.

Take advantage of existing color codings that your audience already uses. There are many general color codings in the society at large and some specialized one for specific professions. Among these are:

Yellow is the most light giving all hues. To see the "light" means to detect a hidden truth or to say someone is bright is to credit him with intelligence. So yellow pertains symbolically to understanding and knowledge. However, the expression of diluted yellow are envy, betrayal, falseness, doubt, distrust, and unreason. Just as there is only one truth, an adulterated truth is untruth.

Red is dense and opaque and filled with an inner warmth. The warmness of red is intensified to fiery strength in red orange. Red-orange light promotes plant and biological growth. However proper contrasting turns red-orange in an expression of feverish, belligerent passion (war, demons). Red orange also designates physical love, while blue-red conveys spiritual love. In purple, temporal and spiritual power are united. A color like red-orange is extremely sensitive to background:

Blue is always passive. Blue is contracted, introverted and associated with the nervous system. Blue is always shadowy, it beckons our spirit. When blue is dimmed, it falls into superstition, fear, and grief.

Green is the intermediate between yellow and blue. Green changes depending on how much yellow or blue it contains. Green is an expression of life and of growth. Tranquillity, hope, fruitfulness are expressive values of green. When it is dulled by dulled by gray, a sense of sad decay results. When green takes on a yellow component it indicates spring and the force of nature. If green takes on blue it becomes more spiritual.

Violet is the color of the unconscious, mysterious, impressive, and sometimes oppressive. Shades of violet are difficult to distinguish for most people. Violet can also signify chaos, death, and exaltation. Blue-violet signifies divine love and red violet signifies spiritual dominion.

Some of the common models used for emotional color combinations are:

A summary of the use of color in the American English and the connotations that different colors seem to convey are presented in the following table.

Until only recently black was not used to package any food items because of its many negative connotations. Green is never used with meat and dairy products because of the connotation of decay and mold. There is a great deal of concern by individuals as to the colors that go into their clothes, their homes, their cars, and the associated furnishings. One should not ignore the psychological implications of color in interface design.

Use color consistently. Where it is appropriate, design an explicit coding for the use of color. People unconsciously code colors and may well make a cognitive assignment the designer is not expecting.

The widest variety of foreground colors is with blue or black for the background. Black is slightly better. Generally one can use any cool or dark colors for background. The poorest dark background colors, on a relative basis, is brown and green. This may be because of their natural occurrence in vegetation and their function in nature to camouflage objects.

Unpredictable color layouts can lead to difficult situations for the user. There are many situations where the designer has no control of how objects will actually be laid out in the interface. Colors of equal brightness and little contrast are hard to distinguish (e.g., brown and black). In communicating complex information, shades of gray may be better than using too many colors (e.g., more than 10). A lot of colors create puzzle like patterns. Higher error rates occur in recognizing fine details using colors from either end of the spectrum when compared to colors from the center of the spectrum.

Any color combination may be acceptable given a sufficiently high luminance contrast. Desaturated color combinations tend to yield the best results. Any dark text color seems to be satisfactory with high luminance contrast of the background color. Almost any combination of text and background can be suitable as long as there is adequate luminance and/or chromatic contrast (Contrast modulation of 50%). Avoid overlapping or adjacent regions of highly saturated colors.

Color can add perception of five additional category dimensions. Structuring techniques such as a prominent location of key information and grouping logically related data improves performance in any interface situation. Shape and color go together well as redundant and or complementary coding. For example, to aid users in distinguishing among a large number of icons in their work space, the use of shape and color to mentally group icons together, regardless of their position of the screen, can be very useful. Shape might be a way of grouping icons into five different categories (e.g., rectangle, triangle, circle, etc.) and the color of the icon might denote its current status in the task the user is engaged. Both color and shape coding are equally beneficial to object recognition, but subjects find color more pleasing. The use of too many colors in a single screen can become quite confusing to the user. Brightness may be used for additional coding but probably it is limited to no more than three levels for the same color.

Color coding Guidelines:

• Colors used must be discriminable from each other.
• Detectable by users under the lighting conditions that will be used.
• Perceptually linear, linear, differences in colors by users.
• Meaningful color code in terms of user relevance.
• Consistency of use of coding and no exceptions.
• Aesthetically pleasing combinations that do not clash or vibrate.
• Coding of linear relationships (interval and quantitative scales) is better accomplished by utilizing saturation and/or luminance since they are linear.
• Coding different nominal categories (no linear relationship) is better done by contrasting hues since perception of hues are represented by the color circle and have no beginning or end.

Recognize the power of color as a coding technique. Color speeds recognition for many tasks, and is more effective than texture encoding. This must be done carefully because color-coding can inhibit performance of tasks that is not in line with the coding scheme. For example red coded text will stand out over non-coded text. It could be used to bring attention to exceptions such as over due books, errors, pressure too high or speed to fast. But if used for less significant items it might detract from the attention the user should pay to other items. Except for exceptions color coding should be complementary to the use of other cues such as shape, location, pattern, or sound.

Ensure that color-coding supports the task. There should be a close linkage between the users' task and the color-coding.

Have color-coding appear with minimal user effort. The coding should be automatic based on the user request, not the program itself, i.e. the color-coding should take place when the user requests display of an exception.

The brightest or lightest element in a dark area will attract the eye first. This can only be used if only one item is enhanced in this manner. The ease with which one can see small items depends on the contrast between the color of the item and the background. Black and white has the highest contrast and it is why we usually have black text on a white background for documents. On a screen, a pure white background can become too bright and then fatigue may set in. A very light gray would be a better choice than pure white. Reduced contrast is needed for reduced fatigue and increased contrast is needed for greater visibility. Even with colors the designer is always faced with having to make tradeoffs.

The role of the background is to recede, clarify and focus the foreground elements. Foreground can be represented by lighter shades of gray and background by darker shades of gray. One can make a background object show through faintly by making the object in front slightly transparent. Also the use of shadows can indicate depth or height (flat drop shadow, graduated shadow, 3-D shadow).

The eye is more sensitive to changes in lighter shades of gray than it is to the same amount of change in darker grays. People can distinguish roughly five shades of gray in addition to the end points of black and white. Clearly the divisions between the shades can be smaller for the lighter shades and need to be larger for the darker shades.

Use color in graphic displays for greater information density. The usual strategies for differentiating lines in black-on-white graphs--such as dotted lines, thicker lines, and dashed lines-are not as effective as a separate color for each line. In graphs with multiple plots, color can be helpful in showing which line segments form the full graph.

It is difficult to focus on edges created by color alone. Demarcations in color should be made in conjunction with changes in brightness as well. A thin black line between the opposing colors will serve to further delineate them. Clearly one should avoid boundaries between colors opposite one another on the color wheel.

Avoid color coding small objects. It is difficult for the eye to discriminate small areas of color in a multiple color environment. This is one reason why the color coding of words used as Hypertext anchors can be confusing to the reader. For fine detail one should use black, white, and gray. Surround objects in a neutral color or complementary color.

For applications involving significant non redundant use of color it is important to check the performance of the color monitor and the surrounding lighting conditions. The quality of monitors and color accuracy varies considerably. The same color layout on different monitors can differ widely. Saturation is the factor that is typically adjusted to promote viewing comfort. As color performance of advanced monitors expand there may be more automated techniques for using color. But one must still pay attention to color and designing for clarity in presentation. While blue on red on a printed page may be difficult to read, the same colors on a CRT with adequate luminance may not be as difficult. One must take into consideration the capabilities of the CRTs for which the system is being designed, the symbols being used and the application, to be sure that colors are used effectively and aid people in their use of computer systems.

The literature and experiments in the MIS field on using color to support analysis and decision making has shown the following outcomes:

• Color can improves performance in recall tasks.
• Color can improve performance in search-and-locate tasks.
• Color can improve performance in retention tasks
• Color can improve comprehension of instructional materials.
• Color can improve performance in decision judgment tasks where it is used to make alternatives and their supporting information clearly distinguishable.

Contrast is, in effect, the essence of any coding scheme. Clearly the most popular is contrast of hue and it is common in the folk art of most cultures. Light and dark contrast is much more available to us on a computer screen than it is in most other forms of color. In painting, for example, it is more used to express the presence of light through gradual contrasting of light and shadow. The cold-warm property can be verbalized in a number of contrary terms:
 

The strongest cold-warm contrast is blue-green to red-orange. Of all the seven color contrasts, the cold-warm contrast is considered the most sonorous and is often used instead of light-dark in such things as stained glass pictures.

Two colors are complementary if their light sources mixed together form white, or if pigments they form neutral gray-black. They are opposite one another in the color circle. Complementary colors used in the same proportion give an effect of static fixed images. They tend to convey stability. Each complementary pair has its own properties. For example, yellow/violet represents both complementary and light-dark contrast. Red and green is a pure complementary contrast. This type of contrast is fairly common in nature and many flowers exhibit this combination of colors and of course all red flowers with green stems and leaves.

Simultaneous contrasts results from the fact that for any given color the eye simultaneously requires the complementary color. This is an illusion that generates instability and tension. It can be used to convey excitement. This effect can be gotten by using two non complementary colors together or taking a rich primary color with a gray background. A red error flag on a gray background with no close green is a great error indicator to shake up the user. Note that red used for error flags with green near by might not be noticed.

Saturated colors are diluted by mixing them with white or black. The most saturated or pure colors are the "florescent" tones. The effect of the "dull-vivid" contrast brought about by saturation dilution is a relative effect. Vivid colors can be used to set off and highlight areas of dull colors in some situations. The use of florescent markers to mark documents is an example of this contrast. Providing people such marking capability on a CRT is not yet a standard feature but will become one when multiple selection and typing of selection abilities are introduced. In a graphic of ideas and concepts one might use such contrasts on the boundaries of the boxes to type the status of the ideas.

One can arrive at relative areas that different colors should take up in order to balance the contrast between the colors. This is contrast by extension. Goethe estimated a scale using pure colors on a neutral gray background of medium brilliance:
 

For example, yellow to violet is 9:3 or 3:1. Therefore violet must occupy three times the area that yellow does for the two be in a balanced contrast when they have the same purity. Yellow has three times the strength of violet. One could use this to provide a bit of intelligence for helping users design pie charts and other such display graphics. Using these proportions provides produce areas that are static and quite. When one violates these ratios and allows one color to dominate the results can be extremely expressive. It is the color in the minority position that will gradually exert itself and appear concentrated and provocative.

Understanding the performance of users in complex tasks involves the degree of informational complexity, the task or problem complexity and the form of the presentation. It is almost impossible to conduct empirical studies that can conclusively factor out all the variables so one can determine what is the dominant factor. As a result many formal evaluation studies have led to inconsistent and inconclusive findings. The guidelines we have covered in this section on color are the findings that can be tested in isolation and not in combinations among a wide range of the involved variables. As a result a great many choices that a designer might need to make in more complex situations will ultimately be of an artistic nature and could very well require the aid of someone with formal training in artistic design.

Both the above are in bold and 16 point in size. Note the Bookman is far more spread out and heavier in design.

With the industrial revolution came wide scale advertising and the demand for type fonts that were startling, unique, and would call attention to material. Some historians feel these extreme fonts were unsurpassed in their ungainliness and ugliness. These type fonts are referred to as Victorians. With wide scale use of PC's, that history seems to be repeating itself because in order to sell unique and more fonts the packages are offering weirder and weirder font designs. As in the Victorian era we are seeing type fonts that are loud and tend to be highly exaggerated by stretching, twisting, ornamenting, and shadowing.

In 1954 Max Miedinger, in Switzerland, created the most popular type in use today, Helvetica. It has a relatively high x height and can be read in small font sizes. It has a bold clean look. Unfortunately the U. S. government has unintentionally destroyed its effectiveness. It is the type used in the tax forms and as a result many people who read a lot of text in a book set in Helvetica begin to feel uncomfortable and don't know why. It is still excellent for bold headings and for marking graphics, but one would not recommend using it for the body of a text document for those that fill out U. S. income tax forms. It has become emotionally associated with an extremely distasteful task. It is not provided with the large number of fonts that come with Windows 98 and MS Office.

Type fonts classify themselves into various types:

Roman Serifs:

• Oldstyle: Garamond, Caslon
• Modern: Bodoni, Scotch Roman
• Transitional: Clearface, Bookman

• Traditional: Century, Baskerville
• Square serif: Clarendon, Stymie
• Sans serif (without serifs): News Gothic, Futura
• Script and cursive: Lydian Cursive
• Text letters: Old English, Engravers Text
• Non Proportional fonts: Courier, Typewriter styles

Optima, for example, is a useful font for headings as it works well in all upper case. Optima utilizes differing line widths for accent and as a result has a clear classical flavor and is easier to read in upper case (this font is not in the author’s computer). Futura looks modern and functional. It is a cool crisp lettering that needs plenty of surrounding space so it does not compete with other elements in a layout. Times Roman was designed for newspapers to be able to set legible, compact lines of types. It is too cramped for use as a heading. Originally computer displays used fixed size characters and were largely restricted to non proportional fonts such as courier.

For any family of fonts such as Helvetica the type font exists in many versions that differ in weight, proportion, angle, or texture. These changes result in versions that are slanted, lightened, darkened, stretched, widened, or reversed. Weight is perhaps the most noticeable and the standard categories for weight are:

Note that we normally have only two of the above possibilities (regular/medium and bold) in most current software word processors. In interface work we usually want to use at least three weights. As a result, we tend to use brightness as an alternative. Other classifications of forms for a given font are:

A type design that has different proportions (stretched horizontally or vertically) will look completely different from the original face. Variations in proportions are classified as:

Condensed or expanded letters are not as legible as those of "normal" width.

There are two possible variations in angle:

Italic or oblique type adds a dynamic quality to text. For sans serifs, the italics are often called oblique to distinguish them from the true italics. True italics often require redesigned letters because of the serifs and sans serifs tend to just be slanted versions of the original regular form. Finally the texture dimension includes such things as outline, reversing faces, and shadowing. There are, for example, 546 combinations of these variables to make up distinct Helvetica fonts. The current generation of word processors is still far from providing us the full publishing art of typography.

Certain type fonts are so cleanly designed that they are felt to be transparent to the reader. The families of true Garamonds and Times New Roman are in this category. They are quite good for the body of text and for allowing contrast with display fonts for headings and such.

Serifs: Various letters have horizontal, vertical, or diagonal strokes (e.g., M has four). The serif is a short cross stroke that projects from a main stroke. Serifs at the bottom of letters help the eye visualize the "virtual" base line the type is on. Serifs at the top help to move the eye along in the scanning process by effectively pointing to the right. Serifs were originated with Roman stonecutters who wished to give the end of letters carved in stone more strength and crisp definition. Typefaces without serifs are known as sans (without) Serifs and were developed after 1800. Sans-serifs were designed as letters not for texts but for captions. Types with serifs are more legible for reading bodies of text. The more letters are differentiated from each other, the easier is the reading. There are a number of different types of serifs.

The longer a line is the more important it is to use a good serif type. The need to concentrate on rather dense type also dictates the use of good serif types. The types of serifs are:

• Bracketed: traditional, safe, and rather staid.
• Hairline: graceful and nearly feminine
• Wedged: impression of power
• Square: exaggerated bulk that is energetic and forceful.
• Rounded: familiarity with strength
• Calligraphic: freely styled and informal

Other characteristics of type fonts are apex, bar, arm, and legs. The apex of letters is where two strokes come together at an angle such as A or V. The shape of the apex is another characteristic in determining type and it can be flat, pointed, hollow, and/or rounded. The arm is a horizontal or diagonal stroke that moves way from the main body of the letter (e.g., E, F, L, and T). The lower diagonal strokes of K and X are the legs. The bar is any horizontal stroke necessary for the formation of a letter (i.e., serifs are not necessary in such strokes) such as in A, H, f, and t. Many typefaces differ on the relative thickness of these components relative to the main part of the letter. In addition there are beards, nicks, spurs, balls, links, spines, tails, and terminals for the type designer to also consider.

Sans-Serif typefaces are those without (sans) the serifs or terminal cross-strokes. These are rarely used for books or other text intensive materials but rather for presentations and headings. They are also effective in interface screens. They tend to be heavier or bolder than the same size serif typefaces. They can remain legible to smaller size than serifs. However, geometrically designed sans serifs are especially difficult to read because each letter is shaped similarly.

Certain letters composed chiefly of oblique strokes appear rather heavy. This is the case of:

To avoid this heavy appearance, type designers make some of the oblique strokes thinner. Thin strokes often need marked terminals or serifs or they look unfinished. The round wide letters that characterize the nature of stress in type fonts are:

Given an O and I we can make a very good guess at the nature of the other letters. O is often a perfect circle on the outside, but can differ considerably on the relative thickness in the vertical or horizontal sections. The square wide letters are:

The height for M and W is about equal to their mean width. In the letters:

there is a general tendency to enlarge the lower portion by the cross bar or division being set above the mid height. This gives the letters a greater appearance of stability.

Letters divide up into the following classifications quite naturally:
 

	Regular	Bold
Straight line letters:	AEFHIKLMNTVXYZ	AEFHIKLMNTVXYZ
Curved line letters:	BCDGJOPQRSU	BCDGJOPQRSU
Open letters (lighter):	CDGOQ	CDGOQ
Closed letters (darker):	BHRKE	BHRKE

The spacing between lines is referred to as the "leading" because it was originally done with standardized strips of lead, each one or one and half points in width. This spacing affects the "tone" of the text that is the sense of gray and smoothness one gets by holding the text a distance away where the individual lines are not discernible. Decent sized spacing makes text more readable. Usually the automatic setting is 120 percent of the type size. Typefaces with tall lowercase letters (x heights) would require more leading than those with small x heights. As the type size increases the need for leading space does not increase linearly.

The relationship between type size, type of font, line length, open space, and leading requires visual judgment of proportions. A safe start is using 20% of the type size for leading. Leading should never be more than half the type size unless it is used to separate ideas in bullets or lists. Then the leading should be large enough to distinguish it clearly from the spacing of normal text.

Some key properties of text size and structure are:

baseline: the virtual line upon which the type rests. Descenders, such as the lower part of q, p, g, etc., fall below the baseline for lowercase text.

x-height: the height of the letter x. The ratio of x-height to the body size determines the visual importance of lowercase letters for a given typeface. For example, Helvetica has a large x-height as a proportion of the text font size.

point size: the distance from the lowest descender (e.g., p or g) to the highest part of the tallest ascender (e.g., d or b) is the type size.

em and en spaces: Em is a square space equal to the point size and an en is half that size in width. For example, a 12 point em is 12 points wide and used to be a square blank piece of metal type. An en is half an em. A single em is considered to be the minimum and default indenting for a paragraph so that the indent size is proportional to the type size.

Em and En are also represented by the long and short dashes -- and -. In classical typesetting there are three dashes. The hyphen is the shortest and used in words like "in-house." The en dashes, the width of an en, are meant to be used for number ranges: 1987-88. The em dash is used as grammatical symbols where most people use double dashes now --.

The x-height chosen tends to determine the feel of the type. Faces with large x-heights tend to be very open, airy, and legible (e.g., Helvetica) and those with small x-heights tend to be more compact and restricted, but take up less space (e.g., Optima). Given the same size type fonts those with smaller x-heights will look smaller. Body type should be in the 9 to 12 points size; however, for older people it is desirable to go up to 14 points. Century typeface is an example of a type with a small x-height that is often used by newspapers because it is legible at small sizes using only 1 point of line spacing or leading. This legibility is due to the design of the serifs and the use of thin and thick contrast in the letters.

When one is choosing the type size for headings a rule of thumb is to choose a size that is from 1.5 to 3 times the size of the type set for the body. This is the appropriate range to use to make, for example, different levels of headings distinctive. A common error is to use type sizes that are too large. Large decorative headings should occupy no more than 1/3 of the page or they look disproportionate. These errors are rampant on the Web.

For modern type faces without serifs the rule of thumb is to use one third the body size for leading. A 12 point face would use 4 points of spacing between lines. For type faces with serifs (e.g., Garamond) and good sized descenders one can use a minimum of line spacing (e.g., 1 point). The more modern and stark the type face the more leading is needed. Many of these modern fonts are used in interfaces because they do not send the eye scanning in horizontal directions like the older serif fonts. Therefore, they make good menu entries and headings in documents. It is easier for a person to scan vertically type fonts without serifs.

Letters as a rule are not equidistant, but their interspaces are approximately equal. Words are commonly less than one letter space apart. Lines of capitals are frequently half and whole letter heights apart. Lines of small letters commonly have their ascenders and descenders just clearing. Divisions of text such as paragraphs are best a clear line apart, or marked by a difference in color or size.

When setting line space or leading the rule is to use from one to four points. Type that has no leading is called set solid. This can only be used if the typeface has extremely long ascenders and descenders or a very light weight of type is used. Heavier typefaces and faces with large x-heights require more leading than do light typefaces with small x-height.

Reading is easiest when a complete thought or sentence occupies one line. If a line is too short or if sentences are so long they take many lines, then reading for comprehension is difficult, especially if the reader is not an expert on the subject material. Having a single thought in many lines will make the material seem choppy. When a person reads the peripheral vision of the left eye is anchored to the left margin of the page. If the line is too wide and the reader looses that anchor then the eye has to use the baseline to find its way back to the beginning of the next line so that scanning and reading speed is lowered. In general lines should be between 1.5 and 2.5 alphabets long. Another rule of thumb is lines should be ten to twelve words long. Once again the higher x-heights allow longer lines and smaller x-heights require shorter line lengths. Clearly there is point where two columns of text are better than one long line. Use of this knowledge to automatically adjust a large bodies of text in a window would improve the reading speed that is possible on the screen.

Good typography dictates that type be set with minimum letter spacing where possible. The letter pairs where spacing can be minimized are usually those that involve Y, W, T, P, y, and w. Typesetting systems on the computer should include a good kerning capability. The letter pairs that are considered to be kerning pairs are:

Note that all the above fonts are the same size. The following list is of words that are difficult to space properly. If you hold a page made up of these words some distance from the eye the texture or tone of the page will appear spotty in most typefaces.

Readers are not aware of whether the type they are reading is right justified. Justified type is only slightly more legible than well-set unjustified type. This result is based upon hyphenation. Since one cannot predict how text will be sized on every screen and workspace layout, it is somewhat unpredictable to right justify text and it should be avoided for screen use. There is some evidence that poor readers perform better with text that is not right justified.

The eye moves across the page in saccadic jumps. It focuses on a small group of words for about one-quarter of a second and then leaps to the next group in the line. Fast readers are really reading phrases they know as well as words. Also the reader actually looks most closely at the top halves of letters. This is why all caps are so difficult to read. Place a piece of paper over the bottom half of a line of all lower case and of all upper case letters and the difficulty of reading will become obvious. Most lower cases are distinctive but not upper case letters. The saccadic jump is approximately an inch and the use of ligatures (ff, fi, fl, ffi, ffl, ae, oe) allows more characters within a jump so they do increase legibility.

The Italian Renaissance regarded empty space as background, further back, and encircling the object. Modern art considers empty space as an equal part of the composition. Therefore, in modern type the unprinted counterforms in type take on more prominence and can sometimes be as important or have superior impact to the printed parts. Consider the white space inside the D as representing the letter. The unprinted counterforms can also be enhanced in emphasis by placing letters closer together. Compare the internal form of the space in the D and the O for a number of different fonts. Also, if you can graphically space letters take a word and move the letters closer and closer together until they overlap. These exercises show the impact of the whitespace. Note that modern fonts tend to allow such manipulation and remain legible.

The use of whitespace within typology is called imposition. Well planned space aids the user in understanding (e.g., sufficient space between columns) and/or increases the user pleasure or comprehension by not diverting the eye from what the user seeks to concentrate on. Just as one should view and open book as a total composition of both objects and spaces, so one should view the total screen the user is dealing with in the same manner. Current practices of destroying whitespace with advertisements and moving colorful objects is totally destructive of the ability of the user to concentrate on the other material on the page and perform their tasks. It probably would be easy to verify this in a controlled experiment.
 
 

The proportions, arrangements, forms, and type fonts that look good to the eye cannot be constructed geometrically by using a straight edge and compass because of the illusions of the human eye. The eye tends to magnify all horizontal values and diminish vertical ones. The resulting optical illusions are real and must be dealt with as part of the design process. They are well known in typography but apply equally well to interactive screen and icon design.

1. The geometric square looks greater in width than in height. An optical square must therefore be slightly increased in height to appear to the eye as a square.

2. When a geometric figure is divided transversely, the lower half looks smaller. (consider the design of the letters A and H.)

3. The thick horizontal bar looks fatter than a bar of equal geometrical thickness placed on end. The "force of gravity" active in a form makes it broader. (Consider why we make various parts of letters thicker and thinner.) The thick bar placed on end looks thinner in the direction of gravity (at the bottom). (Consider the design of pillars in ancient buildings such as the Parthenon.) Note that ascenders in type are usually shorter than descenders.

4. Reducing a black square in size makes it look like a rounded dot.

5. The geometric circle looks wider than its height. Note that the letter O is rarely a perfect circle, at least on the inside, in a type font.

6. Two constructed semi-circles, joined to make an S, cannot form and organic whole. The two movements come to a halt (to the eye) at the point of the union and this break must be smoothed over optically.

7. A circular movement flows into two straight lines. The tendency of the semicircle to close must be prevented by two straight lines. Again there is a break at the points of transition. A U cannot be constructed geometrically.

8. The same black circle changes in appearance depending on its position on a plane surface. In the upper part of the surface it seems to float (balloon) whereas near the lower edge it conveys a sense of weight (wheel). Our visualization of an object is influenced by prior experiences.

9. The triangle placed like a pyramid looks stable; turned upside down the same form looks unstable and irresolute. The same is true of the square sitting flat or turned on end (diamond).

10. A thick bar placed horizontally and vertically. The form looks heavy and weighty when horizontal, but lighter and more mobile when vertical.

11. Given a white square on a black background and a black square of the same size on a white background, the white square radiates beyond its edges against the black background and looks appreciably larger than the black square of equal size on a white background.

12 Taking a series of parallel lines to make up a square area, the use of horizontal lines make the square look higher than it is; while the vertical lines make the square look wider.

13. Given a square formed by either two horizontal or two vertical lines, the horizontal lines make the surface look wider; the vertical lines increase its height.

14. Two lines of the same length look shorter or longer on a relative basis by the shape of the arrows on the end ( < > or > < ). Serifs on ascenders or descenders can make them look longer or shorter by the shape of the serifs.

15. The eye creates movement as a result of its scanning process. The dot moves and gives rise to the line, the line moves and gives rise to a plane, and the plane moves and gives rise to a body.

Design is a process of choosing a compromise between a degree of tension and a degree of harmony. A group of lines to create a surface is in harmony with other lines; but a solid surface and line create a tension due to contrast and both the line and the surface is intensified. The letter L is a combination of a linear form with a slight addition of surface. Finally there is an illusion of motion. Humans seek to group things together mentally and this causes them to make inferences from objects in close proximity.

Text has a sense of rhythm. The interword spaces dividing line and type matter into words of unequal length are what contribute to this rhythm and they can easily be seen by blacking in the white space in a paragraph that separates words and separates lines. It is not unusual to observe doodlers who do this unconsciously, not even realizing they are highlighting the rhythm in a section of text. If the spaces between words or lines become too narrow or too wide the rhythm is lost and the text becomes monotonous. Text without ascenders and descenders also looses its sense of rhythm. The uneven right hand margin contributes to rhythm as well.

In an interface screen or form the pattern of text on the screen affords the designer far more opportunity and flexibility in designing rhythm than in a text document. One needs to look at the screen it terms of sensing the pattern or rhythm of the resulting menus and options to determine if they are in fact harmonic or dissident to the viewer.
 

The "falling" example below could be animated if done on a computer. The relationships between concepts as represented by words can sometimes be clarified by the movement of ideas and concepts relative to one another. The simplest example is the derivation of mathematical relationships by the movement of terms between equations.
 

Consistency in typography design involves arriving for a good layout of text that is used consistently through the document. In that regard it is a very similar requirement to interface design. Variation in design has the opposite intent of adding interest. Just as in music, variation means the mutation of a given design element. The same textual theme may appear in countless different variations, especially with its use in advertisements. In an interface, perhaps different fonts might indicate different modes of interaction that the user is in, even though the command name is the same. To this date very little use of text variation has occurred in interface design.

Some individual letters are static in nature (devoid of movement) like: A, H, M, and T. However, many letters are designed to convey round movement and movement from left to right: B, C, D, E, F, K, L, etc. When text is made into words and lines, the movement oriented letters carry along the static letters in the direction of reading. When one starts to place words and phrases on posters or on interface screens, the placement can influence the way the eye will move in the process of scanning the poster or the screen. In the future, with animation within the interface design, it will be possible to take fuller advantage of this sort of dynamics in design. The multitasking environment will require animated screens for perception of status and the control of multiple processes. Relevant menus and entries maybe changing as one watches the screen.

For headings, the larger the size of type you used the lighter it can be; conversely the smaller the smaller the size of the type the bolder it needs to be. If one is using colors, then the lighter the color (relative to black) the bolder the type needs to be. Underlying or underscoring is only effective for very large fonts and in generally should be avoided in interface design.

Lewis Carroll's the Mouse's Tale is a poem that is shaped like the tail of a mouse. If he had had a computer available to him we could well imagine that he would have programmed the poem to actually move in the motion of a tail.

                                                                      "Fury said to a
                                                              mouse, That he
                                                        met in the
                                                  house,
                                          'Let us
                                                 both go to
                                                        law: I will
                                                              prosecute
                                                                    you. Come
                                                                          I'll take no
                                                                                denial; We
                                                                          must have a
                                                                    trial; For
                                                              really this
                                                        morning I've
                                                  nothing
                                            to do.'
                                                 Said the
                                                        mouse to the
                                                              cur, 'Such
                                                                    a trial,
                                                                dear Sir
                                                              With
                                                        no jury
                                                  or judge
                                            would be
                                      wasting
                                  our
                                      breath.'
                                          'I'll be
                                              judge, I'll
                                                  be Jury,
                                                      said
                                                  cunning
                                              old Fury:
                                          I'll
                                              try the
                                                  whole
                                                      cause,
                                                          and
                                                      condemn
                                                  you
                                              to
                                                  death
 
 

There is no really mechanical way of measuring spaces between letters. The designers of successful type fonts have made use of optical illusions to improve the readability of their fonts. Adding diagonals to lines makes them longer or shorter. ' I ' seems longer than ' J ' but they are the same height. A line placed in the middle of a space will seem lower than the middle so the lines in H are usually above the middle. Comparing IL and LI, the IL space seems larger, also YT seems closer than dose JT. In the combinations HIT, HOT, and HOOK, the H and O have to be closer together than H and I to appear equal. The OO has to be still closer.

The unbalanced appearance of a word is produced in "COFFEE" or in "OGEE" when the open letters are exaggerated or are much wider than the other letters. Some words have distinctive silhouettes: HEN, GOOD, BLOSSOM, ALMA, and COLLEGE.

A black square creates a hole in a white space and varying shades of gray create holes to a lesser extent. The finer the lines of a gray square the more intense and uniform is the gray, even if the relative amount of actual white coverage is the same. Lines of type create a gray surface and what is called the "tone" of the type area.

In a book, readable lines are usually considered as ten to twelve words (6 characters on the average for words), while for newspapers it is considered to be five to seven words. The margins of a page in a book help to increase the size of the line, while in a newspaper there is very narrow white spaces between columns so that lines too long will send the eye scanning to the next column. When lines become too long it is difficult to pick up the next line. The longer the line, the more one has to increase the line spacing to ease the linear scanning process and the return of the eye to the beginning of the next line (this is referred to as 'registration').

The oldest theory about margins is known as the "golden section" and was specified by Jan Tschichold, a Bauhaus designer. He observed that many medieval manuscripts used the proportion of 2:3:4:6 for the inner, outer, head, and foot margins. One can construct this proportion uniquely using a compass and a straight edge on any two page layout. There are a number of other such constructions to express other alternative versions of a basic 2:3 proportion.

According to the golden section, the width of the page should be proportional to its depth by a ratio of 2:3. The 6 by 9 inch book format conforms to this exactly. The ratio of the text to the page area is also 2:3 so that for a 6 by 9 inch book the text is 4 by 6 inches. In general the text should be at least as deep as the sheet is wide. A more loose but related theory is one of using progressive margins that become larger beginning with the inner margin and working counterclockwise. One must note that this approach is also very applicable for setting up two windows dealing with related material on a screen with providing sufficient space for controls at the bottom, status at the top and context dependent menus in the vertical margins as needed.

Arrangements on a single page are usually done by first imposing a grid to which all decisions for placement can be gauged. The grid should be chosen to reflect the smallest element that can be placed. For standard page sizes of 8 and 1/2 by 11, the grid size commonly used is 1 inch (6 picas) wide and 1/2 inch high. Therefore, the resulting type and illustrations are all multiples or even divisions of 6 picas.

A given margin looks larger the heavier the mass of the text, and dissimilar the lighter the mass of the text. Borders act as separators, they convey the message that whatever is inside the border does not belong with what is outside. Space can be used to group things that are different but related to other groups. The use of space is not as strong as the use of borders.

The length of a line should be around two-thirds the width of the paper. The most pleasing ratios to the human eye for setting margins in documents with facing pages are 1:1:2:3, 2:3:4:5, 2:3:4:6, and 2:3:5:6, for the inside, top, outside, and bottom margins respectively. A rule of thumb on line length is to use two alphabets or about 52-54 characters. This line width tends to be the right size for maximum average reading speed among the general population. The margin needs to be wide enough so that the eye does not "swing off" the page in the backward motion to the next line. This is why left margins are sometimes larger than right ones.

Tone is the relative gray scale produced by page of text when it is held at a distance where the individual letters and words can not be distinguished. The degree to which the tone is even, is considered a criterion of good text design (font, spacing, etc.). A standard approach to setting up the margins when the tone was rather dark was to have 50% of the space in the margin and 50% in the dark text area. This creates an optical illusion where the dark text area will appear to take up about 68% of the space (optical illusion of parts) because the white space is broken into four smaller parts (around the sides) and the dark area is one solid rectangle. Margins can make what they contain look larger since the eye is guided to the contained part. The concept of tone as an evaluation of lettering traces back to the hand written manuscripts created by the monks of the middle ages.

Alignment is a key consideration in the layout of material on a page or on a screen. The eye will seek out and find an alignment even if you did not find one. We know the importance of alignment in being able to skim tables of data and to be able to skim text. When one introduces objects such as multiple windows there can be a great many forms of alignment and all of them allow a clear comparison of the objects for the purposes of examining similarities and differences

There is a certain similarity between the art of designing a poster and that of designing an interface screen. The objective of a poster is to go beyond the mere convenience of an impression and appeal to instincts, emotions, reason, and judgment. A successful interface screen demands attention, holds it, and crates a desire to interact with it.

Poster design variables:

Simplicity
Unusual or Novel
Suitability
Tone and color
Spacing and proportion
Rhythm

Distinctiveness: The distinguishing characteristics of each letter are strongly marked; for example, the lip on the Q from O; the R and P, the C and G; and within combinations such as LIT. In general the more distinctive the letters the easier it is to read the font.

Simplicity: There are no unnecessary parts as in the Victorian fonts.

Proportion: No part of a letter is wrongly exaggerated or dwarfed.

Beauty of form: Each letter is an individual and living whole.

Beauty of Uniformity: The existence of a family likeness of the different letters so they go well together.

Beauty of the Arrangement: The general fitness in the placing, connecting, and spacing of letters, words, and lines within the space.

Most screen layouts are asymmetric or what is called informal balance. Informal balance is livelier and holds greater interest than formal balance. The golden division of a line or the "golden mean," is considered quite pleasing to the eye and is an imbalanced ratio that occurs quite a bit in nature (.618:1 or .382:.618). This ratio is sometimes approximated by 3:5 or 3/8:5/8. If one is looking at a standard page the optical center is higher than the mathematical center and the Golden Division Line is slightly above the optical center.

Black is the paramount color in typography and it goes very well with brilliant colors, red in particular; not a dull, bluish red, but a bright, gleaming, yellowish red. Color can only be used in the type if the type is large and bold. Small and light colored type has a number of problems: red pales to pink, yellow seeps out of the white surface, blue becomes indistinguishable from black. When we had typewriters the only standard "other" color was red. A small amount of red placed near a lot more black gains in richness and luminosity. The best use of color in any amount of type is when there is clearly a dominant color and the alternative color is used only to call attention to specific small regions as opposed to have wide area spread.

When blue and red are in juxtaposition, the blue appears bluer and greener; the red appears brighter and more scarlet. With red and green, the red appears more crimson and the green, greener and bluer. A greenish blue will appear plain blue beside a pure green; a blue with a purplish tinge will appear more purple.

The effects of a black outline are: to make a bright color appear brighter and richer, to define and harmonize neighboring colors and shapes, and to keep the design flat (minimize the illusion of depth). The effect of a white outline makes the colors appear paler and lighter. Gold is even more effective than white or black in harmonizing colors.

Early tests (Paterson & Tinker, 1940) on many thousands of subjects rated the degradation in reading according to combinations of type color and background:
 

	Color Combination	Differences in %
	Black on white	0.0
	Green on white	-3.0
	Blue on white	-3.0
	Black on yellow	-3.8
	Red on yellow	-4.8
	Red on white	-8.9
	Green on red	-10.6
	Orange on Black	-13.5
	Orange on white	-20.9
	Red on green	-39.5
	Black on purple	-51.5

The above results were for reading from paper under constant lighting conditions and the same brightness of the colors. On a computer, changing the relative intensity can enhance some of the color combinations. However, these results indicate that server problems can occur with some color combinations and that the first four are the safer choices to stick to. Note that white on blue on a screen can probably do as well as blue on white with the intensity control possible. We do find white on blue to be quite common in many applications.

In general, color combinations which are legible in normal reading are also found to be satisfactory for material to be read at a glance or at a distance. The reading legibility of color combinations seem to correlate with the satisfaction or pleasantness of the color combination. In essence, brightness contrast between print and background is the final determining factor given reasonable combinations of color.

It is probably Hippocrates who is considered the father of semiotics which is the study of signs. His early writings on the types of symptoms where the first academic systematic discussion of the concept of signs. The physician, relying on the patient's verbally and nonverbal reported "symptoms" combined with the "signs" observed by the physician, identifies a disease (making a "diagnosis") and forecasts its eventual course (makes a "prognosis"). Interestingly, this sounds similar to the process a user goes through in trying to comprehend an interface.

Originally signs were thought to be either subjective or objective. Today, signs are thought to be of three types: icons, symbols, and indexes.

Icons: An icon is something that represents something else that is usually static in nature. For example, the stars in the American flag "icon" represents the states and the stripes represent the original colonies. The American flag represents the country just as religious icons represent God and many of the icons in a tool menu represent a specific menu choice that can be made.

Symbols: A symbol is somewhat more dynamic in nature and conveys a condition that is not obvious from the actual sign itself. The American flag at half mast indicates the death of someone important to the country. Its meaning is not represented within the symbol itself but is convey by triggering semantic content in the mind of the viewer. Many trademarks are really symbols in that the connection between the mark and what it represents has to be learned.

Indexes: Indexes are the most dynamic use of signs in that they signify a contextual situation. The American flag on the battlefield may signify the position of the front line. The flag on a ship signifies what country the ship is registered to.

As an example, in an interface we can conceive of the hourglass being used in all three ways. Usually, when the cursor turns to an hourglass in Windows, it is being used as a symbol that the processor is busy and that the user cannot undertake an action while that symbol is present. If the computer knew how long it was going to be busy and the actual amount of sand in the hourglass was set to indicate at any instance how much longer the processor would be busy, then the hourglass becomes an index sign. If the hourglass were on the toolbar and choosing it meant to start a run or execution of a task, then it is the usual icon. Current use of signs in interfaces have largely focused only on icon usage and there is a great deal of future possibility for using signs as symbols and as indexes.

Other dimensions of signs are:

Image: The sign resembles in appearance that of which it is a likeness.

Diagram: Reveals structure of the depicted fragment of reality.

Metaphor: Emphasizes important properties of the subject it refers to.

Assimilative: Relationship to reality fragment is not obvious and must be learned.

Another factor that applies to signs (as well as words) is whether the meaning is inherent in the sign or the meaning depends upon the context of the communication. Such signs are called "shifters" in linguistics. For example the meaning of icon might depend on the application or the interaction state the user is in. Signs can be generic just like commands can be. The interpretation of signs depend upon the virtual channels of communication which are feedback and feed forward. In other words, the understandings that exist between the user and the system determine the final meanings of the signs used.

	Pragmatics:	Context, Virtual Channels
	Semantics:	Interprets, Formulates
	Syntactics:	Encode, Decode

In the above model of communications, the virtual channels are the ones that determine the "success" of communications. A sender has a pre conception of how the receiver will interpret the message, that influences the formulation of the message, and the feedback that will be expected to confirm the interpretation of the message. The process of modifying the virtual channels is in fact the process of learning. This is very different than the classical mathematical formulation of Information Theory. The information content of the above types of messages are dependent upon the relative understandings of senders and receivers.

Some of the earliest signs in western civilization were the "house-marks" which denoted ownership of items by a family. They were carved in the wood owned and harvested, the livestock were branded with it, and tools and other possessions were labeled with the marks. Marks were modified to represent different members of the family and became personal marks that later evolved into coats of arms. Another evolution was the emergence of craft marks to represent a trade or craft which today has evolved into the concept of trademarks. Perhaps the most rich and diverse of these early marking systems were those of the stonemason's that later evolved into almost a language of mystic or "Masonic" signs. Some of these still appear on the U.S. dollar bill. Cultural groups often develop and have their own signs. During the depression, hobos developed a whole set of signs to indicate to one another such things as: this is a safe place, they will provide a meal, there is a mean dog here, they will beat you here, etc. Hobos would carve these on fences and the sides of buildings.

When one thinks of design signs as a set of related symbols then it becomes possible to express very rich symbolism that begin to take on the form of a limited language tailored to a specific situation. This is certainly evidenced in the nature of road signs that understood everywhere in the world regardless of the language of the driver. In many engineering fields, the signs are standardized creating designs of such things like circuits, buildings, etc. Signs in an interface situation should be viewed in the context of establishing families of signs. The following medieval set illustrates the power of this approach.

The use of signs in interface design is in a very primitive state considering the dynamic possibilities of animation that can go far beyond the historical use of signs.

In general, as signs evolve within a structure, the better known they become and the simpler they tend to become. This has been the history of popular trademarks and it has also been the evolution of some interface symbols like scroll bars and command buttons. The early ones had elaborate three dimensional perspectives. Look at the two upper corners of windows to see how simple buttons have become. Historically, the development of Egyptian hieroglyphics followed the same sort of evolution. For frequently used symbols people want simplicity of representation along with the obvious need for distinctiveness.

An excellent example of this is the standard symbols that evolved for VCR and CD players in that they are both simple, distinctive and convey similarity between their visual nature and their meaning.

A similar well designed set of icons is the paragraph alignment buttons for left, center, right, and left & right justification. Note that symbols or icons are more easily understood when they come in families that provide a comparative visual interpretation of their meaning.

The set of special symbols that are available today on most word processors is called in typography the "Pi" characters. They include such things as copyright symbol, bullets, daggers, ballot boxes, check marks, pointers, etc. In addition, there are a number of special fonts that are made up of symbols such as the "dingbats." One would expect that one of these suppliers would get smart and put out a set of characters that can be used to convey emotions (e.g., happy or sad faces, flowers, etc.) so that writers could enhance their paralinguistic cues in electronic mail. There are also a considerable number of professional fonts where the symbols of the profession can be mapped to the keyboard for mathematicians and various engineering and scientific fields.

In the print industry, icons are pictographs and ideographs and they go back to the cave man who expressed the hope for a successful hunt by drawing an animal on a cave wall. The language independent road signs and those used to indicate restaurants, bathrooms, etc., in travel terminals are all part of an effort to convey meanings through pictures. One that is found on roads that dead end on the edge of lakes in Europe is:

This is a particularly interesting example in that one of the most difficult things to convey in diagrams is action of some sort. While some symbols like "wastebaskets" can convey the idea of the "delete" action, this is difficult to establish because most objects that might be used for a symbol can be associated with a wide variety of actions.

Attempts even in recent history, to develop picture languages for use by the handicapped have always run into a cognitive limitation of a few hundred pictures for conveying pictorial semantics. It is words or symbols, or combinations of symbols to make abstract words that provide the far richer memory on the order of 100,000 semantic concepts that can be recalled at two or more a second. It is an amazing mental ability and even more amazing is the variation in scanning possible. We have some languages that go left to right, right to left, top to bottom and the ancient Greeks who read boustrophedonically (as the ox plows), one line to the left and then the next to the right and so on.

When post office letters used to be a primary means of personal communications, it was quite popular for writers to illustrate their letters. This included everything from substituting symbols such as a drawing of a human eye for the word "I" to very elaborate illustrations of the subject matter of the letter. Already today in human email people are going to extremes to illustrate by using symbols (e.g., : ) represents a happy face). One expects that the use of illustrations in email will mushroom once it becomes easier to incorporate graphics and symbols in an accepted common standard over the networks.

Symbols are expressions of subjective feelings and emotions which tend to have universal appeal. Those utilizing digital networks have been making maximum use of the characters that are available in ASCII for adding expression to their writings. As a result, people have established additional names for the standard characters. This is an example of how individuals adapt not only the language but the available symbology. Many of these names reflect particular emotional meanings these symbols can convey. The following table was circulate over USENET, circa 1983. It provides the standard or official names for the characters, listed first, followed by the other alternatives. They are listed in ASCII order.

The introduction of wide scale messaging over Internet has changed the conventional use of many of the above characters to create symbols that convey social emotional content. There is currently well over a thousand of these symbols and the following list is a sample selected from those.

Basic Faces
 

:-)	basic smiley, ha ha, happy, humorous, smiling
:-(	boo hoo, frowning, mad, sad, un-smiley
:'-(	crying
:'-)	crying with happiness
:-*	Oops!
:-<	frowning, real sad
:->	biting sarcastic face, hey hey
:-@	extremely angry, screaming, swearing

Face Variations:
 

:-e	disappointed
:-I	hmm, indifferent, thinking
:-J	tongue-in-cheek comments
:-k	beats me, looks like something, though
:-o	"Oh, nooooooo!" Uh oh! Wow! shocked. surprise, yawn
:-p	smiley sticking its tongue out (at you!)
:-s	just made an incoherent statement
:-T	keeping a straight face
:-V	shouting
:-w	speak with forked tongue
:-x	My lips are sealed!
:-X	A big wet kiss!
:-[	blockhead, vampire
:-\	undecided, skeptical
:-]	biting sarcasm, sarcastic
:-|	"have an ordinary day", grim, no expression
:-| :-|	deja' vu
:-||	angry
:[	real downer
;-}	leer
<:-(	disappointed, dune
<:-)	dumb questions
<:-I	dunce
>-<	absolutely livid!!
>:-<	mad
>:->	devilish
]:-)	"
]:->	"
!-(	black eye
#-)	partied all night
$-)	yuppie, won the lottery
%-(	confusion
%-)	after staring at the terminal for 36 hours, cross-eyed
%-6	braindead
8-|	eyes wide with surprise, suspense
8_)	don't get your nose out of joint
&-|	tearful
&.(..	crying
'-)	wink
O:-)	acting very innocent (halo)
(-.-)	Zzz... sleeping
(-_-)	secret smile
(:-#	said something I shouldn't have
(:-(	frowning
(:-\	very sad
*<|:-)	Santa Claus (Ho Ho Ho)
-=#:-)	wizard

Other Symbols:
 

-/-	stirring up trouble
>w	nose-thumbing gesture
@=	flame, nuclear bomb going off, war started
@>--->----	a rose
@l@	too many hours at terminal
[]	hugs
xx	kisses
_\\//	Vulcan salute
__!	enough for now
|-{	Good Grief!
||*(	handshake offered
||*)	handshake accepted

@%&$%&$\&*@%$#@

you know what that means!

The future understanding of how individuals will utilize symbols both for communication with other humans and for computers represents a typical "artifact" type study, the result of which can aid designers in using symbols for meaningful actions and objects in an interface.

Just as with color, the user needs control over the fonts and sizing of fonts on his or her screen. As screens with high resolution and greater size become more common, people will want to pack more information on the screen and in effect generate a larger workspace. In addition, the needs of older people and those with seeing difficulty demand the ability to specify larger types.

The use of type font variations in interface design is still an untapped area. They do offer a tremendous opportunity, not only for additional coding in the interface, but for the introduction of emotional content as well.

The eye tends to seek variety and if one takes a vertical rectangle and divides it vertically into two equal rectangles it will not be pleasing. On the other hand if the division is slightly unequal parts that cannot easily be measured by the eye on a relative bases it is far more pleasing. Similarly dividing such an area into three areas should have three unequal areas going from largest, to in between size, to smallest. No part should be a simple multiple of the other (e.g. a clear distinctive relative size). This same principle is what leads to the inequality of margins around the edges of the page of a book.

The concept of "dynamic symmetry" was well known to the Greeks and is the general principle underlying these observations. Those working with the design of advertisements use instruments to try and determine if the design of the ad will cause the human eye to focus on the message they seek to get across. Nothing, for example, shaped like an arrow (e.g. V) should point out or away from the area the eye should go to. The eye tends to seek the top of a display and hence the optical center is higher than the true geometric center. Furthermore there is a center above the optical center that is called the "artistic center" and seems to be more pleasing to the eye. For instance if we hang a picture on a panel on the wall we will put it well above the real center of the panel.

The rectangle is a very common construct for the purposes of design. We use it for dividing up screens and creating windows and for blocking text and other shapes such as ellipses. There are only about five different proportional rectangles that people can compare, differentiate and recognize on a relative basis. These are:
 

Name	side ratio	diagonal	equal division	inscribed square: resulting rectangle ratio
square	1:1	1.414 Ö 2	2:1	infinity
square root of two	1.414:1	1.732 Ö 3	1.414:1	2.414:1
square root of three	1.732:1	2.000 Ö 4	1.155:1	1.366:1
double square, or square root of four	2:1	2.236 Ö 5	1:1	1:1
square root of five	2.236:1	2.449 Ö 6	1:1.118	1:1.236
golden rectangle	1.618:1	1.902	1.236:1	1.618:1

The above table gives the relative ratios of the sides, the size of the diagonal in units of the shortest original side, the resulting ratio of dividing the rectangle in to two equal parts, and the resulting rectangle ratio when one inscribes a square. Both, the diagonal size and the inscribed square proportion, aid in explaining how people are able to differentiate these rectangular areas. Note that all the above (except the gold rectangle) can be constructed from the prior one by starting with the diagonal and rotating the unit side to be perpendicular and forming the next largest rectangle. In the above table each prior diagonal is the same as the first column in the next row down. The golden rectangle, as we will see below, is a limit condition. Note that column one and three is the same for the square root of two rectangle and the first and last column is the same for the golden rectangle.

Some of the common divisions we encounter are:
 

1.27:1	17 inch CRT
1.29:1	American Sheet of paper (8.5x11)
1.33:1	Television screen
1.41:1	European paper size
1.50:1	35 mm slide, apple screen
1.55:1	Windows work area on 17 inch CRT
1.59:1	Two sheets of paper in a binder (17x11)
1.60:1	Suggested proportion for acoustic speaker cabinets
1.77:1	HDTV

The standard proportions have certain interesting properties. The square is an attention getter and gives an impression of stability and permanence (unless turned on its end into a diamond). One will commonly find that expensive art books and books containing many drawings or pictures (garden books) are square shaped. This is because the square shape provides a great deal of potential margin area for having different proportioned rectangles on different pages. One can then give a true representation of the different sized and proportioned art works with relatively pleasing margin differences page to page.

Note that when we divide the square root of two rectangle into two equal parts each resulting rectangle is also a rectangle in the same proportion. This makes this rectangle ideal for books. It is the European standard for paper size and it is also commonly used for posters, booklets, and magazines. Obviously, continuous subdivision of equal size gives a set of division that are all in the same proportion and can be used to divide up a poster area into areas of equal interest and emphasis.

The double square is very similar to the above two. It has the stability emotionally of the square and divides equally into two squares. Clearly a square can be divided equally into four squares which also makes it useful for equal emphasis divisions. The Tatami mat in Japan is also of this shape as are some of the door mats we find sold in the U.S. It psychologically suggests wiping both feet as there are two distinct spaces for the feet.

The golden proportion has the characteristic of occurring in nature; because of this, it is commonly employed in artistic works because humans are unconsciously familiar with its shape. If we inscribe a square in a golden rectangle, the resulting rectangle is also in the golden proportion only smaller. If one continues this iterative process of inscribing smaller and smaller squares, to generate smaller and smaller squares, and then connects up the outer corner of each smaller golden rectangle, the result generates an Archmeidies spiral which is a shape that can be seen in the pattern of center of a sunflower and other natural spiral occurrences in nature. This spiral reflects growth rates and patterns in plant and animal life. It has been discovered in many works of art before the reason for it was understood. In Botechilies Venus, the ratio of the total height of Venus to the height to her navel is in the golden proportion. Then the height to the navel relative to the height to the breasts is also in the golden proportion. Succeeding smaller breakdowns of features of her anatomy are also in the same proportion. Many works of architecture also incorporate this proportion.

If one takes the diagonal of half a square as a radius, and circumscribes a half circle on the square we can derive the Golden Mean. The segment of the diameter outside the square and base of the square will be in extreme and mean ratio (A:B::B:AB). If the rectangle on the base line is completed, it will consist of a square and an another rectangle similar to the parent rectangle. One can continue to nest this square-rectangle pair within the original and generate a resulting spiral. Each of these rectangles are Golden Mean rectangles.

If we start with the above construction for the Golden Mean but place a GM rectangle on both sides of the original square, this is the square root of five rectangle.

The square root of three is clearly distinctive from the others by the greater narrowness. Its main characteristic is that it is distinctive from the golden rectangle and the double square. The double square is really the square root of four. The final rectangle that can be used and the most elongated is the square root of five.

One can look at the derivation of the Golden Rectangle mathematically by considering the summation series where each succeeding number of the sum of the prior ones:

Consider A:B::B:C, for example: 1:2::2:3 or 2:3::3:5. For this series, the product of the means BB is always 1 greater than the product of the extremes AC.

As the numbers in the series gets larger the error of one becomes very small and the resulting limit is the Golden Rectangle where the product of the means equals the product of the extremes.

Also the set of ratios given by this series has frequent occurrence in nature. These ratios characterize different logarithmic spirals found in nature (e.g., pine cones, sunflowers, flower petal arrangements, pineapples, etc.).

The facade of the Parthenon encloses a major rectangle (on its side) which is a Golden Mean Rectangle. This can be further subdivided (using the columns) to show GMR shapes within it. This gives the building a certain sense of rhythm. Many artistically pleasing pictures exhibit a sense rhythm contained within the forms. Other ways of getting rhythm from shapes is to alternate circles and squares within one another or to continuously subdivide triangles, pentagons, hexagons and five and six pointed starts within the circle. There are many examples of these patterns in architecture, paintings, quilts, etc. What is very significant is that the artist may not have a conscious recognition of the underlying mathematics. This provides the evidence that this appreciation of certain shapes and resulting patterns is a physiological property of human visualization.

More elongated rectangles can not be distinguished; however, there might be occasions to use highly elongated rectangles (e.g., tool bars, menus, scroll bars, status lines, etc.). An extreme elongated rectangle might be an index that has connections to many other windows so that it is viewed as going into virtual or hidden space outside the monitor range.

The use of margins are a critical factor in developing easy to perceive collections of shapes and areas. They allow the user to detect a visual pattern that aids in separating different things. A one line margin between paragraphs and a two character margin between columns are standard minimums that are desirable in most situations. Even in our earlier recipe design problem we pointed out that a one line margin between the instruction steps in a recipe made it much easier for people to be able to look away and look back without loosing their position. One can use lines instead of space but this tends to make screens more complicated. In any case one thin line to separate areas is a better approach than multiple lines and heavy or ornate boarders.

The square symbolizes matter, gravity, and sharp limitation. All shapes characterized by horizontals and verticals may be assimilated to the square form. The square corresponds to red the color of mater and weight. The triangle and its acute angles produce an effect of pugnacity and aggression. It is the symbol of thought, and among colors its weightless character is matched by yellow. The circle exhibits a sensation of relaxation and smooth motion. It is the symbol of spirit. The ancient Chinese used circular elements for religious designs. The circle corresponds among colors to blue. The secondary colors are matched as orange to the trapezoid, violet to the ellipse, and green to the spherical triangle.

The circle is representative of continuity and timelessness. It is the most self contained of shapes. It is used to represent balance and order in many different cultures. Triangles and rectangles can either represent stability or instability depending upon their orientation to the horizon. Humans will try to group lower level pieces of a diagram together to form higher level constructs. Dots scattered on a page at random will get grouped into collections of dots according to the ones make tighter patterns. Those parts nearest each other will tend to form groupings against a background of empty space. Furthermore, visual units which resemble each other in shape, size, color, and direction will be seen together as a homogeneous grouping even when they are separated in space by other objects. These are interpretations of a "law of similarity" in design.

Humans are always seeking a completeness or "Gestalt." The Gestalt theorists point out that humans are seeking a completeness in forms and design. A straight line is project to continue. A part of a circle will infer the whole circle. Good design recognizes the need for this completeness as part of the design conception. Psychologically closed areas in a diagram are more stable than open areas. To achieve closure is considered psychologically more rewarding. If one looks at a card that has been torn in half and lies them in a surface, the eye will seek to match up the two pieces and confirm that they would fit together to make a whole.

 Our mind interprets things according to experience. When we see a large and small version of what we think is the same object we will infer mentally that the smaller one is farther away. We also have a natural sense of perspective and what we consider to be parallel lines will converge if they are far enough way. Furthermore, the sense of light sources and shadows can be used to further enhance perspective.

The horizon is always at our personal eye level. The higher in the air we go the steeper the ground plane will seem to rise. If one puts more distant objects higher up on the screen surface a sense of depth and space is created. This can be done in conjunction with size changes to enhance the fact or it size changes can be ignored and still there is an effect of depth. This technique shows depth without disturbing the flatness of the picture plane.

Overlapping is a common way we show depth in windows so we can easily view a set of windows as being in front and behind others:

Another form of overlapping is to show objects penetrating one another, inter locking, and or inter lacing. All these forms of object relationships can give the user an impression of depth.

Transparency is a variation of overlapping. One can imagine installing glass planes in a surface to view what is behind it. One can create engineering type drawings where hidden lines become visible or one can use artistic style tone changes to give an impression of hidden items. Objects that are farther away are less clear with respect to detail then the same type of item in closer proximity. This is a technique that is very commonly used in painting. The depth of atmosphere through which light travels changes the tones and color quality of surfaces. A gradual change of tone and texture in a surface can give an impression of it receding into a distance. The use of color differences as a depth mechanism has been discussed earlier.

Computers provide the startling dimension of using motion to give an impression of depth. One can zoom in and out of the plane which in effect can move things closer or farther away. One can rotate to provide an aerial view of what was a front view. For example if the windows had depth we could look down on the collection of windows on our screen and see the bridges between them in terms of the path we took to get from one window to another.

Panning in the x and y dimensions gives us unlimited scope of our view and further impressions of vastness. Even early primitive drawings show aerial views of such things as hunting grounds. In general we have all the following motions to work with:

• up-down and right-left for panning
• forward-backward for depth
• in-out for zooming
• rotation (aerial views, back views)
• distortion (e.g., fish eye)
• animation (movement of by themselves objects)
• Virtual Reality manipulation (putting ones hand in the screen)

Three dimensions is a more natural human perception than two and our brain seeks to create that third dimension even when we know we are using a two dimensional screen.

Regularization: Establishing a repeatable pattern through the combination of form and color allows the user to abstract the meaning provided by a distinct design. Form, color, and even type fonts allow multiple ways of coding that can become implicit and transparent to the user so that he or she does not have to utilize limited cognitive processing ability to take advantage of the coding.

For any screen or display one test the designer should perform is the "squint" test. Close one eye and look at the screen by squinting with the remaining eye until details go out of focus and observer what seem to be the resulting distinctive things that attract and hold your attention. If these are the things you were designing for you are fine, if not you have some problems in the overall spatial organization and coding of your screen.