multimedia design principles - chapter 8

8 Typography And Graphical Usage In Interface Design

Objectives

At the end of this chapter students should be able to:

Know human considerations in interface design. Know how to organize screen elements clearly

and meaningfully. Know how to present information simply and

meaningfully. Explain the organization and structure guidelines

in interface design. Explain the technological considerations in

interface design.

Typography

Typography Terminology

Categories Of Type

Getting Text Into Your Document

Reading Type Onscreen

Font File Considerations

Anti-Aliasing Type

Balancing Design Time And Effort

Graphics

Sources Of Graphics

Integrating Images Into The Interface

Colour

Colour Methods

Colour Terminology

Colour Harmony

Colour Context

Using High Contrast In Interactive Document

Selecting The Right Colours

Using Colours Effectively

8

M U L T I M E D I A D E S I G N P R I N C I P L E S

126

8.1 TYPOGRAPHY Typography is the art of designing type that is legible, expressive, and engaging. Text

on the screen adds expressiveness and style to an interactive document along with meaning.

Using text is one of the quickest and easiest ways to communicate large amounts of information.

Good text is easy to read, informative, and adds visual style to the interactive document.

One way to create good text is to understand the basics of typography. Designing good typography depends on choosing the right typeface, size, weight,

spacing, colour, and layout to convey the message. In addition to dealing with these traditional issues of good typographic design, you should be aware of resolution, anti-aliasing, contrast, text fields, and file format issues.

Figure 8-1 Example of typography

8.2 TYPOGRAPHY TERMINOLOGY Typography has a long history and an established terminology. These are the terms are widely used today:

Figure 8-2 Example of typeface

8

T y p o g r a p h y A n d G r a p h i c a l U s a g e I n I n t e r f a c e D e s i g n

127

8.2.1 Typeface Set of characters (letters, numerals, and symbols) with similar design features. Some computer programs use the word fonts interchangeably with the word typeface.

8.2.2 Point Size The height of a letterform, traditionally measured in points. There are 72 points to an

inch. The smaller the point size, the smaller the type can be. Smaller point sizes are difficult

to read onscreen.

Figure 8-3 Type point size

8.2.3 Weight The thickness of the strokes that make up a letterform. The thicker the strokes, the bolder the letterform can be. Common weights are regular,

bold, and ultra bold. Thin, delicate type is generally not as easy to read onscreen as regular or bold type.

Figure 8-4 Type of weight

8


128

8.2.4 Spacing Space between letters, words, or vertical lines of type. Spacing encompasses letter spacing, word spacing, and leading. Letter spacing is the space between individual letterforms. Word spacing is the space

between words. Leading is the vertical space between lines of type. Letter spacing, word spacing, and leading are all factors that influence the readability

and the expressiveness of the type.

Figure 8-5 Example of spacing

8.3 CATEGORIES OF TYPE There are literally tens of thousands of typefaces and most typefaces have similarities

in form that allow for their placement into broad type categories. Examples of type of categories are as follow:

8.3.1 Roman Roman typefaces typically have thick and thin variations in their letter strokes, and

serifs range from moderately to extremely pointed. Roman typefaces are commonly used in body copy, as they are considered easy to

read.

The type on top is at normal letter spacing. The type in the middle is shown with wide letter spacing, while the type at the bottom uses very tight letter spacing

Regular leading

Wide leading

8


129

Serif typefaces can be difficult to read onscreen if they are too small because of low screen resolutions, and the thick and thin strokes within the letterforms.

Figure 8-6 Roman

8.3.2 Sans Serif Sans serif means “without serifs”. Sans serif typefaces have a modern appearance and

feel and can be very easy to read. They hold together well at small sizes and are generally a good choice for headline

copy, body text, and interactive controls.

Figure 8-7 Sans serif

8.3.3 Square Serif For these typefaces, the serifs at the end of the letter strokes appear to end in blocks or

slabs. It work best in headlines or display type.

Figure 8-8 Square serifs

8


130

When set in smaller type sizes, square serifs tend to make text fields onscreen appear dense and black.

8.3.4 Script Script typefaces can convey the

feeling of handwritten designs. Some script typefaces can be hard to

read, especially in blocks of text that are all capital letters. The delicate letter strokes of some script typefaces make them hard to read at smaller sizes.

They are best used sparingly and for headlines.

Figure 8-9 Script

8.3.5 Decorative When a typeface design is hard to categorize it is called decorative category. There

are no design limits for this category. Many of these typefaces can be extremely difficult to read and are best used for

display or headline copy instead of body text. The advantages using these typefaces are can establish a mood, time period, or style.

Figure 8-10 Decorative

8.4 GETTING TEXT INTO YOUR DOCUMENT There are three main options for obtaining text for interactive documents. If the project is a revision of an existing print or motion media piece such as a

brochure, newsletter, or video you may be able to reuse existing copy. This text can be typed manually or scanned.

To get text for an entirely new project, the text will have to be written and edited specifically for the project.

The third way to get text into your document is to let the user input information.

8


131

8.4.1 New Text Writing or editing new text may require the services of a professional copywriter. The

copywriter should be aware of the limited screen. As an additional advantage, writing new text circumvents the need to obtain copyright

permissions.

8.4.2 Reusing Existing Text Reusing existing text may

require the services of a professional typist or someone willing to carefully edit OCR-scanned text.

For long lengths of text, scanning may be a viable option, as long as someone is available to copyedit the text to identify and correct any OCR scanning problems.

Figure 8-11 Example of reusing existing text

8.4.3 User Input Interactive documents requesting user input are more demanding to design and

program. On the design side, you must consider how much screen real estate is necessary to

accommodate user input. For instance, a web page may ask for the user to “fill in the blank” with their name,

title, and address all in a limited amount space. Ultimately, whether text is typed, scanned, or input by the user, text adds functionality

to your document. As an interactive designer, your challenge is to shape readable, stylish, and usable

typography for the screen.

8


132

Figure 8-12 User input

8.5 READING TYPE ONSCREEN Designing type that works well on screen, demands a good understanding of the

traditions of effective typographic design and how to work with the strengths and weaknesses of interactivity.

There are many factors involved with making type legible onscreen. These factors include careful consideration of typefaces, sizes, weights, colour and contrast choices, when to anti- alias type, and where to place type in the screen layout.

8.5.1 Typeface Choices Choosing the right typefaces for your project means selecting typefaces that are

expressive, legible, and fit the overall style of your project. Selecting a typeface to use in your document may at first produce some surprises, so it

is best to view the typefaces onscreen for legibility. Many typefaces that are easily read on paper may not translate well onscreen.

Figure 8-13 Typeface of choices

8


133

8.5.2 Size And Screen Resolution Small type onscreen is notoriously hard to read, largely due to the low-resolution

capabilities of most monitors. On low-resolution screens, small letters tend to lose definition and clarity.

At these low resolutions, letter strokes can appear to grow together, characters may be awkwardly spaced, with some letters compressed together while others have large gaps between them.

If monitor resolutions improve, the legibility of smaller point sizes will be better.

Figure 8-14 Size and resolution

8.5.3 Optical Weight Each typeface has its own optical weight that makes the typeface appear lighter or

heavier. Typefaces with thick letter strokes appear heavier than typefaces with regular letter

strokes. The advantage of using a bolder typeface is that the increased visual weight of the word adds emphasis.

The disadvantage to a very bold typeface is that setting line after line of text in the heavy weight tends to decrease readability.

Figure above shows a word at 12 point size, and enlarged to show the pixels available to the computer to display that size type. Notice that the lowercase ‘e’ only has a total of 6 vertical

pixels available to display all of the letterform’s details

8


134

Figure 8-15 Optical weight

8.5.4 Spacing Readability problems

can arise when letterforms and words in long passages of text are either too close or too far apart.

Both tight and open spacing slows down the reader's recognition of letterforms, resulting in a slower reading speed.

Too much spacing between letters, words, and leading in body text can also expand the amount of screen real estate a section of body text occupies.

Figure 8-16 Spacing

While spacing letters and words too close or too far apart can cause legibility problems, judicious use of creative letter and word spacing can add positively to the look and style of the document.

Creative spacing tends to work better in short passages of text, such as headlines, interactive buttons, or the credits.

Two examples of how different type can look when made in a drawing program (top) and in an authoring program (bottom)

An example of bold type as seen onscreen

8


135

8.5.5 Colour And Contrast Colour and contrast can help

establish a stylistic look or feeling in your document; they also can enhance or detract from readability.

Dark colours in type imply somberness, quality, or dignity. Bright colours in type are visually exciting and convey a dynamic feeling to a screen interface, but when used extensively, they can easily tire the eyes.

Middle-range colours (such as a medium blue) in type often suggest sophistication but, unless placed on a very dark or very light background, are difficult to read onscreen.

Using high contrast is a quick way to enhance readability.

Figure 8-17 Colour and contrast

8.5.6 Type Layout Type should fit in

stylistically with the rest of the screen elements. Headline type, text fields, and column widths should balance with images, interactive controls, and other screen elements.

Screen layouts loaded with lots of images but little descriptive type may be interesting to view but lacking in detailed, exact information. Figure 8-18 Type Layout

Screen layouts with lengthy bodies of text may communicate the precise, detailed meaning, but all-text screens may not appeal visually to the user.

8


136

8.5.7 Text Fields A text field is an area onscreen designated to hold scrolling text. Text fields are useful for holding large amounts of text. They are easily created within

most authoring programs and can hold any amount of text. They provide handy built-in

control buttons or scroll bars that let the user go forward or backward through the information.

The advantages of text fields is that creating custom typography or formatting within the field is difficult, and the scroll bars and other built-in controls rarely coordinate with the rest of the look and style of the interface design. Some users will also not read large amounts of text onscreen.

Figure 8-19 Text fields

8.6 FONT FILE CONSIDERATINS In order for the user's computer to display a font in your interactive document

properly, the user's computer must have the same font installed. There are a number of options to consider when using type in an interactive

document. You can ship the font files along with the product, select a standard font present on

most computers, convert your document to a portable document format (PDF), or convert the type to a bitmapped image.

Figure 8-20 Font file considerations

Image on the left shows a web page displayed in Netscape Navigator’s standard browser default font, Times New Roman. Image on the right shows the same web page after the default font has

been changed in the browser preferences

8


137

8.6.1 Deciding On A Type Format

Deciding which type format to use in your document depends on number of factors. The following list shows some of the advantages and disadvantages of each option.

1. Editable text (font files loaded in

the user's computer) Advantages

o Since the letters and words are stored as a series of codes, they can be edited, searched, and modified.

o Editable text can be placed in text fields.

o Editable text takes up very little data space.

Figure 8-21 Type format

Disadvantages o The end user must have the complete font files installed on their computer or

else the text will not display right. 2. Type converted to a portable document format (PDF) Advantages

o You can make the type any typeface, style, and format you want. o PDF takes up very little data space.

Disadvantages o The end user must have the proper software loaded or else the PDF document

will not display properly.

3. Bitmapped image type Advantages

o Because type is an image, you can apply special effects to the type in an imaging program. For example, you could apply special textures or colours into the type.

o The type can be anti-aliased. o You can make the type any typeface, style, and format you want. o It will always look right on the user's computer.

Disadvantages o The bitmapped image takes up a lot of disk space. o Large bitmap files take longer to load onto the screen. o Bitmapped type cannot be moved or edited.

8


138

8.7 ANTI-ALIASING TYPE Importing anti-aliased type into your interactive document can improve the look of

the type, but also imposes a few problems of its own. Small anti-aliased letters with interior spaces like D, F; R, and P may lose definition. In general, anti-aliasing type tends to work best in larger type such as titles. Another problem with

anti-aliasing text or images is that the technique is safe to use only when the background behind the anti-aliased object remains constant.

If the background changes behind the anti-aliased type, you will be able to clearly see the anti-aliased edges of the type, unless you create a new version of the type that matches the background.

Figure 8-22 Anti Aliasing type

8.8 BALANCING DESIGN TIME AND EFFORT When working with type in your document, you

should strive for attractive, easy-to-read type mixed in with- a well- planned balance of backgrounds, graphics, animation, and other screen elements to enhance the usability and legibility of the interface.

Good type design, no matter the medium, can help engage the user's interest and keep them looking at your message.

Figure 8-23 Balancing time and

effort are important

The top letters show the jagged edges of aliased type. The bottom letters show the same type, only with anti-aliasing applied

8


139

8.9 GRAPHICS Visual elements such as photographs, illustrations, charts, maps, and icons are

familiar elements and are often the keystones of interactive documents. The images you choose help create a mood, establish a visual style, and convey

complex information. Graphs, charts, and diagrams are good for putting across complex and detailed

information, while photographs and illustrations are better at implying a feeling or style.

Many individuals find statistical or numerical information easier to understand when placed into a graph or chart form.

Photographs convey a sense of realism. Artistically treated photographs and some illustrations can imply a mood or impression.

8.9.1 Photographs Photographs are often the mainstay of interactive documents, as they are relatively

easy to obtain and to scan, and they add a sense of realism to a document. Photos can be powerful visual images evoking strong emotional responses in the

viewer. Photographs are easily transferred

into the computer. Once loaded onto a computer, photos can be imported directly into your authoring program (if they are saved in a format recognizable to your authoring program), or special effects can be applied to them in an image-processing program.

Most image processing programs let you apply a variety of enhancements to the photographs, including colour correction, adjustment of the resolution, and experimentation with special effects such as emboss or blur filters.

Figure 8-24 Example of photographs One factor to take into consideration is that photos with many details will not render

well on low-resolution computer screens. When it is necessary to show detailed information, illustrations are often a better

choice.

8


140

8.9.2 Illustrations Illustrations can be

diagrams, charts, maps, cartoons, or drawings. They are particularly useful for showing complex, detailed information that is difficult to show in other ways.

Illustrations can be humorous, serious, decorative, or strictly factual.

Figure 8-25 Example of Illustrations

Whatever the style of the illustration, a well-designed illustration can quickly put

across information as well as adding style, emphasis, and interest to your document.

8.9.3 Graphs, Charts, And Diagrams Graphs, charts, and diagrams work best when they are well designed and stripped to

just the essential data. A good graph, chart, or diagram will clearly state all relevant measurements and

parameters.

Figure 8-26 Example of diagram, graph and chart

Graphs and charts are widely used to represent numerical data. Bar graphs and pie

charts are two common forms. Diagrams usually contain data, text, and a visual element such as a photograph or an

illustration. Diagrams are useful for pointing out detail in existing images.

8


141

8.9.4 Maps Maps are a commonly used visual element in interactive documents, but they can be

easily misinterpreted if poorly or inadequately labelled. Screen resolution

limits the amount of detail it is possible to show in maps, so you may have to simplify some details.

Figure 8-27 Example of map

A viable alternative in this case would be to simplify the map and provide a zoom function so the user could selectively enlarge portions of the map.

8.9.5 Icons

Figure 8-28 Example of icons

Icons in interactive documents have come to mean any symbol or picture that is

"clickable" An icon is a simple symbol or picture that represents another thing.

Once you establish an icon in your document, it should always stand for the same thing. If you use an arrow pointing to the right to indicate, "Go to next screen," that icon, when clicked, should perform the same function throughout the whole document.

Another characteristic of a good icon is that it can be enlarged or reduced and still remain legible.

Another consideration in designing good icons depends on the culture of your audience.

8


142

8.10 SOURCES OF GRAPHICS There are many sources for obtaining graphics. You can reuse existing graphics;

commission work from professional photographers, illustrators, and graphic designers; use clip media from clip art and clip photo CD-ROMs; or create images yourself.

Whatever the source, the graphics you choose should fit with other screen elements, work well compositionally, and convey the information or desired impression to the user.

8.10.1 Capturing Images Graphics are usually

either created in drawing or image-processing programs or scanned into a digital format from existing drawings, photographs, or other images.

The following paragraphs discuss some of the issues that should be addressed when scanning your images.

Figure 8-29 Example of capturing image

1. Scan And Save Images At A High Resolution Version One of the best things you can do to improve the overall image quality is to scan your

images at a resolution at least twice as high as the one you will need onscreen. Scanning your images at a high resolution is recommended for the following reasons: Scanning images at a high resolution

provides greater long-term flexibility. High-resolution images can be reused in

other media, such as printed materials advertising your product.

If you later choose to slightly enlarge an image in the interface, you can go back to the original high-resolution file, size the image, then resave it at 72 ppi to use in the authoring program.

Reducing the image later to a lower resolution helps to "clean up" unwanted dust specks in the image.

Figure 8-30 High resolution improve

image quality

8


143

2. Reduce Resolution In The Image Used In The Interactive Project While it is recommended that you scan and save images at a high resolution (for

greater long-term flexibility), you absolutely reduce the size of your image before placing it in your interactive project.

Since most monitors only display around 72 ppi (that is, 72 available pixels per linear inch), the image should be reduced to that resolution. If your image has higher resolution, the monitor will enlarge the image.

3. Avoid Image Degradation One technique to rigorously avoid is to take an existing image file and increase the

resolution. Increasing the resolution in an image makes the image appear to blur. This degradation of the image occurs because boosting the image's resolution means

the computer has to add information to the image file. It is a much better idea to start with a high-resolution file, because you can always

lower the resolution later if needed. Scan high, save low. Another quick way to severely degrade the quality of an image is to take a small

image and enlarge it in the authoring program.

8.11 INTEGRATING IMAGES INTO THE INTERFACE You may want to integrate all sorts of images into your interface, including scanned

photographs, special-effects photographs, cartoons, charts, illustrations, 3D computer-generated renderings, and so on.

Whatever the image, it should not only communicate content, but also look good both individually and with other elements onscreen.

8.11.1 Standalone versus Layered Images Graphics can be used either as standalone images or as layered images. Standalone images can begin as an individual picture like a photograph or a scanned

piece of artwork. Standalone images such as photographs are easy to place and move around onscreen.

Layered images are individual elements that are designed to work together as part of a larger interface. Using layered images adds flexibility and enhances the control you have over the interface.

With layered images you can easily move individual images around onscreen, reuse them in other screens, or apply interactive functions to the image.

Since layered images are saved as individual graphics, they are easily transferred to other projects and used over and over again.

8


144

1. Use Images As Interactive Elements.

Using images as interactive controls adds visual interest to the layout and is a good way to provide feedback to the user.

Images are commonly used in image maps and multi-state buttons, which clue the user in to interactive possibilities.

If an image has interactive potential, for instance, it might highlight or briefly animate when the user rolls the pointer over it. This way, images can add visual interest to the screen and enhance functionality.

Figure 8-31 Images can be used as interactive elements

8.12 COLOUR Colour plays an important role in the creation of interactive documents. Colour evokes emotional responses, enhance stylistic unity, and can add or detract

from the readability of the interactive document.

Figure 8-32 Colour play important role for creating interactive documents.

Understanding more about colour will help you shape more effective interactive

documents

8


145

8.12.1 What is colour Colour is light energy in the form of waves and particles that is interpreted by the

human eye as mixture of red, green, and blue. The frequency of the light wave determines the colour that is perceived. High-

frequency light waves register in the human eye as red. As the frequencies decrease, the eye sees orange, yellow, green, blue, indigo, and finally, purple.

Figure 8-33 Example of colours

Light wave frequencies are higher than the red range are infrared energies; light wave

frequencies lower than the violet range are ultraviolet rays, X rays, and gamma rays. The differences in the frequency of the light waves are interpreted in the retina of

your eyes. The retina contains two types of light-sensitive cells: rods and cones. Rods perceive

the strength, value, and brightness of a light wave, while the cones perceive the frequency of the wavelengths as red, green, and blue (RGB) colours. There are three types of cones, and although each cone is not sensitive exclusively to one colour but can also distinguish limited amounts of other two colours. This ability to read small amounts of other colours helps the brain interpret mixes of RGB as in between colours, such as magenta, purple, and brown.

Figure 8-34 The retina

The Human Eye

8


146

8.12.2 The Psychological Impact Of Colour

Different colours can influence our emotions. The psychological impact of colour is an inexact science, but colour does have a powerful impact.

Using colour in a sophisticated, knowledgeable way can enhance the appearance and legibility of your interactive document. Using colour poorly can produce an emotional effect on the user that can range from mildly disturbing to the colour equivalent of fingernails grating on a slate blackboard.

Exciting, dynamic colours such as orange and red are considered warm or hot, because of a psychological link with fire. Bright oranges and reds convey an impression of excitement, passion, liveliness, and quickness.

Cool colours such as blue and violet are interpreted as serene and soothing and can convey an impression of cold and shade. Darker shades of blue and violet are often interpreted as moody.

Greens imply vigour and growth and are considered nurturing. White is widely used in hospitals, as it suggests purity and cleanliness. Bright colours seem more exciting and active, while softer, lighter colours seem more soothing and passive.

8.13 COLOUR METHODS Computer monitors project light waves to depict colours. Most monitors emit beams

of red, green, and blue (RGB) electrons onto a layer of fluorescent phosphor that coats a glass screen. It is the mix of RGB electrons on the phosphor that causes the screen to glow, creating visible colours.

8.13.1 Additive Colour

Figure 8-35 Additive colour

When the monitor uses projected RGB light to create colours, it is using the additive colour method.

The additive colour method starts with an absence of all colours, which results in black. Equal proportions of the RGB beams result in white.

Varying intensities and proportions of RGB light waves create the gamut (the full range of colours) available onscreen.

Additive Colour Subtractive Colour

8


147

8.13.2 Subtractive Colour In the additive colour method, white is achieved by using the full intensity of

projected RGB light. The subtractive colour method achieves white by the complete absence of the colours

cyan, magenta, and yellow (CMY). Mixing the full intensity of the CMY pigments produces a dark colour that is almost

black. To achieve a true black, black (K) pigment is added. This CYMK colour combination is widely used to achieve a range of colour on paper.

8.14 COLOUR TERMINOLOGY There are three terms that you need to understand when working with colour: Hue – the pure colour (as in red, blue and green) Tone – the relative lightness or darkness of a colour Saturation – A scale from fully intense as in a dark green.

Figure 8-36 Colour terminology

When using type and colour, legibility comes from contrast. The greatest contrast is

between black types on a white background; the least contrast is yellow type on a white background.

The range between these two is extensive. As the background moves closer to the type in colour, so legibility decreases.

Figure 8-37 Colour selection

8


148

Figure 8-38 Hue, tone and saturation

1 2

3 4

(1) Colour is described in three ways

(2) HUE, the name of colour

(3) TONE, a range from light to dark

(4) SATURATION, a range from low

intensity to full intensity

5 6 7

(5)-(6) The strongest contrast is black

type on a white background or yellow type

on a black background

(7) The weakest contrast is yellow type on

a white background

8


149

Figure 8-39 Type and background colour

8.15 COLOUR HARMONY

Figure 8-40 Example of colour harmony

Harmony can be defined as a pleasing arrangement of parts, whether it is music, poetry, colour, or even an ice cream sundae. In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience.

When something is not harmonious, it's either boring or chaotic. At one extreme is a visual experience that is so bland that the viewer is not engaged. The human brain will reject under-stimulating information. At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it.

The human brain rejects what it cannot organize and understand. The visual task requires that we present a logical structure. Colour harmony delivers visual interest and a sense of order.

(8)-(10) As type and background colours move

closer together, legibility decreases

8 9 10

8


150

8.15.1 Formulas For Colour Harmony

There are many theories for harmony. The following illustrations and descriptions present some basic formulas.

1. A colour scheme based on analogous colours Analogous colours are any three colours, which are side by side on a 12-part colour

wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colours predominates.

Figure 8-41 Analogous colour

2. A colour scheme based on complementary colours Complementary colours are any two colours, which are directly opposite each other,

such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colours create maximum contrast and maximum stability.

Figure 8-42 complementary colour

3. A colour scheme based on nature Nature provides a perfect departure point for colour harmony. In the illustration

above, red, yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for colour harmony.

Figure 8-43 Nature colour

8


151

8.16 COLOUR CONTEXT How colour behaves in relation to other colours and shapes is a complex area of colour theory.

Compare the contrast effects of different colour backgrounds for the same red square. Red appears more brilliant against a black background and somewhat duller against the white background.

Figure 8-44 Colour context

In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance. Notice that the red square appears larger on black than on other background colours.

Different readings of the same colour

If your computer has sufficient colour stability and gamma correction, you will see that the small purple rectangle on the left appears to have a red-purple tinge when compared to the small purple rectangle on the right.

They are both the same colour as seen in the illustration below. This demonstrates how three colours can be perceived as four colours.

Observing the effects colours have on each other is the starting point for understanding the relativity of colour.

The relationship of values, saturations and the warmth or coolness of respective hues can cause noticeable differences in our perception of colour.

Figure 8-45 Effect colour

8.17 USING HIGH CONTRAST IN INTERACTIVE DOCUMENT Adding contrast to the text, images,

and background in your document will improve its legibility whether it is displayed on a greyscale monitor or a colour monitor. Figure 8-46 High contrast colour

Small amounts of text can be easily read in light type on a black or dark background, while longer passages of text work better with dark type on a light background.

The best colour mixes are black or dark blue text on a white or cream background. The least legible type and background combinations are orange on blue, red on blue, green on orange, and yellow on orange.

Best option to ensure that your document will be readable is to use high contrast between your text, images, and backgrounds.

8


152

8.18 SELECTING THE RIGHT COLOURS

Figure 8-47 In this attractive example, the colour helps define separate items of copy. It also gives added visual meaning to the

image.

Whichever specific colours you select, you can create harmony in a design by using a limited group, or palette, or colours that look pleasing in combination.

If you aren't sure where to begin, try starting with a small number of colours that have a specific relationship to each other on a colour circle. For example the triad colours.

Hues can be varied in saturation and value to produce the desired palette.

Typically, a colour palette contains contrast, between light and dark and between saturated and unsaturated colours. If the colours are of similar value, the overall effect will be bland.

Figure 8-48 Triad colours provide a balanced colour scheme and can be a good place to start

exploring palettes.

8


153

Here are some sample palettes: (i) (ii) (iii)

Figure 8-49 Example of patterns

Colour can be used for both associating elements in the design through common colour or differentiating elements with dissimilar colours. Use bright highly saturated colours to grab attention, but not for prolonged viewing.

The colours you choose can affect the mood, tone and message of your web site. Use cool colours for a calm, serious effect, or warm colours for an energetic, exciting look

Colours can be selected according to theme. A season, a geographical region, or a historical era, so that the palette conveys the desired mood or feel. Examples of thematic palettes can be found in textile and product designs

Spring Colour Dessert Colour

8


154

(iv) (v)

Figure 8-50 Continuous example 2 of patterns

For a palette to work well in a design, some unifying attribute should tie the colours together. This could be a particular hue or range of saturation (or value) that appears throughout the design, accented by small areas of a contrasting colour.

In informational design, distinguish decorative colour from functional colour. Decorative colour enhances the layout by making it more aesthetically appealing,

creating a mood, or establishing a style. Functional colour conveys information explicitly.

The best choice of colours depends on the site's intent and the user expectations, as well as the designer's aesthetic.

Figure 8-51 Colour Palette

Colours can be selected based on subject matter. Thorough understanding of the subject matter is necessary to avoid using colours that may be confusing or erroneous

Traffic Light Colour Cell Microbiology Colour

Use colours based on psychological, cultural, or age.

Dignified Colour Children Colour

8


155

8.19 USING COLOUR EFFECTIVELY

Figure 8-52 Example of using colour

Effective use of colour can give the user a good first impression of the software product, encourage user acceptance, cause a user to prefer your product compare to competitor’s products, and significantly improve user performance.

You have learned about colour, how we perceive colour, how to select colour etc. Based on that knowledge, here are some recommendations for using colour effectively.

8.19.1 Using Colour Sparingly One good rule to keep in mind is that the less frequently a colour is used, the better it

will grab the user's attention. Once you use the colour red to warn the user, don't use red for any other purpose.

Remember, colours are effective maximally when they are used minimally. The background colour affects the effectiveness of the other colours. Pick an effective

background colour and use only about five colours. Avoid using a solid, black, untextured background. This type of background can

cause coloured characters to appear to float at different distances relative to the background (Narborough-Hall, 1985).

If you have to use a solid, black, untextured background, then use white and desaturated red, desaturated yellow, desaturated green, and desaturated blue colours (Weitzman & Neri, 1986).

A good choice for a background colour is a neutral, textured, dull, light grey (Narborough-Hall, 1985). This type of background helps people keep their attention on the foreground text and graphics, reduces the likelihood of floating characters, and allows the designer to use the colour black in the display.

8


156

8.19.2 Use Colour Consistently With User Expectations Due to our culture and experience, we have gradually built up expectations for what

colours mean. For example, traffic signals use the colour red for stop, yellow for caution and green

for go. Take advantage of these expectations when using colour on computer displays. Some

well-known expectations above. So, make red a warning that data

will be deleted if an action is performed. Use green text or graphics to tell the user that a requested process worked. Make yellow a caution that the next process will be slow. Indicate cold, application-specific objects, like ice, with blue.

Use your colours in a way that is consistent with the expectations of your users. Figure 8-53 Use colour consistently

8.19.3 Use Colours That Contrast Well Contrast refers to the difference in perceived brightness of two objects. The eye

focuses most sharply on objects that have different colours and brightness (Murch, 1983).

For example, if you have a light grey background, don't use yellow for text. The poor contrast between background and foreground will make it harder for the eye to focus on the letters, and the text will be difficult to read.

If all colours have the same intensity, then we perceive colours in the middle of the visual spectrum, like green, as brighter than colours at the ends of the visual spectrum, like blue (Murch, 1983).

This means that green is a good foreground colour and blue is a good background colour. Blue-yellow and red-green also form high contrast.

For example, you could use yellow as a foreground text colour and blue as a background colour. Avoid using together non-opponent colours, like blue-green and yellow-red.

Figure 8-54 Example of contrast colour

Red = warning, stop, error, hot

Green = go, good

Yellow = caution, slow

Blue = cold

8


157

8.19.4 Avoid Using Blue Colour For Text The reason for not using saturated blue for text, thin lines, and high-resolution

information is because the eye is not designed to see it clearly. The lens absorbs almost twice as much light in the blue region of the colour spectrum

as in the yellow and red regions (Murch, 1983). This problem increases with age because the lens gradually yellows and filters out the shorter wavelengths of light, such as blue.

To focus long wavelength light, the muscles make the lens thicker. To focus short wavelength light, like blue, the muscles must make the lens thinner.

Saturated blue, however, has such a short wavelength that the lens simply cannot be made thin enough to focus it on the retina. Instead, the wavelengths that produce saturated blue focus in front of the retina (Murch, 1984). This means that small, saturated blue objects, like text, always appear blurry to us.

Figure 8-55 Example of blue colour for text

8.19.5 Avoid Using Saturated Colours The reasons why we

should not use saturated colours on computer displays because it produced visual fatigue.

Saturated colours make the lens more refocusing. This constant refocusing Figure 8-56 Example of saturated colours can cause the muscles that change the shape of the lens to tire, and may produce a sensation of visual fatigue (Murch, 1983).

Saturated colours may also produce false perceptions of depth. Saturated colours that are at the same distance from the eye can be perceived to be at different distances. For example, saturated red is perceived to be closer to the person than saturated blue (Murch, 1983).

Saturated colours with the same brightness are difficult for colour defective people to differentiate. In particular, saturated red is especially difficult for colour defective people to perceive (Human Factors Society, 1988).

Saturated colours are associated with other visual problems. For example, after viewing strongly saturated green characters for several hours, air traffic controllers have reported seeing red or pink for up to 15 minutes after the session is ended (Narborough-Hall, 1985).

TANJONG GOLDEN VILLAGE TANJONG GOLDEN VILLAGE TANJONG GOLDEN VILLAGE TANJONG GOLDEN VILLAGE

8


158

8.19.6 Use Colour Redundantly In a human-computer interface, both the human and the computer less ability to

perceive colour. Although the term "colour blind" is used frequently, "colour defective" more accurately describes people who have trouble perceiving colours.

Some of the people who use your application software may have monochromatic computer displays. These people cannot see your colour choices because their displays cannot show colour.

Additionally, many computer printers can print one colour only. So, monochromatic computer displays and printers can be considered colour deficient.

Since people, computer displays, and computer printers can be colour deficient, try to use colour redundantly with other coding techniques such as location on the display, brightness, shape, texture, and blink.

If you cannot make a colour code redundant, such as a screen filled with lines of text, then use desaturated colours that consist of different mixtures of red, green, and blue. The blue mixture is especially useful for red-green colour defective people (Human Factors Society, 1988).

8.19.7 Let Users Select The Colour Colour preferences are extremely personal. Colours that you love, someone else will

surely hate. This means that using colour in a fixed fashion in your application will definitely

annoy some users. Therefore, let users select the colours. Users should also feel like they are in control of the computer. The best way to

deal with the personal nature of colour preferences while allowing users to feel like they are in control of your application is to give default colours that are consistent with the recommendations of this report and to allow users to select colours to suit their personal preferences.

Figure 8-57 Users have choice to select the colour they wanted to

8


159

8.20 EXERCISE

multimedia design principles - chapter 8

Documents