Whitbread D. The Design Manual (анг.яз.)

Подождите немного. Документ загружается.

Graphical user interface (GUI)

Up until recently, with the advent of multimedia and Web

design, the design of a graphical user interface (called

GUI—‘gooey’) was a fairly rare thing to encounter. Now

with many people creating the interface for Web documents

and the user’s guides for multimedia productions, this

previously specialised area is becoming more mainstream.

So how do you approach the design of a successful

interface? As far as possible, keep the interface intuitive. If

the icons and screen layout maintain a certain familiarity or

ease-and-speed-of-recognition factor, the interface should be

successful. As in many design projects, good use of visual

metaphors will enable the user to employ previously

learned modes of information retrieval.

To work out how a design can be recognised intuitively,

we need to consider the number of interfaces we encounter

daily. There is your microwave, but most microwaves use a

word-based, rather than an icon-based, interface. Word-

based interface is ﬁne but has limitations—it is more

time-consuming and is language-dependent, but it is

faster to load.

Consider the road user interface—signs, lights, road

markings and services; and the car’s internal interface—

petrol gauge, speedometer and dashboard system. These

systems give us red warnings, ﬂashing lights for attracting

attention, various sirens, the red octagon stop symbol, the

give-way triangle, the broken lines for crossing if you need

to pass, the green, amber and red circles that indicate go,

caution and stop respectively, and the gauges that ﬁll or

empty (which are akin to the ﬁle transmission gauges that

ﬁll when the ﬁle is complete). The system is rich in icons.

On a similar tack, mapping is rich in symbolism that

may be appropriate to consider as a part of the interface

design primer: the symbols for farms, historical sites and

industrial areas; information counters or booths; highways,

surfaced and unsurfaced roads; and others.

What about much older interface systems? There are

the systems used for star signs in horoscopes (not the

illustrations, or pictograms, but the streamlined versions of

them that create almost abstract symbols), the Christian

cross (which can also symbolise death due to its use in

cemeteries) and ﬁsh, the male and female signs (not the

little man and woman pictograms used to label public

toilets, but the circles with, respectively, a diagonal arrow

and a downward cross).

Screen-based media 101

Intuitive user interfaces often use

metaphor as an effective ‘vehicle of

exploration’, according to David

Siegel in Creating Killer Web Sites.

His examples of metaphors include:

‘galleries, comic strips, television

channels, TV remote controls,

magazines, tabloids, store

environments, museums, postcard

racks, amusement parks, going inside

things (computers, human body,

buildings, ant farm, and so on),

safaris, cities, and cupboards.’

ELPH

Horoscope symbols

DWD-DM04 4/5/01 3:45 PM Page 101

On Netscape the symbol for returning to the home page

is the classic ﬁve-sided house made from a square and a

triangle. The letterbox pictogram is used in e-mail systems.

These are virtually instinctive symbols. If you asked a child

to create a symbol for home or letterbox, those simple

shapes are probably close to what they would create.

Somewhere inside our heads we respond to these shapes as

having these meanings. This is good interface design.

Other signs that seem to be instinctively understood are

the heart for love, the ear, speaker or music note for sound,

the eye for vision or picture, the old-fashioned movie

projector or camera—or even the clapper boards with the

black and white diagonals—for moving image. These are

handy for multimedia selection…

Then there is the sound system. Like a microwave, it

relies for some information on words. But the important

element here is the symbol (or icon) language used in the

cassette deck and CD deck buttons. The forward triangle,

rewind triangle, fast-forward double triangle, stop square

and pause double lines constitute one of the most inﬂuen-

tial symbol systems recently developed. You will also have

noticed how we use them instinctively in multimedia

productions. Although the symbols started with cassette

tape players, they have moved through CD players, video

players and into multimedia, Web documents and infor-

mation kiosks.

Another daily interface we encounter is the computer

screen, which features windows, icons, rulers, menus and

tool boxes. The symbols that have been developed to speed

our use of this interface are quite well reﬁned now and, due

to the fact that readers of screen-based information are

sitting at a computer, it is a safe assumption that the

interface can incorporate some conventions from computer

interface design.

Do not stray too far from symbols that work in an effort

to create a new interface. If a reader must learn the new

system before using the product you design, you will lose a

number of potential users. As Jeffrey Veen asks in Hot

Wired Style (p. 83), ‘What would television be like if every

show had a different remote control?’ It is commonsense to

use a familiar navigation system in your interface design.

You might create a version of an existing symbol that

stylistically ﬁts your design. Use a colour palette that ﬁts the

site backgrounds and images, and a texture or illustration

102 Projects

 

♥ ;

DWD-DM04 4/5/01 3:45 PM Page 102

style that sits comfortably with the display type and site

metaphor. But be careful not to obscure the clarity of the

navigation system with style for the sake of style.

The best icon systems use an interface that weds

recognisable pictorial, symbolic, sound and moving

elements in a layout that streamlines selection process.

Users don’t want to have to dart all over the screen with the

mouse or scroll up and down the page to ﬁnd the options.

The nature of the system you develop should have ease of

use at its core with minimal explanation needed for the

interface. That way, the reader can concentrate on the

content and message, rather than how they will extract

the message.

Using HTML

If you are designing text for the Internet, you have probably

come up against the limitations of the Hypertext Markup

Language for text layout. Although many of the limitations

for what is called display text (headlines, feature titles,

section headers) are being circumvented by using text-based

GIF image ﬁles, the majority of text content still needs to

work within the HTML boundaries.

For typists who learnt their skills BW (Before Wang—we

could call this pre-history), this is not a problem, because

the limitations of HTML resemble the limitations of the old

golf-ball typewriter. So how did you create readable—even

quite pleasant-to-look-at—documents a few technologies

ago? And what use is that for HTML applications?

There isn’t any reliable typeface selection capability

because, even with cascading style sheets, you are depen-

dent on the user’s font collection. The default type on the

reader’s screen is the font they will see, regardless of the

font in which you create your document. Times Roman,

Helvetica, Courier…it doesn’t really matter given that you

don’t have the controls. Don’t lament it, move on. Be at

peace with the Web and go placidly amid its noise and

haste; no doubt cyberspace is developing as it should.

Type attributes

The HTML type attributes appear greatly limited but they

are adequate. You have the option of bolding, italicising or

underlining text; you have a number of heading sizes; and

you can capitalise. You can create lists and use indent levels.

Given those attributes, you have more than enough

ﬂexibility to create readable text documents.

Screen-based media 103

David Siegel, in Creating Killer

Web Sites, describes his

restaurant model for Web sites:

‘I use a restaurant metaphor

when thinking about sites. You

hear about a restaurant from an

advertisement or friend, or

discover it while passing by. You

check out the daily specials

chalked on a board out front and

smell the aroma in the doorway.

‘Once through the door, you

make a quick stay-or-bail

decision. In a popular restaurant,

you might have to wait for a

table. If you stay, someone shows

you to a table and hands you the

menu. You make your selection.

‘When the food arrives, you

have no urge to rearrange the

various items on the plate. The

food and presentation are the

creations of the chef. You sample

the various items, skipping

among them, mixing flavors

and textures.

‘When you are finished, you

have dessert, ask for the bill, and

pay. You leave a tip, pick up the

card next to the cashier, and

maybe exchange a few pleasant

words with the owner. Later,

when you are hungry again, you

return or you don’t, based on the

quality of that first experience.’

DWD-DM04 4/5/01 3:45 PM Page 103

File types

The file types you are most likely to encounter in Web site and multimedia

design are:

Text, page and site description files

HTML Hypertext Markup Language

SGML Standard Generic Markup Language

DSSSL Document Semantic Style Specification Language

XML Extensible Markup Language (subset of SGML)

CSS Cascading Style Sheets (subset of HTML)

EPS Adobe’s Encapsulated PostScript

PDF Adobe’s Portable Document Format

SVG Scalable Vector Graphics

Image files

PICT Picture

TIFF Tagged Image File Format

GIF Graphical Interchange Format (‘giff’ not ‘jiff’)

JPEG Joint Photographic Experts Group (‘jay-peg’)

PNG Portable Network Graphics (‘ping’)

Wavelets

Video and animation files

QTV Apple’s QuickTime Video

AVI Audio Video Interleave

M-JPEG Motion JPEG (from the Joint Photographic Experts Group)

(‘em-jay-peg’)

MPEG Moving Picture Experts Group (‘em-peg’)

MNG Multiple-image Network Graphics (PNG animation)

(‘ming’)

Audio files

MIDI Musical Instrument Digital Interface (‘middy’)

RealAudio

QTV QuickTime Video can carry audio layer only

AIFF Audio Interchange File Format

WAV Waveform Audio File Format

SND Sound

MP3 MPEG audio layer

Three-dimensional site description files

VRML Virtual Reality Modelling Language

QTVR Quick Time Virtual Reality (seamless 360° pix)

Site transfer—how computers ‘talk’ to each other

FTP File Transfer Protocol

HTTP Hypertext Transfer Protocol

104 Projects

DWD-DM04 4/5/01 3:45 PM Page 104

Stress within text is normally created using italics

because they do not interrupt the line. Italics can make a

sentence read differently—compare ‘It was really excellent’

with ‘It was really excellent’ and even ‘It was really excellent’.

The only limitation of italics in Web site design is their low

screen resolution, which often makes them a little confus-

ing to read for any length of time. A single word or phrase

is mostly ﬁne. Extensive use of italics and the <I> tag is not

recommended for Web documents.

If you are signalling the hypertext (linked text behind the

textual reference), colour variation and underlining are used

for the link. Readers will assume they can jump to another

part of the document by clicking on this piece of infor-

mation. This is the only excuse for underlining—which

limits readability by striking through and confusing the

pattern recognition of the descending characters of the

letterforms. Colour variation by itself should be enough to

signal the link.

Underlining also interrupts the ﬂow of the text and

signals the reader to read what is underlined out of context.

That is, the underlines are seen before the paragraph is

read, so the reader often reads the type that is underlined

ﬁrst and then returns to the beginning of the paragraph.

This means the reference is then out of context, but this

speed of scanning is what hypertext is all about, so under-

lines are used. But as far as possible, avoid the <U> tag.

Bold type is usually reserved for headings and, in

HTML, bold is used for all heading levels, so avoid using

paragraphs of bold text. Changing a word to bold mid-

sentence is the same as underlining it—do it only if you

want it to stand out for some reason.

Given that you do not have luxuries like leading and

other linespacing attributes unless you’re using CSS, size

variation in headings is ﬁne. But once you start using more

than about three sizes in a hierarchy, the reader will be

confused. Within the three sizes, introduce variations like

full capitalisation or italics. This will immediately give you

nine possible heading levels—more than enough.

Most Internet documents ignore the possibility of

capitalising headings. Just changing the size of a heading

is often not sufﬁcient to create a successful hierarchy of

information. Some of the smaller bold headings are too

small for comfortable reading on screen anyway, so by

using full capitals, you can double the heading possibilities.

Screen-based media 105

Jeffrey Veen in Hot Wired Style likens

designing for the Web to playing with

Lego: ‘Every piece of Lego fits with

every other piece, just as every HTML

document can be viewed on any

computer in the world. However, you

can’t make 45-degree angles in Lego,

and the chunky projects that result

from building with Lego parts show

that. Same too with HTML. In its

purest form, HTML cannot control the

simplest of graphic layout techniques;

there is no face or font size selection,

no margin control, and very little

ability for placing objects in relation

to one another. So the Web’s visual

building blocks don’t make designing

easy.’

Netiquette?

Type in all capitals is considered to be

‘shouting’ in e-mail and Web sites.

Although it may be considered good

etiquette to avoid all capitals in

digital publishing, avoiding capitals is

more accurately—and valuably—

aiding readability.

DWD-DM04 4/5/01 3:45 PM Page 105

Remember one point about the use of capitals—capitals

slow down reading so use them only for short headings—

one- or two-word headings are ﬁne. For the same reason,

never type a paragraph in full capitals.

Horizontal rules are used for separation. Use the <HR>

tag sparingly and avoid decorative and animated rules. Do

not use the horizontal rule as an underline to a heading,

otherwise it separates the heading from the text that

logically follows it. Rather, use it as a cut-off line for a

section. As far as possible, avoid using horizontal rules—

they just increase the scrolling the reader has to do.

Don’t get carried away with lists within lists, menus

within menus, wheels within wheels… Avoid large and

animated bullets. Two levels of indent are usually enough

so ﬁght the temptation to indent recklessly.

Cascading style sheets (CSS)

The principles on which CSS is based are greater typo-

graphic and page layout control, more akin to the

production of style sheets for a print document. The style

sheet is loaded ﬁrst and contains all the typeface and font

attributes and layout requirements of the document

including spacing and colour speciﬁcations. These become

the ‘rules’ for application when the document requires a

particular tag.

However, you are reliant on the font set that is installed

on the user’s machine. This is one of the most signiﬁcant

limitations of CSS. If users don’t have the font you have

deﬁned, a font will be substituted from their font set.

There are two methods of applying the cascading style

sheet. You can create the style sheet (which might be

named ‘…/stylesheet.css’) as a separate document that all

the other text documents in the site are linked to. In this

way, any change that is required need only be made to the

style sheet and it will automatically ﬂow through the rest of

the site. The second way of applying the style sheet is to

import it at the beginning of each text ﬁle. This allows more

than one style sheet for a particular document.

The style sheet will then ‘cascade’ into any elements

until the style is overridden by another style, such as an

inline style (where a style is deﬁned at the application point).

As far as layout issues are concerned, measurements on

screen can be deﬁned in the style sheet by number of

pixels, points and picas, ems and x-heights (variable

106 Projects

DWD-DM04 4/5/01 3:45 PM Page 106

measures that depend on typeface selection), millimetres

and centimetres, and inches. Each element on screen is

considered to be in a box and you position the boxes by

deﬁning margins, padding (the equivalent of runaround),

borders and other display attributes.

Screen-based media 107

DWD-DM04 4/5/01 3:45 PM Page 107

Advertising

‘Advertising’ covers reserved space in a publication or air

time on radio, movie screen, television or Web site that is

paid for. Unpaid time or space is generated by ‘publicity’

and is called ‘news’, ‘free listings’, ‘community service

announcements’ or ‘sponsorship’.

Advertising has a lead time (pronounced ‘leed’); there is

a production schedule to accommodate. In the case of

newspapers, a week or preferably two is required to book

space, and a few days before publication for provision of

artwork or electronic ﬁle lodgment; in the case of news-

letters and magazines, two months is usual.

Advertising agencies will often employ market

researchers; a creative team of writers, art directors, ﬁlm

directors and production staff; account management people;

and strategists. This service comes at a price, so many

people decide to do it all themselves. Although this can save

money, it can limit success. Effective advertising more than

pays for itself—it generates brand awareness and sales that

increase proﬁt. If it is not doing this, it is not working.

However, another problem here is that a single ad

placement will not necessarily generate that proﬁt. An

organisation needs to create enough awareness and keep

the product in the mind of their consumers by advertising

regularly. It has been found that consumers need to

encounter a product a number of times before they are

conﬁdent enough to purchase.

Advertising needs to convey information about the

beneﬁts of a product or service to the users and purchasers

of that product or service. It also needs to provide differen-

tiation from competitors—other sellers or service providers.

An advertisement can give information that leads to a

purchase decision but the deciding factor is rarely from a

logical progression of analysis of the data presented—it is

nearly always inﬂuenced by an emotional response to the

product, service or the company offering it. So organ-

isations establish credibility and recall through what is

108

Jim Alexander in How to Create and

Evaluate Advertising that Sells,

defines advertising as ‘professional

salesmanship multiplied by media’.

The eight greatest lies you’ll ever be

told, according to Jim Aitchison in his

book, Cutting Edge Advertising, are:

1 You must have a unique selling

proposition.

2 You must offer a rational benefit.

3 Humour doesn’t sell.

4 You must have a memorable

slogan.

5 You must have a logo in the ad.

6 You must show the product in

the ad.

7 Every ad in a campaign must

look the same.

8 Creative ads don’t sell.

The one creative truth is:

Every ad must have an idea in it.

DWD-DM04 4/5/01 3:45 PM Page 108

called brand advertising. An organisation can create distinc-

tion in the marketplace by associating its brand with

particular traits that consumers will ﬁnd attractive.

Organisations establish attitude through their advertising,

or associate with a particular mood or create an atmosphere

around their product range.

There will also be different audiences that an advertiser

needs to attract. So the advertisements might have different

messages that emphasise different product attributes for

those different audiences. In that way, the purchasing

information needed can be targeted and placed in appro-

priate media.

If there is the likelihood that advertising to one audience

might alienate another, there is a choice to be made. Often,

advertisements that are not aimed at certain people are

ignored or ﬁltered anyway, so this alienation may not

manifest itself.

Media selection is based on that media’s ‘reach’, which

is why ratings and circulation ﬁgures are gathered. If a

magazine knows the majority of its readers are young

professional women, advertisers can be conﬁdent that their

message will get to the right audience by advertising in

that magazine.

Sometimes an organisation will use advertising not

so much to attract consumers but to appeal to their staff.

This level of image advertising can help staff see their organ-

isation in a favourable light and develop pride in it. Image

advertising can also help when an organisation has some

public challenges to face, like the Arnott’s biscuit recall in

1998. If a strong image is established and the crisis is

managed well, an organisation can come back stronger

than before.