Improving iOS 7 #2: An Uncluttered Status Bar

as of iOS 7 Beta 2

In a world of design embracing flatter, simpler interfaces (even in certain App Store apps), Apple's embrace of a flatter interface in iOS 7 is a welcome change. However, this is its first iteration, and as with every first, it requires constant improvement and refining.

The Status Bar

This is the status bar. It appears on the top of your iDevice screen. It shows the current state of your iDevice.

Standard iOS 7 (beta 2) status bar on General section in Settings app.
iOS 7 Beta 2

It's one of the elements of iOS that's been left virtually unchanged since it launched. That's not necessarily a good or bad thing.

It can get cluttered. Elements of the status bar can easily build up and fill the status bar, as shown in the screenshot below.
Normal iOS 7 (Beta 2) status bar: Do Not Disturb icon is under transparent arrow.
The status bar can get so cluttered that the Do Not Disturb icon is pushed out so far into the middle of the status bar, that it is overlaid by the arrow icon on the status bar.

This solution is remedied once the user unlocks their iPhone. iOS hides the battery percentage to allow the time to be displayed without the Do Not Disturb icon under it. Win-win, right? No. iOS should not need to hide certain elements of the status bar to allow other elements to be displayed properly.

This problem of cluttered status bars also occurred in iOS 6.
iOS 6 Cluttered Status Bar Screenshot: Everything is normal, except for carrier name saying "YES..." and scrolling across the name. Weird spacing between name and Wi-Fi icon.
In this case, the carrier name, "YES OPTUS" is too long and has to be scrolled around, showing only a portion of the carrier name. This is ridiculous. Let's take a look at what's causing this clutter: the elements themselves.

If you compare iOS 7's status bar to iOS 6's, you'll notice that some elements are longer. Namely, the signal indicator and the battery icons.

Comparison between iOS 6 and iOS 7 status bar elements. Signal indicator is 38px wide in iOS 6 and 67px wide in iOS 7. Battery icon is 42px wide in iOS 6 and 49px wide in iOS 7.

There's absolutely no need for the battery icon to be longer. It looks fine in iOS 6. By making it longer, it will just cause clutter. This is the same situation for the carrier name. There's no real need to know which carrier you're on in an instant.

The new signal indicator is a different situation. While the circles fit in with Apple's new design language that involves circles (Game Centre, keypads, contact photos, Control Centre), it can be confusing. Users, for years, have known that vertical bars represent your phone's signal strength to a cell tower. By changing the bars to filled in/not filled in circles, users can get confused at first.

An Uncluttered Status Bar

Here's my concept. Concept The most noticeable change you will notice is the signal indicator. It reincarnates the bars from iOS 6, but they're shorter and thinner, to make it fit in with the rest of iOS 7. While I originally opted to push the time to the left and everything else to the right (like it is on Android), I thought that it looked weird to have a huge blank space on the top of my screen.

Let's take a look at the less noticeable changes. Concept The elements I've mentioned earlier as being the longest, the signal indicator and the battery icon have been shortened. The measurements are above.

You may have also noticed the carrier name is gone, but don't worry. You can toggle it back onto the status bar in Settings. Concept

Here's what it looks like without the carrier names on 3G and LTE: Concept

You can customise the status bar further by choosing what you want on it in settings. You can toggle the carrier name, the alarm icon (your alarms are already displayed in Notification Centre's Today view), a notification count (more later), the battery icon, and the battery percentage. You must have either the battery icon or percentage on your status bar. Concept

I've also merged the charging icon and the battery icon like it was in iOS 6. Here's what it looks like now. Concept — GIF Concept — GIF

And here's what it looks like without the battery icon: Concept - GIF Concept — GIF

The final feature in my concept, mentioned before, is a notification badge (inspired by Android). It displays how many notifications you have in the All tab in Notification Centre: Concept Concept

What do you think? Post your comments below.

Teehan+Lax's iOS 7 (Beta 1) GUI PSD

Improving iOS 7 #1: An Uncluttered Status Bar