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

Firefox 37.0 - Fast, safe Web browser. (...
Firefox offers a fast, safe Web browsing experience. Browse quickly, securely, and effortlessly. With its industry-leading features, Firefox is the choice of Web development professionals and casual... Read more
Arq 4.11 - Online backup to Google Drive...
Arq is super-easy online backup for the Mac. Back up to your own Google Drive storage (15GB free storage), your own Amazon Glacier ($.01/GB per month storage) or S3, or any SFTP server. Arq backs up... Read more
MacFamilyTree 7.3.4 - Create and explore...
MacFamilyTree gives genealogy a facelift: it's modern, interactive, incredibly fast, and easy to use. We're convinced that generations of chroniclers would have loved to trade in their genealogy... Read more
Yummy FTP 1.10.2 - FTP/SFTP/FTPS client...
Yummy FTP is an FTP + SFTP + FTPS file transfer client which focuses on speed, reliability and productivity. Whether you need to transfer a few files or a few thousand, schedule automatic backups, or... Read more
VueScan 9.5.08 - Scanner software with a...
VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more
Iridient Developer 3.0.1 - Powerful imag...
Iridient Developer (was RAW Developer) is a powerful image conversion application designed specifically for OS X. Iridient Developer gives advanced photographers total control over every aspect of... Read more
Air Video Server HD 2.1.0 - Stream video...
Air Video Server HD streams videos instantly from your computer on your iPhone, iPad, iPod touch or Apple TV. No need to worry about converting or transferring files. We took everything that was... Read more
Duplicate Annihilator 5.7.5 - Find and d...
Duplicate Annihilator takes on the time-consuming task of comparing the images in your iPhoto library using effective algorithms to make sure that no duplicate escapes. Duplicate Annihilator... Read more
BusyContacts 1.0.2 - Fast, efficient con...
BusyContacts is a contact manager for OS X that makes creating, finding, and managing contacts faster and more efficient. It brings to contact management the same power, flexibility, and sharing... Read more
Capture One Pro 8.2.0.82 - RAW workflow...
Capture One Pro 8 is a professional RAW converter offering you ultimate image quality with accurate colors and incredible detail from more than 300 high-end cameras -- straight out of the box. It... Read more

2K Announces WWE 2K, Mobile's First...
It seems like this month has been pretty big for wrestling. First Wrestlemania, then 2K has announces that they're releasing  WWE 2K for iOS. It's a simulation-based WWE game where you'll get to play with several WWE superstars such as John Cena, ... | Read more »
How the Apple Watch Could Change the Fac...
The Apple Watch is still a ways out, but my previous musings on the wearable’s various features got me thinking: what might it be like a year after launch? Two years? Five years? What if it becomes a symbiotic part of the iOS framework to the point... | Read more »
Pie In The Sky: A Pizza Odyssey (Games)
Pie In The Sky: A Pizza Odyssey 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: A game about delivering pizza. In space. | Read more »
Chosen Gives Hopeful Singers, Songwriter...
If YouTube videos and reality TV shows like The Voice have taught us one thing, it’s that there are a lot of people out there who are anxious to show the world their talents. And if they’ve taught us a second thing, it’s that there’s an almost... | Read more »
Android's Popular OfficeSuite Now A...
Once only available for Android devices, OfficeSuite has finally landed on the app store. The Mobile Systems app lets you view, edit, create, and share Word, Excel, and PowerPoint documents as well as convert them to/from PDFs. It's touted as being... | Read more »
Warhammer: Arcane Magic is Coming Soon,...
Turbo Tape Games has announced that they're joining forces with Games Workshop to bring the turn-based strategy board game, Warhammer: Arcane Magic, to life on the iOS. | Read more »
Fast & Furious: Legacy's Creati...
| Read more »
N-Fusion and 505's Ember is Totally...
| Read more »
These are All the Apple Watch Apps and G...
The Apple Watch is less than a month from hitting store shelves, and once you get your hands on it you're probably going to want some apps and games to install. Fear not! We've compiled a list of all the Apple Watch apps and games we've been able to... | Read more »
Appy to Have Known You - Lee Hamlet Look...
Being at 148Apps these past 2 years has been an awesome experience that has taught me a great deal, and working with such a great team has been a privilege. Thank you to Rob Rich, and to both Rob LeFebvre and Jeff Scott before him, for helping me... | Read more »

Price Scanner via MacPrices.net

13-inch 2.4GHz Retina MacBook Pro available f...
MacMall has the 2013 13″ 2.4GHz/128GB Retina MacBook Pro available for $949.99 for a limited time. Shipping is free. Their price is $350 off original MSRP, and it’s the only sub-$1000 new Retina... Read more
Adobe Brings Powerful Layout-Design Capabilit...
Adobe today announced the availability of Adobe Comp CC, a free iPad app that enables rapid creation of layout concepts for mobile, Web and print projects. With Comp CC, designers can rough out and... Read more
13-inch 2.6GHz/256GB Retina MacBook Pro avail...
Best Buy has clearance 2014 13″ 2.6GHz/256GB Retina MacBook Pros available for $1199.99 including free shipping. Their price is $300 off original MSRP, and it’s the lowest price for this model.... Read more
Updated Mac Price Trackers
We’ve updated our Mac Price Trackers with the latest information on prices, bundles, and availability on systems from Apple’s authorized internet/catalog resellers: - 15″ MacBook Pros - 13″ MacBook... Read more
21-inch 1.4GHz iMac on sale for $999, save $1...
Best Buy has the 21″ 1.4GHz iMac on sale for $999.99 on their online store. Choose free shipping or free local store pick up. Price is for online orders only, in-store prices may vary. Their price is... Read more
2.6GHz Mac mini on sale for $649, save $50
Amazon has the 2.6GHz Mac mini on sale for $649.99 including free shipping. Their price is $50 off MSRP, and it’s the lowest price available for this model. Read more
Textkraft Professional 3.2 Powerful iPad Text...
Finally it’s springtime, at least theoretically in my neck of the woods, where we’re still navigating canyons between towering snowbanks with temperatures well below freezing in winter weather that... Read more
Apple offering refurbished 27-inch 5K iMacs f...
The Apple Store is offering Apple Certified Refurbished 27″ 3.5GHz 5K iMacs for $2119 including free shipping. Their price is $380 off the price of new models, and it’s the lowest price available for... Read more
16GB iPad mini on sale for $199, save $50
Walmart has 16GB iPad minis (1st generation) available for $199.99 on their online store, including free shipping. Their price is $50 off MSRP. Online orders only. Read more
New 128GB MacBook Airs on sale for $50 off MS...
 B&H Photo has 128GB 11″ and 13″ 2015 MacBook Airs on sale today for $50 off MSRP including free shipping plus NY sales tax only: - 11″ 1.6GHz/128GB MacBook Air (Model #MJVM2LL/A): $849 $50 off... Read more

Jobs Board

DevOps Software Engineer - *Apple* Pay, iOS...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
Sr. Technical Services Consultant, *Apple*...
**Job Summary** Apple Professional Services (APS) has an opening for a senior technical position that contributes to Apple 's efforts for strategic and transactional Read more
Lead *Apple* Solutions Consultant - Retail...
**Job Summary** Job Summary The Lead ASC is an Apple employee who serves as the Apple business manager and influencer in a hyper-business critical Reseller's store Read more
*Apple* Pay - Site Reliability Engineer - Ap...
**Job Summary** Imagine what you could do here. At Apple , great ideas have a way of becoming great products, services, and customer experiences very quickly. Bring Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.