Interfacial Relations, Part V

IPROS and ICONS

The most visible and memorable aspect of the Graphics User Interface are its tool and function icons.

Iconography is a design discipline with a long history. Long before computer interface was a pixel in the eye of its beholder, communication through icons was triumphed as the solution to international communication and brotherhood. Otto Neurath, Viennese philosopher and social scientist, “hoped to establish a global standard for education and to unite humanity through one ordered, universally readable language of vision.”--sentiments not that different from some graphic interface proponents.

Interfacial Relations Part V looks at static icons and their role in the communication process. Then it cautions you about possible iconographic pitfalls and suggests an alternative way icons can be designed to communicate more relationally.

ICANs

Icons can be immediate, attractive, interesting, cross-cultural, concise, easy to understand and simple. They convert a blank slate into a miniature gallery. They’ve been influential enough to redefine the look of today’s computer interface. But are they substantial enough to grow with that interface?

Iconography

Isotype, an icon-based system developed by Otto Neurath in the 1920‘s, carried iconography to extremes. As much a passion as a philosophy, isotype exerts a strong influence in computer interface design.

“Neurath believed that language is the medium of all knowledge: empirical facts are only available to the human mind through symbols... But (he thought) verbal language’s structure and vocabulary failed to be a consistent, logical model of objects and relations in the physical world. Neurath held that vision was the saving link between language and nature, and that, hence, pictorial signs would provide a universal bridge between symbolic, generic language and direct, empirical experience.1"

Isotype’s philosophical underpinnings reach deep. They extend into logical positivism and the struggle between rationalism (a cause championed by logicians and analysts) and empiricism (furthered by those that believed knowledge was only possible through direct experience, especially as gathered through the sense of sight). Isotype responds to this debate with a position that: “attempts to eclipse interpretation with perception, to replace reading with seeing.”

But is iconography precise enough to define a computer interface? Or has our use of icons caused us to learn software by approximation rather than understanding.2

ICAN’Ts?

What happens when you try and combine icons into an interface? “...Programmers and graphic designers are creating sets of signs that in some ways transcend traditional verbal language. In fact, the number of signs may be even greater than some natural languages used for simple communication.”3 Does this imply that icon-based computer programs are providing us with alternative languages?

Design Factors

In one form or another, icons are here to stay. When introduced, icons could get by purely on their “Oh Wow!” appeal.

I1: “Oh Wow!”

Not always obvious, they were usually engaging enough to attract your interest. And they lasted. Icons like the trash can survived the ridicule of command line critics enamored with alphabet soup interfaces. In the final judgment, icons--as interface guidelines accurately observed--were clearer and more concise reminders than words or their abbreviations.

For a few years Macintosh users could recognize and name every icon and its parent program. But as icons proliferated, recognition shifted from forms to functions. Power users switching to the more useful Finder Views found icons more useful as file, folder, or application indicators than as the unique pictures illustrating each application.

Tool icons coalesced. Despite the endless possibilities, the number of unique images actually employed to define basic program operations has been surprisingly small. What’s interesting is that though the icon may be the same, its functionality (and in some cases its name) may be quite different. In the “real world” paintbrushes can, by being constructed or “operated” differently be made to produce different results, but the real world modifies its “hardcopy” paintbrush to reflect the change. Touching and looking at a paintbrush we learn a great deal about its capabilities, regardless of how it was “configured” in the past. We don’t get this kind of feedback from a static icon. A bewildering array of similar looking icons hides a cornucopia of different tools.

I2 Each of these similar “brushes” (Canvas, VideoPaint, Color Studio, Studio8, KidPix, PixelPaint, PhotoShop, Oasis) operates quite differently.] Four of the six eyedroppers select a color. Photoshop’s other two apply it.

The proliferation of icons is rapidly bringing us to terminal icon overload.

Icons as we know them are appropriate tools in situations where the icon (and even the program in which it operates) call up functions that approximate real world tools and processes. But as computer programs supplant and surpass real world processes--as paint brushes bristle with new personalities--a new kind of icon is going to have to emerge.

During the interim period we’re in now--as icons change from pretty pictures to descriptive phonemes to prescriptive processes--we should look at icon design with an eye to semiotics and a mind for rhetoric. Primitive icons can exist out of context, like paintings taken out of their birthplaces and placed in a museum. But sophisticated icons that control and define processes unique to the computer must assume roles as communicators within a more demanding linguistic context.

Semiotics, rhetoric, and icons

“Semiotics explains the principles that underlie the structure of signs and their utilization within messages. Rhetoric, the art of persuasion, suggests ways to construct appropriate messages.”4 Knowing semiotics gives you more design options. Understanding rhetoric helps you determine how best to make your point.

The correlation between visual signs and written (or verbal) language is not strictly reciprocal. Written language is discursive. “Words are combined in a linear sequence that permits analysis in terms of both the meaning of each sign and its position within the syntax of the sequence.”5 The pulldown menu and its cascading offsprings approximate a terse sort of writing.

Computer icons aren’t devoid of context. The programs they control exist as semi-private environments--architectonic windows bordered by one or more tool palette pillars and a menu girder. But (with the notable exception of Undo) the context created by a computer program is more a juxtaposition of elements in space than an arrangement of elements in time.

Icon arrangements, even those provided in pop-up menus, are more a rhetorical device enticing us to choose or resist choosing a tool (eliciting or not eliciting an emotional response). They don’t act as part of a statement charging the meaning of what we are doing and where we are going. The tools a carpenter uses may not necessarily determine how the furniture will look but they say a lot about the craftsperson. We shouldn’t expect computer tools to be similarly tied to history. Abandoning PixelPaint to use Bill Atkinson’s MacPaint does not make me feel any closer to the “earth.” But we might explore the ability of computer tools to respond to our unique touch, to reflect our unique preferences, to relate to us in an agent-like manner. We speak of real world things and methods “growing on us.” Relational, personally responsive tools might be this statement’s computer equivalent.

Icon sequences aren’t unheard of. Some database, animation, and authorware programs utilize icon sequences to structure their routines.

Today’s programs are abandoning clear boundaries for total-recall-and-response functionality. Companies are even issuing tool-like effects as self contained packages (e.g. Aldus’ Graphic Effects).

Shades of Meaning

How many shades of meaning can an icon express? Following is the schema proposed in A Case Study in Visual Rhetoric 6 that I’ve applied to Macintosh icons. Like all aesthetic judgments, lines of demarcation are blurred and many of the icons fall into more than one definition.

Figures of contrast

- Antithesis: the juxtaposition of contrasting ideas, for example “By the time the wallet is empty, life will be full.”

I3 Freehand’s flip (horizontal and vertical) shows both sides of the coin; Quark Xpress’ selection icon (shown in its selected state) refers to both graphics and text editing modes; Neither Photoshop’s blur (l) nor sharpen (r) icon is apparent unless you know the meaning of its other face (other applications use the blur icon for their blend function). The Janus-facelike filled/unfilled rectangle (Oasis) is much less popular an icon than it used to be.

- Irony: an expression that conveys a meaning opposite to its literal meaning, for example, “Robbing a widow of her life savings was certainly a noble act.”

I4 Adobe’s “demagnify image” certainly has no correlate in the real world. Yet this tool is one of the clearest icon implementations. One of the things that gives the +/- magnifying glass its power and charm is that metaphor is toggled (an eminently ironic action) by depressing the Option Key. Separate + and - magnify icons aren’t as effective because they don’t use the power of the toggle to substantiate their meaning. So long as Microphone’s STOP signal is on screen the script continues. A click on the icon stops the script.

Figures of resemblance

- Metaphor: an implied comparison between two things of unlike nature, for example, “The colorful display was a magnet for anybody in the room.”

I5 QuicKeys extension cord icon indicates Apple extensions. Microphone uses a railroad crossing metaphor to control data flow.

- Personification: a comparison whereby human qualities are assigned to inanimate objects, for example, “The thatch-roofed cottages in the valley seemed to be asleep.”

I6 Anthropomorphic icons seem an obvious solution in a medium that is referred to as much as a companion as a machine. Yet there are less anthropomorphic icons than one would expect. QuicKeys “Watch Me” icon records macros. KidPix capitalizes on people-lik icons and gains immediate appeal. The grabber tool (and the smiling Macintosh) is the classic Macintosh personification.

Figures of contiguity

- Metonymy: the substitution of terms suggesting an actual relationship that can be of causal, spatial, or chronological nature (cause instead of effect, instrument for agent, author for work, container for contained, and product for producer), for example, “The White House (President of the United States) reduced her troops in Europe,” or “ He had always been a great lover of gold (money).”

I7 Eyedropper: container for contained, StrataVision 3D Spot/Point Light Sources: cause instead of effect, Multi-Ad Creator File Place: product for producer, Canvas’ Split: instrument for agent, Studio32 Smudge author for work

- Synecdoche: the substitution of a more inclusive term for one that is less inclusive or vice versa, the nature of which is quantitative, for example, “Canada (Canadian team) won the competition” or “He lived for a week under my roof (house).”

I8 HyperCard’s stack overview and one of its many Home Card icons; Studio32’s Blend raises a drop to the status of a flood.

- Periphrasis: circumlocation, the indirect reference by means of well-known attributes or characteristics, for example, “to go to a better world” instead of “to die.”

I9 Stuffit Delux’s magnet aligns its archive window to its tool palette. • The common attribute behind these Apple Control Panel icons is that they are adjustable. (Yet only one of these Control Panels contains a slider switch.)

- Puns: a play on words, using words that sound alike but have different meanings, for example, “Check in here for the rest of your life (Wandlyn Motel).”

I10 Freehand’s cut tool, Mariah’s Keyword tool, Multi-Ad Creator (Special) Effects icon, and KidPix File Menu items explore puns in more and less subtle ways

Figures of gradation

- Amplification: the expansion of a topic through the assemblage of relevant particulars, for example, “He used all the means at his disposal: radio, TV, brochures, posters, advertisements, and so forth.”

I11 Quark XPress’ Font Style selectors, the familiar object handles and StrataVision 3.0’s 3D object handles assemble a full range of functionality

- Hyperbole: the exaggeration of an object beyond its natural and proper dimensions, for example, “Jan’s friends tracked a ton of mud through the hallway.” (Any departure from the ordinary way of expression endows the expression with a strong dynamic tension directed either toward the ordinary (making the hallway terribly dirty) or away from it (tracked a ton of mud through the hallway). The less known the trope, the longer the tension span.)

I12 Digital Darkroom’s Magic Wand selection tool seemed like magic when it was introduced. Apple’s precursory ringing alarm clock.

Are Icons Iconic?

Can icons effectively communicate internationally.

Can icons communicate effectively to a group of non-specialists.

I13 Xpress uses a paste up artist’s convention to indicate graphics frames. KidPix Blender and Truck for the child-expert in all of us.

Though the immediacy of icons can’t be questioned, can they be continue to be relevant?

A capable icon designer is relevant. A master icon designer is punctual--on time. Dozens of icons are designed--and submitted for editorial approval--to illuminate the weekly stories in TIME Magazine. All of them are recognizable, most are relevant, but only a few are punctual enough to be considered for publication. The marketing vagaries that affect TIME are not that different from those that affect a software product seeking to gain a market share within a competitive and constantly changing market.

I14 Illustrator (and other programs) associate the precision bezier line with a fountain pen nib; MacDraw Pro employs a technical pen icon. Which identification will last?

Can Icons a Language Make?

Some argue that a visual language should be possible given the existence of viable pictographic languages such as Chinese, which survives with “3,000 pictograms and ideograms.”7 But the argument holds less clout when you consider the uniquely different ways and purposes these images function in these intricate cultures.

The Chinese and Japanese depend on their language to maintain cultural integrity and tradition. The computer enters traditional disciplines intent on supplanting the way things were done. When the computer first gains entrance--while it’s looking for acceptance--it’s interface must countenance established traditions. Before long, however, it’s looking for ways to uproot the traditional, challenge the iconic, and establish alternatives that reflect computer specific capabilities.

Japanese “kanji” are not just icons. They are a rich set of images with accepted meanings. While they provide meaning, they transport the reader into their culture. Kanji are often complex, built on a set of accepted visual and mnemonic roots. These characters are learned by rote in (sequences and) ways that haven’t changed in centuries. New terms may be incorporated in kanji or expressed through “kana,” phonemes that sound like the Western version. Adopted terms that must retain a sense of newness (rather than remain rooted in tradition) often remain kana and are not translated into kanji.

Pictographs can elicit a new “take” on reality in ways that alphanumeric language can’t. Almost any sequence of pictographs can mean something. We can easily recognize and discount a nonsense English language sentence, but a pictographic juxtaposition cannot be so easily discarded. Nonetheless, this rich kind of linear juxtaposition does not happen in computer interface as we know it because we do not “read” computer icon sequences.

Time Marches

If programs wish to continue to remain relevant, icons based on visual symbols alone may not be able to hold on to the semiotic or rhetorical qualities they had when they were designed. Even though these icons may be complex, configurable tools, they might be given new life if they can be made to relate either to the document at hand or the user at their controls.

Relational icons, icons that reflect information about the document on hand, or the user at hand, may retain relevancy longer. They’re also more personal and responsive, reflecting previous choices, and suggesting future possibilities (Smart cursors) the way an assistant (or agent) might.

Miniature display-like icons can be extended into interactive charts.

I15 Infini-D’s animated surface information preview and PixelPaint filter preview save time by rendering a sample event.

These charts can be tied to input devices (such as pressure sensitive pens) that allow the user to control how the tool will behave based on the tools response (e.g. A pressure sensitive brush, loaded with a color sequence, reflects the color currently available by cycling it to the tip of the cursor.) Of course, rather than just being able to choose color sequences, the program can define sequences based on colors just used, colors in the vicinity of the tool, etc.

The same concept can be applied to an active text selection or a line in a form. A pressure sensitive entry field can cycle through and selectively lock into information on a database, a selection of fonts, a set of response options (fill out this field, save the information, attach a postit note, etc.) Other pressure or keyboard sensitive capabilities might include access to bibliographic information, export capabilities, etc., )

Interactive Icons

Envisioning Information8, and The Visual Display of Quantitative Information9, discuss information graphics design issues. They concentrate on non interactive information, but they address issues relevant to today’s icon designer.

Like the iconic issues discussed in this article the information graphics covered by Tufte are two dimensional and static. But their design roots are more relational. The designs he treats rely on the information they’re trying to impart rather than artificial graphic embellishments to endear them to a market or audience. Tufte shows that graphic rigor rather than whimsey can result in a‘strong, lasting impression. These images hold their own because of their strong functional and relational roots.

Tufte’s rhetorical stance is clear. He believes that the way to express quantitative information clearly is rid your image of visual vagaries. The result is images that remain strikingly beautiful. Whether ancient or contemporary, they seem infused with integrity and consideration.

The material these books present and discuss retain qualities icons aspire to, namely: a sense of rigor that gives them a raison d’etre and a sense of timelessness that invites them to be used without being concerned that they will wear with time.

Surface Issue

By discussing icon appearance, we have just scratched the tip of the iceberg. But visual design not a trivial point. Although you can’t tell a book by its cover, its cover is sometimes all you have to go on to decide whether you are going to look any further.

Beneath a tool’s appearance is the function it calls into play. The interrelationship of form and function gives three dimensional design its strength and the interrelationship between form and interaction is what gives computer interface its power. The many ways interface alludes to and implements functions will be the next subject of Interfacial Relations.

References

1 Lupton, Ellen. “Reading Isotype.” In Design Discourse, ed. Victor Margolin. 145-156. Chicago, 60637: The University of Chicago Press, 1989.

2 Nelson, Theodor Holm. “The Right Way to Think About Software Design.” In The Art of Human-Computer Interface Design, p. 236. Reading, MA: Addison Wesley Publishing Company, Inc., 1990.

3 Arron Marcus, UnixWorld International, p. 63-67, Sign Language

4 Ehses, Hanno H. J. “Representing MacBeth: A Case Study in Visual Rhetoric.” In Design Discourse, ed. Victor Margolin. 179-189. Chicago, 60637: The University of Chicago Press, 1989.

5 Ashwin, Clive. “Drawing, Design and Semiotics.” In Design Discourse, ed. Victor Margolin. 199-209. Chicago, 60637: The University of Chicago Press, 1989.

6 Refer to this essay for an excellent application of the following terms to the art of poster design, a discipline not unlike icon design when you consider the response time the viewer has the opportunity to react. (Note its unusual definition of Metaphor.)

7 Arron Marcus, UnixWorld International, Sign Language

8 Tufte, Edward R. Envisioning Information. Cheshire, CN: Graphics Press, 1990.

9 Tufte, Edward R. The Visual Display of Quantitative Information. Cheshire, CN: Graphics Press, 1983.