Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

New Visual Proportions for the iOS User Interface

aentan.com

Post reply on HN
Print view View original

11–20 of 48 posts

Re: New Visual Proportions for the iOS User Interface

#11

Post by 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.

Re: New Visual Proportions for the iOS User Interface

#12

Post by spjwebster »

vaporstun wrote: post #8

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

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.

Re: New Visual Proportions for the iOS User Interface

#13

Post by aen »

saurik wrote: post #7

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…

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.

Re: New Visual Proportions for the iOS User Interface

#14

Post by 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.

Re: New Visual Proportions for the iOS User Interface

#15

Post by aen »

vaporstun wrote: post #8

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

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

Re: New Visual Proportions for the iOS User Interface

#16

Post by 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.

Re: New Visual Proportions for the iOS User Interface

#17

Post by 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.

Re: New Visual Proportions for the iOS User Interface

#18

Post by ugh »

aen wrote: post #15
vaporstun wrote: post #8

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

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?

Re: New Visual Proportions for the iOS User Interface

#19

Post by aen »

num1 wrote: post #11

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 alig…

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.

Re: New Visual Proportions for the iOS User Interface

#20

Post by ugh »

spjwebster wrote: post #12
vaporstun wrote: post #8

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

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 App…

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.
Post reply on HN