New Visual Proportions for the iOS User Interface

I think it's great to dig into this stuff, but I disagree with almost everything in this article.<p>A 4 pixel grid is too fine to serve the purpose of a grid. I mean, you could do a 1 pixel grid, and <i>everything</i> would line up, but what's the sense in that? Grids are only visually meaningful when the base unit is a perceptible size.<p>The author is striving for harmony, but grids are only one source it. The left margin in one of Apple's preference fields is about one typographic space wide. It's good horizontal rhythm when considered as part of the text element. A good designer knows when to treat space as part of the text, and when to treat it as part of the layout.<p>The author's preference fields have a 16 pixel wide margin, which has a nice numerological relationship with other elements, but has no relationship with the text at all.<p>The resulting designs have a kind of twisted harmony that you can get by looking at it and thinking about the multiples of 4 pixels throughout the interface, but they lack any real visual harmony to my eye.<p>It would be convenient if design were as simple as snapping everything to some simple grid. For better or worse, things are much more complicated than that. And Apple has done much more work to establish a complex harmony across many visual properties than the OP.

"If you divide 480 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."<p>I would actually argue that the remainders are a good thing.<p>When viewing a list, they act as a nice visual indicator that there is more content below. If the last item directly lined up with the bottom of the screen, it would not be as easy to differentiate at a glance. By showing half the last item, it encourages the user to pan down to see the remaining content.<p>Certainly some would suggest I'm claiming "it's a feature, not a bug" and maybe that's true, maybe the remainder it is unintended, but I think it does make more sense to have the bottom element in a list half showing to alert the user that there is more content below.

I suggest that Apple standardize on a visual proportion built of a 1x1-pixel rhythm. Not only does this result in a zero-remainder no matter the screen dimensions, it also eliminates any inconsistencies with major/minor rhythms. Best of all, the current buttons, tab bar, status bar, icons, and everything else are already compliant with this rhythm with no changes whatsoever.<p>Apple, you're welcome.

Yeah, despite the hype, Apple doesn't pay /that/ much attention to this stuff: they mostly succeed at these design issues because their direct competition is ludicrously incompetent at it ;P. (Seriously: Android needs to hire a UX designer, although I will say that 3.x is getting much better.)<p>If you want a really awesome example, here's one that I noticed when I was first developing Cydia a few years ago, and had to do a lot of "iPhone-native CSS" (I am one of these people who stares at and slaves over individual pixels in designs) that I believe "cannot be unseen":<p>So, as stated in this document, cells are 44px "tall". However, this description doesn't take into consideration the effects of the borders: only one of the two borders can count for the spacing, as there are N+1 of them in a group, not N*2.<p>In this case, the top border is included in the 44px "rythm", but in either case, that means that the open area inside the cell "between the borders" is actually 43px, an odd number. Of course, the fact that it is odd is unimportant: you just have to be consistent.<p>This is why the height of the switch in that example is actually 27px: that way it will feel balanced. Meanwhile, the height of the right chevron disclosures is likewise odd: 13px. The slider control is a 9px bar with a 23px handle. Even the little speaker is 5px at its narrowest, and 23px at its widest.<p>Great, right? Only... now that we've been staring at this for so long, you might notice that the text looks imbalanced, because the cap height of the font Apple uses is 12px. This is also why I say the top border is included: the text is a half pixel higher than really feels right.<p>Of course, this is a subtle issue, and I'm certain that a pixel here or there is the kind of thing a normal person doesn't notice, but it slowly drives people like me /nuts/ (which led to a bunch of little tweaks--even requiring custom chevrons--in the CSS I use for mobile websites).

Design to me is a mix of art and science. This article is simple math. It's hard to take such a design philosophy seriously without any supporting evidence to explain why the human brain doesn't find some simple concepts intuitive:<p>- Things are different at the edges - Objects with text underneath are taller than ones without - Temporary features (pop ups etc) at the forefront of attention are a different size to things in the background - Things inside a clear frame might follow different, contrasting proportions to those outside<p>I'm not a designer but I am a drummer. Rhythm-by-the-numbers is boring. Good rhythm plays around the edges, and within the same beat (say four to the bar) people enjoy different beats laid on top (say, three beats). You can speed up and slow down, emphasise boundaries by adding a little extra time to the last beat of the bar, etc. Is visual design any different? Don't designers use the word "rhythm" precisely because it is a good metaphor?<p>None of this says Apple that has got it right. But the criticism just doesn't seem to have an aesthetic foundation.

One quibble I have with this analysis is the section criticizing the 20-pixel Status Bar. The author claims this is bad because it's not very tappable, but I see this case as an exception. Since the status bar is anchored to the top of the screen, you can actually tap it much easier than if it were in the middle of the screen, since you can miss a bit high on purpose, without fear of tapping the wrong thing. This makes the effective target larger and much easier to hit than 20px height normally would give you.

I'm not a designer, so maybe I have no idea what I'm talking about. But @Aen, you sound like an idiot to me.<p>On grids. A grid is a fantastic idea for a newspaper, or even for an iPad, where you have large elements which need to all be aligned. However, your eyes are not trained to jump around in pretty pixel increments, your eyes jump to what they want to look at. In other words, fuck "rhythm." When horizontally aligning elements, I am completely for snapping to a grid of sorts, it makes your UI "just look nicer." When aligning vertically, against things that don't exist, you win nothing. (Well, you do win something, but it's something you didn't touch upon, more on that later)<p>On grid size. By making a "grid" of 4x4 pixels, all you have done is decrease the resolution of the display. Only an OCD programmer would get excited by a declaration that all pixel offsets must be even. In programming, whenever you sit down and design a framework that is too flexible, you have designed a framework which isn't useful. If you complain about "rhythm," you certainly can't suggest a 4px grid, it has no noticeable rhythm.<p>On why your design looks nicer. I'll say it, a few of your "fixed" screens do look nicer. This is because you have introduced more padding, in the form of 2px increases, to every element. <i>Anybody</i> can make something look nicer by removing information. Of <i>course</i> your examples will look great compared to the real thing, negative space tends to do that. I want you to compare the number of visual elements on either the Likables screens you posted, with the number of visual elements on the playlist view.

I really like the detailed analysis of the existing interface proportions; the irregularity is definitely something people can feel but most won't be able to pin down.<p>There really isn't too much for me to argue with here, actually. My only concern is whether or not a 4px rhythm is, perhaps, <i>too</i> flexible. While I certainly haven't tested to the extent Aen has, I'm wondering if using 8px as a minimum for the rhythm would be better read by the eye as having some consistency, or if it would simply require too much change from the existing interface? (i.e., the status bar would need to go from 20 to 24px)

"If you divide 480 by 44 you get a remain­der of 20. Divide by 11 and you get a remain­der of 9" Isn't it 40 and 7 respectively? edit: I think the author meant 460, which is 480px - 20px for the status bar

I would be tempted to base the subdivisions on a Fibonacci series:<p><pre><code> 3, 7, 10, 17, 27, 44, 71, 115. </code></pre> Note that 4 x 115 = 460.

Fascinating article for a non-designer like me. Things like visual rhythm and baseline grids hint that designing isn't just having the talent to know what looks good; there's also a whole science behind it.

I don't think the new proportions are better.<p>For example, the first comparison <a href="http://cl.ly/9RHh" rel="nofollow">http://cl.ly/9RHh</a> if you look closely, the list on the left has a slight left indent, whereas the list on the left (new dimensions) is aligned directly with the buttons above it.<p>The original list looks "better" to me, as it coveys a subtle sense of depth that the redesign removes. The Likeables app look very WP7-metro to me and alien to the iOS platform. Not saying it's worse, but would work better in a properly tiled OS system.

I really like the detailed analysis, but I'm not sure about the changes he proposes. For example, those 32 pixel toolbar buttons in his example look... off.

I certainly appreciate the analysis and the effort (and I am a grid-based design advocate), but nevertheless find the "old" more appealing. Certainly, we could chalk this up to familiarity, but alas, I do not own an iPhone. I believe the last item in the playlist being cut off is my main hesitation with the re-design.

It was surprising that there are pixels involved. I thought in a world where we have all sort of displays, varying with both size and pixel density, using pixels to measure size of GUI elements is out-of-date.

i'd rarely say this, yet this is the case where i see the genius of Jobs (rumored to be himself choosing/approving designs) - this proposed alternative, 4-grid one <a href="http://aentan.com/wp-content/uploads/2011/08/alternateUI.png" rel="nofollow">http://aentan.com/wp-content/uploads/2011/08/alternateUI.png</a> just looks completely "lifeless", boring. Slight asymmetry, non-proportionality, oddity, etc... are the attributes of life.

The "Improved" grid looks decidedly worse.

As the owner of a design firm, and a designer for UI for the past ten years, I think this article misses the point. Grids are a means to an end. That end is functional and visually pleasing usability.<p>The samples in this article show less functional, less visually pleasing UIs.

I hope they don't change the visual proportions.. I think I got 44 hard-coded in 100 different places in my apps, and this includes stuff like custom buttons and images.

OCD much?

detailed analysis