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

Pack a magnifying glass and practice you...
Somehow it has already been a year since Torchlight: Infinite launched, and XD Games is celebrating by blending in what sounds like a truly fantastic new update. Fans of Cthulhu rejoice, as Whispering Mist brings some horror elements, and tests... | Read more »
Summon your guild and prepare for war in...
Netmarble is making some pretty big moves with their latest update for Seven Knights Idle Adventure, with a bunch of interesting additions. Two new heroes enter the battle, there are events and bosses abound, and perhaps most interesting, a huge... | Read more »
Make the passage of time your plaything...
While some of us are still waiting for a chance to get our hands on Ash Prime - yes, don’t remind me I could currently buy him this month I’m barely hanging on - Digital Extremes has announced its next anticipated Prime Form for Warframe. Starting... | Read more »
If you can find it and fit through the d...
The holy trinity of amazing company names have come together, to release their equally amazing and adorable mobile game, Hamster Inn. Published by HyperBeard Games, and co-developed by Mum Not Proud and Little Sasquatch Studios, it's time to... | Read more »
Amikin Survival opens for pre-orders on...
Join me on the wonderful trip down the inspiration rabbit hole; much as Palworld seemingly “borrowed” many aspects from the hit Pokemon franchise, it is time for the heavily armed animal survival to also spawn some illegitimate children as Helio... | Read more »
PUBG Mobile teams up with global phenome...
Since launching in 2019, SpyxFamily has exploded to damn near catastrophic popularity, so it was only a matter of time before a mobile game snapped up a collaboration. Enter PUBG Mobile. Until May 12th, players will be able to collect a host of... | Read more »
Embark into the frozen tundra of certain...
Chucklefish, developers of hit action-adventure sandbox game Starbound and owner of one of the cutest logos in gaming, has released their roguelike deck-builder Wildfrost. Created alongside developers Gaziter and Deadpan Games, Wildfrost will... | Read more »
MoreFun Studios has announced Season 4,...
Tension has escalated in the ever-volatile world of Arena Breakout, as your old pal Randall Fisher and bosses Fred and Perrero continue to lob insults and explosives at each other, bringing us to a new phase of warfare. Season 4, Into The Fog of... | Read more »
Top 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 »
Marvel Future Fight celebrates nine year...
Announced alongside an advertising image I can only assume was aimed squarely at myself with the prominent Deadpool and Odin featured on it, Netmarble has revealed their celebrations for the 9th anniversary of Marvel Future Fight. The Countdown... | Read more »

Price Scanner via MacPrices.net

Every model of Apple’s 13-inch M3 MacBook Air...
Best Buy has Apple 13″ MacBook Airs with M3 CPUs in stock and on sale today for $100 off MSRP. Prices start at $999. Their prices are the lowest currently available for new 13″ M3 MacBook Airs among... Read more
Sunday Sale: Apple iPad Magic Keyboards for 1...
Walmart has Apple Magic Keyboards for 12.9″ iPad Pros, in Black, on sale for $150 off MSRP on their online store. Sale price for online orders only, in-store price may vary. Order online and choose... Read more
Apple Watch Ultra 2 now available at Apple fo...
Apple has, for the first time, begun offering Certified Refurbished Apple Watch Ultra 2 models in their online store for $679, or $120 off MSRP. Each Watch includes Apple’s standard one-year warranty... Read more
AT&T has the iPhone 14 on sale for only $...
AT&T has the 128GB Apple iPhone 14 available for only $5.99 per month for new and existing customers when you activate unlimited service and use AT&T’s 36 month installment plan. The fine... Read more
Amazon is offering a $100 discount on every M...
Amazon is offering a $100 instant discount on each configuration of Apple’s new 13″ M3 MacBook Air, in Midnight, this weekend. These are the lowest prices currently available for new 13″ M3 MacBook... Read more
You can save $300-$480 on a 14-inch M3 Pro/Ma...
Apple has 14″ M3 Pro and M3 Max MacBook Pros in stock today and available, Certified Refurbished, starting at $1699 and ranging up to $480 off MSRP. Each model features a new outer case, shipping is... Read more
24-inch M1 iMacs available at Apple starting...
Apple has clearance M1 iMacs available in their Certified Refurbished store starting at $1049 and ranging up to $300 off original MSRP. Each iMac is in like-new condition and comes with Apple’s... Read more
Walmart continues to offer $699 13-inch M1 Ma...
Walmart continues to offer new Apple 13″ M1 MacBook Airs (8GB RAM, 256GB SSD) online for $699, $300 off original MSRP, in Space Gray, Silver, and Gold colors. These are new MacBook for sale by... Read more
B&H has 13-inch M2 MacBook Airs with 16GB...
B&H Photo has 13″ MacBook Airs with M2 CPUs, 16GB of memory, and 256GB of storage in stock and on sale for $1099, $100 off Apple’s MSRP for this configuration. Free 1-2 day delivery is available... Read more
14-inch M3 MacBook Pro with 16GB of RAM avail...
Apple has the 14″ M3 MacBook Pro with 16GB of RAM and 1TB of storage, Certified Refurbished, available for $300 off MSRP. Each MacBook Pro features a new outer case, shipping is free, and an Apple 1-... Read more

Jobs Board

*Apple* Systems Administrator - JAMF - Activ...
…**Public Trust/Other Required:** None **Job Family:** Systems Administration **Skills:** Apple Platforms,Computer Servers,Jamf Pro **Experience:** 3 + years of Read more
IT Systems Engineer ( *Apple* Platforms) - S...
IT Systems Engineer ( Apple Platforms) at SpaceX Hawthorne, CA SpaceX was founded under the belief that a future where humanity is out exploring the stars is Read more
Nurse Anesthetist - *Apple* Hill Surgery Ce...
Nurse Anesthetist - Apple Hill Surgery Center Location: WellSpan Medical Group, York, PA Schedule: Full Time Sign-On Bonus Eligible Remote/Hybrid Regular Apply Now Read more
Housekeeper, *Apple* Valley Village - Cassi...
Apple Valley Village Health Care Center, a senior care campus, is hiring a Part-Time Housekeeper to join our team! We will train you for this position! In this role, Read more
Sublease Associate Optometrist- *Apple* Val...
Sublease Associate Optometrist- Apple Valley, CA- Target Optical Date: Apr 20, 2024 Brand: Target Optical Location: Apple Valley, CA, US, 92307 **Requisition Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.