Seeing the World in Symbols: Icons and the Evolving Language of Digital Wayfinding

By Jonathan Follett

Published: December 18, 2006

“Of all the objects that occupy our digital spaces, there are none that capture the imagination so much as icons.”

Of all the objects that occupy our digital spaces, there are none that capture the imagination so much as icons. As symbols, icons can communicate powerfully, be delightful, add to the aesthetic value of software, engage people’s curiosity and playfulness, and encourage experimentation. These symbols are key components of a graphic user interface—mediators between our thoughts and actions, our intentions and accomplishments.

In conjunction with information architecture, icons guide virtual wayfinding and help users to perform specific tasks efficiently. While the term wayfinding typically refers to orienting people in physical space—using graphics, text, signs, and other design elements—it’s useful to examine the use of icons through the lens of digital wayfinding, as a way of generating a fresh perspective on how users perceive and interact with their virtual spaces.

In Steve Caplin’s book Icon Design, Susan Kare, the artist who created the icons for the original Mac desktop and applications said:

“In general, I believe that icons should work a bit like traffic signs; they should convey information without distracting the user, without competing with the data in an application. Ideally, they should suggest something about the functionality. If it is not completely evident, then the function should be easy to remember if the user is told only once.”

The Challenge of Constructing a Universal Language

“The concept of a universal symbolic language—a visual vocabulary that anyone from any culture, any country, and any walk of life can understand—is of the utmost importance when it comes to wayfinding in physical spaces.”

The concept of a universal symbolic language—a visual vocabulary that anyone from any culture, any country, and any walk of life can understand—is of the utmost importance when it comes to wayfinding in physical spaces, especially in environments that play host to people from around the world. Therefore, in 1974, the U.S. Department of Transportation (DOT) worked with designers from the American Institute of Graphic Arts (AIGA) to codify such a universal graphic system for the creation of signage in airports and other transportation facilities with international user groups. The result was a core set of 50 standard symbols.

Unfortunately, when it comes to wayfinding in virtual spaces, we are not nearly so close to such agreement. Free market competition, however, has led to some de facto standards. The shopping cart symbol you’ll find when visiting www.joyo.com—the Amazon Web presence in China—is the same as the one you’ll find on the American and British Amazon sites and most other e-commerce properties. Chinese shoppers may never have used a Western-style shopping cart at a bricks-and-mortar grocery store, but they still know what the symbol means. Similarly, Americans expect that clicking the red octagonal icon on their browser toolbar will prevent an unwanted Web page from loading, as do Filipinos who have never seen that particular kind of Stop sign in the physical world. And 30-somethings expect that clicking a floppy disk icon will save their work, as do teenagers who have never used such physical media to store their data.

While all of these examples illustrate the cross-cultural and cross-generational nature of our developing iconic language, they also demonstrate some of the difficulties inherent in designing symbols for the digital domain, which make standardization a challenge. Unlike the DOT/AIGA symbols for traditional wayfinding, digital icons have no corresponding physical object for a user to locate—no staircase, no bathrooms, and no baggage lockers. Since digital icons have developed their meanings separate from the objects they represent, there is no real-world object that defines its meaning, only the idea of a type of user interaction. So, for every icon we all can agree upon, there are at least as many about which there is no agreement and that, therefore, remain in flux. A perusal of the operating system icons on the digital interface archive GUIdebook reveals the great variety of symbols that we have used to communicate similar concepts and tasks. Over time, in the Windows operating system alone, the symbol representing a user’s address book has changed from a card file to a tabbed card file to an actual address book. In other operating systems, icons representing an address book vary from a phone book to a Rolodex® card to a composition book with an @ sign emblazoned on the cover.

“As more aspects of our lives migrate to digital environments…, it would make sense to deliberately undertake the development of a universal symbolic language for use in that sphere.”

As more aspects of our lives migrate to digital environments—as applications and documents accumulate on our PCs, phones, and PDAs—it would make sense to deliberately undertake the development of a universal symbolic language for use in that sphere. From a wayfinding perspective, this would benefit users, making it far easier for them to switch between platforms and devices. But how could we come to an agreement? What would a framework for icon standardization look like?

In general, standards for the use of icons have not gained the broad adoption that would reinforce their usage. The International Standards Organization (ISO) issued guidelines ISO/IEC 11581, Parts 1-6 on “User System Interfaces and Symbols—Icon Symbols and Functions” and ISO/IEC 13251, “Collection of Graphical Symbols for Office Equipment,” which have gained acceptance as the standard references in the realm of software development. However, they are not common knowledge to many designers who work in the digital space. Some think these standards are unwieldy and unnecessarily restrictive.

Has Digital Wayfinding Lost its Way?

“Interactions with software tools are becoming increasingly sophisticated and are not always easy to translate into visual symbols.”

As software technology advances, users are faced with both the opportunity and the challenge of completing substantially more complex tasks within their virtual spaces. Their interactions with software tools are becoming increasingly sophisticated and are not always easy to translate into visual symbols. Partly because of this increasing complexity and partly as a result of feature bloat, today’s applications sometimes include icons for every task, cluttering our screens and, counterproductively, making it difficult to find a needed icon in the crowd. How did we get here?

The first graphic user interface that became available to a wide audience—the Macintosh® desktop and applications that Apple® and third-party software developers produced in the ’80s—used icons to make people comfortable in their new digital world. The desktop metaphor, replete with its manila file folders and trash cans, saved precious real estate on the Mac’s 9-inch screen and provided a system of visual metaphors that users could understand more quickly than blocks of text.

Over the past twenty years, we have enhanced these digital symbols. The canvas size for operating system icons has increased from 16 x 16 to 128 x 128 and soon to 512 x 512 pixels, which is larger than the dimensions of the original Macintosh computer’s entire screen. But, in the process, we’ve given in to the temptation to make icons more complicated, more detailed, and ultimately, less distinct. Today’s icons are complex, full-color, 3-D, shaded renderings that are unlike the crisp symbols that do an effective job of orienting people in confusing and unfamiliar environments in the real world—symbols like directional arrows, stop signs, the male and female symbols on bathroom doors, and the wheelchair symbol for handicapped access. Additionally, the rapid rate of change in operating systems and applications demands that even the most tech-savvy individuals must relearn their visual cues at intervals. With every facelift or reskinning, the rendering of symbols as simple as the trash can or Print icon changes, slowing down users’ ability to recognize things that should be reflexively familiar.

Today, two decades after their advent, icons unnecessarily clutter the desktops of new computers and the toolbars of applications. Increasingly, rather than performing a user-centered wayfinding function, they instead serve a corporate-centered branding function, with application icons becoming tiny billboards for Microsoft®, Adobe®, and their fellow competitors. We’ve turned our virtual spaces into the visual equivalent of the Vegas strip, but without the fun. If the primary purpose of an icon is to appropriately represent an action and help a person accomplish a task quickly, as this visual clutter increases, icons are increasingly failing at that task.

Personal Digital Geographies

“Perhaps the keys to digital wayfinding lie within the individual user.”

In the introduction to her book You Are Here: Personal Geographies and Other Maps of the Imagination, Katharine Harmon examines the human fascination with mapping: “If I had mapped that landscape, we ask ourselves, what would I have chosen to show, and how would I have shown it? The coded visual language of maps is one we all know, but in making maps of our worlds we each have our own dialect.” If this is true, perhaps the keys to digital wayfinding lie within the individual user.

The dock on my Mac is filled with gorgeous, professionally designed symbols that, because of their similar shapes—usually squares or circles—are hard to distinguish among when I’m hurriedly looking for an application. The icon for Firefox, for instance, has the same color and shape as both Safari and Internet Explorer, making mistaken clicks common. To solve this problem, I have substituted icons that I’ve selected from a custom set—such as an image of an orange cartoon dog with its tail on fire for Firefox. I find that my personalized icons are easier for me to remember, not just because of their different shapes and colors, but just because I chose them. The act of choosing an appropriate icon reinforces my memory of what the icon represents.

John Emerson, a consultant who focuses on design in the public interest, coined the term guerilla wayfinding to describe the act of spray painting a compass rose outside a New York subway to assist disoriented commuters. Emerson was so frustrated by the lack of this basic tool in the subway system that he made a compass stencil available on his blog. My desire to make the icons on my computer easier to use, to replace them with symbols that are more meaningful to me grows out of a similar thought process.

“We should consider allowing as much user customization of symbols as possible.”

We should consider allowing as much user customization of symbols as possible, without breaking the visual bonds that give a user interface its continuity. Operating systems already allow this flexibility when it comes to application, document, and disk icons on the desktop. It would be interesting to see such customization extend into applications, so users could substitute vague or too similar symbols with ones that are more distinctive and meaningful to them. Some word-processing applications have dozen of icons for various page functions in their toolbars—many of which are minutely differing variations of horizontal lines representing text on a page. When faced with a Margins icon that is scarcely different from an Indent icon and perhaps other icons, users could substitute their own symbols—say, a stick of margarine for Margins or a dented car door for Indent. Too corny for a corporate release, perhaps, but infinitely more memorable to me, a user.

As we look at the distributed communities and user-generated creations of today’s digital world—the open-source software many hands have built and the Wikis put together one page at a time and moderated by sometimes chaotic group decision-making—we can observe a model whereby software developers could allow user customization and reap the benefits in future releases of their own products. Imagine an application with malleable icons and an online community in which users and designers could offer up their own customized icons to replace the application’s default icons. The community could easily rank custom icons by download popularity, user satisfaction scoring, and so on, allowing the cream to rise to the top. The software development team would then have at its fingertips a well-tested and well-liked set of icons that they could incorporate into their next release as the new default set of icons.

As designers, it might be difficult for us to open up a platform to such creative chaos, especially when it might very well disrupt the aesthetic continuity we’ve worked so hard to build into our user interfaces. But the alternative—users wandering aimlessly through pretty, but confusing, virtual spaces, finding it difficult to orient themselves and accomplish their tasks—may well be a greater failure of our responsibilities as designers.

13 Comments

This is an excellent overview of how icons have become problematic. The solution may be to just use words instead of developing a universal graphic language for computers or encouraging user customization of icons. Given your illustration that icon understandability is culturally relative anyway, icons have little advantage over words in software internationalization. Highway and airport signs, in contrast, cannot be feasibly changed for the current user’s language. Perhaps we should be using fewer icons and more words. Perhaps icon usage should be limited to a few standard very common concepts with strong physical analogs—for example, Document—or visual products—for example, Bold Font. For relatively abstract concepts like Save, it’s hard to beat a text label that says Save.

First of all, you are right. Like everything designed, icons follow trends. Today, it’s circles and transparency and cool colors.

On the other hand, I can’t imagine my parents would ever change any icon in any place on their computers. They don’t even know it’s possible.

For those of us who professionally work on a day to day basis and know our systems inside out, that’s a whole different story. We know what can be done to customize our systems and we do it—some more, some less.

Seeing all these features MS Word, for instance, ships with, who really needs them all? The occasional user sure doesn’t. She knows how to set fonts, sizes, and colors, and that’s all she wants.

Wonderful contribution. This sums up a portion of the battles I fight on a day-to-day basis.

People with vision impairments are an important percentage of the population that is unfortunately overlooked by digital wayfinding designers. The deutans, protans and tritans of the world fall along the wayside while navigating programs that rely on colorful iconography. For this reason, I applaud the programs contained in the Adobe Creative Suite and others like them. They rely on simple messages, a minimalist color palette, and plenty of contrast. What good is the message if it isn’t delivered properly?

Thank you, Michael, Sascha, and Nick for your kind words and comments.

Michael, I do agree with your contention that carefully chosen words may, in some instances, be a better choice for navigation than a clever icon. However, choosing the right word can be challenging, too. We’re at an interesting stage in the development of icons, in that we’re relearning a lot of the same design lessons that apply elsewhere—namely that simplicity, clarity, and usability matter more than flashiness.

Sascha, I take your point that our parents’ generation is unlikely to modify their icon sets, even if it would help them find applications or tools more quickly. I’d love to see a system that makes this sort of customization an easy task for less savvy computer users. After all, while they may not be the most computer savvy, this group is a rapidly growing audience, especially online.

Nick, thanks for pointing out one of the areas often overlooked when designing for accessibility—accommodating those with color-perception deficiencies. Sometimes, I feel that we can sum up our responsibility as designers similarly to that of a physician’s oath to “first do no harm.” It’s our mission to try not to confuse people, which is often easier said than done.

Super read and enjoyed the references to other icon sites.

Would you say it’s realistically possible to communicate 100% by using icons?

For example, could I have written this comment only using icons?

Nicely done, Jonathan. It’s good to remember the need for clear, concise information design. Too often in the ‘Net heyday, we became enamored of l’art pour l’art, as it were. Though focus on usability and so on has somewhat tempered egregious inside jokes in icon design, we still encounter perplexing approaches. Your article will be in my toolbox to remind me not to go off a visual deep end. As an aside, I’d recommend adding some icons to illustrate your points.

Different cultures have different perspectives on icons and symbols. If we are creating an international GUI, there will be cultural impact on the choice of icons and symbols.

I am working on research regarding this aspect of design.

Please help by filling in this survey form. I will send out a report on this by the end of February 2007.

http://geocities.com/bttyho/Test.htm

Thanks! Betty

Excellent article. I’m currently 1099 for a local company that’s reworking a product. The company owner and I agreed the we would go with pervasive use of text instead of icons for several reasons:

1) Icons are becoming less standard every day, being applied to marginal cases that strip them of their precision and clarity.

2) Terms for computer activities are, mostly, much more precise and well known than icons.

3) We have more horizontal space to spare than vertical, making words fit quite well.

4) It forces us to examine every feature we put in or expose very carefully.

The end result? Our interface tests orders of magnitude easier to learn, and it’s cleaner and simpler looking, and best of all, we were able to strip almost 3/4 of the functionality out, but we managed to increase the flexibility and capability.

Should programs like Photoshop drop their icons? No. But what we learned is that, for non-expert programs—that is, 90% of what’s out there—users prefer, for good reason, text over icons for anything that’s not very common and completely unambiguous. Don’t take it too far, though—we would never consider replacing the upper-right X with Close! There’s a balance for everything, even semiotics.

@Tommy: You just wrote your comment using 100% icons. Except you think of them as words. At the most basic level, a word is a collection of vectors like any icon.

What icons—and words—by themselves, do not have, however, is a grammar. Without a set of rules for the arrangement of icons to create meaning, icon-based communication is not possible.

Asian cultures, for example, have long communicated with icons. Many people have erroneously thought that a written language with thousands of symbols must be universally applicable. But without the grammar, it’s impossible to communicate anything beyond basic concepts.

Great article. I was out nosing around for articles relating to icons and symbolic meaning for a post I’m writing about Web applications and icons. Online applications do not give the user the customization option, so the signs used have got to mean something that’s ideally universal. Furthermore, with the explosion of new Web applications, a lot of the actions are new and unfamiliar to the user, so that presents a problem right off the bat.

Trying to find an iconic visual language that can be universalized when the possible actions are ever expanding is a difficult endeavor, but an increasingly important one.

This was a good read. It is true that icons have been hijacked by businesses on the desktop. It is also true, however, that icons still provide an easier user experience than words alone. If icons are diverse in meaning, then it is simply a set of icons driven by its location for its intended audience. As for crossing audiences, this is where the breakdown occurs.

Very good, but rather too much emphasis on computers, when what I am looking for are universal icons for basic operating instructions. We cannot expect the rest of the world to accept English words as universal instructions. There is a need for an Icon Dictionary—one that is a universal standard with multiple languages—whether that would stretch to the over 6,800 that some quote or be constrained to the more basic would be a problem in itself to determine.

I’m looking for icons that say Maximum and Minimum, Replace the Battery, Wait until the reading is stable, If in need of repair return to, and so on. Otherwise, it’s a twelve-page instruction book just for part of Europe, in a typeface that will need a microscope! Does anyone have any ideas?

Join the Discussion

Asterisks (*) indicate required information.