Top

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

Beautiful Information

Discovering patterns in knowledge spaces

A column by Jonathan Follett
December 18, 2006

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.”

Champion Advertisement
Continue Reading…

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, 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—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?

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

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, 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. 

Principal at GoInvo

Boston, Massachusetts, USA

Jonathan FollettAt GoInvo, a healthcare design and innovation firm, Jon leads the company’s emerging technologies practice, working with clients such as Partners HealthCare, the Personal Genome Project, and Walgreens. Articles in The Atlantic, Forbes, The Huffington Post, and WIRED have featured his work. Jon has written or contributed to half a dozen non-fiction books on design, technology, and popular culture. He was the editor for O’Reilly Media’s Designing for Emerging Technologies, which came out in 2014. One of the first UX books of its kind, the work offers a glimpse into what future interactions and user experiences may be for rapidly developing technologies such as genomics, nano printers, or workforce robotics. Jon’s articles on UX and information design have been translated into Russian, Chinese, Spanish, Polish, and Portuguese. Jon has also coauthored a series of alt-culture books on UFOs and millennial madness and coauthored a science-fiction novel for young readers with New York Times bestselling author Matthew Holm, Marvin and the Moths, which Scholastic published in 2016. Jon holds a Bachelor’s degree in Advertising, with an English Minor, from Boston University.  Read More

Other Columns by Jonathan Follett

Other Articles on Visual Interface Design

New on UXmatters