TweetFollow Us on Twitter

Interfacial Relations 5
Volume Number:7
Issue Number:10
Column Tag:Developer's Forum

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.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Latest Forum Discussions

See All

Six fantastic ways to spend National Vid...
As if anyone needed an excuse to play games today, I am about to give you one: it is National Video Games Day. A day for us to play games, like we no doubt do every day. Let’s not look a gift horse in the mouth. Instead, feast your eyes on this... | Read more »
Old School RuneScape players turn out in...
The sheer leap in technological advancements in our lifetime has been mind-blowing. We went from Commodore 64s to VR glasses in what feels like a heartbeat, but more importantly, the internet. It can be a dark mess, but it also brought hundreds of... | Read more »
Today's Best Mobile Game Discounts...
Every day, we pick out a curated list of the best mobile discounts on the App Store and post them here. This list won't be comprehensive, but it every game on it is recommended. Feel free to check out the coverage we did on them in the links below... | Read more »
Nintendo and The Pokémon Company's...
Unless you have been living under a rock, you know that Nintendo has been locked in an epic battle with Pocketpair, creator of the obvious Pokémon rip-off Palworld. Nintendo often resorts to legal retaliation at the drop of a hat, but it seems this... | Read more »
Apple exclusive mobile games don’t make...
If you are a gamer on phones, no doubt you have been as distressed as I am on one huge sticking point: exclusivity. For years, Xbox and PlayStation have done battle, and before this was the Sega Genesis and the Nintendo NES. On console, it makes... | Read more »
Regionally exclusive events make no sens...
Last week, over on our sister site AppSpy, I babbled excitedly about the Pokémon GO Safari Days event. You can get nine Eevees with an explorer hat per day. Or, can you? Specifically, you, reader. Do you have the time or funds to possibly fly for... | Read more »
As Jon Bellamy defends his choice to can...
Back in March, Jagex announced the appointment of a new CEO, Jon Bellamy. Mr Bellamy then decided to almost immediately paint a huge target on his back by cancelling the Runescapes Pride event. This led to widespread condemnation about his perceived... | Read more »
Marvel Contest of Champions adds two mor...
When I saw the latest two Marvel Contest of Champions characters, I scoffed. Mr Knight and Silver Samurai, thought I, they are running out of good choices. Then I realised no, I was being far too cynical. This is one of the things that games do best... | Read more »
Grass is green, and water is wet: Pokémo...
It must be a day that ends in Y, because Pokémon Trading Card Game Pocket has kicked off its Zoroark Drop Event. Here you can get a promo version of another card, and look forward to the next Wonder Pick Event and the next Mass Outbreak that will be... | Read more »
Enter the Gungeon review
It took me a minute to get around to reviewing this game for a couple of very good reasons. The first is that Enter the Gungeon's style of roguelike bullet-hell action is teetering on the edge of being straight-up malicious, which made getting... | Read more »

Price Scanner via MacPrices.net

Take $150 off every Apple 11-inch M3 iPad Air
Amazon is offering a $150 discount on 11-inch M3 WiFi iPad Airs right now. Shipping is free: – 11″ 128GB M3 WiFi iPad Air: $449, $150 off – 11″ 256GB M3 WiFi iPad Air: $549, $150 off – 11″ 512GB M3... Read more
Apple iPad minis back on sale for $100 off MS...
Amazon is offering $100 discounts (up to 20% off) on Apple’s newest 2024 WiFi iPad minis, each with free shipping. These are the lowest prices available for new minis among the Apple retailers we... Read more
Apple’s 16-inch M4 Max MacBook Pros are on sa...
Amazon has 16-inch M4 Max MacBook Pros (Silver and Black colors) on sale for up to $410 off Apple’s MSRP right now. Shipping is free. Be sure to select Amazon as the seller, rather than a third-party... Read more
Red Pocket Mobile is offering a $150 rebate o...
Red Pocket Mobile has new Apple iPhone 17’s on sale for $150 off MSRP when you switch and open up a new line of service. Red Pocket Mobile is a nationwide MVNO using all the major wireless carrier... Read more
Switch to Verizon, and get any iPhone 16 for...
With yesterday’s introduction of the new iPhone 17 models, Verizon responded by running “on us” promos across much of the iPhone 16 lineup: iPhone 16 and 16 Plus show as $0/mo for 36 months with bill... Read more
Here is a summary of the new features in Appl...
Apple’s September 2025 event introduced major updates across its most popular product lines, focusing on health, performance, and design breakthroughs. The AirPods Pro 3 now feature best-in-class... Read more
Apple’s Smartphone Lineup Could Use A Touch o...
COMMENTARY – Whatever happened to the old adage, “less is more”? Apple’s smartphone lineup. — which is due for its annual refresh either this month or next (possibly at an Apple Event on September 9... Read more
Take $50 off every 11th-generation A16 WiFi i...
Amazon has Apple’s 11th-generation A16 WiFi iPads in stock on sale for $50 off MSRP right now. Shipping is free: – 11″ 11th-generation 128GB WiFi iPads: $299 $50 off MSRP – 11″ 11th-generation 256GB... Read more
Sunday Sale: 14-inch M4 MacBook Pros for up t...
Don’t pay full price! Amazon has Apple’s 14-inch M4 MacBook Pros (Silver and Black colors) on sale for up to $220 off MSRP right now. Shipping is free. Be sure to select Amazon as the seller, rather... Read more
Mac mini with M4 Pro CPU back on sale for $12...
B&H Photo has Apple’s Mac mini with the M4 Pro CPU back on sale for $1259, $140 off MSRP. B&H offers free 1-2 day shipping to most US addresses: – Mac mini M4 Pro CPU (24GB/512GB): $1259, $... Read more

Jobs Board

All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.