Sie sind auf Seite 1von 13

51

Applications

Graphic Design for Computer Graphics *


Aaron Marcus ** 1. Introduction
Aaron Marcus and Associates, 1196 Euclid A venue, Berkeley, ('A
94708 1640, U.S.A.
From their very beginning, all computers were
computer graphics systems. In other words, they
Because computer graphics systems are capable of sophisti-
cated displays of typography, symbols, color, spatial organiza- communicated with human beings by some means
tion, and temporal sequencing, it is appropriate to seek princi- of graphic display or a c t i v i t y - communicated
ples for designing effective communication from the discipline through flashing lights, the revolving reels of a
of graphic design whose expertise lies in programming visible tape drive, or the simple alphanumeric characters
language. Examples of the author's work are cited to demon-
of a line printer. Today, however, the means for
strate how graphic design can improve three different types of
computer graphics. conveying information to a human being are much
more complex. High-resolution displays can make
use of sophisticated type fronts, three-dimensional
Kevwords." Graphic design, CAD, semiotics, computer graph- structures, dynamic objects, and intricate color
ics, visual syntax, visible language, visual communi- relationships.
cation, visual information displays.
Despite all of this increased capacity to display
data, the same fundamental tasks lie before us that
we as communicators have always faced: How can
we attract people to information? How can we
hold their attention? How can we facilitate their
Aaron Marcus is a graphic designer understanding of the information? How can we
with sixteen years of experience in in- help people to remember what they have learned?
formation design and computer graph-
ics. After an education in physics at Communication between computers and people
Princeton University and in graphic takes place in three different phases that represent
design at Yale University, he taught
and practiced graphic design at the three "faces" of computers: outerfaces, in-
Princeton University for nine years. terfaces, and innerfaces. Each of these faces con-
During this period he also served as a
consultant in computer graphics at Bell sists of conceptual "frames" of communication
Labs, where he programmed an inter- that are embodied in specific displays on paper,
active page design system for the
Picturephone. film, or glass screens.
He was recently a staff scientist in the Department of Outerfaces are the displays of information that
Computer Science and Mathematics, Lawrence Berkeley
Laboratory. There he assisted the development of Seedis, a are the final products of computation texts, ta-
geographic information management system funded by the bles, forms, charts, maps, and diagrams, for exam-
U.S. Departments of Labor and Energy. His expertise lies in
developing effective formats and graphic design systems for ple. All of these can be printed on paper, projected
computer-generated texts, tables, charts, maps and diagrams, as from film, or appear on a terminal screen. In daily
well as design of user/machine interfaces and program visu-
alization concepts. life the people who look at this information may
have very little knowledge of computers a n d / o r
* Copyright :'~ 1983 IEEE. Reprinted with permission, from the means of displaying information.
IEEE Computer Graphics and Applications, 3(4) 1983)
Interfaces are the frames of c o m m a n d / c o n t r o l
63 70.
** The author assumes full responsibility for the quality of and documentation that computer system users
some of the artwork contained in this article [Ed.]. encounter. Thus human-computer connection al-
lows the human being to understand and manipu-
North-Holland late the functional power of the computer system.
Computers in Industry 5 (1984) 51-63 Without this "handle" on the computer tool, the
52 Applications ( omputers" m Industry

device is not effective. Interfaces appear displayed being denoted by means of the signs. Here we
on a glass screen or in printed texts and are traditionally ask, what does this sign mean? Note
encountered by both naive and skilled system users. that semiotics applies the term "meaning'' to all
Innerfaces are the frames of command/control three dimensions of sign communication In the
and documentation that computer experts con- past, computer graphics has given limited atten-
front, specifically the builders and maintainers of tion to semantics. However, there is a realm of
computer systems. Like the other faces of com- visual rhetoric that has not been fully explored. In
puter systems, innerfaces can be static or dynamic. using rhetoric, one can take advantage of exagger-
two or three dimensional, black-and-white or poly- ation (hyperbole), partial signs standing for com-
chromatic, and high or low resolution. They depict plete signs (metonomy), and other specialized fig-
programming languages, software tools, and oper- ures of expression [3].
ating systems. The third communication dimension, prag-
Now that significant technical advancements matics, is concerned with how signs are produced
have been made in the high-speed display of com- and consumed. How expensive or difficult is it to
plex computer-generated images, the time has come display signs in a particular way? How legible will
for graphics researchers to apply their talents to the signs be? How appealing will they be? These
improving the communicative quality of these dis- are all questions of pragmatics. Until recently,
plays. To date, the focus of computer science and computer graphics technology has usually been
technology has been on the electronic communica- applied to practical means of achieving cost-effec-
tion that occurs prior to any display on the glass tive information displays. In a computer-intensive
screen of a CRT or on the printed page. It is up to society, it also becomes reasonable to ask how
computer graphics specialists to modernize the different groups of people relate emotionally to,
forms of communication that take place between understand,-and use visual displays of informa-
the display surface of a computer and the human tion.
viewer.

3. Visible Language and Graphic Design


2. Semiotics: The Science of Signs
Walk into almost any office or engineering
To make the communication between man and facility today and you will find that most com-
machine more effective, we must pay greater atten- puter information is displayed in verbal or al-
tion to the semiotics [1] of computer graphics. phanumeric symbolism. Computer graphics, how-
Semiotics, the science of signs, calls attention to ever, offers new opportunities to transform text-
three dimensions of communication: syntactics, ual and tabular information into more nonverbal
semantics, and pragmatics. In each of these dimen- formats of visible language, the visual media of
sions, signs communicate to human viewers. The language expression. But what should these look
signs may vary from very representational, very like? What are the rules or principles for such
obvious icons to extremely abstract, conventional transformations? Unfortunately. there is no sci-
symbols. ence yet skillful enough to generally predict how
Syntactics is concerned with the visual ap- this should be done. To some extent the disciplines
pearance of signs and the relation of signs to each of human factors and applied psychology can as-
other. For example, here we would ask questions sist the person faced with the task of designing
such as the following: Is a particular icon (or frames of information. However, a single frame,
symbol) red or green, large or small, and near to by itself, has many interrelated aspects that exceed
or far from another such icon? The visual syntax the more limited predictions of any scientific disci-
of signs can be loosely or carefully structured in pline.
any particular class of communications [2]. Where At this point in the development of computer
informational graphics are concerned, the specifi- graphics, it is appropriate to note the existence of
cations of visual syntax are usually precise. a profession, "graphic design" - that is tradition-
Semantics deals with the relation of signs to the ally skilled in transforming facts, concepts, and
facts, concepts, structures, processes, and emotions emotions into visual analogies- a profession that
Computers in lndust£v A. Marcus / Designfor ComputerGraphics 53

is equally adept at creating visual narratives. depiction of programs and control processes for
Graphic design is a discipline concerned with the manufacturers, users, and maintainers of com-
sign making with visible language. Graphic design puter-based systems.
utilizes typography, symbols (both representa- Computer graphics experts can design what
tional and abstract), color, spatial organization or happens behind the glass screen or before the
layout, and the sequencing of information frames printed document comes into existence, and
over time in order to achieve effective communica- graphic designers can affect the communication
tion. Information-oriented graphic designers are that takes place between the display and the hu-
sensitive to the complex requirements of the man mind.
senders of information, the detailed structure of For example, graphic designers can suggest
the content of the message, the nature of the changes to the appearance of texts, tables, charts
communication medium, and the needs of the [4], maps, and diagrams. These changes can be
receivers of the message. based in part upon precisely determined factors of
Once the mutual contributions of graphic de- legibility [6], and the designers can also use their
sign and computer graphics are understood, it professional expertise to make decisions about the
would seem that a symbiotic relationship could readability or appeal of a particular graphic image.
and should exist between the two disciplines. Each By establishing specifications for typographic
could contribute to the design of documents, to changes from a light typeface to a bold (,ne, by
the user-oriented machine interface, and to the determining a clear spatial layout, and by limiting

UATER COHSUMPTIOH IH $t~ FRAHCISCO lAY AREA


(EnST lAY MUNICIPAL UTILITY DISTRICT]
CuMuLATIUE MOHTHLY USE IH ~ILLIOHS OF GALLONS
JAH FES MAR APR RAY
.................................................. 2-- .................. 140

120

""'-'~ 1976

leg
....... PROJECTED HOR~IAL
""'.....,
"'....
"'"'"'"""'""'"'"'"'.,,.IS?7
--..........
80

"'"°"-............

............. "~gfitCggR~KA[. . . . . . . . . . . . . . . . . . . . . . . . . . .
6e
¢T-O~r~g--~-~--~t--E~-,rb-,[i~t T . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
TNI¢,ET • 35~ |ELCU HORM~L tT~RC,JE? REFERS TO SUGGESTED REDUCTION In C0NSUMPTI0¢t

Fig. 1. Generated on Seedis at the Lawrence Berkeley Laboratory, this display is a typical example of early computer-assisted chart
making. Among its visual communication errors are insufficiently heavy line weight and the use of type that is too small for slide or
journal reproduction.
54 Applications Computers in lndustrv

HRHRII INTEGRRTEO ENERGY RSSESSMENT


HRHRII OEPRRTMENT OF PLRNNING RNB ECONOMIC DEVELOPtlENT
LRHRENCE BERKELEY LRBORATORY
PROJECTED ELECTRICITY SALES, OI::IHU
[MILLIONS OF KILOHRTT--HOURB]
~./HISTORICRL
:PROJECTED

18989

5888

9
1965 1978 1975 1988 1985 ]998 1995 2888 2885

Fig. 2. This figure illustrates some typical design improvements that can be achieved without the use of high resolution characters or
color. The type sizes, line weights, and gray values have been changed to emphasize the most important parts of the display.

the choice of colors [6], a graphic designer can ject matter - global energy interdependencies, for
build useful, reinforcing redundancy into decisions example [12].
concerning visual appearance.
Another example that illustrates the potential
interaction between the two disciplines lies in the 4. Case Studies
design of online frames and offline pages for an
information processing system [7,8]. The computer 4.1. The Graphic Design of Outerfaces
must help the user to learn complicated texts,
memorize functions, make accurate decisions, and Figures 1-3 show undesigned and designed de-
build a clear conceptual image of an information fault displays of charts and maps that were semi-
processing system. By carefully structuring words, automatically composed by Seedis, a large geo-
concepts, and images [9], these tasks are accom- graphic database management system developed at
plished more easily in a legible and appealing Lawrence Berkeley Laboratory [13]. The second
verbal/visual environment. This is particularly im- image illustrates superior use of available type
portant as computers are now used by people with sizes, thus making the chart legible, even in small
varying educational, cultural, and psychological reproduction sizes, and also clarifies the hierarchy
backgrounds. It is no longer appropriate to assume of titling. A more clearly organized grouping of
that one style of interface can serve all kinds of typographic elements and a use of gray areas to
people. emphasize portions of the chart adds to the reada-
Finally, in the area of program depiction and bility of Fig. 2 [4].
computer system visualization, graphic design can Figures 4 and 5 show line printer and Xerox
assist in making the complexities of computer 9700 laser printer versions of 1980 U.S. census
structure and processing more evident and more data as they appear in reports prepared by
understandable [10,11], just as graphic design has Lawrence Berkeley Laboratory for the National
assisted in other fields that illustrate complex sub- Technical Information Service (NTIS) [14]. The
Computers in Industry A. Marcus / Design for Computer Graphics 55

U.S. Population by Age


Per Cent Population by Age and Sex, 1 9 7 0
Source: U,S. Census, 1 9 7 0

Male Female

85+
80-84
75-79
70-74
65-69
60-64
55-59
50-54
45-49
40-44
35-39
30-34
25-29
20-24
15-19
10-14
5-9
1-4
O-1

15 10 5 O 5 10 15

Population Trends, 1980


Source: U.S. Census, 1 9 8 0

Federal Difference from Per Cent Change


Region 197(Y(MIIIIons] from 1 9 7 0

New Eng ! Ii
NY/NJ
i i
Mid AU

S East

Gt Lakes

8 Central

Central

Mountain

West

N West
I

-2 O 2 4 6 8 -10 O 10 20 30

Fig. 3(a). [See p. 56 for legend.]


56 Applications ~"omputers in Industry

California
Stained Minority
Metropolitan
StatleUcld
Population,
Ames 1980
I
- 4,000 A m ~ o4 i : l n a l 4

~- '-- 2.000
am Wqu~umvd to BE--*
oC m N m l d b ~
! ~ ~ i I,OOO
Scmt,ce: 1 9 8 0 ~S.Cem~
Otlw

m
I~,~11Flms

Fig. 3(b).

Fig. 3, Chart (a) and map (b) conventionsfor Deedis. The graphic design specifications are relevant to high-resolution chart display on
microfilm recorders and phototypesetters. Here gray-value distinctions and software-generated typography can be used to further
accent features of the display. Note the systematic layout of flush-left, ragged-rightgroups of text elements. The conventionsused here
are ones that could be supported by software in the Seedis information management and display context. (Reprinted with permission
from The Design Journal, Society of TypographicArts, Chicago, Illinois, © 1983.)

design of the tables has reduced variations of tify the module in which the user is currently
positioning and indention to a minimum and has working. The screens are 80 characters wide by 24
produced a reliable design that can appear both in lines deep, but information from the computer
fixed-character-widths as well as variable-char- generally appears in character positions 21 through
acter-width presentations. Size and boldness varia- 80; the user normally begins typing at character
tions in the laser printer typography are used to position 1. This helps to establish visually a sep-
clarify titling. aration in the dialogue between human being and
machine [7,8].
4.2. The Graphic Design of Interfaces Figure 8 shows a number of symbols from a
high-resolution, bit-mapped interface on a Perq
The screen layouts shown in Figs. 6 and 7 show Systems microcomputer graphics display. The
undesigned and designed versions, respectively, of interface is part of Metaform, a forms design
the on-line interface for Seedis. In the undesigned front-end system from Intran, Inc. for the Xerox
version, note the unorganized appearance of groups 9700 laser printer. Because the complexities of the
of type and the inconsistent use of all capital system are made available to inexperienced com-
letters versus lower case letters. In Fig. 7, note the puter users, pictographic light buttons use simple
more evident order of text blocks, the use of lines images to explain and reinforce the verbal
of hyphens, the constant use of lower case letters, mnemonics [15]. This approach is typical of newer
and controlled tab settings. Capital letters are used high-resolution interfaces using nonverbal icons
in major titling and in the menu prompt to iden- [16].
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ..... ============ ......... = . . . . . . . . === ....... =====:= . . . . . . ===== .....
U.S. 6epartment of Labor 3.1 Population San F r a n c i s c o - O a k l n d
Employment and Tralnin~ Administration By Sex and Race/Ethnic ~roup California
IBBg Census run on 1 1 1 1 3 / 8 1 Universe: Persons [1] SMSA
Lawrence B e r k e l e y L a b o r ~ t o r y
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = . . . . . . . . ===== ...... = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ...... : ............ =========
INumber IPerc~nt Distribution
I I ......................................
I IVertlcal IHorlzontal q
I . . . . . . . . . . . . . . . . . . . . . . . . . . . I .................... i ....................
ITotal IMal~ IFemale ITotal IMale lFemalelTotal IM~le IFemale
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ........ = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Total Population by Race/Ethnic Group I 3 . 3 9 9 . 0 7 7 1.499.511 1.899.511 I 108.0, 100".8 lOg.j" I 10"g.0" ~4.1 55.9
White (not Hispanic) I 3.174.924 1.587.462 1.587,462 I 93.5 93.5 93.5 I 1~.0" 5D.0" 50".0
Black (not Hispanic) I 127.388 63.694 63.694 I 3.7 3.7 3.7 I 10"0'.~ 5~.0" 50'.0"
Other Races (not Hispanic) I 3.566 1.783 1.783 I 0".1 0'.1 ~.1 I 10"0.0 5g,g 50".g
Hispanic (all races) I 93.144 48.572 46.572 I 2.7 2.7 2.7 I lOB.@ 5~.g 50".g
...................................................................................................................................
T o t a l P o p u l a t i o n by R a c e , Incl HIspanlcs 3,399,0'22 1.699.511 1.699.511 Ig0'.g I80".0" 10g.g l 10"0.0 50,.0 50".0"
i
Vhlte 3,251,055 1,625.527 1,625.528 95.6 95.8 95.6 I lg~.g 50.g 5g.(~

Black 142,763 71.38g 71,383 4.2 4.2 4.2 lgg.O 5g.g 50.~
N a t i v e American 382 191 191 0".g ~.0" g.0"
American Indtan 269 134 135 ~.0" ~.0" g.0" l~g.g 5g.@ 5g.O
Eskimo 86 43 13 0".0" g.0" g.@ I0~.0 5g.g 5g.,q
Aleut 27 13 14 0,.0, 0".0" g.g iOg .0 5@.0 50.B
A~ian and Pacific Is13nder 3,548 1.773 1.733 0".1 0'.1 0".1 lgg.g 5g.g 5g.~
Japanese 572 286 2fl6 0".g 0,.0, 0,.g
Chinese 831 465 466 ~.0' g.g 0.0, l(~O.g 5g.~ 5g.g
Fillplno 278 135 115 0,.0, 0".0" ~.0' ]gO.g 5(~.0 5g.£#
KoreBn 183 51 52 0".0" 0".g 0.0, i/J@ . @ 50.g 50,.~
Asian Indian 672 336 336 0,.0 0".0" g.g I00.0 5(~.0 50,.0
Vietnamese 128 68 60 g.0, 0,.0" g.0 100.0 50.g 50.0
Hawaiian 478 239 239 0".0" 0".g O.g lg@.g 5g,g 5~.@
Guamanlan 82 41 ~1 0".0" 0".0" g . g lgO.g 5g.g 50,0
Samoan 38 19 19 Ig,0 . g 50.0 50.~
O t h e r A s i a n and Pacific I~lander 38g 19g 190 0".0" 0".g 0.0, i~@ . g 50.0 5g.g
R e m a i n i n g Paces 1.276 638 638 g.0, @.0" g,g 100.0' 50".0 50".0"
===================================================
H i s p a n i c by O r i g i n ....... ;iT;;; .... ;iT;;; .... :~T;;~=;~;T~=;;;7~,=;~Z;=T=;~,~=;==~;=~,==;~,:~, =
Mexican 64.135 32,867 32.868 68.8 68.8 68.8 I i80.0, 5g.g 50,.g
P u e r t o RIcan 16.39~ 8.198 8.198 17.6 17.6 17.6 I 10,0.0, 5~.Er 50.g
Cuban 8.632 4.316 4.316 9.3 9.3 9.3 I 108.g 5g.g 58.~
Other 3,981 1 ,99g 1 ,991 4.3 4.3 4.3 I lgg.g 50.0, 5g.g
......................................................................... _...................................................
H i ~ p a n l c by Pace 93.144 46.572 46,572 l g O . g l£fgmg 10g.g l igg.g 50.0 50.~
I
Whlte 76.131 38.@65 38.~66 81 .7 81.7 61.7 { 100.g 50.0 58.0
l
Black 15.375 7.687 7,688 16.5 16.5 16.5 i l(~.g FO.g 50.8
I
O t h e r Races I .638 819 819 1 .8 i .8 1 .8 I I80.0 50.g 58.0
N a t i v e American l.ggg 5gg 5~*g l.g ] .g 1.0 i 10,g.g 5~.g 5g.g
Asian and Pacific Islander 680 300 380 J~.6 ~.6 8.6 I 11~1~,8 .~0,.g 5g.g
Remalnln9 Races 38 19
............ - . . . . . . = 19 g.2 @.2 0,.2 l Igg.g 58.0 50.8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . === ..... ========== ...... ========= ........ = ......... =~ === ...... ======== .... ===== ..... ========

Page 3 [1] This Is an e~ample zf a f:otnote. San F r a n c i s c o - O a k l n d

F i g . 4. T y p i c a l l i n e p r i n t e r t a b u l a r o u t p u t t h a t w a s a u t o m a t i c a l l y f o r m a t e d f r o m U . S . c e n s u s d a t a b ~ S e e d i s . T h e p r o t o t y p e l a y o u t a n d line h e a d i n g s a r e d e s i g n e d to a c c o m m o d a t e
fixed-width characters. Horizontal rules across the page are one simple means of high-lighting.
R e p o r t 3: S o c i a l I n d i c a t o r s f o r Planning and E v a l u a t i o n Pierce County
U.S. Department of Labor
Employment and Training Administration T a b l e 16: J o u r n e y t o W o r k P a t t e r n s Wisconsin
1980 Census. Run No. 8311 2
Lawrence Berkeley Laboratory

)ata from Census Bureau sample estimates (b)

State and county level: (o)


Worked in state of residence 9.044 8,948 27 32 23 14
7,798 7,713 16 32 23 14
Worked in county of residence
Worked outside county of residence 1.246 1.235 11
Worked outside state of residence 3.725 3,661 14 50
863 851 12
Place of work not reported (19)

SMSA level: (o)


Living in an SMSA
Worked in SMSA of residence
Worked in central city of this SMSA
Worked in remainder of this SMSA
Worked outside SMSA of residence
Place of work not reported (19)
Not living in an SMSA (37) 13,632 t3,460 27 46 23 76

Place level: (o)


Living in an identified place 4,532 4.465 12 32 23
Worked in place of residence 2,553 2,507 12 11 23
Worked outside place of residence t.695 1,674 21
Place of work not reported (19) 284 284
Not living in an identified place (20) (37) 9.100 8.995 15 14 76

Means of transportation to work:


Car, truck or van 10.316 10,209 25 17 58
Drive alone 6,750 6.697 17 4 32
Carpool. share driving 1,702 1.679 4 6 6
Carpool, drive others only 626 617 7 2
Carpool. ride as passenger only 1,238 1,216 4 18
Bus or streetcar 33 33
Subway or elevated train
Railroad
Other transportation (k) 1,956 1,918 13 6 5 14
Worked at home 1.472 1,465 3 4

Vehicle occupancy:
Car, truck or van, drive alone 6.750 6,697 17 4 32
Carpool 3.566 3.512 8 13 26
In 2-person carpool 1,929 1.901 6 6 t6
In 3-person carpool 700 678 2 7 6
In 4 - o r - m o r e person carpoot 937 933 4

Travel time to work: (o)


Less than 10 minutes 3,717 3.703 14
10 to 19 minutes 3.380 3.280 27 32 9 32
20 to 44 minutes 3.466 3.408 14 44 5
45 to 59 minutes 652 652
60 or more minutes 836 836
I
For meaning of symbols, see Introduction. For footnotes and definitions, see Technical Notes. Page 24
U.S. Department o f Labor Report 3: Social Indicators for Planning and Evaluation Pierce County
Employment and Training Administration Wisconsin
1 9 8 0 Census, Run No 8 3 1 1 2
Chart 6: Persons and Families Below Poverty Level (I) <3
Lawrence Berkeley Laboratory Data from Census Bureau sample estimates (b)

6.1 Racial Composition of Persons in P o v e r t y * (from T a b l e 19) 6.2 Age Composition of Persons in Poverty ( f r o m T a b l e 19) ~=.
Universe = 3 . 2 2 6 persons with 1979 income b e l o w poverty (I) Universe = 3 , 2 2 6 persons with 1 9 7 9 income b e l o w poverty (I)

26% Under 16 Years

98% White 1% Black 37% 22 to


0% Native American 17% 18to21 Years

0% Asian/PI

0% Hisp All Races


11% 6 5 Yrs and Over
0% Remaining Races
5% 55 to 6 4 Years

4% 16 and 17 Years

6.3 Persons Below Poverty Level ( f r o m T a b l e 19) 6.4 Families Below P o v e r t y Level (I) ( f r o m T a b l e 19)
Universe = persons in each race/ethnic group except dorms, ete (I) Universe = total families in each race/ethnic group
BelowPvrty Race* [ ] Persons ~ Unrellndiv ~ 65+ Yrs Below Pvrty Race* [ ] All Families Female Headed Families
3,226 Total 497 Total
1,316 105
356
3.151 White 497 White m
1,242 105
356
35 Black 64% Black
35 i64%

16 Native I Native
16 American American
15 Asian/PI I Asian/PI
15

Remaining Remaining Data Suppressed


Races Races Data Suppressed
/ =_.
9 Hispanic, Hispanic.
8 All Races All Races C~

0 10 20 30% 10 20 30%
~'Raciat groups exclude Hispanic (a). For symbols, see Introduction; footnotes, T - 1; Interpretation o f charts, T - 8 . Page 26

Fig. 5. Typical laser printer output of census data tables similar to the ones displayed in Fig. 4. This figure was also prepared by Seedis. Here, size and boldness changes are used to
emphasize key elements of the page layout. Tabular pages must correspond line for line and field for field with fixed-width pages and screens for purposes of display and
editing - an additional constraint upon the table's graphic design. The pie charts shown above are automatically rotated so that the largest sector appears at the kft. Note the
automatic alignment of leader lines, percentages, and headings in the pie charts.
60 Appfications ('omputers in lndustry

seedis
If you exit abnormally from SEEDIS, continue by typing
@restore
seedis
Welcome to SEEDIS VMS version 1.0
Type ? for expanded menus
Type $ b e f o r e VI~ commands
(HELP,REVIEW,SUBJECT,AREA,AGG,DISAGG,
PROFILE,DATA,DISPLAY,BUGS,NETSTAT,SHOW,QUIT): subject
Please select both data and a geographic area.
FORTRAN STOP
WELCOME TO THE SYSTEM.
YOU CAN ENTER

EXPLAIN :TO SCAN KEYWORDS.


SEARCH :TO LOCATE FILES CONTAINING KEYWORDS.
QUIT :TO TERMINATE.

ENTER COMMAND OR ?COIv~IANDFOR MORE DETAIL.

Fig. 6. An early undesigned Seedis welcome message. Note the scattered appearance of text groups, the inconsistency in the use of ~11
caps and lower case, and the order of the text in which the user is told about getting out of the system even before being welcomed.

4. 3. The Graphic Design of lnnerfaces and more readable than the one in Fig. 9 [10,! 1].

A comparison of Figs. 9 and 10 shows undesig- Graphic design has improved visual communi-
ned and designed versions of C language programs cation in a variety of fields, prime examples being
as they might be produced on a line printer and a environmental signage [17], diagrammatic com-
phototypesetter, respectively. In the typical unde- munication [18], and governmental documents [19].
signed version (Fig. 9), fixed-width characters ap- This same expertise has relevance to improving the
pear in a single size and typeface. The source code corporate or institutional graphics of information
is not easy to read because there is only minimal management systems [9,20], C A D / C A M systems
typographic hierarchy. In the variable-width ver- [21], and other computer graphics displays. By
sion, spatial location, typographic and symbol combining the expertise of graphic design with
hierarchies, and additional commentary contribute computer graphics, more humane as well as more
to a textual program depiction that is more legible cost-effective systems can emerge in the 1980s.

WELCOME TO SEEDIS, VERSION 2.0


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

At any point in Seedis, you can type the following global


commands to get these services:

Input Description
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

? list and describe commands in this menu


help describe the purpose of this menu's commands
show list and explain items to be selected
review list current sessln status and history
cancel delete current selections (depends upon context)
quit return to previous menu
*<comment> enter a comment in Seedis log

shortly. Please stand by. Your menu prompt will appear

SEEDIS: area, data, display, profile

Fig. 7. A later designed Seedis welcome message. Note the order of text elements an d the use of rules, lower ca~e, and specific tab
settings. Not all of the full-screen width (80 characters) is used for most text lines in order to improve legibility. Information on global
corcanands is among the very first information given to the user. Also note the standard form of the menu prompt, which identifies the
module (all capital letters) in which the user is currently working and the appropriate commands at this point.
Computers in Industry A. Marcus / Design for Computer Graphics 6]

Fig. 8. These illustrated, high-resolution, bit-mapped light but-


tons from Metaform, a forms-design front end for a laser
printer, are visually complex clues to the operation of modules
within the system, lnstead of only verbal names or simple
symbolic indicators, the icons show the cursor used in each
module e.g. pen, pencil, brush and indicate the kind of
--i+++++!~.,.+ ++ activity. As images for an electronic "book", they correspond
-:.:-:.:-:.2.:- -.-.-...:.:-
in some ways to the illuminated initial letters in medieval
manuscripts. (Reprinted with permission from lntran,
Minneapolis, Minn.)

#include (stdio.h>
# d e f i n e NAXOP ZO /* max s i z e o f o p e r l n d ~ o p e r l t o r t /
# d e f i n e NUMBER ' 0 ' I* s i g n a l t h a t number found * I
# d e f i ' n e TOOBIG ' 9 ' /, s i g n a l t h a t s t r i n g i s too b i g * I

talc() /* r e v e r s e P o l i s h desk c i l c u l a t o r ,I
{
int type;
char s[MAXOP];
double opZy a t o f ( ) , pop(), push();
while ((type = getop(s, MAXOP)) != EOF)
switch (type){
case NUMBER:
push(atof(s));
break;
CaSe P+f:
push(pop() + p o p ( ) ) ;
break;
case r~:
push(pop() * p o p ( ) ) ;
break;
case p_t:
oFZ = p o p ( ) ;
push(pop() - o p Z ) ;
break|
case t/~
opZ '= WL[~();
i f (opZ !~ 0 . 0 )
push ( p o p ( ) / opZ);
else
print¢("zero diuisor poppedO);
break;
Case v=t:
printf("%PO, push(pop()));
break;
CaSe tCr:
clear();
break;
case TOOBIG:
p r i n t f ( " % , Z O s . . . i s too long0, s t ;
break; default:
p r i n t f ( " u n k n o v n command %c0, t y p e ) ;
break;

Fig. 9. A typical C program in an elementary typographic form. It uses fixed-width characters of a single size and a type face with
limited horizontal spacing variation.
62 Applications Computers in Industry

X ~/ Re,earth Int i)e~k { alcula~or ] ~ugu,LI.~1 t hapter ~


\n%town ~n~herc ( OnlrOIMo'dule ]2 ~45¢,~ l,lg e i ~,~

r'
IIIIII I11111111111 i l II [ n I

Version of I August 1981 Ref. No, 12.345.67


I
This program implements a simple desk calculator which uses
reverse Polish notation, Operands are pushed onto a stack. When
an operator arrives its operands are popped, the operator is
applied, and the result is pushed onto the stack,

F o r Assistance Call: A a r o n Marcus Ronald Beecker & Richard Sniderrnan


Lawrence Berkeley Laboratory H u m a n C o m p u t i n g Resources C o r p
University o f California 10 St, Mary St.
Berkeley, C A 94720 T o r o n t o Ont. M4Y ] P9
415-486-5070 416.922-1937

Omt~i

#include <stdio,h>
m,$~~ile of ol~ra.d Olafdot # d e f i n e MAXOP 20
signal Ihat nunlhet found # d e f i n e NUMBI:R "0'
%lgnaJIhdE~lfingi, tOO big # d e f i n e T(×IBIG "0"

talc
calcO
int type:
char s [MAXOP];
double opL atof(), p o p ( ) , p u s h ( l :
while ((type = getup (s, MAXOP)} ! ~ [:o[)
switch (type)
case NUMBER:
p u s h (atof (s));
break;
case ' + ' :
p u s h (pop() + p o p O ) :
break~
case ' " :
p u s h (pop() * POpO)~
break;
case • - '
op2 = POp();
p u s h ( p o p ( ) - op2)2;
break:

I This program was authored by Brian Kernighan and Dennis Rilchie of Bell Laboratories.
Murray Hill, New Jersey These prototype visual enhancements IO the C program
were dcsiltned by Aaron Marcus with the assistance o f Ronald Baeckcr and Richard Sniderman
2 Because + and " are commutative operalors, Ihe order in which the popped operands are
combined is irrelevant For the - and / opetalors, the left and right operands must b¢
distinguished

Fig. 10. A prototypical black-and-white visualization that would require a high-resolution, bit-map display terminal or very
high-resolution hard-copy device to produce. The actual image was generated on a computer-controlled phototypesetter, a rare but not
unheard of hard-copy device. The image illustrates the potential of a graphic design approach to textual program visualization.

Acknowledgment [2] Aaron Marcus, An Introduction to the Visual Syntax of


Concrete Poetry, Visible Language, 8 (3) (1976) 157-173.
[3] Aaron Marcus, Visualizing Global lnterdependencies: An
Some of the illustrations in this article origi- Application of Visual Semiotics to the Development of a
nally appeared in technical memoranda from Pictographic/Ideographic Narrative, Synapse, 1 (2) (1984)
Lawrence Berkeley Laboratory. (in press). See also Prec. Second Int'l Conf. Associations
for the Study of Semiotics, Vienna, 1979 (Mouton, the
Hague, 1983) (in press).
[4] Aaron Marcus, Computer-Assisted Chart Making from
References the Graphic Designer's Perspective, Computer Graphics,
14 (3) (1980) 247-253.
[1] Umberto Eco, A Theory of Semiotics (Indiana University [5] Roll Rehe, Typography: How to Make it Most Legible
Press, Bloomington, 1976). (Design Research Int'l, Carmel, Ind., 1974).
Applications Computers in Indust O' 63

[6] Aaron Marcus, Color: A Tool for Computer Graphics [14] Census Reports No. 1-7 (National Technical Information
Communication, The Computer Image (Addison-Wesley, Service, Springfield, VA, 1982).
Reading, Mass., 1982) pp. 76-90. [15] Metaform: Technical Documentation (Intran Corporation,
[7] Aaron Marcus, Designing the Face of An Interface, IEEE Inc., 7429 Bush Lake Rd., Edina, Minn. 1982).
Computer Graphics and Applications, 2 (1) (Jan. 1982) [16] Kenneth N. Lodding, Iconic Interfacing, IEEE Computer
pp. 23 29. Graphics and Applications, 3 (2) (Mar./Apr. 1983) 11-20.
[8] Aaron Marcus, Typographic Design for Interface of Infor- [17] Symbol Signs (American Institute of Graphic Arts, US
mation Systems, Proc. Human Factors in Computer Sys- Department of Transportation, Washington, DC, Nov.
tems (National Bureau of Standards, Mar. 1982) pp. 26-30. 1974). DOT-OS-40192.
[9] Aaron Marcus, Managing Facts and Concepts (Design [18] Walter Herdeg (ed.) Graphis: Diagrams (Graphis Press,
Arts Program, National Endowment for the Arts, Zurich, 1975).
Washington, DC, 1983). [19] Bruce Blackburn, Design Standards Manuals (Federal De-
[10] Aaron Marcus, Paper and Glass: Graphic Design Issues sign Library, National Endowment for the Arts, Washing-
for Software Documentation, Proc. Software Documenta- ton, DC, 1977).
tion Workshop (National Bureau of Standards, Mar. 1982) [20] Aaron Marcus, A Graphic Design Manual for Seedis,
pp. 133 138. technical memo (Computer Science and Mathematics De-
[11] Aaron Marcus and Rob Baecker, On the Graphic Design partment, Lawrence Berkeley Laboratory, University of
of Program Text, Proc. Graphics Interface '82 (1982) pp. California, Berkeley, 1984) (in press).
303-311. [21] Aaron Marcus, Cad/Cam from the Graphic Design Per-
[12] Aaron Marcus, Visualizing Global lnterdependencies, spective, Proc. Symposium on Automation Technology
Graphic Design (Japan), No. 79 (1981) 57-92. (Naval Postgraduate School, Monterey, CA, Nov. 1983)
[13] John McCarthy et al., The Deedis Projects, Publication (in press).
No. PUB-424 Rev. (Lawrence Berkeley Laboratory, Uni-
versity of California, Berkeley, Aug. 1982).

Das könnte Ihnen auch gefallen