New Visual Proportions for the iOS User Interface(aentan.com)
aentan.com
New Visual Proportions for the iOS User Interface
http://aentan.com/design/new-visual-proportions-for-the-ios-user-interface/
22 comments
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.
"If you divide 480 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."
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.
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.
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."
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."
> 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
FWIW, this appears to be a misattribution.
http://www.snopes.com/inboxer/hoaxes/dalai.asp
Thanks ggchappell for the correction. In the future I'll run quotes by snopes before using them.
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.
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.
Lukas Mathis touches on this visual scrollability hint in his discussion of potential solutions to usability issues with Lion's new hidden scrollbars:
http://ignorethecode.net/blog/2011/08/01/invisible_scrollbar...
Showing a peak of extra content to indicate that there's something you're not seeing may not be deliberate, but it's definitely desirable when you've got no other permanent indicators. That said, given Apple's usual attention to detail, I wouldn't be surprised to find that this is a deliberate design choice.
http://ignorethecode.net/blog/2011/08/01/invisible_scrollbar...
Showing a peak of extra content to indicate that there's something you're not seeing may not be deliberate, but it's definitely desirable when you've got no other permanent indicators. That said, given Apple's usual attention to detail, I wouldn't be surprised to find that this is a deliberate design choice.
I’m pretty sure it’s deliberate. I have heard more than one Apple engineer say in their WWDC talks that you should always make sure to indicate when there’s more content and the way you do that is to cut off the last entry in a list.
Content height is unpredictable so even with a baseline grid, you will still get half-visible content most of the time. I was just lucky in my example :D
But what’s the value of not having a remainder? I don’t quite understand.
I can understand the value of not ending up with a remainder in print but on screens?
I can understand the value of not ending up with a remainder in print but on screens?
I, too, thought this was a pretty weak claim.
People can resize their browser windows to whatever dimensions they want; does that mean using any kind of grid or rhythm on the web is hopeless? Of course not.
People can resize their browser windows to whatever dimensions they want; does that mean using any kind of grid or rhythm on the web is hopeless? Of course not.
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.
Apple, you're welcome.
"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.
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.
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).
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).
> 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...
You're not familiar with Matias Duarte then?
http://allthingsd.com/20100527/exclusive-palm-loses-mobile-d...
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!
About the borders. I also noticed each cell is actually a space + 1 border. So you are right to say each table group is actually N+1. The extra pixel has to be subtracted from somewhere and I believe it's in the space between groups.
I haven't looked into the cap height issue as much as you do but one thing that really bothers me and as a result the developer I work with is that Helvetica and Helvetica Neue have different top and bottom boundaries. So there are slight differences in text render on the Retina display.
I haven't looked into the cap height issue as much as you do but one thing that really bothers me and as a result the developer I work with is that Helvetica and Helvetica Neue have different top and bottom boundaries. So there are slight differences in text render on the Retina display.
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.
- 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.
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.
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.
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.
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.
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.
You'll notice that if you replace the word "rhythm" in the OP with "grid" the whole thing sounds a lot less sexy and hence a lot less interesting.
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.
Maybe I'm wrong but right or wrong isn't the point. Making people think and talk about something is.
"I hope once Likables 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 perhaps reconsider the visual proportions 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.
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.
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)
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)
"If you divide 480 by 44 you get a remainder of 20. Divide by 11 and you get a remainder of 9"
Isn't it 40 and 7 respectively?
edit: I think the author meant 460, which is 480px - 20px for the status bar
It was a typo. Fixed.
I would be tempted to base the subdivisions on a Fibonacci series:
3, 7, 10, 17, 27, 44, 71, 115.
That sounds brilliant for single-column layouts. Too bad it wouldn't hold up to a multi-column approach.
That is an awesome idea!
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.
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.
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.
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.
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.
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.
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.
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.
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.
The samples in this article show less functional, less visually pleasing UIs.
The samples in this article show less functional, less visually pleasing UIs.
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.
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.
[deleted]
OCD much?
detailed analysis
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.