As someone who generally pays attention to the usability of applications, I have to ask: Is this really a big deal?
I quite literally have never noticed this when using my iPhone over the past couple years. I actually had to re-read the article a few times to understand what the author was trying to convey.
Fair point, I guess I was reacting to the depth in which the article went into the issue. This sort of detail would definitely make a difference, I just feel it's more subtle and less noticeable than perhaps the author indicates it is.
Not really. "Framing" is an important consideration-- ask any photographer. I wish the author had gone into other kinds of framing (not just rounded corners), but it's a start.
This also means in under a month this article may need a bit of updating, because the 'white' status bar won't be 'white' for the majority of use cases any more.
As a designer and developer, I notice it, and have noticed it on my iPhone over the past couple of years. Tho I'm not sure I notice it to the extent this article analyzes it.
I far prefer the black status bar in apps, as it feels like it goes away, while still being there. But the rounded corners don't see a big deal to me. The fact that the article always compares the two together, you can't quite make the argument that one is needed with the other. (unless I totally glossed over something in that)
I can't help but wonder if the bounded/unbounded screenshots would look and feel different if they had used a white iPhone as well. Perhaps the bounded screenshots look better because the black menu bar matches the black bezel of the iPhone?
The article was a bit misguided to me. It's not about making the status bar black and rounding the corners. That isn't going to magically solve the problem the author tries to explain but doesn't really come through -- which is that if you have a pane in your app that scrolls but leave other elements of the app fixed to the screen, the UX "feels" restricting, whereas if you scroll the entire app, the content seems like it's unbounded. That I get. Now, whether you make the corners rounded or not, that's just an extra design detail. But the way to achieve unbounded content is to just make your app full screen. Drop the fixed navigation along the bottom, put it in a hidden sidebar.
Now this is great, but it's not a magic bullet. What the article didn't say is, there are usability concerns with this too -- if you don't have a lot of navigation, having to show the sidebar is just going to be an extra step for the user.
Of course, if you can keep your entire app in one screen without the user needing to scroll anything, that's ideal.
I definitely like the black status bar, but for some reason I think the rounded corners just make the applications feel claustrophobic. Or, maybe it's just because I prefer Android. But I honestly feel that a black status bar but straight corners is the best feel for me, personally.
It would be useful to be able to be able to select between unbounded and bounded content by changing the `meta viewport` value on a web page! Obviously as it stands now, the navigation UI at the bottom of the screen in mobile Safari prevents this, but I can still dream :)
Great usability requires attention to detail. It's the sum of many, seemingly small changes. Have you seen how much work has gone into the "breathing" light on macbooks? Or the math behind scrolling on iOS?
I am a designer/UXer and programmer, so I understand the art behind building software from both sides, believe me.
I have even had to port parts of UIViewAnimation over to JavaScript to enable controllable touch scrolling on both left and top scrollbars on any scrollable element. Turns out that CSS3 animations don't perform anywhere near as well as using this method, but thats another story!
I'm not criticising design, UX or the author's point, because I agree.
His way of going about making that point being completely over the top is what I was poking fun at ;-)
This works, but setting the cornerRadius property kills performance. It's preferable to overlay an image with black corners or to bake the black corners into your art assets.
CALayer masking on the main window will cause the entire window to be rendered offscreen, which isn't going to be usable for even the most basic app on a real device.
I'd recommend either baking the corners into your art assets (for your NavigationBar, Toolbar, TabBar backgrounds), or overriding drawRect on the NavigationBar and Toolbar and adding a clip. Most apps I've worked on end up demanding a custom NavigationBar and Toolbar anyway, so there's not much reason not to do this.
If a truly abstract solution was really necessary (i.e. "I need 4 round corners absolutely everywhere, and I don't have custom art assets"), I think the easiest way would be to create four "round corner" image views and add them to a subview of the application delegate's UIWindow. This would also be much faster than masking the layer, as it'd create four small GPU-accelerated blend areas rather than one giant offscreen view to upload every frame. The main drawback (and the reason why I suggest the art asset version instead) is that orientation and bounds changes have to be handled manually for added subviews of UIWindow.
"Rectangles with rounded corners are everywhere! Just look around this room! And look outside, there's even more, practically everywhere you look!" —Steve Jobs, 1981
> NB: rounded corners was itself a copy of the webOS viewport system.
Rounded corners have been a part of Apple's design for the entirety of the Mac's life. Only "recently" in Mac OS X has the Finder not had rounded corners. Those widget apps, such as Calculator, also had rounded corners way back when.
That said, it does seem very similar to WebOS's beautiful design. But who's borrowed from who? And does it really matter?
I quite literally have never noticed this when using my iPhone over the past couple years. I actually had to re-read the article a few times to understand what the author was trying to convey.