“The 44-pixel block is, in many ways, the basic unit of measurement for the iPhone interface, establishing the visual rhythm of many iPhone apps. That metric is significant as the recommended minimum size to make a tap target (like a button or list item) easily and reliably tappable.”
The quote above is from Josh Clark’s book Tapworthy, an authoritative book on iPhone UI design. And his words were confirmed by Apple in their Mobile HIG ( Human Interface Guidelines) as they did recommend 44 x 44 pixels as the most comfortable minimum size for tappable UI elements. Many app, if not all, you see today work with the 44-pixel rhythm which I will further explain in this post. And everyone seems satisfied. Yet a few is skeptic, and I am one of them.
Since I have started designing iPhone apps, I have always looked for information on how to properly and best work the user interface. First you read the Apple’s guideline, think of it as primary schooling in application design. You have to first learn how the screen in front of you works. How it was divided, what is the dimensions and scales the provider itself uses. And then you COPY.
Think of it as the first days of school and they are tell you this is a notebook and here is the pen it lets you draw on the notebook, and what are going to draw? Well, the alphabet! And you copy all the letters until which is a long time after by the way, you realize you don’t need to draw on the notebook, nor do you need to draw with a pen and what is this alphabet they are talking about…
The very same way, after Apple’s guidelines, you learn what is what and make meaning of them. And you’re ready for further research. Since the internet is very giving most don’t need further research. You can find already made photoshop and vector files and practically change the color and places of two buttons and voila you have an application. And there are thousands of applications like this believe me.
Then you read Tapworthy and it is like a revelation. But it doesn’t change the system. It takes it as perfect and plays inside it. The grid, the scale everything is the same. And frankly after a while you realize it was the false epiphany.
Why? Here is why,
Apple’s intention of using 44-pixel rhythm is clearly to denote a fixed vertical interval equivalent to a baseline grid – a very common technique in print design. The purpose of a baseline grid is to provide a master backbone for text to adhere to. and everything takes root from there. It is usually equal to the leading of the main body text and the leading for other text e.g. headings and block quotes are usually derived from multiples of the baseline grid. This gives the text layout a stable visual composition. The problem with 44 pixels is that it hardly qualifies as a valid rhythm.
Don’t believe me? Let’s examine the 44-pixel rhythm closer.
CASE 1: GROUPED TABLES
For example in an interface made up of grouped tables, the rhythm is further subdivided into four intervals of 11 pixels each. This provides the spacing between section headers and between table groups. We can thus say the iPhone screen layout follows a major rhythm of 44 pixels and a minor rhythm of 11 pixels. This rhythm pair forms the basis of the visual composition.
The available size of a iPhone screen is width 320 × height 460 pixels at portrait orientation after excluding the status bar, or points if we are talking about the Retina display. If you divide 460 by 44 you get a remainder of 20. Divide by 11 and you get a remainder of 9. 460 cannot be divided into equal parts of 11 nor 44. The vertical rhythm is corrupt.
This is how 44-pixel rhythm works:
Is it not a poorly constructed baseline grid? It makes you do lots of compromises without even realizing.
CASE STUDY 2 : STATUS BAR
The status bar on both iPhone and iPad is 20 pixels tall which means it also does not fit into the ”vertical rhythm of 44-pixels”. As you all know, tapping on the status bar scrolls the screen back to the top. Pulling down on it reveals the notification center in iOS 5. It’s a really small tap area though and most of us ‘accidentally’ does it. On one hand it is clever, because using almost no pixel space we are programmed to to use by scrolling our fingers from out of the screen towards inside thus activating. Hypocrite, yet perhaps great intelligence behind it. Apple says the minimum is 44 yet makes us make use of 20 pixels…Yet it still doesn’t work with me.
CASE STUDY 3: 29-PIXEL BUTTONS
Buttons on the navigation bar, toolbars and table cells are 29 pixels tall and by now you know that doesn’t fit with the 44-pixel rhythm as well. A major mistake is usually done here in between programming and designing. How?Apple may make their buttons 29 pixels in height but their tappable area is always 44 pixels ratio. Yet when people copy from the internet and paste the buttons to their designs and then send the design to programming, usually the programmer slices the area to 30-35 pixels most for the tappable area and that is left to their judgement and if you’re lucky. If you are not so lucky with your programmer you’re left with a 29 pixel tappable area which results in bad and poor application whose buttons are always problematic.
In this case study I have to note that usually buttons without border work so much better as their tappable area is invisible and wider thus allowing a better user interface.
CASE STUDY 4: 49 PIXEL TAB BAR
Tab bar is among the main attires of the application design. It consists of icons stacked above text labels which need to be accommodated with additional height. 49 pixels of black tab, talk about ugly. No wonder applications like Twitter has abandoned the native tab bar long ago even before they became twitter. In 49 pixels height this main artery also does not fit with the 44 pixel rhythm.
CASE STUDY 5: PIXEL NAVIGATION BAR WITH PROMPT
When the prompt option is turned on in a navigation bar in iPhone, the bar becomes 74 pixels tall. And guess what? Yet again it does not fit with the 44-pixel rhythm!
So you see folks, apple may tell you to go with 44 pixel design scale rhythm but they lay out and the visual integrity barely holds itself together.
In the next part I will be talking about a solution to work in harmonious proportions that application design needs very much so.