New Visual Proportions for the iOS User Interface
“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 taken from Josh Clark’s book Tapworthy, an authoritative book on iPhone UI design. Apple’s Mobile HIG (Human Interface Guidelines) does recommend 44 × 44 pixels as the comfortable minimum size for tappable UI elements. Most apps and including practically all of the native apps follow this 44-pixel rhythm. Everyone is happy. So what is the problem?
Since I have begun designing iPhone app interfaces last year, I have been deeply in touch with the nuances of the interfaces of native and non-native apps. As a designer who is also adept in print design and has an acute typographical sense, I cannot help but keep noticing the flaws and imperfections of the 44-pixel rhythm.
Apple’s intention of using this 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. 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.
First let’s examine the 44-pixel rhythm closer. 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 not my only complain. Besides a poorly constructed baseline grid, there are many other arbitrary layout values used throughout as compromises to overcome the unstable vertical rhythm.
20-pixel 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. 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. I think the OS employs some clever algorithms to reduce the margin of error and make itself more tappable. It’s almost hypocritical that on one hand Apple advocates 44 pixels as the minimum for simple taps but yet give us only 20 pixels for an element requiring sufficiently complex gestures.
Buttons on the navigation bar, toolbars and table cells are 29 pixels tall so they too don’t fit within the vertical rhythm. Although they are 29 tall pixels in appearance, their effective tap height actually extends beyond the top and bottom boundaries to about 44 pixels. Plain style buttons such as those in Safari’s toolbar does not have a border around them so they don’t lie and are perceivably easier to tap.
49-pixel Tab Bar
The tab bar consist of icons stacked above text labels which need to be accommodated with additional height. At 49 pixels tall and black in color, it is a hideous pair of baggy pants. No wonder Loren Brichter had abandoned the native tab bar in Tweetie before it became Twitter. It also does not fit within the 44-pixel vertical rhythm.
74-pixel Navigation Bar with Prompt
When the prompt option is turned on in a navigation bar, it becomes 74 pixels tall. Again this does not fit within the vertical rhythm.
So you see as Apple added more and more features without reconsidering the layout, the visual integrity barely holds itself together with compromises and arbitrariness. It’s falling part and on the verge of looking like Android. I think it’s time for Apple to reconsider the visual proportions of the iOS user interface and return it the harmonious proportions it needs.
The 4-pixel Rhythm Unit
I recently experimented with an alternate approach in designing the UI for Likables for iPhone, with a 4-pixel rhythm unit. No major no minor. Just 4 pixels as a basic 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 construct horizontal and vertical grids with equal parts of 4, 8, 16 and 32-pixel intervals. It is highly flexible.
* Update: I’m now calling it the 4-pixel rhythm unit and not the rhythm. Like a crotchet in musical notation, it is commonly a part of a larger rhythm. Thus I wouldn’t call 4 pixels a rhythm. It’s rather a basic unit.
The beauty of using a 4-pixel unit is that little change is needed to modify current native elements into the new proportions. The status bar can remain as 20-pixel tall. The height of buttons can be bumped from 30 to 32 pixels. The tab bar can drop a pixel to 48-pixels tall. The navigation bar with prompt can be 72-pixels tall instead of 74. Grouped table cell height can remain at 44 pixels. Distances between section headers and table groups can be multiples of 12.
With the vertical and horizontal intervals being equal, square elements can be easily laid out. For example, profile pictures and icons. And they usually come in standard sizes that are multiples of 4. Social networks like Facebook and Twitter often use default 48 × 48 avatars. Computer icons like those on Windows 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 multiples of 4. Icons in iOS can therefore stick to standards sizes and save developers time and effort recreating their icons at odd sizes.
Compared to the original, the new proportions is much more stable. It also looks and feels much better. Instead of an arbitrarily-designed electronic interface, it now feels more like a physical document cleverly typeset to typographical principles. It also better fulfills the premise of the iPhone interface being a metaphor of a physical object manipulatable by gestures. But we can go further.
The advantage of using a 4-pixel unit is obvious when it comes to cells that contain more information they can comfortably fit.
The iPod playlists screen contains cells that have two lines of text in them. To avoid using small text and clutter, the cell height was increased to 46 pixels. Here the visual rhythm totally loses its integrity. How about we use 48-pixel cells instead of 44 or 46?
The playlists text shares the same left alignment as the light grey buttons. The increased space around the text also improves the readability and scannability. The light grey buttons and navigation bar buttons share the same height at 32 pixels. The result is a much more visually stable 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 problem because users rarely stare at a static screen from top to bottom. It’s easier to fixate a small area than the whole screen thus the usual behavior is that users would scroll the screen and move information from the bottom to the the upper regions of the screen where their eyes are fixated. Therefore it is more important to improve scannability even at a slight expense of information density.
I have begun to use the 4-pixel unit in the design of Likables for iPhone. Here are some screenshots showing its versatility.
I want to point out that in no way I am saying using grids will instantly make your UI better. Since Apple is using some kind of grid which has become disharmonious with new elements from new features, I am proposing a better grid which is more visually stable. A designer would of course still need to consider other principles to make a truly good interface.
I am also working on the Denso iPhone and iPad app user interfaces for Anideo and is using the 4-pixel rhythm extensively throughout the app. Because it works so well I will probably use it for all the apps I design in future.
I hope once Likables and Denso goes live they will be proof for the production-worthiness of the 4-pixel rhythm unit. I also hope that Apple will see this and perhaps reconsider the visual proportions of UI in future iOS versions.
You should follow me on Twitter.