Sep 5, 2011

Improve Usability With A Black Status Bar and Rounded Corners

The use of a black status bar and rounded corners can increase the usability of your iPhone application by bounding your content and thus separating it from the viewport.

When application content fills the entire screen, the user can become disoriented by an inability to determine the bounds of the content and its movement through the viewport. When I say viewport I mean the frame (fixed to the size of the screen) through which the user gazes upon the application’s content. It is as if the screen is a window into the magical world of the application, and this window is the viewport.

When the content fills the viewport, it begs the question of what is happening beyond what you see. Maybe there is more. Maybe there is something you are not showing me.

And then when you transition to another screen, this feeling is affirmed because it can appear as if the viewport moving across the content instead of the more desirable and less disorienting metaphor of the content moving through the viewport.

Consider a transition in the Photos application. When you tap on a photo, the bottom bar and content of the screen all move to the left to reveal a full screen photo on the right. Is your viewport moving to the content, or is the content moving to you?

It is not difficult to separate the viewport and the content. Just use a black status bar and rounded application corners.

You’ve now placed a perceptible box around your application’s content, indicating that everything is contained upon the screen. Transitions are now unambiguously the movement of another encapsulated piece of content into the viewport.

The original iPhone applications from Apple (Mail, Music, Photos, etc) almost all use this earlier style of full-screen content, whereas the iPad applications and the later iPhone applications (iBooks, iWork and Reminders) almost all use this later style of bounded content.

This trend also exists in well designed third-party apps, with early standouts like Tweetie (now Twitter) and FlightTrack having a grey status bar and sharp corners, and recent gems like Calcbot and Square favoring the black status bar and rounded corners.

And while bounding your content in this manner might not be the right move for every application, it’s could be worth thinking about, because if you don’t make the decision for yourself, the tools for creating iPhone applications will make the choice for you, and they’ll choose the old style.


Subscribe via RSS