Live data from Hacker News

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

blog.edwardmarks.com

21–27 of 27 posts

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

#22
post #21

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?

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

#24
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.

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

#25

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

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.

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.

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

#27
post #22
post #21

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

Post reply on HN