Lawrence Berkeley National Laboratory Recent Work
Title GRAPHIC DESIGN FOR COMPUTER-BASED DEFORMATION MANAGEMENT: A CASE STUDY OF SEEDIS
Permalink https://escholarship.org/uc/item/4c17d4v5
Author Marcus, A.
Publication Date 1983-09-01
eScholarship.org Powered by the California Digital Library University of California LBL-16330 ~.d UC-32 Lawrence Berkeley Laboratory UNIVERSITY OF CALIFORNIA REC£r Physics, Computer Scienc~R,&E~~~ Mathematics Division JIfN 1719FM- lIBRAR¥-'ANO DOCUMENTS SECTION
GRAPHIC DESIGN FOR COMPUTER-BASED INFORMATION MANAGEMENT: A CASE STUDY OF SEEDIS Technical Report
Aaron Marcus . TWO-WEEK LOAN COpy '! • This is a Library Circulating Copy which may be borrowed for two weeks. September 1983 For a personal retention. copy, call Tech. Info. Division, Ext. 6782 .
. .
-
Prepared for the U.S. Department of Energy under Contract DE-AC03-76SF00098 DISCLAIMER
This document was prepared as an account of work sponsored by the United States Government. While this document is believed to contain COlTect information, neither the United States Government nor any agency thereof, nor the Regents of the University of California, nor any of their employees, makes any warranty, express or implied, or assumes any legal responsibility for the accuracy, completeness, or usefulness of any information, apparatus, product, or process disclosed, or represents that its use would not infringe privately owned rights. Reference herein to any specific commercial product, process, or service by its trade name, trademark, manufacturer, or otherwise, does not necessarily constitute or imply its endorsement, recommendation, or favoring by the United States Government or any agency thereof, or the Regents of the University of California. The views and opinions of authors expressed herein do not necessarily state or reflect those of the United States Government or any agency thereof or the Regents of the University of California. LBL-16330
GRAPHIC DESIGN FOR COMPUTER-BASED INFORMATION MANAGEMENT: A CASE STUDY OF SEEDIS Technical Report
Aaron Marcus* Lawrence Berkeley Laboratory University of California Berkeley, CA 94720
September 1983
*Formerly, Staff Scientist, Computer Science and Mathematics Department, Lawrence Berkeley Laboratory. Present address: Aaron Marcus and Associates, 1196 Euclid Avenue, Berkeley, Ca 94708
Prepared for the U.S. Department of Energy under Contract DE-AC03-76SF00098 Aaron Marcus Graphic Design for Computer based Information Management: A Case Study of Seedis
Vi.,,,, ...______, ~,
Abstract Graphic Designers cally stored data into spatial (sometimes This report summarizes the and Computer Graphics geographical), temporal, and colorful forms graphic design research, Graphic design is the discipline concerned so that significant patterns emerge from development, and imple with the communication of informational, informational graphics. mentation that the author emotional, and aesthetic content through has conducted over the last the manipulation of visible language, i.e., With respect to outer-faces, many computer four years for a large typography, symbolism and illustration, graphics advertisements and much profes geographic information color, spatial organization, and temporal sional literature exhibit charts, maps, or management system called sequencing [7]. Certain professionals in this other diagrams. If one examines these Seedis. Portions of this discipline are concerned primarily with the images carefully with an eye trained in report have been as communication of complex information visual communication, one notices over sembled from diverse tech through ·the design of charts, maps, sights or errors in visual thinking that seem nical papers cited in the , diagrams, and other technical documents. clearly unintended, such as color combina references and have been Knowledge from these professionals and tions that inhibit legibility, poor typographic re-edited for presentation their literature can be applied to the task of to both the computer designing the graphic presentation of hierarchies, or chaotic composition. The graphics and the graphic computer-generated documents, a task situation is often not the result of deficient design communities, This which now faces builders, users and equipment but simply the result of computer report describes Seedis managers of information management sys graphics displays created by persons with and three different areas in tems. After two decades of development relatively little training in graphic design, which graphic design prin from the simplest display of line printer i.e., in typography, color, composition, non ciples have been applied. characters and CRT screen vectors, com alphanumeric symbolism, photography, and puter graphics is entering a decade of reproduction processes. visual sophistication. Inter-face design also can benefit from A potentially symbiotic relationship exists graphic design. Graphic design seeks to use between graphic design and computer simplicity in organizing visible language graphics in creating the "three faces" of (Marcus, 1980) and making effective and computer systems: outer-faces, inter-faces, attractive frames of information. These and inner-faces [10,15]. Outer-faces are the frames must aid learning of a complicated end display products of data processing: text, aid memorization, encourage accurate images of information such as texts, tables, decision making, assist in building a clear charts, maps, and diagrams. Inter-faces are conceptual image of the system in the the user-oriented human-machine interfaces user's mind, and attract and retain the used to create outer-faces. These inter user's attention in situations when the user faces are comprised of frames (online) and may be uninterested, unmotivated, or dis pages (offline) of process control, data tracted. As computer systems reach out to structures, and their documentation. Inner ever wider audiences. the notion of attract faces are the frames and pages of source ing and holding a user's interests and emo code operating systems, and programming tions will not seem so foreign a goal for , . utilities that builders and maintainers of interface design. computer systems require in order to sup port the inter-faces and outer-faces. By Finally, in the area of inner-faces, the combining intuitive, practical skills and increasing number of computer programs of scientific knowledge, graphic designers can ever greater complexity require more time help synthesize prototype solutions for any and energy for program creation and of the three faces and assist in analyzing maintenance. The widespread availability of and developing finished displays that are high resolution display equipment suggests not merely "pretty," but which communi that computer technology itself will benefit cate information better. There is clearly a from more legible and more readable need for converting vast amounts of numeri- displays of program source code, operating systems, and related utilities or documents. Lawrence Berkeley Graphic Design Page 2· Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
Designing visible language schemes for all oriented graphic design principles can be three faces of computers will be recognized categorized in the following paragraphs [7]. as a distinct and demanding task requiring the assistance of information-oriented Sans Serif Type Styles: Following the pre graphic designers. cedent of the Bauhaus and the Construc tivist typographers, the Swiss designers The Relevance of Swiss Design Principles rejected the traditional serif letters in favor The basic principles of graphic design in of the more simplified sans serif letterforms, selecting visual signs or symbols and their e.g., Helvetica and Univers. Both typefaces attributes (such as their location, size and retain the 'machined' look and the uniform boldness) for presentation on paper, film, letter weight that the rougher versions of and display screens can enhance the legi the 1930s introduced, but add a greater bility of computer graphics as well as its homogeneity and a new elegance to the readability, i.e., its appeal or friendliness. curves used in their letterforms. These two faces remain standard typefaces for These principles of visual organization and modern, clear typographic displays. limits of perception form a conceptual basis for the grid-oriented or utilitarian approach Simplified Imagery: The standardization of to graphic design. It is an approach format for Swiss posters prevented the eminently suited to information display in poster designer from relying on the size of which many complex relationships must be the poster to gain impact. Instead,. the distinguished carefully and clearly. designer had to work with effective images viewed from a distance much like mural The utilitarian approach to graphic design painting. This contributed to a reduction in derives from the German Bauhaus and Rus the amount of pri mary text presented as sian Constructivist artistic trends of the well as the use of one essential image for early twentieth century. These movements immediate recognition. The typographic emphasized functionalism, new technology, emphasis attracted the eye of the viewer and rationalism. The utilitarian approach to through the primary text. When illustration graphic communication as seen in posters, was included it was often geometrical in books, magazines, diagrams, etc., emerged form. When photography was introduced it in a clear form during the 1950s and early was usually treated in scale (e.g., greatly 1960s in Swiss graphic design. Swiss graph enlarged size) or in tonal emphasis (e.g., ics has had a world-wide impact upon high contrast photographs) so as to immedi graphic design education and also took hold ately simplify the image. In conformity with in major international corporations. They the choice of modern typefaces, the adopted the principles for the business imagery of Swiss design emphasized world because they could be relatively reduced complexity, flat surfaces, and clearly and precisely formulated and images that were technically transformed, because they offered a systematic con without traces of manual operations. sistency for a variety of display formats, such as printed literature, signage, exhibits, Open Space: Carefully used empty spaces vehicle graphics, etc. devoid of both text and illustration establish a geometric subdivision of the visual field or It is not without significance that Swiss provide emphasis for the visual elements graphic design is called programmatic within the composition. With a fixed format, design [5]. In theory, a significant number of a limited set of typographic elements, and quantifiable attributes of the finished visual often no other imagery than type, the design can be traceq to a list of needs with designer must rely essentially upon spatial priorities. In effect, syntactic conditions can composition to make the informative be clearly traced back to semantic relation aspects of the work clear and to provide ships, to use the terminology of visual semi pleasing aesthetic relationships. otics, the science of signs and meaning [4]. The general visual characteristics of Swiss- Consistency of Oesign: No mixing of Lawrence Berkeley Graphic Design Page 3 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
I ...~
typefaces within a graphic image is one from large databases about energy, demo immediate result of a desire for simplicity. graphics, environmental conditions, and On the other hand, a variation within one economics. The Seedis project includes the type family (bold), medium, or light; con following: densed, regular, or expanded letterforms) can occur because of the uniform aesthetic • A research program Within LBL's Com features within a type family. The number of puter Science and Mathematics Depart these changes (in the size, boldness, or ment to investigate information systems proportion of the type) is usually limited to spanning diverse data sources, computer two or three. The proportion of these hardware, and operating systems. changes is usually a simple and dramatic factor. For example, for the proportional • A testbed distributed informational sys size of primary to secondary type, ratios of tem running on a network of Digital 2: 1 or 3: 1 are commonly found. Equipment Corporation (DEC) VAX com puters, which is used for selected appli Strong reliance on a grid of implied lines cations as well as research and develop that organizes and controls the positioning ment. of typographic and illustrative elements also typifies the Swiss approach. The grid • A set of interactive information manage establishes a series of harmonic visual rela ment and analysis tools for fields such as tionships that make coherent the entire energy and resource planning, employ visual field. The grid provides many possibil ment and training program management, ities for the positioning of visual elements, and environmental epidemiology. allowing strongly differing variations to occur that are nevertheless clearly related • A major collection of databases for vari visually. ous geographic levels and time periods, drawn from the U.S. Census Bureau and Swiss-oriented graphic design expertise has other sources. Policy formulation, imple been applied to the Seedis project, a mentation, and management depend research project in information manage upon accurate, timely information. ment. The goals of this effort were to Analysts, decision makers, and managers increase the effectiveness of Seedis by need to locate, retrieve, combine, increasing its visual/verbal consistency and analyze and display information from a clarity, developing trust in viewers and/or variety of sources. While time and users, and increasing the perceived resources usually do. not permit collect 'friendliness" of the system. These changes ing new information, there is a wealth of are intended to induce a more positive publicly available data from government response in viewers and users and ulti and other sources that often could meet mately more effective communication such needs if it were quickly and easily between human being and machine [9]. The accessible. Although computers and following sections describe Seedis and machine-readable data have made it detail the graphic design improvements. potentially easier to locate and analyze information, actual use of information A General Description of Seedis from different sources is difficult because Seedis is an experimental geographic infor of differing storage formats, mation management system for large data communications procedures, coding con bases. It developed over the last twelve ventions, data structures and units of years in the Computer Science and analysis. Mathematics Department of Lawrence Berkeley Laboratory (LBL) for the U.S. The Seedis Project addresses these infor Department of Energy and of Labor [17]. mation needs and problems through Seedis is an acronym that stands for a research, design, development, and "social, economic, environmental demo demonstration of information system com graphics information system." Users of the ponents. Seedis software provides a unified system can make reports, maps, and charts framework for data mamigement, informa- Lawrence Berkeley Graphic Design Page 4 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
......
tion retrieval, statistical analysis, and graph state geographic level. Note the use of ical display. Using Seedis, non-programmer varying gray values, the ability to create users can efficiently access and manipulate inserts, and high quality software-generated large, diverse, and distributed statistical typographic characters. These maps were databases. Seedis permits a relatively originally drawn on a Dicomed 0-48 film computer-naive person to examine data dic recorder. The image display here is suitable tionaries, to extract data from databases, to for high quality presentation graphics in aggregate or disaggregate data between black-and-white printed publications or in different levels of detail, and to display the color slide form. selected data in a variety of ways. The data can appear as a labeled table, dot chart, The example of Figure 4 shows a symbol pie chart, line chart, bar chart, or map that uses circle (pie) charts to show area/symbol choropleth map. The images multiple population characteristics of Cali can appear on a wide variety of display dev fornia Standard Metropolitan Statistical ices because Seedis is programmed to be Areas (SMSA's). Note the division of the cir independent of the detailed requirements of cle symbols into varying gray sectors and hardware. the overlapping of circles with automatic erasure of underlying circle areas. Normally Seedis Chart and Map Design these images are drawn in color and are The following examples demonstrate analyti recorded on 35 mm or 4 X 5 inch color film cal quality and presentation quality dot, or on 8 X 10 inch Polaroid color prints. This line, bar, and circle (pie) charts that Seedis example is a black-and-white adaption of a can generate interactively. The images indi color image and was produced on a cate the fineness of resolution for typogra Dicomed D-48 film recorder as a 4 X 5 inch phy, lines, and gray areas that are available negative. The map composition is not to users who are trying to determine the presently a default display; it was restruc ideal format in which to present their data. tured using the graphics editing capabilities The exact size, position, and appearance of of Seedis. titles, figures, and other elements are adju One specific chart and map design problem stable. The images come from several facing Seedis users is reproducing and different hardware configurations in which transferring the image of data for presenta Seedis can generate charts. tion as article illustration, overhead projec tion image, slide lecture image or poster Basic graphic design principles drawn from session illustration. Professionals outside of utilitarian design have been used to re graphic design often make such transforma structure prototype displays of charts and tions casually even though the images are maps. These in turn have led to encoded not well designed for such changes. The decisions which govern default displays size of typography, the thickness of chart from Seedis. These principles include the lines, and the original chart layout are often use of a single type family, the use of a not suited for most of the above uses simple grid to control placement of all visual except as a publication image of approxi elements, flush left ragged right typography, mately original size (about 15 cm X 15 cm). clear gray value distinctions, and clear dis Any significant reduction in size of the tinctions of line weight. image will require its typography and even its lines to be redrawn by hand by a trained The examples of Figures 1 and 2 show typi technical graphics person, thereby reducing cal default displays for color or black and the cost-effectiveness of the computer white horizontal bar charts. The original assisted chart making. Even conventional images were displayed on a Dicomed 0-48 xerographic copying of the original image high resolution film recorder and recorded can often make labels, footnotes, even pri on black and white 4 X 5 inch film. mary titles illegible. In some cases crucial information could easily be lost. The example in Figure 3 shows an area choropleth map of the United States at the The design of display prototypes such as Lawrence Berkeley Graphic Design Page 5 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
""j , Figure 1 u.s. Population by Age P... Cent Population by Ag. and Sex, 1970 Sourc.: U.S. Cenlul, 1970
Male Female
85+ 80-8" 75-79 70-74 85-89 80-84 55-59 50-5" .. 5-.. 9 .. 0-.... 35-39 30-34 25-29 20-24 15-18 10-14 5-8 1-" 0-1
15 10 5 o 5 10
Figure 2 Population Trends, 1 980 Source: u.s. C.naua, 1980
F.d.... 1 Difference from Per C.nt Chang. Region 197 C> (Mlllionl) from 1970
N.wEng
NY/NJ
MldAtl
BE.at Otl...
BC.ntr.1
C.ntr.1
Mount.ln w.. t NW.. t
-2 0 2 .. 8 8 -10 0 10 20 30 Lawrence Berkeley Graphic Design Page 6 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
Figure 3
Net Migration 1970-73 for California
Thousands of Persons Source: Federal Tax Principal Origins Returns and and Destinations U.S. Census Bureau
150 50 10
Figure 4 California Standard Minority Metropolitan Population, Statistical Areas 1980
4,000 ...Area __ of cIr'ct. 110 ---- - 2,000 the tobl! ...._ [0 1000) 01 nomrh1t8 ponom 1ndiul - 1,000 .rtIl n -- 500 _ceo 11180 U.S. c- DA... (@)-- - 250 LJoa-
--.IIIIID-F ...... - ... Lawrence Berkeley Graphic Design Page 7 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
those shown in the figures and eventual layout for printed copies made at a later default displays are intended to enhance time. One must begin with a reference grid, their versatility, e.g., for use as slide and a series of lines that determines the overall poster images. Border proportions have dimensions of a frame, essential areas for been selected to easily accommodate typi text, number of columns of text, column cal paper and film formats. In addition, Fig widths, spaces between columns, some of ures 3 and 4 were re-designed to all.ow the intervals above and below standard significant change in scale without harm: items such as frame numbers, etc. Many They can be enlarged to become primary interfaces currently employ fixed-width, visual images for an exhibit or can be non-proportional characters. In such cases, reduced to become secondary, clearly arti the basic measuring units can be a single culated evidence for an article. character in the horizontal direction and a line spacing in the vertical direction. A At some future time, a skillful algorithm in a reference grid allows the deSigner to block well-designed computer graphics system out the kinds of information that will gen might be able to accept input concerning erally appear in frames. The grid both deter the eventual use of the image (e.g., as a mines fixed positions, margins, and spaces xerographic print, as a four-color high between blocks of text, as well as providing quality lithographic image, or as a lecture a framework for variations of composition. slide image) and automatically compensate The grid lies "invisibly" behind every for necessary changes of typesize, line frame. Sometimes the grid must be "bro weight, texture, and conversion between ken" or ignored for special materials. It is color and black-and-white. not an absolutely unviolated device, but it must work most of the time or else a new Interface Design Principles grid needs to be devised. Seedis user interface design involves selec Typographic Parameters tion of symbols and formats for the standard In the situation of fixed-width, non functional components of a system: menus, proportional characters, variation in typesize prompts, help messages, status reviews, is either non-existent or very limited. This is etc. The user interface design also involves not necessarily a limitation; it can be an detailed specification of standards at a incentive to make spatial cues and typo lower level: the determination of a layout graphic emphasis more potent. As more grid, selection of typographic styles, sizing, sophisticated display screens become avail spacing, and means of emphasis, the stan able, size selection will become more cru dard treatment for continuous prose (e.g., cial, e.g., to distinguish footnotes from main help messages), interrupted prose (error text, and main text from titles. .. messages, system status reports, etc.), and tables/lists (menus, data dictionaries, etc.). Line length is often pre-determined in the sense that typesize variation is limited to Unlike conventional prose texts, user inter one or two sizes. The crucial factor in faces have many components and typography is often the width of lines (Hart corresponding layouts. These include ley). Long lines slow down reading. Most tables, indices, lists, numbered items, typographers recommend 40-60 characters diagrammatic presentations, explanatory per line [2,3,6,15]. Doubling (reading the notes, and pictorial images. The user inter same line twice), results when lines are too face is not intended for continuous reading long and without enough space between as for prose text, but rather is a framework lines. In interrupted prose, typical of for complex movement with constant shifts instructional text in interfaces, the lines are in levels of instruction to the viewer and fre essentially unjustified or "ragged right." quent distractions to the viewer's attention. Their effective visual length will be shorter than the actual maximum. DeSigning the layout requires a sensitivity, first of all, to the I.imitations of the viewing Line spacing is measured from baseline to area, i.e., the display screen, as well as to baseline between lines of text. This line Lawrence Berkeley Graphic Design. Page 8 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
spacing should be optically at least equal to Typesetting style should ensure a natural the word spacing and should be consistent flow of text. In justified typography, space is to contrast with transitions to new material added between words (and sometimes and to highlight elements. Normally one to letters) to make all lines the same length. In three variations in line spacing suffices. unjustified typography, equal word spacing and equal letterspacing cause lines to end While fixed-width characters are usually unevenly. There is a tendency in computer used for typographic display, current science and information science to assume typesetting equipment and a growing that justified texts are in some way better, number of high resolution softcopy devices but research shows there is no difference in (e.g., 16-bit microprocessors) and hardcopy legibility or comprehension (Rehe). devices (e.g., laser printer) can display variable-width characters. This has a Tables and Lists significant impact on typefont variation, size Tables and lists of various kinds for of characters, and width of text lines. indexes, file directories, etc., are features General practice suggests the following: of many interactive computer systems. Their formats vary considerably, but research sug- Font variation should usually be limited to a . gests that items need to be carefully single typeface or at most two, except for grouped, both horizontally and vertically so special mathematical needs. Within a as to convey the context efficiently [6). For typeface family, regular (roman) italic, and example, Spencer et al [19] examined ten bold roman are standard means of increas variations for presenting bibliographic ing emphasis. Unless a great amount of material and determined the three best effort is expended on the design of charac ways of presenting it. Such studies indicate ters, adaptions of well-established that attention to layout can have a notice typefaces such as Times Roman, Helvetica, able effect on ease of use of lists. Unfor Garamond, and Univers should be used. tunately, research in this area is still lim Frame presentations often allow for ited. Linear rules can be used to group reversed video characters, blinking, variable selected components of the tables (e.g., intensities, and oth.er means of emphasis. column titles) but they should not be over These should be used sparingly because of used. Generally, no more than two varieties their strength of differentiation from normal of rules should be used [6]. text. Type size variation should be limited to at most three sizes for text materials, Sequencing and these sizes should be quickly and Page sequencing and organization in book easily distinguished. Generally 9 and 10 literature has evolved specific elements for point type for a 14 inch viewing distance is complicated text structures (e.g., title standard printed text size. Optimum size will pages, tables of contents, abstracts, vary with the detailed characteristics of a indices, and running heads which appear on display device and the viewing situation. every page). User interface documents Column widths should again be limited to often appear without this standard allow 40-60 characters per line. apparatus, but viewed as literature they should contain such items. In book litera Letter Spacing and Justification ture, the visual form of these additional ele For maximum legibility and reading ease, ments varies dramatically. Their appearance the amounts of space between each letter depends upon consistency and simplicity in in a word should be optically equal. Like organizing all the visual elements into wise', the spaces between each word in a effective and attractive frames or pages. line should be optically equal. Fixed-width characters on many terminals and printers Implementation of Interface DeSign are usually not well designed for good letter Principles in Seedis and word spacing. They often have too Although the current Seedis network of VAX much space between letters and between computers includes a variety of high resolu words and too little space between lines. tion graphics terminals, printers, and paper Lawrence Berkeley Graphic Design Page 9 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
terminals, many Seedis users communicate computer's statements from the user's the with Seedis via simple terminals s'uch as the computer will generally type in character Lear-Siegler ADM3, Therefore, Seedis' positions 21 to 80, while the user will begin frames of informational text are designed for . typing in character position 1, Examples of a frame 80 characters wide by 24 lines typical frames appear in Figures 5 and 6, deep, This is an industry-wide standard .that' The visual separation of "voices" in the will be valid several more years for many human-computer dialogue allows users to terminals, scan lines on the screen or on paper output more effectively, Users can see the unfold This lowest common denominator choice ing dialogue to observe patterns of decision makes Seedis accessible from the widest making and to find specific information possible variety of terminals, However, it quickly, It is important to assure the users also means that the use of reverse video, that they 'are driving the system, not the italic, or levels of brightness cannot be other way around, The intention of this lay assumed, These means of visual emphasis out is to emphasize the users' selections are not used, but other approaches are from a menu or menu-prompt and the com available, For example, there is a strong puter system's responses to that selection, reliance on a horizontal line of hyphens to highlight certain titles or to separate divi A standard title, page number, prompt line, sions of the frame, and user request line are usually displayed Even within such severe limitations, atten on every page, In this way the user's tion to graphic design principles can present location, past history (the context improve the effectiveness of documentation, part of the prompt message), and future Consider the use of all upper case words, a locations (the options of the prompt) are typographic approach which much documen always present. The .frame layout has also tation utilizes, The fixed width of the letters tried to account for typed paper presenta are often created by a 7 X 9 or similar dot tion: Note that the fully 80 character width matrix, In such conditions lower case letters can be typed out on standard width paper with occasional capitals are more legible, , (8,5 X 11 inches), Using pica or elite type Research shows [2,15] that not being able writers (10 or 12 pitch) non-proportional to perceive word shapes (asis true for letters, a full width of 8 or 7,2 inches is words set in upper case characters only) obtained for 80 characters, Use of 12 pitch may slow reading speed by as much as typing is recommended to allow a left hand 12%, Because line printers and terminals' margin for binding and an ample right-hand often have little space between lines in margin, comparison to normal textbook typography, .'" lower case letters are particularly important The graphic design of the page assumes in providing visual space between lines of that most text will appear between charac type and thereby improve legibility, In ter positions 21 through 79 (one less than interactive situations, lowercase fypography' maximum to 'avoid automatic line feed in for machine messages and for the echoes of certain terminals), Occasionally tables and user input should be used whenever possi lists occupy the entire screen, Because ble, When all capital settings are used, they most lines begin or have fields beginning in should be used to highlight a restricted set column 21, there will be a strong visual axis. of primary words and phrases, For example, vertically along character position 21, It is they identify the moqule from which the along this invisible, implicit vertical line that current command :prompts are coming and a user can efficiently scan when searching titles for pages or for textual and tabular for information, To reinforce this information, significance, most database titles, prompts, etc" begin in character position 21. After Because most of the computer's replies are experimentation with variations the most of fairly brief extent, even for lengthy help useful tabular settings appeared to be every messages, a line of text 40~60 characters, . 5 characters beginning in column 1 and wide is appropriate, In order to separate the continuing across the screen, The tab set- Lawrence Berkeley Graphic Design Page 10 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis
Figure 5 READY MONITOR. SEEDIS.HELP.
INTRODUCTION TO SEEDIS
The three major proce ••• a in SEEDIS are: AREA: define a geographic study area (composed of etatea. counties, or census tracts) DATA: •• lect data .pprop! iate to the geographic study area cho•• n. POI' example. for a study area consisting of • group of atat.". only atate level data. and not county or tract level data, are .ppropt iate.
DISPLAY: manipulate and d18p1&y the data in table, chart. graph. and lor map form.
Normally AREA. DATA, and DISPLAY are performed in the order given. However. once the geographic study area 18 defined (AREA), one may alternate between DISPLAY and the eelaction and extraction of additional ttems in DATA. TYPE MORE TO SEE NEXT SCREENFULL TYPE ? FOR A LIST OF COMMANDS
SEEDIS: area, data, diaplay", profile help USING SEEDIS
LBL's Seedis is an exper imental information system that includes integrated program modules for retrievlng, analy zlng. and displaying eelected portione ot geographically linked databaeee. Program mOdules in Seedie include:
area select geographic area (level and scope of analysis) dat.a select, extract, enter. or transform data display manipUlate and display data in tables, mape, and charta prof 11e produce atandard aocio-economic report. tor selected areaa Normally Area. Data, and Display are ueed in the order given. However, once the geographlc etudy area 18 def ined in "rea, you may alternate between Display and the eelectlon. extractlon. or enter ing of additional itema in Data.
SEEDIS: area, data, dieplay, profile
Figure 6 ? TYPE ONE OF THE FOu..owlNG COMMANDS ..• ? FOR THIS LIST OP COMMANDs HELP FOR HOW TO GET HELP MORE TO SEE NEXT SCREENPuu" TABLE FOR THE TABLE OF CONTENTS (N) POR PAGE (N) ,. (COMMENT)" TO ENTER A COMMENT IN THE LOG DATA (SEQUENCE LETTERS) SELECT DATA CODES CANCEL (SEOUENCE LETTERS) CANCEL DATA CODES POR X (C) SUBSTITUTE C POR X IN DATA CODES - ALSO XX xxx XXXX Y YY YYY YIYY REVIEW LIST DATA SELECTIONS MADE SO PAR SAVE SAVE DATA SELECTIONS AND RETURN QUIT CANCEL DATA SELECTIONS AND RETURN READY
'" DATA: (line 1etter(8», table. Input Oescr ipt ion (line letter(s» select one or more data elemente by line letter table display table of contents for thie database code list avalable commande in thie menu help descr ibe data element eelection show display table of contents for this databaee liet current data element ae1ections and history cancel delete current data element selections for this database quit return to database selection menu DATA: (line letter(8», table. (page number>. CR Lawrence Berkel~y Graphic Design. Page 11 Laboratory , For Computer-Seised LBL-16330 Information. Management: September 1983 A Case Study of Seedis tings are simple divi~ions of the jump necessary, lists may oGcuPY the full width of betwee,n,the use'r's starting positipn(pqsi t~e 'page, witt;correspondingly wider tion 1)and th.~Gomputer system's starting' hyphen lines. It is l;JenEirally recommended position (position 2.1), .A tab width of 5 or 10 thatlon'glists of short items appear in mul characters allows short fields of 4 or 9 char ticolumn format .. As they grow in length, acters and encourages a lim.ited, consistent . they ~iioLJld expand into a next frame. set of tab stops. The',fpilowing two examples, Figures 5 and Whenever possible, the codes or other 6, show a comparison of undesigned and items to be selected in a list are placed designed welcome messages as frames of immediately preceding position 21, i.e., . the Seeqis user-machine interface. In the beginning in positions 16 or 11. When more first undesigned versions note the scattered than one field must be placed in columns 1 appearance of text groups, the incon through 19 (assuming one skipped character· sistency in the use of all caps and lower in position 20), the most important field, case, and the order of the text in which the usually the one containing items to be user is told about getting out even before selected, is placed at the far left so that it· being welcomed. In the second redesigned can be easily detected. The ,left-most field versis:ms note the order of. text elements, and the one beginning in position 21 are the the, use·of rules, lower case, and specific two most important locations. Remaining tab' settings. The full screen width is fields are placed at the far right. Wherever equi:vEllent to 80 typewriter characters in possible, consistency of location is main width. Information on global commands is tained, and fields are arranged in conceptu introduced in the very first information to ally linked groups, e.g., variables and units. the user. Note also the standard form of the menu-prompt which identifies the module in Page numbers include the word "Page" to which the user is currently working (all capi reduce confusion about the appearance of tal letters) and the appropriate non-global isolated digits in the display and to avoid commands at this point. confusion with possible section numbers. Although not completely implemented, it is Inner-Face DeSign Principles' recommended that "Page 2 of 15" be the The appearance of computer programs convention to indicate further pages. The (including documentation) which generates user will be aware of how much other Seedis has not yet been designed. However, materials might lie in a module or section. the author has helped redesign prototype frames of general program texts [13] and is Horizontal lines formed by hyphens are used currently engaged in research with Ronald to call the reader's attention to titles of Baecker, President of Human Computing tabular or prose material that is subordinate Resources, Toronto, to develop these proto to the main title. The hyphen rule replaces types into a working system for typesetting the blank line of space, which normally code and comments. Figures 7 and 8 would have been necessary for visual clar present a "before and after" version of ity. The width of the hyphen rule, 59 charac typographic program visualization which are ters maximum, follows the standard width in the prototype designs, order to emphasize the title and the full column width. Within tables, the hyphen rule Figure 7 presents a program in an elemen may be wider than 59 characters in order to tary typographic form using fixed-width char include fields in character positions 1 acters of a single font with limited horizon through 19. Normally one character space. tal spacing variation. There is little typo interrupts the rule between fields. graphic hierarchy. The program is more readable than those presentations which are Where possible, lists of short keywords all-capital typography and multiple com allow reading down in columns of greater mands per line, but there are still ways in than 3 lines. Lists usually begin with a which it can be made more readable. header, a title, and a hyphen line, and end with a line skip, followed by the prompt. If Figure 8, a protypical black-and-white visu- Lawrence Berkeley Graphic Design Page 12 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis Figure 7 Figure 8 ~: :::.::':.:: :=:;d,.:::r:~.r ./ / •• , ..... "at. ."1 .. , it ho "I •• , ulce) /. ,..,,., 'oU •• 41st calculat.., ., ( TIm I'"''~''' '''V'i<'_~'' i.I~"''''''TU''''''' d ..blt opZ, 1;\0'0, ,.,0, ,.UI', g{lf'lN'J "'''/Itt. ",,,,I, "f'U',rJ"~I" ,''', ,tQ,A, '\''',"'1."',,, It''n~ld Ib~cke, &. R, alization, requires a high resolution bit map Note the use of a tap setting at approxi display terminal or a high quality hardcopy mately half the width of the main column of device. The actual images of Figure 8 were text for presenting two columns of informa generated in Times Roman type using a tion. computer-controlled phototypesetter. Fig ures 7 and 8 are part of a series of experi Modules of the program are indicated by mental prototype pages for online or off-line unique gray bands with bold roman module documentation which illustrates the full names .. Their size is the largest of three potential of a graphic design approach to standard sizes of type for the textual textual program visualization. Spatial loca material of the program. Hold type is used tion, typographic symbol heirarchies, figure to keep type legible on a gray background. field enchancements, indexes, abstracts, etc., are combined to create a clear, con Comments appear in 7 pOint type as sistent, explicitly structured page that is separate marginalia to the left of the main legible and appealing to the reader. The fol column of text. These are intended to be lOwing paragraphs detail the features of this single line phrases that can help the reader design and elaborate upon the basic princi-' to understand individual code lines. The pies suggested above. comments column is approximately 40 char acters wide and appears in the smallest of Spatial Organization of Program Texts the three text sizes. As phrases, the com The entire page/frame is a mosaic of con ments appear without initial capital or tent units with standard locations but in pl3riods. In keeping with all clusters of text, some cases variable area size. In an they appear typeset in flush left, ragged interactive environment, each of these . right lines .. areas could be a window to a higher or lower level of information. Footnotes appear as 8 point type in a separate band of space at the bottom of the The upper part of the first page (or frame of page/frame set off by a thin rule as wide as a high resolution terminal) is intended to be the main text. They are more detailed and a standard documentation cluster of header complete explanations of the significance of units grouped in a natural order. These code lines (or any other element such as a include a documentation source, a program title). They appear as full sentences with title, program subtitle(s), revision or last initial capitals and closing periods. update, a document code number, chapter reference and page number. The items are Evaluation then repeated on every frame/page. Many variations of page and screen formats were studied before the conventions for In a strong title banner below the headers, Seedis were proposed. An extensive testing the title is presented in a size large than all procedure in the context of Seedis develop of the others and on.a field of small gray ments was not available, however, the ",I dots to distinguish it clearly, but'not in an author acknowledges the appropriateness of overpowering way, from the rest of the text. a detailed human factors study of these The version date and unique code numbers changes in Seedis conventions. After imple are intended to advise the reader of the menting these changes, viewers and users particular version of this program. There of Seedis displays appeared to notice the may be others similar to it that must be dis differences and to respond favorably to tinguished. The abstract is intended to be a them. The new graphic design has also 100 word summary of the functi on and served as a model for staff preparing new significance of the program. It appears in modules, components and documents per italic to set it off from other elements. The taining to Seedis. It appears that carefully author/guide and location band are intended controlled graphic design within Seedis can to identify specific persons at the installa result in an improvement in the efficiency of tion site who can be contacted for assis the use of information displays as well as tance in interpreting or using the program. the user interface. The application of Lawrence Berkeley Graphic Design Page 14 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis graphic design principles outlined in this An easy-to-use "report by example" sub article and included in a forthcoming program to create standard and custom graphic design manual for Seedis [12] reports or profiles which can be subse should enable future programmers to quently run with either line printer or economically prepare, produce and install phototypesetter output for any combina various modules being developed in such a tion of geographic area. way as to user their resources to their full potential and to retain over-all visual • Different input and output formats for coherency of the system. different types of devi ces (e. g., dumb crt's, printers and graphics terminals). Most of the changes in the Seedis interface have been relatively easy to implement • Integration of user interface functions to within the software. These redesign features facilitate experimentation with pictorial were more than just a "cosmetic" facelift to and touch-sensitive interfaces, flexible the system. By carefully considering not invocation of any Seedis function from only what to show, but also when, how, and within another, and user selection of why to show it, a better understanding of command, menu, or question and answer the functionality of the system emerges in mode. the minds of the builders, the users and the viewers of Seedis and its information. Many Future Graphic Design Research of the changes in design constitute working Directions conventions rather than as yet carefully pro The efforts thus far in applying graphic ven standards. However, many of the design to computer graphics raise interest changes corresponding to recommendations ing questions which further research in the of an independent critique of the system visible language of computer graphics might [1] . explore. These questions can be clustered into six categories [16]. Future Seedis Research Directions Seedis will continue as a research project The first research topic deals with the and experimental information system, with appropriate use of typography to reveal for major enhancements to facilitate incorpora mal syntactic, semantic, and pragmatic pro tion of 1980 census data. Plans for future perties of data elements. For example, what developments include: is the appropriate use of boldface and ital ics? Should multiple fonts be used? How • Facilities to describe and handle com should color be employed? plex data structures, including hierarchi cal records, multiple occurring data A second concern is with the design and items and repeating groups of items, layout of graphic elements on the page or variable length data, transposed (verti screen using systems of grids and overlays. cally partitioned) and partially transposed For example, how should secondary text data records. (comments and commentaries) be clustered around the primary text in a multi-wi ndow • Automatic creation of metadata informa display environment? tion such as dictionaries and cross data base indexes from augmented data A third area for research is the possibility of definition files. substituting a set of well-designed icons or symbols (pictograms or ideograms) for cer • Selection of data items by keyword, sub tain combinations of alphanumerics that ject, and/or item values. occur repetitively in computer graphics. What should these icons or symbols be? To • Statistical routines that automatically what extent can documentation become read and write an underlying self more diagrammatic, and rely less on the describing file structure so that the out linear text forms or current languages? put of any routine can immediately serve as input for any other routine. A fourth set of questions arise out of the Lawrence Berkeley Graphic Design Page 15 Laboratory For Computer-Based LBL-16330 Information Management: September 1983 A Case Study of Seedis possibilities that computer graphics offer for principles to the technical capabilities of the inclusion of movement, blinking, and . computer graphics display equipment. This other kinds of temporal change into docu report has been intended to educate the mentation. What should be the relationship graphic design community about between static paper and dynamic screen information-oriented graphic design for com representations of computer graphics? puter graphics and to encourage greater attention on the part of the computer graph A fifth problem area is in the depiction of ics community to the potential contribution large directed graphs of great complexity, of graphic design to more effective visual networks in which nodes are not single communication of information. points but entire frames (combinations of signs) and in which links are explicitly Acknowledgments stated or implied connections between The author wishes to acknowledge his previ nodes. The spatial layout and user naviga ous articles which have been re-edited for tion problems that occur may be seen, for inclusion in this summary report, the Com example, in the transformation of text state puter Science and Mathematics Department ments into organization or process of Lawrence Berkeley Laboratory which sup diagrams. ported his graphic design efforts during 1980-1982, and his colleagues of that A sixth research topic concerns the ability department from whom he benefited, partic of a visualization to facilitate the integration ularly Carl Qucing, Harvard Holmes, Fred of the various conceptual levels at which Gey, Bill Benson, Deane Merrill, John data may be described. What relation McCarthy, Bruce Burkhardt, and Ilona should exist between high resolution Einowski. Michael Arent, an associate of the detailed views and low resolution overview author, helped prepare this edited text. A images of the same content? What is an re-edited version of this text appeared in optimal sequence for the basic units of an The Design Journal, 1983[13]. This work interactive book? What would its other was supported by the U.S. Department of parts such as tables of contents and indices Energy under Contract No. DE-AC03- look like? How might they be used? 76SF00098. Finally, one may ask in general, what is the References relation between reading and writing such [1] Bleser, T~rry, Peggy Chan, and Mai Chu, complex visual representations? "A Critique of the Seedis User Interface," Report GWU-EECS-81-04, Dept. of Electrical Summary Engineering and Computer Science, George The above discussion has introduced some Washington University, Washington, DC, basic graphic design principles that are 1981. relevant to the display of information graph ics. The examples shown presented a mod [2] Chaparos, Ann, "Notes for a Federal est set of improvements for the creation, Graphic Design Manual," Chaparos Produc distribution, and consumption of information tions, Washington, DC, 1979. through computer-assisted graphics in the three faces of computer systems. [3] Craig, James, Production for the Graphic DeSigner, Watson-Guptill, New York, 1974. Further developments need to be made to design better coordination of typography, [4] Eco, Umberto, A Theory of Semiotics, line weight and texture, gray values, color, Indiana University Press, 1976. spatial arrangements, and sequence for texts, charts, maps, and diagrams. Wher [5] Gerstner, Karl, Designing Programmes, ever more sophisticated graphic display Hastings House Publishers, New York, 1968. parameters are functioning, even greater benefits can be expected from applying [6] Hartley, James, Designing Instructional awareness of informational graphic design Text, Nichols, New York, 1978. Lawrence Berkeley Graphic Design Page 16 Laboratory For Computer-Based LBL-16330 Information Management: .September 1983 A Case Study of Seedis [7] Marcus, Aaron, "Computer-Assisted [18] Rehe, Rolf, Typography: How to Make it Chartmaking from the Graphic Designer',s Most Legible, Design Research Interna Perspective," Lawrence Berkeley Labora- tional, Carmel, IN, 1974. . tqry Technical Report LBL-10239, April , [19] Spencer; H, L. Reynolds, and B. Coe, 1980, ·and Computer Graphics (Proc. Sig "The Relative Effectiveness of Spatial and graph 1980), Vol. 14, No.3, July 1980, pp. Typ'ographic Coding Systems Within Biblio 247-253. graphic Entries," Report No.5, Graphic [8] " "Visualizing Global Inter- Information Research Visit, Royal College of depend,encies," Graphic Design (Japan), Art, London, 1974. 'No. 79;' 1981, pp. 57:-62. Biography Aaron Marcus is the principal of Aaron [9] . ," Oesi gni ng the Face of an Marcus and. Associates, Berkeley, CA, an Interface," IEEE Computer Graphics and . information-oriented graphic design firm Applications, V,ol. 2, No.1, January 1~82, .. . specializing ineffective computer graphics pp. 23-30.,' display. Recently he was a staff scientist in the Computer Science and Mathematics [10] , "When Designing Com- Department of Lawrence Berkeley Labora puter Graphics the Know Business is Show tory. From 1968-1.977 he taught at Prince 'Busines$,"'lndustrial Design, Vol. 29, No.2, ton University and was a consultant in com March-April 1982, pp. 24-30. puter graphics at Bell Telephone Labs, Mur ray Hill, New Jersey. While at Bell Labs he '[ 11] '. .' ';Cblor: A Tool for Com- programmed a prototype interactive page puter Graphics Communication," in Green design system. His professional graphic berg, Marcus, et.al., The Computer Image, design work has been exhibited, published Addison-Wesley, Reading, 1982, pp. 76-90. and awarded internationally. He has both written and lectured extensively on graphic [12] . ' "A Graphic Design design and on computer graphics for profes , ' Manua.l for Seedis," LBL Technical Memo sional journals and conferences of both [in preparatiori], 1983. "'. '. fields. He recently co-authored The Com puter Image published by Addison-Wesley, [13] , "A Case Study of has written Managing Facts and Concepts, Seedis," The Design Journal Society of , published by the Desi.gn Arts Program, Typographic Arts: VOl. 1, No. 1,1983, pp. 17':"23 ... National Endowment for The Arts, and has .... .' . -.... , written Soft Where, Inc., Vol. 2, published by the West Coast Poetry Review. He is on ...... , ;(141' '~ .. '.:' I Managing Facts and Con- ::<. cepts, Lawrence Berkeley Laboratory, Publi the advisory boards of Visible Language and ; "'cafion No. 456, 1983 and Nationai Endow .Information Design Journal. He has con ment for the Arts, Washi ngton, D. C., March sulted internationally with major computer 1983. graphic research and development groups ~ . :." on the subjects' of chart, diagram, and map [15] , "Graphic Design for Com- design; on user-friendly iconic interfaces; puter Graphics," IEEE Computer Graphics and on program visualization/documentation .. and Applications, Vol. 3, No.4', July 1983, techniques. pp. 63-70. ' Mr. Marcus received his BA in physics from Princeton University and his BFA and MFA [16] Marcus, Aaron and Ron Baecker, "On i,ngraphic design from Yale University Art the Graphic Design of Program Text," Proc. School. He is On the Advisory Board of the Graphics Interface '82, May 1982, pp. " Design Arts Program, National Endowment 303-311. For The Arts, and is a member of NCGA, ", ACM, Siggraph, ASIS, The Computer Art [17] McCarthy, John, et. aI., "The Seedis! Society, Sigma Xi, The American Institute of Project," LBL Publication PUB-424 Rev., Graphic Arts, and The Semiotic Society of May 1982. . America. This report was done with support from the Department of Energy. Any conclusions or opinions expressed in this report represent solely those of the author(s) and not necessarily those of The Regents of the University of California, the Lawrence Berkeley Laboratory or the Department of Energy. Reference to a company or product name does not imply approval or recommendation of the product by the University of California or the U.S. Department of Energy to the exclusion of others that may be suitable. ... ~ .;. TECHNICAL INFORMATION DEPARTMENT LAWRENCE BERKELEY LABORATORY UNIVERSITY OF CALIFORNIA BERKELEY, CALIFORNIA 94720