Improve [iOS] Usability with a Black Status Bar and Rounded Corners | Hacker News Reader

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

blog.edwardmarks.com

77 pointsbpatrianakos25 comments

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.

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

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)

Design is all about subtleties, not big deals.

Does it make a difference? You bet.

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.

"For the interested reader", see different kinds of framing in the Path app: http://a3.mzstatic.com/us/r1000/067/Purple/v4/2c/81/7e/2c817... There's color, drop shadows etc.

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.

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.

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>

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

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

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?

Yep.

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

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

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

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.

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.

I just confirmed that this does work. Note, however, that you'll also need to set clipsToBounds to YES on the window.

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.

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.

"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

http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...

Also: http://interuserface.net/2011/06/own-a-shape/

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

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

Reply on news.ycombinator.com