Jump to content

Using Interface Metaphors to Improve Your iPhone App Design

  joshclark's Photo
Posted Sep 27 2010 01:37 PM

Just as spoken metaphors provide expressive shortcuts in language (your husband is a peach, my computer is a dog, our boss is a monster), graphical interfaces use visual metaphors to quickly explain the software's complex inner workings. When you put a document into a folder on your desktop computer, there is, of course, no actual document, folder, or filesystem hierarchy. What you're really doing is stirring a soup of magnetic fields on your hard drive to represent your data's bits and bytes. The filesystem is a metaphor—a visual shorthand for something that would otherwise be impossible for most of us to understand. Interface metaphors empower mere mortals to make computers go.

Waving off the iPhone's prefab controls to craft your own interface metaphor from scratch gives your app an undeniably unique identity, but it's important to make it understood at a glance. The most intuitive interfaces lean on metaphors that we instantly recognize from day-to-day life. The card decks, spinning dials, push buttons, sliders, and light switches of the iPhone's standard toolkit require no learning; we already know how to use them thanks to our experience with their real-world counterparts. Interface design geeks call these things affordances, visual cues for what you can do with the app and how. The more directly an app's interface borrows from the real world, the more obvious an affordance becomes.

Besides these practical benefits, using an everyday object as an interface metaphor imbues an app with the same associations that folks might have with the real McCoy. A shelf of books, a retro alarm clock, a much-used chessboard, a toy robot—iPhone developers have used all of these objects as custom interface metaphors for their apps, lending their apps the personal connotations of the original. These physical look-alikes are most effortless when the interface is the same size as the gadget that inspired it. When iPhone apps mimic a real-world handheld device, for example, the iPhone actually seems to become that device. When well-executed, using the app is precisely as easy as using the original. Tapworthy apps that take this approach often use realistic sounds and animations to reinforce the illusion that you're using a real-world gizmo. (Gadget clones like these also benefit from the original device's proven ergonomics.)

When apps clone physical objects in both size and appearance, their operation is immediately obvious. Here, PCalc, Guitar Toolkit, and Rowmote create intuitive interfaces by mimicking a calculator, guitar tuner, and Apple remote control.
Attached Image

Other apps depict real-world objects as miniatures, reduced to fit the small screen. This approach can't match the "I can't believe it's not butter" realism of exact-replica interfaces: you're always aware that you're working with a miniature illustration, an abstraction. All the same, when well-done, it's still immediately obvious how these little facsimiles work. By relying on the direct manipulation of miniature chess pieces, air hockey paddles, guitar strings, or other real-world affordances, these apps invite touch and encourage their audiences to explore. Like all miniatures, these interfaces often create a sense of whimsy, and here again, appropriate sound and animation enhance the effect.

From left: Deep Green, Guitar Toolkit, and Nota.
Attached Image

Just be careful not to go too far, or you'll accidentally stray into kitsch. Your interface is there to support the task at hand, not the reverse. Don't become so enamored of your design that you obscure the very information you're trying to convey, an affront that information design guru Edward Tufte calls "the sin of pridefully obvious presentation." When using animation effects, for example, don't let them last too long or distract from the main content. A playful effect might make you smile the first few times, but beware the ones that start to feel precious, then annoying, and then you're filled with Hulk-like rage. Page flips are a warmly personal addition to an ebook or magazine app, for example, as long as they don't slow you down. Animations should occur quickly and effortlessly.

Be biased toward a relentless focus on accomplishing the user's goal with no fuss, but also know that efficiency doesn't always trump style. Some apps manage a toy-like charm that encourages fiddling with the interface in ways that delight and never frustrate. This is a delicate path to follow, but Weightbot and Convertbot, two bestselling apps by the company Tapbots, get this just right. It takes a few seconds longer to enter your info than other apps in the same category, yet working Convertbot's dial, for example, is satisfyingly playful. "Our apps are designed more like a game," explains Tapbots designer Mark Jardine. "Our primary goal for Convertbot wasn't for it to be the most efficient unit conversion app there is. If that's what you are looking for, there are plenty of nice conversion apps that get you from point A to point B in the shortest amount of clicks. Our goal was to make unit conversions fun and enjoyable. Once you get used to it, there's a sense of satisfaction and rhythm to the process." Most iPhone users eventually find themselves distractedly tugging at a list to see it snap back into place again and again—it's the same satisfaction. There's a certain charm to interfaces that encourage absentminded play, part of the very personal nature of the device.

Imagined gadgets brought to life by iPhone apps. From left: Convertbot, Foobi, and Where To?
Attached Image

Other interface metaphors are effective at building a similar connection through the natural affection we have for personal collections. Photos, friends, music, books, even the contents of our kitchen cupboards define who we are and the spaces in which we live. By gathering and displaying this type of intimate info and media with a trophy case's pride of place, an app can flatter the collector inside us while also inviting the browsing behavior triggered by our physical-world collections. Popular and effective metaphors for presenting collections include book shelves, "the big pile of stuff," and the coverflow browsing style popularized by iTunes for browsing album covers. Any of these, when well-executed, can be effective replacements for a traditional table view display while encouraging more browsing and exploration than a plain list might.

Classics and Cookmate use a shelf metaphor to browse books, cooking ingredients, and music
Attached Image

Stanza (left) and iPod (right) present your ebook and music collections using coverflow.
Attached Image

The big pile of stuff: Albums (left) and Mover (right) scatter your belongings across a table top and encourages you to nudge and explore your collection by dragging or flinging items around the screen. Albums is an alternative to iPod, letting you browse and play albums more graphically. Mover collects contacts and photos and lets you share them with nearby iPhone users by flinging them off the table.
Attached Image


Learn more about this topic from Tapworthy.

So you've got an idea for an iPhone app -- along with everyone else on the planet. Set your app apart with elegant design, efficient usability, and a healthy dollop of personality. Tapworthy takes you from concept to polished interface design with plain-spoken principles and a rich collection of visual examples for designing exceptional interfaces for the iPhone and iPod Touch.

See what you'll learn

1 Subscribe

0 Replies