Strategies & Insights

App Quest

Posted: June 6, 2009 by
Ron Romanik

iPhone users realize they have an App Store addiction problem when they discover that the iPhone only displays nine "pages" of apps. That is 144 apps, not including the four "fixed" programs (Phone, Mail, Safari web browser, and iPod). Users can download more, but those extra apps will not display until existing apps are deleted.

The iPhone 3G comes out of the box with 14 apps on top of the four fixed programs. These 14 are not deletable either, so the total number of downloaded apps that can fit on the iPhone is 144 minus 14, or 132. That number shrinks in impressiveness when one realizes that there are now over 30,000 apps available on the App Store. Browsing the App Store through the iPhone or through iTunes can become a frustrating experience these days, as searches can bring up a daunting number of "related" apps and user reviews can be unreliable indicators of app quality.

In the unique retail environment of the App Store, a well-designed app icon—the app's "package"—can make or break the critical first moment of truth. The app icon also carries a number of functions and objectives that physical package design carries. Icons of all sorts are appearing on packages and products to communicate benefits of products, but when the icon on a handheld device is the only package, it must carry a heavy load.

Quality on the "shelf"

An iPhone app's icon and interface are packages for the service the app provides. The icon should grab attention on the App Store, should present the quality of the app's execution, and—once installed—should be easy to find when the user is searching for it. Like any package, the icon represents a brand. For established brands such as social websites, a portion, such as a single letter, of the website's logo, may best express the brand. But for apps without a brand history to rely on, being attractive, elegant, informative, and appropriate is important to increase the potential app buyer's confidence that they will not be wasting their time or money installing the app.

Nicolas Thomsen, icon designer at apporacle.com, explains: "I think that the parallel between 'normal' packaging design and iPhone icons is really interesting since they have a lot in common. An icon should stand from the icons in the given category. Often users browse apps by just looking at the icon, and decide what apps they want to take a closer look at." Thomsen goes on to explain that jaded App Store users develop what he calls a "mental barricade" that acts as an efficient filter when browsing.

Gedeon Maheux, principal of The Iconfactory, agrees that consumers filter either consciously or subconsciously. "They think if the icon is second-rate, then the app is probably second-rate," he says. Maheux also believes strongly in category exploration so that your app icon design stands out and is not lost in the shuffle.

On the App Store, the developer has to rely more or less completely on the icon. Wolfgang Bartelme, principal of Bartelme Design in Graz, Austria, knows that the icon has to catch the user's attention and to convince him that it is worth "investing" one more click to navigate to the Info section. "It also has to convey the main purpose or at least category of the app," explains Bartelme. "Is it a game, a GPS app, a tip calculator, currency converter etc. And, last but not least, it has to be visually appealing, of course."

David Brier, principal of DBD International, believes that an icon should be immediately identifiable but in some way that is distinct, like any brand. "Its goal should be immediate identification, which would include the use of color and shape to help achieve that goal," Brier explains. "However, many icons and contemporary logos use sans serif to 'be contemporary,' which—with everyone doing very much the same thing—leads a brand into the abyss of 'sameness.'"

Kevin Anderson, icon designer at icondesign.dk, explains that a good first impression and a design that makes the application memorable are invaluable. "Studies have shown that most iPhone owners buy applications only by looking at the application icon on the App Store," says Anderson. "If the icon looks professional and vibrant, people tend to buy the application."

J. Duncan Berry, Ph.D., founder of Applied Iconology, ranks the goals of effective icon design in terms of three stages of emotional importance. "I would have to say that the primary goal an app icon should achieve is surprise." Berry says. "The viewer should quickly ask himself or herself: 'Wow…what does THAT one do?!" Berry goes on to say the next emotional objective would be to activate interest, as in "I want to know more." Finally, the app icon should induce a sense of gratification for connecting the surprising and interesting image appropriately. "In short, the goals should work to give the user a sense of affluence—What's that? It's interesting. I like it—a very positive, self-fulfilling emotional script," says Berry.

However, there should not be a disconnect between the icon and the app interface. Often, non-designer programmers will ask designers to create a fun and playful icon when the app function is serious, which is not advisable. "The icon is just an extension of your software," says Maheux. "You want to reinforce that brand."

Thomsen explains that everybody wants their icon to stand out, and new ways to push the envelope keep appearing, such as the current trend of three-dimensional imagery. "It works now, but soon it will be crowded with such icons," Thomsen predicts. "Then we will have to think of something new. You always have to try to be one step ahead of the rest.

Thomsen's Shoes icon is for an app made for girls to give them information about shoes and shoe fashion. "A pink shoe box with high-heeled shoes icon shows everything about the app in a nice way," Thomsen says. "And it shows it in a way that speaks to the target audience." The icon is unusual in that it has a 3D box, or frame, that "contains" something.

Every retail package design should communicate the type of product inside instantly and intuitively. It's no different for the app icon packages, which should represent the primary function of the app. Berry translates a common retail idiom to the app icon: "The icon should physically embody an aspect of the performance or benefit so it can be communicated twice the distance (or four feet) the device is usually held from the eye."

Jeff Scott, founder of app news site 148Apps.com, explains that in the very small space given, the icon should convey something that is at the core of the app's function. "But I also think that a well designed icon, like a well tailored suit, should give a good first impression," says Scott.

Sebastiaan de With, founder of Cocoia (www.cocoia.com) in the Netherlands, explains that people often forget that these complex little illustrations serve important functions. "When icons were born on the computer, they were strictly utilitarian," says de With. "They gave a visual clue about what the program was, and what behavior a computer user could expect from it." de With explains that "recognizability" has several aspects—communicating a unique brand, the purpose of the app, and the perceived value therein.

Maheux explains how helped brand the popular twitter website. The Iconfactory developed the very successful Twitterific app early in the App Store boom, before twitter's minimal website had any graphic elements beside its logo. Twitterific's 3D bluebird app icon became so recognizable that, subsequently, twitter.com adopted a bluebird variant, named Ollie, commonly seen carrying a "Follow Me" banner in its beak. "Everyone now knows that a bluebird means twitter," Maheux muses.

How much detail?

Bartelme believes that icon recognition and function recognition increase as design details decrease. He explains that when creating the Parablox icon, the most important goal was to show that it's some sort of breakout game, and that it was all about controlling a bouncing ball. "I added speed lines to convey movement," says Bartelme. "So just having the two components—ball and bricks—makes the icon quite simple and easy to recognize, while definitely conveying the purpose and nature of the app."

Maheux agrees, saying, "Our theory is always: Simpler is better." If a designer cannot communicate function with just one concept, then he or she is focusing on the wrong concept to communicate. The communication is not a brand, but a function. When designing icons, the creator should ask: "What is the primary, or most important, function?"

Applied Iconology's Berry points out the reality of optical recognition limitations. "Quite simply, the more detail, the more cortical effort is required to perceive, recognize, and process the offering," Berry says. "Semiotically speaking, in line with Mies van der Rohe famous dictum: 'Less is more.'"

de With believes that the perfect balance is often achieved by taking away all the design elements you can while maintaining the inherent beauty of the concept that is the basis of the icon design. He points to the Weather icon on the iPhone (on iPhone home screen on page 12) as a great example of elegant simplicity. "It has a beautifully designed little sun and temperature on a blue background," says de With. "As a result, the orange sun really pops out, and is quickly recognizable as a weather application, yet it maintains a very polished appearance."

The Iconfactory's icon for Scrumptious, a soon-to-be-released recipe management app, has an illustrated realism that is not often seen in icons this small. The apple pie illustration (shown on page 14) is intended to create appetite appeal. The polish of a well-executed icon is a result of a refined design sensibility. "If you don't put in a lot of detail, the icons don't look professional—don't look 'finished,'" says Maheux.

Icon as logotype

A small percentage of apps are represented by a single letter, a common ploy by well-established brands. Good examples are Google with a small "g" and the small "f" of the facebook logo. Brier admires the smart simplicity of the New York Times app in using the ornate, iconic capital "T" that is unmistakably part of The New York Times' logo.

de With explains that now icons often serve the same purpose as logotypes—they identify something's values, merits, and emotion. "In an environment like the App Store, where the purpose of applications is explicitly made clear through categories and information pages, icons are more like logotypes than ever," de With says. "You often see icons making a huge difference when people scan pages full of say, to-do list managers." Most importantly, de With thinks, a well-designed app icon shows the amount of polish and "nativity" relative to the very well-designed environment of software designed by Apple.

At first, the glossy "shine" that one notices on many app icons was added by Apple when a programmer uploaded his or her application icon to the App Store. It is now an option the uploader can turn off. "I think the reason apple added it as a standard is that most programmers are no Photoshop artists," says Anderson. "Without the reflection, most icons used today would look very dull." Anderson definitely avoids this convention, and his Measures app icon has its own shine, with a different shape to the edge, and only reflecting in the "display" area of the icon.

The more stylized an icon becomes, explains de With, the more it stands out against the "photorealistically" designed icons on the iPhone after downloading. "As a designer, I prefer balancing the gloss into the design," says de With. "A 'one-size-fits-all' graphic rarely fits all, and being able to balance every detail of the design is very important to me."

Another obvious app convention is the rounded-corner square shape, which has been showing up in other software and on package designs in several categories. Apple's design leadership is difficult to underestimate, as passionate designers are inspired to match and exceed expectations of intuitive and attractive design. "Apple's influence is everywhere and it will undoubtedly continue," Brier concludes.