How to build an iPhone User Interface prototype that follows Apple Guidelines

Mauro Dalu on

What are the best tools to create mock-ups of an iPhone app application storyboard, which describes the app flow and the desired user interaction?

We often recommend and assist our customers to build “wireframes” of an App idea that describes all the screens and the expected user interaction, together with the main features of the project. Creating wireframes for such a storyboard of the iPhone Native App views and screens is also a great way to brainstorm and verify the application flow.

Application prototyping is an important part of the software design process. It’s the first stop in which you layout a rough user interface and define the basics of user interaction you expect from your iPhone app. The Apple iPhone and iPod Touch are all about user experience. For this reason we often spend a little additional time to get high quality wireframing before we get to the actual design and development process.

A detailed storyboard of an iPhone app also allows our designers and developers to create much more detailed and accurate estimates of the involved effort to deliver the app to the iTunes App Store.

Creating an iPhone user interface from scratch can be tricky. There are several official Apple human interface guidelines to be taken in account and a few rules you cannot break in order to get the app approved by Apple. These are all things our engineers will verify before building the app, however following a couple principles will help prevent most of the common mistakes.

First: native is better.

There is no need to add bells and whistles at this stage. What is really needed is a straightforward interface that uses as many standard controls as possible. A “standard control” is an interface element that is available as a native item in the Apple’s Interface Builder library. Interface Builer is an Apple app which is used to build the necessary resources for iPhone and Mac OS X apps to work through a standard GUI and is part of the Apple’s iPhone SDK.

 

picture-1

The native interface items include but are not limited to:

  • status bar
  • navigation bar
  • toolbars
  • tab bars
  • table views (often referenced to as lists), with or without “borders” (the rounded corners like in the Settings app)
  • pre-defined buttons and segmented controls
  • sliders, switches, spinning wheels
  • paging indicators

 

Second: Size matters

It’s not just how you use a standard control, it’s also about how big it is. The minimum recommended size for an active element (a button or a “hot”, tap-able area) on the iPhone screen is 44×44 pixels. Apple is the first one to break this rule when it makes sense, so it’s not mandatory. Just use your common sense here and, while prototyping, a bigger interface element is a better choice then shrinking everything to make them fit the screen. So if all the controls you want to put in one screen won’t fit, there are probably too many of them.

All right, enough noise now, what should I use to get the job done?

There are a handful of applications you can use to make an iPhone App storyboard.

The fast answer: Adobe Photoshop.

Photoshop has a lot more power then you really need or care about for this specific task. The good news is that a couple really comprehensive libraries of iPhone interface items and elements are available here and here. It’s a pretty heavy file with all the items divided in layers and layer groups. If you have less then 2Gb of Ram your Mac will have a hard time handle it.
The negative aspects of using Photoshop to mock-up iPhone screens is that if you don’t own it already it is really expensive and – if you don’t know how to use it – it will get you frustrated terribly fast and long before you get something useful worked out.
You may also try to use an application that can read PSD files to take advantage of that iPhone GUI library.

The technical answer: Interface Builder.

If you have the Apple iPhone development environment installed, you already have all you need to build an iPhone app. In Developer/Applications you’ll see Xcode and Interface Builder. The Interface Builder (IB) will allow you to create a basic, empty iPhone OS window and add all the native elements you need in it. Unfortunately the easy part ends here.
For example, you cannot use custom images. To do so, you’ll need to create an Xcode project, add all your custom images to it and then open the IB files from Xcode. Now you’ll be able to access your images and icons and use them within your custom interface.
Without writing a single line of code. The main limitation is that you cannot populate any dynamic view with dummy data through Interface Builder (table views, lists, etc) unless you connect them through code and run the app prototype in the iPhone simulator, which makes the process unfeasible to most people.

The alternative… for the rest of us: OmniGraffle, Keynote… and Powerpoint

Need a diagram, process chart, quick page-layout, website mockup or graphic design? OmniGraffle 5 handles all of these in one award-winning application. It has not just a pretty interface, however. There’s plenty of power under the hood to make all your diagramming and design fast and easy, with the ability to customize and tweak every aspect of your work. OmniGraffle and OmniGraffle Pro are graphing and prototyping apps by the Omni Group. These have a standard Mac OS X interface with the same approach found in Apple’s iWork and many similar features such as automatic guides, vector scalable graphics, and several features dedicated to create charts, logic flows and diagrams. Such as the “stencils”, which are libraries of pre-made objects you can drag to your canvas to put together the interface fast. A special library dedicated to the iPhone GUI elements is available here. It is not as comprehensive as the Photoshop one, but it’s pretty decent and helps getting the work done faster.
Apple Keynote is part of the iWork suite. It costs $79 and a trial version is available for download here. For the price you also get Pages, a word processor with very good layout and design features, and Numbers, a decent spreadsheet. Keynote is not meant for prototyping: it’s a presentation tool that ideally replaces Microsoft’s Powerpoint. Only it’s far more advanced then Powerpoint. Keynote has most of the nice layout features of OmniGraffle, plus masks, instant alpha, text tools, animations, transitions, effects. It lacks some of the techie features of OmniGraffle and there is no dedicated library of native iPhone elements for it, but you can:
  1. take screenshots of the Interface Builder screens and paste them into Keynote;
  2. drop any image file to the slide (even OmniGraffle Stencil library items)

What if I don’t have a Mac?

Powerpoint is good enough if you know how to use it, but you’ll definitely need at least a few UI items to be able to work out something useful out of it.

Libraries and resources

The following libraries and resources can be used with OmniGraffle, Keynote, PowerPoint and more apps:

Yahoo! Design Pattern Library – Design Stencils
UI Vector elements by Mercury Intermedia (download link)
iPhone GUI PSD by Teehan + Lax (download link)
Ultimate iPhone Stencil by Patrick Crowley (download link)
iPhone Design Elements by Creative Tech Tips (download link)
iPhone Wire Frames by Theresa Neil (download link)
iPhone 3G by 2Shi (download link)
SMS Chat Bubbles by Alexandergre (download link)
Blank iPhone Buttons by memedbaykal (download link)
iPhone Interface Elements by 320480 (download link)
iPhone Icon Style Kit by Keep the Web Weird (download link)