So your CEO has asked you for the Nth time when he is going to have an iPhone app he can show to his board. It can’t wait any more, so now it’s up to you to bring that app into the world. The challenge: design an experience so great that your app rises above the noise in the iTunes app store. We’ve put together a handful of design tips that we hope will help meet that challenge, enabling the creation of truly useful, usable and desirable iPhone applications.
Setting the stage
The iPhone isn’t just a miniature PC, and the best applications don’t treat it like one. While mobile interfaces do share some traits with their desktop and rich-Internet-application brethren, there are more differences than similarities, driven by form factor and hardware capabilities.
More importantly, mobile device applications weave their way into people’s lives in fundamentally different ways. People don’t set aside time to sit down and “use” their iPhone (except maybe to play Mafia Wars), but are more likely to engage in “snacking,” dipping in and out of applications to relieve micro-boredom or satisfy an immediate (and short-lived) need. One of the best features of any iPhone app will always be that it’s conveniently on a phone in your pocket or purse ready to be used at a moment’s notice – anytime, anywhere.
So with these things in mind, we can dive into our design tips!
1. Don’t require people’s complete attention
Mobile devices in general (including iPhones) are rarely used in a serene environment, free of distractions (think grocery store, bar, or subway). In fact, more often than not, the application itself is the distraction. It’s unrealistic to try to design an app specifically for every location or situation, but as much as possible, design for the attention-deficit.
2. Focus on absolute essentials
Feature bloat and interface overload are the enemies of your application. If the iPhone is the utility belt platform, then design a great single-purpose tool for that belt, rather than a Swiss Army knife. To help figure out what to include and what to cut, talk to your audiences; figure out what they want and need and give it to them, simply.
3. Minimize user choice
It sounds Draconian, but in keeping with tip two above, less is really more. In the 50’s, cognitive psychologist George A. Miller identified that people’s short term memory can hold about seven concepts (or chunks) at once, plus or minus two. This finding came to be known as Miller’s number, and has served as a guiding principle for everything from restaurant menus to web site navigation menus. For a multitasking mobile user in a busy environment, it’s likely that their short-term memory is already engaged. We’ve found that trimming Miller’s number down to four or five choices on a screen is just about right (see example above).
4. Design for the small touch
Things are different on touch-screen (haptic) interfaces, where the input device changes from a pixel-perfect mouse to an imprecise finger. It’s no accident that the home screen “buttons” on an iPhone are about the size of a human index finger (a half-inch square). As buttons shrink, or when thumbs are used, the number of false taps grows quickly. Button size matters, as does placement relative to hand position and other interface elements.
Not only do buttons and targets need to be big and obvious, but because of the nature of the touchscreen, feedback is essential to confirm user actions (e.g., through “pressed” states and/or sounds). And finally there’s multi-touch, which opens up a whole new world of interactions. Primary gestures (tap, flick, pinch and drag) are joined by more complex gestures like double-finger tap or shake. In general, we recommend mapping the shortest, simplest gestures to the most frequent actions. For an ebook reader, for example, tap for page forward is less effort than scrolling. It may seem trivial at first, but after 200 or 300 pages, every tiny simplification helps.
5. Give people a consistent mental model
Simplifying or reducing screen options means that for more content or functionality, you have to chunk larger units of interaction (e.g., an order flow) into multiple, smaller screens. Apple’s iPhone OS uses a unique spatial model within its applications to deal with the small screen size. Transistions between different application screens or states – pull right or left, slide up or down, overlay or underlay – play a crucial role in subtly mapping out to the user “where they are” in the applications. Apps that don’t have a consistent animation model that follows a coherent topology tend to feel flat and disjointed.
6. Stick to “hub-and-tunnel” application flows
Where the application is supporting long, complex or involved tasks we find that a “hub-and-tunnel” model works best. Use a “hub” (e.g., the Chipotle ordering screen) to clearly present important decision points for primary tasks. Once an action is taken (e.g., “Create new order”), provide only a tunnel with the necessary sequential steps to complete it, or the option to cancel back to the hub. When that task is complete, end at the original hub, or emerge into another. In the example below, we show the Chipotle ordering flow, from hub into tunnel.
7. Don’t assume an “always connected” experience
Modern mobile and Wi-Fi networks promise high-bandwidth always-on Internet access. The reality is that all networks have holes – in the elevator, on Highway 280, in your kitchen. Access can change dramatically at a moment’s notice. Architecturally, this means applications that rely on a server response to display interface feedback – or even the next screen – are prone to sluggishness or to feeling like the app is hanging.
It makes more sense to design mobile apps as offline services that sometimes have connectivity, rather than to assume a constant connection. Create an application that stores data and assets locally as much as possible and connects to a server as little as possible. Where the app needs to speak to the server, make sure to convey to the user what is happening using visual indicators like a progress bar or a spinning wheel.
8. Stay true to the device
Most of our clients are rolling out their product or service on multiple devices (e.g., iPhone, Android and Palm WebOS phones, Linux-based netbooks). Beyond this, they often have web applications, or native Windows and Mac OS apps. With these multi-platform efforts, there’s often a push to create interface consistency everywhere. If you’ve ever run a Windows program on a Macintosh machine, you’ll recognize this as a foolish consistency that should be avoided.
Users learn the visual and interaction language of their device, and application designers should do the same. If your application is unique and innovative, it’s probably doing some things that the core interface guidelines don’t cover, but that’s ok, as long as the primary paradigms are followed. For reference, here are the design guidelines for the iPhone and other major smartphone platforms.
- Apple Human Interface Guidelines
- Android User Interface Guidelines
- Palm WebOS User Interface Guidelines
- BlackBerry Smartphone UI Guidelines
- Windows Mobile User Interface Guidelines
- Symbian UI Essentials
Whether you are just starting to put together your marketing, functional and design requirements or are deep into coding, we believe the experience design tips above should help you create a great application. In this article we’ve focused on the iPhone, but many of these guidelines also apply to rich Internet mobile applications in general. We’d also bet there are other useful tips out there, so if you’ve got something to add, we’d love to hear your experiences in the comments below!
- W3C mobile web best practices
- Mobile Web Design Trends for 2009
- Designing for the Mobile Web
- iPhone App Design Mistakes: Over-blown Visuals