

New Visual Proportions for the iOS User Interface - aen
http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/

======
erikpukinskis
I think it's great to dig into this stuff, but I disagree with almost
everything in this article.

A 4 pixel grid is too fine to serve the purpose of a grid. I mean, you could
do a 1 pixel grid, and _everything_ would line up, but what's the sense in
that? Grids are only visually meaningful when the base unit is a perceptible
size.

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.

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.

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.

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.

~~~
gfodor
I think you've nailed it. Apple's focus on typography, spacing, and proportion
puts it directly at odds with the notion that a UI can always be fit snugly
into a fixed width grid pattern.

------
vaporstun
"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."

I would actually argue that the remainders are a good thing.

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.

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.

~~~
jpadvo
I think this gets at a key misunderstanding in the post. The purpose of a grid
is not to align everything to pixel perfection, but to assist in generating an
interface that communicates well and is attractive. Departures from the grid
sizing can have a variety of benefits:

1) Visually distinguish navigational elements from content 2) Account for
visual weight of different elements to create a stronger perception of rythm
3) Give some warmth and life to the design so it doesn't feel sterile and
robotic 4) Indicating continuation of content (as you very nicely explain)

As the Dalai Lama said, "Know the rules well, so you can break them
effectively."

~~~
ggchappell
> As the Dalai Lama said, "Know the rules well, so you can break them
> effectively."

FWIW, this appears to be a misattribution.

<http://www.snopes.com/inboxer/hoaxes/dalai.asp>

~~~
jpadvo
Thanks ggchappell for the correction. In the future I'll run quotes by snopes
before using them.

~~~
ggchappell
It is, in any case, a nice little saying.

I used to have my data structures & algorithms class (back when I taught DS&A)
read "On following rules" by Kirit Saelensminde
[<http://www.kirit.com/On%20following%20rules>]. This little saying goes along
with it nicely.

------
saurik
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.)

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":

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.

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.

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.

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.

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).

~~~
ary
> Seriously: Android needs to hire a UX designer, although I will say that 3.x
> is getting much better.

You're not familiar with Matias Duarte then?

[http://allthingsd.com/20100527/exclusive-palm-loses-
mobile-d...](http://allthingsd.com/20100527/exclusive-palm-loses-mobile-
design-guru-matias-duarte/)

~~~
saurik
I was familiar with him, but I was not up-to-date on the fact that he was now
is working for Android... that is AMAZING!

------
dpark
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.

Apple, you're welcome.

~~~
mannicken
"Not only does this result in a zero-remainder."

Not necessarily. You're forgetting that each pixel is made out of three little
colors, so with certain color arrangements one can probably get remainder even
on a 1x1 pixel rhythmic grid.

------
contrast
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:

\- 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

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?

None of this says Apple that has got it right. But the criticism just doesn't
seem to have an aesthetic foundation.

~~~
tiddchristopher
One of the things vertical rhythm's used for is making two parallel columns of
text align with each other at regular intervals. From my limited knowledge of
music, every measure of a song, the song's elements align. In a design, every
measure (baseline), the design's elements align. By align, I don't mean with
some arbitrary measure, but with the other elements.

Here's a quick example I made: <http://i.imgur.com/NEc92.png>

You do make a good point: When you get into single-column layouts, like a solo
in a song, having mathematical vertical rhythm is irrelevant.

------
Bud
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.

------
num1
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.

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)

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.

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. _Anybody_ can make something look nicer by
removing information. Of _course_ 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.

~~~
aen
I'd say fuck rhythm too if I'm not a designer. But I am and it's my job to
look at things others don't look at. You can look at a 4-pixel rhythm as
8-pixel, 16-pixel or 32-pixel. 4 is just the lowest basic unit.

Maybe I'm wrong but right or wrong isn't the point. Making people think and
talk about something is.

~~~
num1
"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." doesn't match what you just said ;)

What I'm saying is that "You can look at a 4-pixel rhythm as 8-pixel, 16-pixel
or 32-pixel. 4 is just the lowest basic unit" doesn't improve upon our
situation. The lowest basic unit is called a pixel. Grids make everything look
consistent; but when the only requirement is that you snap to 4-pixels, things
aren't going to look consistent, because you have far too much flexibility.

------
endtwist
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.

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, _too_ 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)

------
ssp
I would be tempted to base the subdivisions on a Fibonacci series:

    
    
        3, 7, 10, 17, 27, 44, 71, 115.  
    

Note that 4 x 115 = 460.

~~~
tiddchristopher
That sounds brilliant for single-column layouts. Too bad it wouldn't hold up
to a multi-column approach.

------
kentbuckle
"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

~~~
aen
It was a typo. Fixed.

------
r00fus
I don't think the new proportions are better.

For example, the first comparison <http://cl.ly/9RHh> 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.

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.

~~~
nchlswu
The alignment is an oversight with the author's mockup. His post is focused on
the vertical rhythm and the proportions on the Y-axis.

If I'm not mistaken, the author doesn't take issue with the proportions on the
x-axis and makes the mistake of keeping things tightly aligned to the
horizontal grid/x-axis proportions. Consequently, he missed some of the subtle
things in the original.

------
lzm
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.

------
schrototo
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.

------
davidlunsford
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.

------
drdaeman
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.

~~~
program
In iOS all UI measures are expressed in points and not in pixels. Saying 44
pixels is simply wrong. In the iPhone 4 the screen has the exact same size of
the 3G but a scale factor of two so every point is two pixel.

------
VladRussian
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 <http://aentan.com/wp-
content/uploads/2011/08/alternateUI.png> just looks completely "lifeless",
boring. Slight asymmetry, non-proportionality, oddity, etc... are the
attributes of life.

------
Neuromantic
The "Improved" grid looks decidedly worse.

------
CubicleNinjas
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.

The samples in this article show less functional, less visually pleasing UIs.

~~~
eropple
Agreed. The author's purported "better" designs are visually unappealing,
really very cluttered, and seem to miss the point (re: menu items being cut
off at the bottom, etc.).

The author has said in another HN post that "it's my job to look at things
others don't look at"--even setting aside the holier-than-thou sort of tone
that that evokes, this sort of "it doesn't line up with the grid" complaint
reminds me of those obnoxious "unsolicited redesigns" of websites you see hit
HN once in a while--the ones that don't take into account critical aspects of
why things are done the way they're done.

------
Hisoka
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.

~~~
dgalling
position: absolute; much?

------
slime
OCD much?

------
chuazy
detailed analysis

