On Prototyping iPhone UI

iPhone real size vs. screen dimensions

One thing to keep in mind when designing an interface for the iPhone: Physical size vs. pixel accuracy.

For the desktop, you can pretty much design an interface based on what you see in Photoshop. If you can barely position your cursor over a button, or if the text is too small to read at 100%, that element really is too small, mind you. If it works at 100%, however, it mostly works for everybody else, even for those crazy types with their 30″ screens.

For the iPhone, however, what you see in Photoshop is almost two times larger than what you will get on the actual device. And to make matter worse, not all fingers are as small, tiny and accurate as that black’n'white arrow pointer we all know and love.

In other words: That iPhone is one damn small device!

The above picture shows the difference in size between the 480×320 screen (back) and the phone in 1:1. Your mileage may vary, of course, depending on actual size and resolution of your computer screen; mine is an iMac 20″, and the phone clocks in at about 60%. Have a look at the picture in full size.

It’s easy to create seemingly perfectly sized items that end up way too small on the device. Be it info-buttons or gesture pads. It’s a trap, really, as you could work for hours on a perfectly laid-out screen and still end up with something totally cramped.

One tip I have is to have a second view of the interface open at all times, zoomed out til you get a 1:1 view. That’s if you don’t mind a bit of grease and smear on your screen, hehe. You can then design at 100% and sort of try it out in 1:1 without having to transfer screenshots via iPhoto or some such. teehan+lax’ iPhone GUI PSD is a great place to start, btw, though I don’t use it as much now as I did a couple of months ago.

However, I find myself more and more going back to a drawing board, literally. In fact, I just bought a set of small notepads which perfectly fit into a tiny leather case. I then cut out a cardboard the size of the iPhone’s screen. This serves as a 1:1 stencil for quick sketches on-the-go as well as a pretty decent test of touch areas.

Have a look:

iPhone UI sketch notepad

The notepad/leather case combo has approximately the weight of my iPod touch, and the overall size comes close also. I can scribble on paper and still have a decent tactile feedack. Funny as it may sound — it’s almost as if I would prototype the interface on the device.

What’s interesting is how small the mockup-screen looks on paper when compared to the real thing. The first few days I had to double- and triple-check if I had used the correct cardboard, beacause I always felt like “it just can’t be that tiny”. But it is.

This ends my chatter for today. Got some work to do.

Leave a Reply


footerflowers