Subtle UI changes in iOS 6 and the case for the blue status bar

Subtle UI changes in iOS 6 and the case for the blue status bar

Sep 26, 2012 Opinions

I recently bought an iPhone 5, so now I have a 4S which isn’t receiving much use. I decided to give it newfound purpose by comparing certain parts of iOS 5 with their counterparts in iOS 6. There have been a great amount of UI changes, some very subtle, in this update.

As we all know, iOS 6 has gone in a few bold directions with a changed Maps app, enhancements to Siri and support for the taller iPhone 5 display. Some of my favourite features, though, are UI enhancements and are therefore not headline-grabbing — that is, of course, unless you’re writing for The Industry.

For the following comparisons, unless stated otherwise, the left image is iOS 5 and the right image is iOS 6. At the time of writing, I was using the latest available versions of iOS 5 and 6 respectively.

Keyboard, status bar and menu bar

The subtle changes here — when composing a new email in Mail — are as follows: the status bar at the top of the screen is blue, matching the menu bar of the app, the transition between the menu bar and the main content of the screen (in this case the message) is more muted, with a nice simple shadow rather than the abrupt change in iOS 5. The same is true for the top of the keyboard. Notice the shadow which isn’t present in iOS 5.

The menu bar itself at the top of the screen is a gradient on iOS 6, whereas in iOS 5 there’s more of a reflection, giving the impression of a glossy plastic. With the update, especially when combined with the blue status bar, iOS 6 oozes a less reflective, almost textured feel to the menu bars, with (in my opinion) a less harsh and improved transition between menu bars and status bars.

Great changes.

Notification Center

Now, we move on to Notification Centre. As you can see, iOS 6 is using the limited screen space more efficiently to display the first notification higher up than iOS 5 does. Not only is the use of screen space more efficient, but for Calendar notifications, the specific day is mentioned in the notification separator and the times and dates aren’t in italics.

The difference isn’t huge, but this post isn’t about big differences. It’s about the small details. 

Settings and status bar colours

This is what Settings looks like when scrolled to the top in the two iOS versions. I love the re-thought out menu with easier access to Bluetooth, Notifications and Do Not Disturb. The latter two have their own section in iOS 6 and are easier to quickly navigate to. Again, the menu bar and status bar match up — I know I’m in the minority here, but I personally enjoy this UI change.

I feel the coloured status bar doesn’t distract my eyes in the same way it used to, as it matches the menu bar. The menu bar tends to blend in with the status bar in iOS 6, looking more like a single cohesive element, rather than two separate entities jostling for attention.

Simpler, neater, more cohesive. I like it.

Reminders

The first thing I noticed when I launched the new Reminders app was how much more room there was to view stuff on the screen — let alone what it looks like on my iPhone 5 with all those extra pixels.

Switching lists is now done from a more standardised button in the top left of the UI, rather than swiping left and right between lists. I don’t really use Reminders much, but I find this change to be an improvement. I welcome the removal of the switcher at the top of the app, too. I always thought that was quite a confusing addition to an otherwise fairly simple app.

Thumbs up.

Phone

It’s easy to forget that the iPhone is, after all is said and done, a mobile telephone. I never loved the buttons in the Keypad section of the Phone app, and whilst I don’t think the new ones are gorgeous, I certainly find them to be an improvement.

My favourite change in the Keypad is the screen at the top. It acts just like a large menu bar, with the status bar taking its colour. Just like I’ve mentioned earlier, I enjoy the way this colour transition “fades” in. It’s much less abrasive than the harsh contrast between the status bar and dialer on iOS 5. More on that later.

Note: both the above screenshots are taken on iOS 6: this is not a comparison.

How could I write this post without mentioning the enhancements to the Phone app when receiving a call? Whilst this has been talked about a great deal, it really is hard to dismiss just how valuable it is being able to dismiss a call without tapping the sleep/wake button.

Accessed by sliding the phone icon upwards (just like accessing the camera from the lock screen), the “Reply with Message” and “Remind Me Later” options do just what they suggest and are welcome additions.

It’d be great if it was possible to reply with a message and remind me later, though. Furthermore, it isn’t obvious that tapping one of these two buttons will immediately dismiss the call, but I can confirm that’s what happens.

Clock and alarms

The stripes at the back of the Alarm section of the Clock app have changed colour! This is one of the more subtle changes in iOS 6, but I decided to include it because it’s another great example of where I believe the coloured status bar really improves the look of the device.

The blue status bar matches the menu bar and almost “flows” with it. That “flow” is missing on iOS 5. It matches the background, muted pinstripe colour, too.

These screenshots are some more examples of the improved gradients and shadows between UI elements in iOS 6. Just look at that tasty shadow at the bottom and the much more refined transition between menu bar and content at the top.

I’m a fan of these changes.

Sharing

Sharing has been completely overhauled in iOS 6 and I welcome it. It was overdue. Being able to tweet and post to Facebook from almost anywhere on my iPhone is such a great improvement and I’m using it a lot.

Having said that, it’s quite overwhelming seeing a grid of 9 icons throughout the OS. I quite often take longer to choose an option than I did with a list of options, but that may just be a side effect of me getting used to this layout. Even if I were to incorrectly tap a sharing option, I’d be able to hit cancel before all my friends could see the mistake I’d made.

Check out the difference between the two cancel buttons in the screenshots, too. Also notice that Safari’s status bar is black, where it used to be white. I’m quite surprised that Safari didn’t have a blue status bar, as it’s menu bar is that colour. Perhaps the UI designers felt it’d detract from the content displayed on the webpage too much.

I’m even more surprised that there are still separate URL and Search fields in Safari on iOS, where screen space is most valuable. On OS X, there’s just one. It certainly seems like it’d be an obvious upgrade to make.

Buttons

One of my favourite little details in iOS 6 is the gradients and lighting changes on the buttons in pull-up menus. They’re beautiful now — and they were hardly ugly before.

The reflection has gone, having been replaced by slight gradients and hints of a raised, rounded button. These match the new menu bar style perfectly. As you can see from the screenshots, even the pull-up menu itself has lost its lines of reflection, even though it remained translucent.

Last words

The change which most design-savvy users are complaining about in iOS 6 is the status bar. I’ve explained why I think it’s an improvement, but as I noticed more of the little improvements throughout the OS I realised that the status bar is just one step on a path iOS is going down.

The criticism of the blue status bar tends to just be, “it’s ugly.”

My argument for it is more nuanced: I feel the blue status bar with light text, positioned above a lighter blue menu bar also with light text and some darker controls gives the top of the screen a certain unimportance. A flow. This move is saying that the status bar is so unimportant that its colour can change to match the app which is currently open. This should be the case — apps take up the majority of the iOS device’s screen and I wouldn’t want the top of my device to look out-of-place.

I’m certainly not saying that a silver status bar next to a blue menu bar was distracting, but a blue status bar next to a blue menu bar is less so, after the initial “whoa, that’s different” feeling wears off.

And I like it. If you disagree with me, please, let me know. If there are any details in iOS 6 you feel I missed, or anything else you’d like me to delve into and explore, please, let me know, either by mentioning me on twitter, letting The Industry’s twitter account know, or by leaving a comment below.

The final subtle change in iOS 6 in this post is a challenge for you to find out yourself. Notice anything different in the featured image?

  • http://www.smutchings.com/ Sam

    In regards to the call-handling. Apple do give a hint that replying or reminding will end the call, by using the same hung up Phone icon as they do on the Decline call button.

    • http://cgarmstrong.me/ Chris Armstrong

      I’m not even sure how I managed to miss that, well spotted!

  • http://ahylianhuman.me Rod Davis

    I think your right as to why Safari doesn’t have a colored status bar; once you scroll down, the top menu bar is no longer there. It’d be weird to have the web page feed straight into a blue status bar.

    • http://cgarmstrong.me/ Chris Armstrong

      Good point!

  • http://twitter.com/jseths jim seth

    Answer: less spikey!

    As for the safari unified search, don’t forget each field brings up a different keyboard

    Good work. Recon there’s more though! And I’m with you on the menu bar change. I think it’s an improvement.

    • http://twitter.com/hrpanjwani Hardik Panjwani

      yup, was going to say that custom keyboards are the reason not to have a unified search.

      and talking about the dialer, the new look is better but i have always wished that the dialer’s look could be customizable. i want a terminal style one, green on black. :)

    • http://cgarmstrong.me/ Chris Armstrong

      Yeah, great point about the keyboards, but I imagine people wouldn’t complain too much if it became unified. I’d certainly welcome it. Losing access to a forward slash and a .com button is hardly the end of the world.

      • Sean Cannon

        I wouldn’t want to lose access to the space bar.

        • Sean Cannon

          Also, when you ARE typing in a url, losing access to a forward slash is the end of the thing’s usefulness.

  • Mike Abney

    The background to the Settings panel has also changed a bit. The pin stripes are light instead of dark and the background is darker overall. It strikes me as more subtle, similar to the Alarm panel changes.

    • http://cgarmstrong.me/ Chris Armstrong

      Yeah, good catch. I should probably have mentioned that!

  • soybeanstasher

    I’d prefer the status bar remain black at all times. This probably works best on the black iPhone, where the status bar can blend in with the phone’s face.

    • http://exde601e.blogspot.com/ George M.

      Yep, me too. It looks too washed out in that shade of blue.

  • http://profiles.google.com/v8media Ian Page-Echols

    Biggest surprise for me was not having the single search field. My main thought when they added it to the OS X version was that they were prepping people for how iOS 6 would work.

    • mad dog a rog

      Gruber & MG Siegler came up with a good theory about the URL and search fields on the Talk Show. The different fields activate different keyboards: web shortcut keys (dot, slash, dotcom) appear in place of the space bar when you activate the URL field; the regular keyboard w/space appears for the search field. The input shortcuts are not very important on the desktop, but make a difference on the touch device.

      • http://profiles.google.com/v8media Ian Page-Echols

        Ah, good point, and a good theory. I listened to that, but obviously missed that part of it.

        • http://twitter.com/jseths jim seth

          You also missed me mentioning it below. Helooo …. ;-)

          • mad dog a rog

            Ha, I know. I saw it after. For some reason I wasn’t seeing all the comments initially

      • Britt

        Also re: un-unified search & URL bar in Safari: the search bar is also used for searching a web page, unlike on iPad, where it has a distinct field above the keyboard.

      • http://cgarmstrong.me/ Chris Armstrong

        Think that’s a plausible reason, even so, I reckon most people only use the search bar and never type URLs, so this wouldn’t matter. I imagine it’ll probably come with time. I hope so.

  • http://twitter.com/ryanmclaughlin Ryan McLaughlin

    The background stripes looks like they changed in the Settings app as well.

    • http://cgarmstrong.me/ Chris Armstrong

      Looks like the colours reversed. Nice catch!

  • StetsonG

    Another interesting topic might be the new tab bars present in iOS 6. The music app and iTunes/App Store apps have all now moved away from the original glossy black tab bar style.

    • http://cgarmstrong.me/ Chris Armstrong

      Definitely!

  • http://twitter.com/JeanLucEsser Jean-Luc Esser

    Excellent article, love the changes, Apple is so about the details.
    But it looks like you missed something about that black status bar in Safari.
    It’s not about not distracting the eye, the reason is quite simple and makes a lot of sense…
    Givin’ up yet ?

    Well, take any app with a blue (or colored) status bar and try scrolling past the top of the screen. See what happens ? The status bar and the menu stick together at the top, as if they were one ! The rubber band effect happens below the menu bar.
    Now, do the same in Safari… See ? Simple as that. The menu bar is part of the content scrolling.

    • Fudgebody

      This, but even more than that, if you scroll DOWN the page, the menu bar disappears. If the status bar were blue, that’d probably look weird and would definitely detract from the content. Hence the black status bar – probably the best choice to be next to arbitrary content.

      • http://cgarmstrong.me/ Chris Armstrong

        You nailed it. Awesome point.

    • http://www.twitter.com/gtinari George Tinari

      One problem: this isn’t consistent with other apps. Open Facebook. It has a black status bar and blue menu bar, yet the menu bar sticks with the status bar while scrolling. I’ve found that the status bar changes color according to the menu bar only when there’s no curves on either end. Safari’s has the curve, Facebook has the curve, and many more do as well, which gives the illusion of the app being completely separated from the status bar. The Messages menu bar is a complete rectangle and is completely connected to the status bar, so it changes color to match.

  • Dan

    Sad to say but iOS has changed so little in the last few years. Are people really getting excited that the culmination of a years worth of design work is some subtle shading changes? PLus the skeuomorphic style is starting to look REALLY dated. From a design perspective Windows Phone is pushing the design boundaries because they have to take some risks to succeed. In contrast iOS is a cash cow that there is no need to disrupt.

    • http://cgarmstrong.me/ Chris Armstrong

      I understand your point, but there’s no need to change things just for the sake of change. I think Apple’s designers have done a pretty great job iterating and improving on something which has been great since day one.

  • Steven Fisher

    If you had a unified URL/search bar, your first tap would be to bring it up. But your second tap would be to pick what you’re searching for, since they use different keyboards.

    Apple’s done the right thing here.

    • http://cgarmstrong.me/ Chris Armstrong

      Yeah, I totally understand that. But seriously, how many people actually type in URLs in Safari? Regular people, not us geeks?

      • Sean Cannon

        Lots. If you didn’t, you wouldn’t need an address bar at all. It’s often quite a bit quicker to type in a URL with some autocompletion than to bother with a search. If I want to look something up on wikipedia, I don’t google it, and I don’t go to Wikipedia’s front page. I type in en. (autocomplete to en.wikipedia.org) /w (autocomplete to /wiki) /What_I’m_looking_for

  • http://www.tumblr.com/blog/his-divine-shadow His Shadow

    Good article.

    • http://cgarmstrong.me/ Chris Armstrong

      Thanks!

  • http://twitter.com/apple4ever Matthew Butch

    The blue status bar is horribly ugly. Fugly even. It stands out instead of matching because its so ugly. It doesn’t fit in with the rest of the OS’s estetic. I hate it with the fire of a thousands suns.

    • http://cgarmstrong.me/ Chris Armstrong

      Set a reminder to read this comment in 6 months. I’m sure you’ll look back and feel silly.

  • Ricardo

    in iOS 5 the black menu bar in Safari indicates private mode, no?

    • http://cgarmstrong.me/ Chris Armstrong

      Yup.

  • Aunt_Edna

    Nice article Chris. dumb question – how does the iPhone 5 make use of extra screen for the phone dialer?

    • http://cgarmstrong.me/ Chris Armstrong

      Not too well, just a larger text area: http://cgar.me/TbM6

  • http://www.pilotunplugged.com/ Pilot Unplugged

    Nice attention to detail. I didn’t find the iOS 5 status bar as jarring as you did and actually liked that it was different than the UI around it because it has a different function. And I am NOT at ALL a fan of the 9 icon grid for sharing. I’ll get used to it because I don’t have a choice, but it isn’t a direction I would have gone. A list with small icons on the left side would have made more sense.

    • http://cgarmstrong.me/ Chris Armstrong

      Think they’d have run out of room if a list was used.

      • http://www.pilotunplugged.com/ Pilot Unplugged

        Well, no reason it couldn’t be a scrollable list? All in all they did a good job cleaning the UI up IMO

  • http://twitter.com/chrisyearn Chris Yearn

    To be honest I have always really disliked the blue menu bar theme used in Safari, Mail, Settings etc. I really like the new ui theme being used in the App Store and Music apps, and I wish Apple had used that throughout the whole OS (using the black status bar for everything, bar the home/lockscreen), instead of having several different designs that don’t really match. For the first time ever, Android is starting to look nicer to me.

    Also, on a less important note, I’m not really a big fan of either versions of the phone keypad. I hate skeumorphism for most things, especially on a desktop OS, but a design that looked like an old phone keypad with slightly rounded physical-looking buttons would have worked really well here.

    • http://cgarmstrong.me/ Chris Armstrong

      I agree with you, I think. The blue menu bars and the blue notification popups look dated. I’ve never really liked the phone keypad, but then again, I barely ever see it, so it’s not really a big deal. I think the new one’s an improvement, though.

      • deviladv

        I disagree. The white characters on black looked sleek and were easier to read. The new keypad isn’t even a black on white reversal, it’s dark grey on white. To me, that’s harder to read. All the other tabs are black on white, so it’s disturbing to see grey on white too.

        • kibbles

          this. it has far less contrast, due to the gray-on-white and thinner character strokes. if using in the dark its harsher on the eyes as well.

  • http://www.facebook.com/ccastillo.vel Carlos Castillo

    Hi Chris. You didn’t talk about the Music app. But then again, i guess that is not a subtle change :) Have you noticed how the reflection of the knobs (in the Music app) changes if you rotate your phone whilst the horizontal rotation mode is disabled. I find the effect very nice.

    • http://cgarmstrong.me/ Chris Armstrong

      Yeah, it’s hardly a subtle UI element, but a big change nonetheless. I’m not sure if I like the new Music app or not. It’s certainly… interesting. The reflection change is something I’ve heard mentioned before; love the attention to detail there.

      • Tangerine

        I don´t like the new music player :( , I think it was prettier in black..along with the black keyboard but anyway. nice recopilation! thank you! :)

  • http://www.facebook.com/james.russell James Russell

    As has been noted elsewhere, the reason the (ugly) coloured status bar is also a functional impairment is that previously, the status bar being coloured always indicates something else that’s happening: a call, a voice recording, tethering, etc.

    Now it has two meanings: an arbitrary colour based on the app’s top nav bar OR a functional colour based on something happening in the background. The fact that Apple’s apps are mostly blue, the same colour (though a very different shade) used for the most common background activity (I’d wager): tethering, is especially bad.

    Every single time I launch a ‘blue’ app I instantly think tethering must’ve been left on, until I realise it’s just the new colour. I MAY get used to it… but why should I have to?

    I agree the old steel coloured menu bar in some apps was also odd and a bit arbitrary: clearly the status bar should remain black and unobtrusive at all times. I don’t really think there’s a convincing argument available to the contrary.

  • Gearóid O hAghmail

    Excellent review!
    The new designs look great. My only gripe is the dialler. The figures are too spidery compared to the solid white on black (old design still works on Viber but the purple is horrific) The green button now looks completely alien.
    Best Regards.

  • http://twitter.com/Alex_Manchester Alex Manchester

    It’s a shame they haven’t taken the ridiculous microphone button off the keyboard. I’ve lost count of the amount of times I’ve hit that accidentally and have to wait for the process of it switching off again…

    • appleboxes

      If you hit the microphone button while typing in the middle of the sentence, it is treated as the spacebar. Just as long as you hit another key within a second or so after hitting the microphone button. I even hit it twice and it did the period space.

      • http://twitter.com/Alex_Manchester Alex Manchester

        That may be so, but the amount of times the issue pops up suggests it’s not a good enough solution.

  • kibbles

    i agree w/ most of your thoughts (can even see the thinking behind the blue status bar), except one — the Phone keypad. it’s atrocious in its pedestrian plainness. worse, it’s now much less contrasty making it visually weaker and more time consuming to use…especially for those w/ poor eyesight.

  • http://twitter.com/omega8cc Omega8.cc

    As for the challenge – you mean the now almost invisible cursor probably? Also the microphone key on the keyboard has inversed colours now. Excellent article, thanks!

  • http://twitter.com/timetotimeapp Time to Time app

    Another subtle change is the top corners of apps that use a black status bar are now rounded. Safari and Facebook are good examples of this. It seems to be forced by iOS 6 as I noticed it when testing my own app which didn’t have rounded corners on iOS 5.

  • T Y

    Fire up the music app, play a song, and notice how the metallic volume knob change as you tilt the phone slightly.

  • http://www.facebook.com/angus.gibbins1 Angus Gibbins

    Love the article. Just one point regarding the lack of unified search bar. Having gotten used to unified search on Mountain Lion, the lack of unified search in Mobile Safari (particularly on the iPad) gets me every single freakin’ time!

    At least daily I’ll go to search for something on my iPad, hit the address bar out of habit, wait for search suggestions to populate, type in the rest of my keywords (when the suggestions fail to appear), and then realise my mistake when I go to hit the non existent search button.

  • http://www.facebook.com/people/Puttapong-Tapaonoi/100000454146451 Puttapong Tapaonoi

    don’t like it all…especially sharing menu. I like that now it has icon image for easy glance but grid of 9 icon take too much space and look ugly, maybe another layout or just add little icon on the old share menu would better, but the worst thing is icon of “print” “copy” “bookmark” or what ever that use dots background and metal look style. It ugly and also hard to look to identified which one is which one and not “FADE” with the other icon. Ugly at all.
    If he still here this will never happen to iOS…

  • http://twitter.com/1122O Wolf Hardeyk

    Whilst these changes are welcome (except the new dialler – I much preferred the old one) the problem I have is with the details Apple has missed. Small one: why no new metallic slider in the video player? Big one that has bugged me since they introduced iMessage: the in-app SMS sheet still uses the old blue send button and blue ‘To’ lozenge (once you’ve set who you’re texting) even though this sheet has no way of distinguishing between regular SMS and iMessage like the actual Messages app does. This all should have been changed to green (which is now the colour for regular SMS) so that users aren’t confused into thinking a picture will be sent as an iMessage when in fact it’ll be a regular SMS and therefore may cost extra depending on their call plan. Ideally the sheet would be more sophisticated and access contacts to see who is iMessage capable and change colour accordingly but there’d probably be privacy concerns over so many apps accessing a user’s contacts list.

  • Nathan

    Great article Chris, I totally agree with most of the points you made. Regarding that Safari status bar, haven’t read the comments, but has anyone noticed how instead of rounding the top corners on the menu bar with the search fields, they instead added inverted rounded corners, attached to the status bar itself, which when sitting on top of the menu bar, gives the impression of rounded colors. I thought that was pretty cool

    Again, great article.

  • http://www.facebook.com/warburtont Tim Warburton

    Very insightful set of comparisons and quite enlightening. I came across the page in a search to find out why and if others have noticed the change in IOS keyboard functionality with respect to the ‘Dual’ use (pressing & holding down) of certain characters. For example the exclamation mark or question mark keys when held for second would provide a single or double quote character. This vastly sped up the single hand typing speed by not requiring a shift to the numerical keyboard for access to the quote character. Perhaps this is now a switched option somewhere in settings? Anyone who knows – your input will be welcomed. Thanks.

  • liam

    The gray burlap background in Notifications looks tacked on. It doesn’t fit well with the shiny, minimalist aesthetic of others parts of the system.
    Inconsistent.

  • Ziggy

    Blue status bar appears a bit to washed out and perhaps a little rushed – I wouldn’t say ‘It’s ugly’. Hopefully Ive can revive the iPhone’s status by developing a great new GUI on more contemporary lines to compliment the design of the iPhone device. Doing something with the home button (removing or resizing) would be a step to increasing screen size and allow him more screen real estate to create some great interface designs.

  • Dennis

    New phone keyboard much harder to use!!! Google maps made me take a step back from wanting my droid back. Glaring keyboard pushes me back toward droid. (Sorry to all you AppleMainiacs – said with humor in mind)

List Grid
Load More