The Colorful History of the Modern Icon – Part 2

The 20 year history of mobile icon design is relatively young in comparison to desktop icon design. In this brief time, mobile icons have evolved from visual representations of common tasks to critical interface and branding elements. Here is a  brief history of the mobile smartphone icon and some thoughts on how understanding its history can give us insights into the future of operating systems and interfaces.

Beyond Desktops

Similar to the story of the desktop icon, the mobile icon also has a colorful and varied past. For the first several years (pre-Smartphone Era), mobile icons had two things in common across all phones; they were extremely small (lacking much detail) and they could only use a limited range of colors. It wasn’t until cameras were placed into phones that a wide range of colors was needed. This expansion of the operating system showed itself instantly in the quality of the icon design.

Several phone manufacturers took advantage of this new environment and introduced animated icons. These animations were sometimes vital to explaining a complex task on a screen that might not have the room for a long text explanation. One of the earlier Nokia flip phones used an envelope flying into a mailbox to indicate new messages, while still keeping the small screen relatively clutter free.

01-RIM.jpg

Research in Motion’s BlackBerry devices advanced the visual language of mobile icons even further by expanding the functions of the device to include email and Web browsing along with other attributes to their phones. These complex tasks within the phone required detailed icons to explain their function. For several years, BlackBerry devices were the center of mobile operating system Graphical User Interface (GUI) advancement.

But nothing lasts forever in the digital world and Apple shifted the design of icons in a new direction with the introduction of the iOS platform, introduced on the touchscreen iPhone. The rounded box containers (sometimes called “chiclets”) of iOS icons immediately distinguished the phone from its competitors.

Beyond aesthetics, the new shape functionally met a unique need of the device – it had to be touch-friendly. The shape of the rounded box was intelligently designed at a slightly larger than minimum touch size of an index finger. The space around each icon was set wider to give adequate room and avoid missed taps in a small area.

As an added benefit, these iOS icons also solved a long time problem within mobile operating system icon sets, lack of uniformity. With Apple, all icons within the operating system would have the same basic shape and be distinguished by the contents within this shape. The mobile design and development community quickly adopted this new visual language, called iOS Mobile Design.

As more mobile competitors adopted the larger screen sizes and non-tactile keyboards, those operating systems also evolved their icons in a similar fashion. Like the desktop icons before, competitors created shapes that matched their brand and device experience. This diversity is now evident across the mobile smartphone landscape. Android icons are visually unique from BlackBerry icons, which are different than Windows icons.

Past Is Prelude

So what does studying the history of desktop icons and now mobile icons teach us about where the modern operating system might be heading? If you compare the latest releases of Windows and Apple desktop operating systems with those same company’s mobile operating systems, an interesting trend emerges.

With Windows, they are very forthright on their attempts to merge both operating systems into a single platform. Windows 8 is Microsoft’s latest attempt at making a single operating system that meets the needs of a wide range of devices (desktop computers, tablets, and smartphones).

Apple has been less vocal in their plans, but that doesn’t mean that it is not being worked on at the Apple campus. Comparing the latest release of iOS (version 6 to be launched summer of 2012) and the latest desktop release, OSX Mountain Lion (due to be released summer 2012), similar applications and icons can be found in both environments. Whether Apple is planning to merge these two operating systems, like Microsoft, is unclear. But if they were planning this, creating a unified icon language and shared applications would be high up on the list of things to do.

Other mobile brands, like Google (Android) and Research in Motion (BlackBerry) have also made visual moves to expand what their mobile operating systems are capable of. The BlackBerry PlayBook tablet shed the visual language of the BlackBerry operating system and is creating a language unique to the device. Google, conversely, expanded the Android visual language to suit a wider range of devices, while still maintaining the visual consistency of the original smartphone operating system.

As new technologies emerge and consumer behaviors evolve, mobile, tablet and desktop operating systems must also evolve. At the forefront of this evolution is the icon. Once, just a visual metaphor for a simple task, now a critical interface tool and brand identifier.

People Buy the App Icon, Not Just the App

You and your team worked tirelessly for over six months to bring your mobile app to life. Long nights of coding, hours of design, brainstorming, meetings to refine your vision, and page after page of wireframe revisions have finally ended. You are now ready to take that final step and submit your app to the online app store.

But have you done everything you can to make sure your app will be a success? If you haven’t carefully considered how the design of your app icon plays a role in communicating your app to the consumer, you are putting your app downloads at risk.

Very few consumers are connoisseurs, although we all think we are
Let’s take a step back and observe the online mobile app market and how it appears to the consumer. It looks and functions like a grocery store with different sections and organized rows of products lining the shelves, prices all marked at some value ending in 99 cents. Some products are packaged in bright colors; some have stickers that scream “FREE” or “NEW”. They are all trying to compete for your attention and, ultimately, your transaction.

In a brick and mortar store, looking for a bottle of wine, you witness this visual enticement en masse. Each wine label is trying to differentiate itself from its neighbor. Some showcase beautiful paintings or cute animals, others feature scenic French countryside and elegant typography, or the popular and obvious, grapes on a vine.

In a 2003 paper, People Buy the Wine Label, Not the Wine. Don’t They?, Ortrun Reidick concludes that consumers are highly influenced by package design as an isolated element, but that many external and internal factors—such as culture, time and motivation—are often contributors to the final product choice.

With the exception of “connoisseurs,” most consumers are drawn to visuals within the packaging that reinforce their preconceptions about the product. If the consumer is looking for a wine to impress important guests, the wine label with the chateau may have more impact than the wine label with the children playing.

This same behavior is happening in online app stores. As consumers, we migrate towards visually appealing imagery over explanatory text, and to some extent, we even weigh this factor higher than price. Like it or not, we are visual shoppers offline and online.

More than just a pretty digital face
App icons play the critical role of introducing the consumer to the app, acting in a similar manner to traditional product packaging. An app icon that misrepresents or ignores the consumer has a lower chance of enticing clicks and ultimately transactions. An app icon that speaks coherently and honestly to consumers helps to reinforce the app and the brand.

Once the download has occurred and the app is on a mobile device, the app icon takes on the additional role of brand and product reinforcement. A well-designed icon does more than look pretty on a mobile device, it communicates the brand promise, what the app does, and the level of quality the consumer should expect.

Just as in creating a valued mobile app, there are no shortcuts in creating great mobile app icons. Apple’s iOS suggests these human interface guidelines:

  1. For the best results, enlist the help of a professional graphic designer. An experienced graphic designer can help you develop an overall visual style for your app and apply that style to all the icons and images in it.
  2. Use universal imagery that people will easily recognize. Avoid focusing on a secondary or obscure aspect of an element.
  3. Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Try to use a single object that expresses the essence of your app.


Quality in equals quality out
You wouldn’t submit your mobile app without spellchecking copy, testing the functionality on a device, or choosing a name. How you treat the design and concept of your app icon will go a long way to communicating your brand and app story to consumers, ultimately contributing to the overall success of your product.

For further reading on mobile interface guidelines, please read the following:

Communication Is in the Details

Each day, millions of people log in to their favorite online app stores, looking for the next great app to enhance their mobile device or tablet experience. As a customer, you are bombarded with an endless sea of app icons, each clamoring for your attention, interest, and ultimately, a place within your device. There are literally millions of “micro-conversations” and sales pitches in a typical day.

With so much competition and clutter, how does a great app icon design engage in conversation with a potential customer?

Engage in the Conversation

As an icon designer, I envision how these interactions would exist in the real world, with the icon playing the part of the salesperson, informing the passerby of the amazing attributes of the product and how they can own this “must have” app for a great, low price.

I imagine the conversation going something like this.

Customer: I am looking for a top-quality music app.

App Icon: Music is my specialty, and I am very professionally made.

Customer: I don’t know, I have limited space on my phone and I only want the best apps.

App Icon: That’s me, top quality—from my groundbreaking interface to the love and attention put into my icon. My developers spared no detail or expense. You won’t be disappointed.

Customer: I’m listening, tell me more.

App Icon: Did I mention that I am affiliated with a brand you trust? I play well with other apps in your phone and if you love other products by my developers, you are guaranteed to love me. Plus, I won’t cost you an arm and a leg. Download me and let’s have some fun.

(I used music apps as an example, but this conversation can work for other genres.)

Earn the Customer’s Trust

Now that conversation might sound dramatic, but it’s the same conversation we engage in every time we shop for a new app. So as customers, what criteria do we use to distinguish the best from the rest?

The answer is relatively simple, it’s all about trust. Customers online have the same sensibilities that customers in the real world have. They look for an app that will serve their needs, one that looks professional (i.e., reliable) and is a product worth the price tag.

Invest in the Details

But what about salesmanship? Do the most beautiful icons attract the most customers, or is there a more subtle and nuanced dialogue happening?

As it turns out, it’s a combination of both: beauty and brains. The apps that do the best are often the ones that catch our eye but also answer our series of complex questions. Customers migrate toward quality imagery but still require an explanatory element—the artwork—to make the final sale. For example; our mythical music app icon can’t just look amazing and knock our socks off with aesthetics; it also needs to assuage our fears of what we will get once we download the app. The differences can be subtle, and the smallest details matter. Simple choices like placing a banner that says “Free” over the icon can either make your app look like a great deal or make your app look cheap. Each icon must take into account the audience it is speaking to, just like an effective salesperson needs to know his or her potential customers and understand what motivates their purchases.

Understand the Customer Journey

Understanding how your customers shop and what motivates a mobile purchase starts with the icon and carries through to the app itself. All too often a great app, designed with quality and care, is left unsold and unnoticed because the app icon makes the wrong first impression. By treating every aspect of your app with the same amount of care and insight, you are making a bold statement about what your app and your brand stand for. By communicating authentically with your app customers, you will better understand them and will earn their trust.

The Colorful History of the Modern Icon

The history of modern icon design dates back to the early 1970s with the introduction of the first Graphical User Interface (GUI), the Xerox Alto. Since then, the icon has evolved into a critical part of the modern computer Operating System (OS). Here is a brief history of the modern desktop computer icon and some thoughts on the future of icon design

The Desktop Icon Evolution

Xerox’s Alto (released in 1973) wasn’t just important for being the first GUI, but it also established a collection of visual metaphors that are still used today. The Alto was designed for office use, so the icons were all office related objects. Icons of folders, documents, printers, and business images, all existed within this GUI. Sadly, Xerox was slow to realize the potential of their new technology breakthrough and abandoned the Alto for a more traditional approach.

In 1984, Apple released the Lisa, a GUI operating system heavily influenced by the advancements of the Alto a decade before. The combination of the very graphic-intensive processors and icon based GUI, popularized the Apple brand and introduced a large audience to this type of computing.

Amiga, Commodore, Atari, Windows, and others would emulate the visual language metaphors of the Apple OS, vaulting icons from aesthetic elements to fundamental user behavior tools.

Throughout the 90s, major computer companies took the design of their desktops icons very seriously, using icons within their operating systems as a way of distinguishing themselves from their competitors. Icons such as the Recycle Bin (Windows) and the Trash Can (Apple) became more than just functional elements, they were branding elements.

In 2001, Apple drastically changed their operating system look and feel with the launch of Mac OS X. Icons were designed to be larger (up to 256 pixels), and could utilize the better resolution and processing power of the Mac.

Not wanting be outdone, Windows also revamped their operating system and released Windows XP the same year. The isometric view of the XP icons was a contrast to Apple’s straight on view for their Mac OS X icons.

As processors, applications, and monitors became able to handle larger amounts of colors, icon design became more recognizable to the general public. Reviews of the latest operating systems were now including sections on the quality of the folder icons or complaining about a beloved icon from a previous version that had been updated. Message boards were filled with complaints and cheers when Apple redesigned the iTunes icon several years ago.

The modern desktop icon is now highly designed, uses lighting, depth, and perspective in a way none of its predecessors could have done.

Bigger is Better

High definition (or Retina) displays are now becoming commonplace and icons will once again have to evolve to meet these new needs. The newest documentation from Apple on its Mac OS X 10.8 (or Mountain Lion) suggests a maximum size of 1024 pixels for desktop icons and hi-res versions of smaller sizes. This is a far cry from the 16 pixels in black & grey of the Apple Lisa (64x larger).

This is very good news for Icon Designers and Brand Marketers. Larger sizes allow for greater levels of detail, and greater opportunities for the artwork to be understood clearly by the consumer, yielding a stronger consumer experience and reinforcing the brand messaging.

It’s All About Communication

The future of icons is not limited to desktops and mobile devices. Icons show up in all sorts of places. ATMs, TVs/connected devices, video game systems, kiosks, etc. all use icons extensively to communicate with consumers. It’s a safe bet that if you need to communicate an idea in a quick and relevant manner, the icon is the right tool for the job.