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

The beginner's guide to Warbits
Warbits is a turn-based strategy that's clearly inspired by Nintendo's Advance Wars series. Since turn-based strategy games can be kind of tricky to dive into, see below for a few tips to help you in the beginning. Positioning is crucial [Read... | Read more »
How to upgrade your character in Spellsp...
So you’ve mastered the basics of Spellspire. By which I mean you’ve realised it’s all about spelling things in a spire. What next? Well you’re going to need to figure out how to toughen up your character. It’s all well and good being able to spell... | Read more »
5 slither.io mash-ups we'd love to...
If there's one thing that slither.io has proved, it's that the addictive gameplay of Agar.io can be transplanted onto basically anything and it will still be good fun. It wouldn't be surprising if we saw other developers jumping on the bandwagon,... | Read more »
How to navigate the terrain in Sky Charm...
Sky Charms is a whimsical match-'em up adventure that uses creative level design to really ramp up the difficulty. [Read more] | Read more »
Victorious Knight (Games)
Victorious Knight 1.3 Device: iOS Universal Category: Games Price: $1.99, Version: 1.3 (iTunes) Description: New challenges awaits you! Experience fresh RPG experience with a unique combat mechanic, packed with high quality 3D... | Read more »
Agent Gumball - Roguelike Spy Game (Gam...
Agent Gumball - Roguelike Spy Game 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: Someone’s been spying on Gumball. What the what?! Two can play at that game! GO UNDERCOVERSneak past enemy... | Read more »
Runaway Toad (Games)
Runaway Toad 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: It ain’t easy bein’ green! Tap, hold, and swipe to help Toad hop to safety in this gorgeous new action game from the creators of... | Read more »
PsyCard (Games)
PsyCard 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: From the makers och Card City Nights, Progress To 100 and Ittle Dew PSYCARD is a minesweeper-like game set in a cozy cyberpunk... | Read more »
Sago Mini Robot Party (Education)
Sago Mini Robot Party 1.0 Device: iOS Universal Category: Education Price: $2.99, Version: 1.0 (iTunes) Description: -- Children's Technology Review Editor's Choice -- | Read more »
How to get a high score in every level o...
Sky Charms is an adorable match three puzzler that provides a decent challenge thanks to its creative level design. It regularly presents something new, forcing you to think on your feet. [Read more] | Read more »

Price Scanner via MacPrices.net

Apple restocks Certified Refurbished Mac mini...
Apple has restocked Certified Refurbished 2014 Mac minis, with models available starting at $419. Apple’s one-year warranty is included with each mini, and shipping is free: - 1.4GHz Mac mini: $419 $... Read more
15-inch 2.2GHz Retina MacBook Pro on sale for...
Amazon.com has the 15″ 2.2GHz Retina MacBook Pro on sale for $1699.99 including free shipping. Their price is $300 off MSRP, and it’s the lowest price available for this model from any reseller (and... Read more
Apple Beats Microsoft at Own Game; Amazon Pri...
First quarter seasonality combined with an overall disinterested customer base led to an annual decline of 14.7% in worldwide tablet shipments during the first quarter of 2016 (1Q16). Worldwide... Read more
Tablets Had Worst Quarter Since 2012, says St...
The global tablet market began 2016 just as 2015 left off, down. Tablet shipments fell 10% to 46.5 million units during the Q1 2016, according to the new “Preliminary Global Tablet Shipments and... Read more
Clearance 13-inch MacBook Airs, Apple refurbi...
Apple recently dropped prices on certified refurbished 2015 13″ MacBook Airs with 4GB of RAM with models now available starting at $759. An Apple one-year warranty is included with each MacBook, and... Read more
Clearance 12-inch Retina MacBooks, Apple refu...
Apple has dropped prices on Certified Refurbished 2015 12″ Retina MacBooks with models now available starting at $929. Apple will include a standard one-year warranty with each MacBook, and shipping... Read more
Aleratec Releases Mac Software Upgrade for 1...
California based Aleratec Inc., designer, developer and manufacturer of Portable Device Management (PDM) charge/sync products for mobile devices and professional-grade duplicators for hard disk... Read more
Sale! Amazon offers 27-inch iMac, 13-inch 2.9...
Amazon has the 27″ 3.2GHz 5K iMac and the 13″ 3.9GHz Retina MacBook Pro on sale for $300 off MSRP, each including free shipping, for a limited time: - 27″ 3.2GHz/1TB HD 5K iMac (model MK462LL/A): $... Read more
Apple refurbished 13-inch Retina MacBook Pros...
Apple has Certified Refurbished 13″ Retina MacBook Pros available for up to $270 off the cost of new models. An Apple one-year warranty is included with each model, and shipping is free: - 13″ 2.7GHz... Read more
13-inch 2.7GHz/128GB Retina MacBook Pro on sa...
Take $200 off MSRP on the price of a new 13″ 2.7GHz/128GB Retina MacBook Pro (model MF839LL/A) at Amazon. Shipping is free: - 13″ 2.7GHz/128GB Retina MacBook Pro: $1099.99 $200 off MSRP Act now if... Read more

Jobs Board

Restaurant Manager (Neighborhood Captain) - A...
…in every aspect of daily operation. WHY YOU'LL LIKE IT: You'll be the Big Apple . You'll solve problems. You'll get to show your ability to handle the stress and Read more
Automotive Sales Consultant - Apple Ford Linc...
…you. The best candidates are smart, technologically savvy and are customer focused. Apple Ford Lincoln Apple Valley is different, because: $30,000 annual salary Read more
*Apple* Retail - Multiple Positions - Apple,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
*Apple* Solutions Consultant - Apple (United...
# Apple Solutions Consultant Job Number: 48260200 Phoenix, Arizona, United States Posted: Apr. 22, 2016 Weekly Hours: 40.00 **Job Summary** As an Apple Solutions Read more
Restaurant Manager (Neighborhood Captain) - A...
…in every aspect of daily operation. WHY YOU'LL LIKE IT: You'll be the Big Apple . You'll solve problems. You'll get to show your ability to handle the stress and Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.