Improve [iOS] Usability with a Black Status Bar and Rounded Corners

[creativename]

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.

[ctide]

Design is all about subtleties, not big deals.

Does it make a difference? You bet.

[objclxt]

It was a big enough deal for Apple to make a substantial upcoming change in iOS 6 regarding how the status bar changes color in response to content:

http://www.cultofmac.com/173232/in-ios-6-the-status-bar-chan...

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.

[shawnc]

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)

[ryan_f]

I agree. I have seen rounded corners in Apps before but there were a lot other variables for usability.

[hadem]

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?

[mcmire]

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.

[lancer383]

While this only mentions native applications, the same could be done for web apps:

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <style>
    html {background-color:#000;}
    body {background-color:#fff; border-radius:6px}
  </style>

[Aldor]

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.

[pattern]

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

[se85]

It is better, no doubt about that but talk about over-analysing it!

[teej]

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?

[marknutter]

Does anyone know how rounded corners like this can be applied in practice?

[tathagata]

The easiest way is to use a custom full-sized background for the tab bar, navigation bar and toolbars.

[stuartjmoore]

I haven't tried it, but you should be able to set the cornerRadius of the layer (a CALayer) of the main window. That would apply it to all subviews.

[deasier]

It's already been done years ago in the jailbreak scene e.g ‘RoundCorners’ Blesses iPhone Owners With a Well Rounded Experience http://www.idownloadblog.com/2011/01/05/roundcorners-blesses...

NB: rounded corners was itself a copy of the webOS viewport system.

[11031a]

Going to be a great day for a small number of rich people.