Designing for Touch

James Thomson: On the Mac, PCalc has always been an onscreen simulation of an imaginary physical calculator. My initial thought was just to port that directly to the phone, but it didn't really work very well in practice. The iPhone screen is too small to have all the buttons visible and usable at once, and the desktop layout just wasn't ideal for holding in your hands. With the Mac version, people typically use the keyboard shortcuts rather than clicking on virtual keys with their mouse, so the actual key layout isn't crucial. With the mobile version, however, it became one of the most important things to get right. There's limited screen space, and you can only make buttons so small and packed together before they become unusable.

Early, basic prototypes for PCalc provided a way to test the button sizes and spacing, making sure that PCalc "felt right."
Early, basic prototypes for PCalc provided a way to test the button sizes and spacing, making sure that PCalc "felt right."
Early, basic prototypes for PCalc provided a way to test the button sizes and spacing, making sure that PCalc "felt right."

Figure 3-13. Early, basic prototypes for PCalc provided a way to test the button sizes and spacing, making sure that PCalc "felt right."

When I first started to design the key layouts, I sketched them all on paper. Doing that was much closer to the feel of a real device than designing on a desktop screen. I'd actually hold the paper mockup in my hand to see how it felt to "push" the buttons. From there, I did a lot of my early development in the iPhone simulator on the Mac, but I learned that when you do it that way, you miss out on how an application actually feels when you hold it in your hands. The iPhone screen has a much higher pixel density than my desktop screen, so apps are much larger in the iPhone simulator than on the device, making it hard to judge whether a button is the right size for your fingers. By far the most important thing was to try my early designs on a physical device as soon as possible.

In version 1.0 of PCalc for iPhone, the buttons were on the left because that's how they'd been in the Mac version for 18 years. It was only after the first version was released that it became clear it wasn't the best layout for a handheld device. In fact, lots of people assumed I was left-handed from the 1.0 layout. So I changed that, but introduced a mirror of the horizontal layout for left-handed people who liked the number buttons on the left.

In landscape orientation, the original version of PCalc for iPhone (left) placed numbers at left, but this placement was awkward for right-handed users. Later versions changed this layout (right), but added an option to let lefties use the original layout.
In landscape orientation, the original version of PCalc for iPhone (left) placed numbers at left, but this placement was awkward for right-handed users. Later versions changed this layout (right), but added an option to let lefties use the original layout.

Figure 3-14. In landscape orientation, the original version of PCalc for iPhone (left) placed numbers at left, but this placement was awkward for right-handed users. Later versions changed this layout (right), but added an option to let lefties use the original layout.