Principia Arbiter

“The 44-pixel block is, in many ways, the basic unit of mea­sure­ment for the iPhone inter­face, estab­lish­ing the visual rhythm of many iPhone apps. That met­ric is sig­nif­i­cant as the rec­om­mended min­i­mum size to make a tap tar­get (like a but­ton or list item) eas­ily and reli­ably tappable.”

The quote above is taken from Josh Clark’s book Tap­wor­thy, an author­i­ta­tive book on iPhone UI design. Apple’s Mobile HIG (Human Inter­face Guide­lines) does rec­om­mend 44 × 44 pix­els as the com­fort­able min­i­mum size for tap­pable UI ele­ments. Most apps and includ­ing prac­ti­cally all of the native apps fol­low this 44-pixel rhythm. Every­one is happy. So what is the problem?

Since I have begun design­ing iPhone app inter­faces last year, I have been deeply in touch with the nuances of the inter­faces of native and non-native apps. As a designer who is also adept in print design and has an acute typo­graph­i­cal sense, I can­not help but keep notic­ing the flaws and imper­fec­tions of the 44-pixel rhythm.

Apple’s inten­tion of using this rhythm is clearly to denote a fixed ver­ti­cal inter­val equiv­a­lent to a base­line grid – a very com­mon tech­nique in print design. The pur­pose of a base­line grid is to pro­vide a mas­ter back­bone for text to adhere to. It is usu­ally equal to the lead­ing of the main body text and the lead­ing for other text e.g. head­ings and block quotes are usu­ally derived from mul­ti­ples of the base­line grid. This gives the text lay­out a sta­ble visual com­po­si­tion. The prob­lem with 44 pix­els is that it hardly qual­i­fies as a valid rhythm.

First let’s exam­ine the 44-pixel rhythm closer. For exam­ple in an inter­face made up of grouped tables, the rhythm is fur­ther sub­di­vided into four inter­vals of 11 pix­els each. This pro­vides the spac­ing between sec­tion head­ers and between table groups. We can thus say the iPhone screen lay­out fol­lows a major rhythm of 44 pix­els and a minor rhythm of 11 pix­els. This rhythm pair forms the basis of the visual composition.

The avail­able size of a iPhone screen is width 320 × height 460 pix­els at por­trait ori­en­ta­tion after exclud­ing the sta­tus bar, or points if we are talk­ing about the Retina dis­play. If you divide 460 by 44 you get a remain­der of 20. Divide by 11 and you get a remain­der of 9. 460 can­not be divided into equal parts of 11 nor 44. The ver­ti­cal rhythm is corrupt.

This is not my only com­plain. Besides a poorly con­structed base­line grid, there are many other arbi­trary lay­out val­ues used through­out as com­pro­mises to over­come the unsta­ble ver­ti­cal rhythm.

20-pixel Sta­tus Bar

The sta­tus bar on both iPhone and iPad is 20 pix­els tall which means it also does not fit into the “ver­ti­cal rhythm. Tap­ping on the sta­tus bar scrolls the screen back to the top. Pulling down on it reveals the noti­fi­ca­tion cen­ter in iOS 5. It’s a really small tap area. I think the OS employs some clever algo­rithms to reduce the mar­gin of error and make itself more tap­pable. It’s almost hyp­o­crit­i­cal that on one hand Apple advo­cates 44 pix­els as the min­i­mum for sim­ple taps but yet give us only 20 pix­els for an ele­ment requir­ing suf­fi­ciently com­plex gestures.

29-pixel But­tons

But­tons on the nav­i­ga­tion bar, tool­bars and table cells are 29 pix­els tall so they too don’t fit within the ver­ti­cal rhythm. Although they are 29 tall pix­els in appear­ance, their effec­tive tap height actu­ally extends beyond the top and bot­tom bound­aries to about 44 pix­els. Plain style but­tons such as those in Safari’s tool­bar does not have a bor­der around them so they don’t lie and are per­ceiv­ably eas­ier to tap.

49-pixel Tab Bar

The tab bar con­sist of icons stacked above text labels which need to be accom­mo­dated with addi­tional height. At 49 pix­els tall and black in color, it is a hideous pair of baggy pants. No won­der Loren Brichter had aban­doned the native tab bar in Tweetie before it became Twit­ter. It also does not fit within the 44-pixel ver­ti­cal rhythm.

74-pixel Nav­i­ga­tion Bar with Prompt

When the prompt option is turned on in a nav­i­ga­tion bar, it becomes 74 pix­els tall. Again this does not fit within the ver­ti­cal rhythm.

So you see as Apple added more and more fea­tures with­out recon­sid­er­ing the lay­out, the visual integrity barely holds itself together with com­pro­mises and arbi­trari­ness. It’s falling part and on the verge of look­ing like Android. I think it’s time for Apple to recon­sider the visual pro­por­tions of the iOS user inter­face and return it the har­mo­nious pro­por­tions it needs.

The 4-pixel Rhythm

I recently exper­i­mented with an alter­nate approach in design­ing the UI for Lik­ables for iPhone, with a 4-pixel rhythm. No major no minor. Just 4 pix­els as a basic inter­val unit. Firstly, both the width and height of the iPhone and even the iPad screen can be divided by 4. Using 4 as a basic unit we can con­struct hor­i­zon­tal and ver­ti­cal grids with equal parts of 4, 8, 16 and 32-pixel inter­vals. It is highly flexible.

The beauty of using a 4-pixel rhythm is that lit­tle change is needed to mod­ify cur­rent native ele­ments into the new pro­por­tions. The sta­tus bar can remain as 20-pixel tall. The height of but­tons can be bumped from 30 to 32 pix­els. The tab bar can drop a pixel to 48-pixels tall. The nav­i­ga­tion bar with prompt can be 72-pixels tall instead of 74. Grouped table cell height can remain at 44 pix­els. Dis­tances between sec­tion head­ers and table groups can be mul­ti­ples of 12.

With the ver­ti­cal and hor­i­zon­tal inter­vals being equal, square ele­ments can be eas­ily laid out. For exam­ple, pro­file pic­tures and icons. And they usu­ally come in stan­dard sizes that are mul­ti­ples of 4. Social net­works like Face­book and Twit­ter often use default 48 × 48 avatars. Com­puter icons like those on Win­dows and OS X had always come in 16 × 16, 24 × 24, 32 × 32, 48 × 48 and up to 256 × 256 and 512 × 512 sizes. All mul­ti­ples of 4. Icons in iOS can there­fore stick to stan­dards sizes and save devel­op­ers time and effort recre­at­ing their icons at odd sizes.

Com­pared to the orig­i­nal, the new pro­por­tions is much more sta­ble. It also looks and feels much bet­ter. Instead of an arbitrarily-designed elec­tronic inter­face, it now feels more like a phys­i­cal doc­u­ment clev­erly type­set to typo­graph­i­cal prin­ci­ples. It also bet­ter ful­fills the premise of the iPhone inter­face being a metaphor of a phys­i­cal object manip­u­lat­able by ges­tures. But we can go further.

The advan­tage of using a 4-pixel rhythm is obvi­ous when it comes to cells that con­tain more infor­ma­tion they can com­fort­ably fit.

The iPod playlists screen con­tains cells that have two lines of text in them. To avoid using small text and clut­ter, the cell height was increased to 46 pix­els. Here the visual rhythm totally loses its integrity. How about we use 48-pixel cells instead of 44 or 46?

Click for com­par­i­son between orig­i­nal and fixed.

The playlists text shares the same left align­ment as the light grey but­tons. The increased space around the text also improves the read­abil­ity and scannabil­ity. The light grey but­tons and nav­i­ga­tion bar but­tons share the same height at 32 pix­els. The result is a much more visu­ally sta­ble layout.

You may notice that the 48-pixel rhythm had caused the grey text of the last playlist to be cut off. This is not a prob­lem because users rarely stare at a sta­tic screen from top to bot­tom. It’s eas­ier to fix­ate a small area than the whole screen thus the usual behav­ior is that users would scroll the screen and move infor­ma­tion from the bot­tom to the the upper regions of the screen where their eyes are fix­ated. There­fore it is more impor­tant to improve scannabil­ity even at a slight expense of infor­ma­tion density.

More Exam­ples

I have begun to use the 4-pixel rhythm in the design of Lik­ables for iPhone. Here are some screen­shots show­ing its versatility.

I want to point out that in no way I am say­ing using grids will instantly make your UI bet­ter. Since Apple is using some kind of grid which has become dishar­mo­nious with new ele­ments from new fea­tures, I am propos­ing a bet­ter grid which is more visu­ally sta­ble. A designer would of course still need to con­sider other prin­ci­ples to make a truly good interface.

I am also work­ing on the Denso iPhone and iPad app user inter­faces for Anideo and is using the 4-pixel rhythm exten­sively through­out the app. Because it works so well I will prob­a­bly use it for all the apps I design in future.

I hope once Lik­ables and Denso goes live they will be proof for the production-worthiness of the 4-pixel rhythm. I also hope that Apple will see this and per­haps recon­sider the visual pro­por­tions of UI in future iOS versions.

You should follow me on Twitter.

Follow @Aen