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

http://blog.edwardmarks.com/post/9859783254/improve-usability-with-a-black-status-bar-and-rounded

by bpatrianakos • 14 years ago

77 25 14 years ago

blog.edwardmarks.com

11031a• 14 years ago

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

marknutter• 14 years ago

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

tathagata• 14 years ago

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

stuartjmoore• 14 years ago

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.

elmarks• 14 years ago

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.

Aqua_Geek• 14 years ago

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

bri3d• 14 years ago

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.

deasier• 14 years ago

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.

Samuel_Michon• 14 years ago

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

runjake• 14 years ago

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

pattern• 14 years ago

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

creativename2• 14 years ago

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.

ryan_f• 14 years ago

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

shawnc• 14 years ago

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)

ctide• 14 years ago

Design is all about subtleties, not big deals.

Does it make a difference? You bet.

creativename2• 14 years ago

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.

objclxt• 14 years ago

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.

hadem• 14 years ago

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?

Aldor• 14 years ago

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.

se852• 14 years ago

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

teej• 14 years ago

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?

se852• 14 years ago

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

mcmire• 14 years ago

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• 14 years ago

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>

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

Related Stories