Size does matter

One of the most daunting challenges for the iPhone app designer is not the size of screen, but the fact that its input device is no other than a human hand. With a mouse, or a stylus, you can get precise input, down to the level of the pixel. With a human finger, you don’t, even worse, most of the time, the screen is going to be partially covered with a hand. In fact, there is no physical interface, All has to be resolved with a virtual interface. We are not just talking about graphic design anymore, we are talking about industrial design. Virtual buttons, are no less button than physical ones, and should be placed in accordance to the same ergonomic principles. We need to consider not just how the app looks, but, more importantly, how the app feels.

Apple designers understood that our brains are wired to handle the physical world, and you can see how the UIKit is populated with physical references. Buttons are drawn casting shadows, to give them a realistic feel. Tables slow down because of “friction”, they even bounce when pushed to its limits. modal views are shown “on top” of other views. This is not just eye candy, this is really important. If the interface matches the expectation of the physical world, it is going to be so much easy to user. Some successful apps even go all the way to mimic the look of familiar objects.

But it is not enough to make your switches look and feel like the real ones, it is also important to understand how to organize the layout. Now, let’s think about how people use iPhones. Most of the times, people hold the device with one hand, and lets the thumb do the work (while holding a cup of latte in the other hand). And while it is true that a mighty thumb can go anywhere in the screen, it is also true that there is a comfort zone for each thumb.

Now it is easy to understand why the toolbars and the tab bars are always at the bottom. Frequently used buttons and the main navigation hierarchy should occupy the bottom, while the lesser used triggers are placed in the top bar. At the same time, since the top of the screen is less prone to be obscured by a finger, here is where the main title lives.

Obviously, the hot zone for the thumb depends on whether the user is left or right handed. some apps goes the extra mile to offer a special version for left handed persons (has been said that The Leftorium is going to open a section at the App Store).

For triggers of critical actions, it is better to take the center of the screen, and make the buttons big enough to avoid any chance to mis-tap one. If the action might be destructive, red is excellent to convey the message.

Given the lack of precision of the “pointer”, buttons should be large. Apple default buttons are in the range of 40 pixels for the height, and at least this size of the width, and most of the standard controls are 44 pixels height. Even those widgets that seems to be smaller, are not. For instance, the back button on a view stack might appear to be small, in fact it is contained in a bar which height is 44 pixels, but the hot zone is really bigger, it occupies the full height of the navigation bar, and from the edge up to the box. Here the lie is helpful. Visually, the small button is much nicer, and the usability is not downgraded.