The Evolution of Apple's Design

For its first six iterations, the design of iOS remained fairly constant. The original design made heavy use of skeuomorphism, with interface elements mimicking real life objects and surfaces. Game Center had green felt like a game table, the calendar had wood borders and simulated paper pages that could only be viewed one at a time. Perhaps the most ridiculous situation was the Contacts application on iPad, which had black borders on the top and bottom because the application itself had to mimic the dimensions of a book or a planner. This type of design was helpful when introducing the world to multi-touch interfaces, but as time went on it became impossible to ignore how they imposed the same limitations of the physical objects they mimicked onto the device's digital interface.

There's more history beyond the design shift from iOS 6 to iOS 7, but the changing of Apple's executive positions isn't really interesting or relevant from a consumer perspective. Suffice to say, iOS 7 brought about the first major redesign in the history of iOS, and that design had to be put into place in a very short span of time. Because iOS 7 was a rapid redesign, it didn't have the level of refinement that one could expect from a mature user interface. The beta cycle for iOS 7 made this very clear, with the first releases using incredibly thin font weights that Apple soon thickened as feedback came in from developers and users about the poor balance between aesthetics and usability.

Perhaps one of the biggest changes in iOS 7 was the removal of the lines and borders that had previously been used to separate the different parts of the interface. While iOS 6 made it very clear that a button was a button by giving it shading, a drop shadow, and a border, in iOS 7 a button was just some text or a glyph sitting on a view. Views themselves often didn't have obvious separators either. As Apple refined their design in iOS 8 and iOS 9 it became more obvious which parts of the UI represented buttons and other views that the user could interact with, and Control Center provides a good example of this.

iOS 10 brings the biggest change to the design of iOS since iOS 7. iOS 7 pushed the design ideology as far as possible, and it ended up going too far by making it difficult to distinguish different parts of the UI. iOS 10 takes a step backward from that and finds a middle ground between the bleeding edge design that iOS 7 adopted and the more segmented design of an OS like Android or earlier versions of iOS. To illustrate what I mean, I've included some screenshots below illustrating how key areas of the interface have been revamped in iOS 10, including the previously mentioned Control Center.

As you can see, iOS 10 makes it much more clear how different views are separated from each other using what could be described as bubbles or cards. The use of cards seems like something many operating systems are moving toward, with Android using paper-like cards for the UI ever since the original launch of Google Now. In Apple's case, the cards replace what were previously rectangular views that bordered the edges of the display with sharp corners and minimal separation between elements. In the case of notifications and widgets, what were previously sections in a table view with completely transparent backgrounds are now individual bubbles for each item. The improvement to clarity here is pretty obvious, and having a separate card for each item makes it more obvious that they're a tappable element

Control Center receives significant visual and functional changes as well. Like notifications, it's no longer a rectangular view, and is instead a card that comes up from the bottom of the display. Apple has continued their trend of making the distinction of buttons and their selection states more obvious as well. In iOS 7 the buttons were just icons that turned from black to white when tapped, and in iOS 8 apple removed the borders and instead distinguished the icons by using a different transparency effect to separate them from the background view. They also used a full white fill to indicate selection instead of changing the button outline from black to white. In iOS 10, the buttons are now even more distinct, with an ExtraLight VisualEffectView being used for the background and the buttons using something closer to the Light VisualEffectView setting. It's now much more obvious when buttons are selected as well, with the fill color being blue and the inner glyph changing from black to white.

The other big change to Control Center is the new layout. Previously Apple placed all controls on a single view, but in iOS 10 Control Center now uses a PageViewController to place the toggles and settings on one section, and the music and Airplay audio output controls on the other. This allows Apple to increase the size of controls that were difficult to hit, such as the sliders for music playback and brightness. However, they've made some very questionable decisions with the size of buttons. I don't understand why Night Shift needs such a giant button when it's still just a toggle like the four buttons below it. This situation gets even more ridiculous on the iPad, which still uses two separate pages and just has comically large buttons in both sections. There's no reason the controls couldn't have been fit onto the screen at once, and UIKit's PageViewController class provides a really simple way to achieve exactly that functionality when space permits.

What is nice about the larger buttons is that you'll rarely have issues hitting the music controls. Having the second page dedicated to music means that the scrubber and buttons can be much larger, with more spacing between to prevent tapping the wrong thing. Control Center also remembers your last page so if you generally use toggles or music more it will remain positioned on that page when you bring it up again. As far as usability goes, the new Control Center is a definite improvement. I prefer the new aesthetic as well, but I find some of the size and layout choices to be questionable, especially on the iPad.

The same design changes that you'll find to Control Center and notifications exist across the entire OS. Views that were previously rectangles that bordered the edge of the screen are now floating rounded rectangles, which I generally refer to as cards even though Apple hasn't really given them an official name. The use of translucency has also been toned down in a manner of speaking. Areas that used VisualEffectViews still do so, but Apple has changed many to use the more opaque ExtraLight transparency style rather than the Light or Dark styles. In fact, everything seems to have moved up a step, with the use of Dark VisualEffectViews being almost entirely removed except for a certain part of the Maps app, having been replaced with Light views, and Light views being replaced with ExtraLight.

The design of iOS 10 still traces back to the original design principles put in place with iOS 7, but with a level of refinement that simply wasn't possible with the rapid redesign that Apple did in 2013. iOS 7 really pushed its design to the edge, with gratuitous use of transparency, no shadows, no textures, no gradients, and nothing but thin lines to separate the various parts of the interface. iOS 10 recognizes the value of separating different views into different sections, and in doing so makes it clear which objects can be interacted with and which are static.

Introduction Expanding Widgets and 3D Touch
POST A COMMENT

113 Comments

View All Comments

  • damianrobertjones - Wednesday, September 14, 2016 - link

    Cash. Money. The usual. Bills have to be paid. The days of complete, free, impartial journalism died years back. The Verge and Engadget being the worst of the many. I see a web page design in the future for Anandtech. Reply
  • robinthakur - Friday, September 23, 2016 - link

    Because people click on the articles more, would be my guess? I scanned the whole site for the iPhone 7 review and clicked on another apple article on iOS10 when I couldn't find it. This is actually a good technical review by somebody who clearly knows the OS inside out, so I've got no problem with it. Reply
  • ABR - Wednesday, September 14, 2016 - link

    The overall UI smoothness improvement is really noticeable on an iPad Air 2. It's a really shame this is the release they decided to cut support for iPad 2 and that era devices, because those are just the ones that became truly unusable starting with iOS 8. Thinking charitably, it could be that dropping the support is one of the things that helped improve the performance, or, more cynically, maybe it's just part of their plan to continue encouraging purchase of new devices. Reply
  • tipoo - Wednesday, September 14, 2016 - link

    Yeah, even if they dropped all the new features, the performance improvements would have been huge for A5 devices. In fact I wouldn't mind if they stripped the OS as much as they could to get A5 smooth again, but of course they're not going to do such an undertaking for the old chip. Reply
  • tipoo - Wednesday, September 14, 2016 - link

    The worst thing about it is no OS security updates for older OSs, so you're forced to either go insecure, or get a dog slow OS on your formerly decent hardware. There's also no easy downgrade mechanism. Reply
  • m16 - Wednesday, September 14, 2016 - link

    I'm very impressed with the update, really snappy. I'm even more impressed that all my apps work, but I don't have any fancy apps outside of some photography apps that control the aperture.

    I wish they'd brought back notification center social media posting. I mean, OS X Capitan has it!!! It had it back on the iOS 7 days.

    Anyone else thinking this should be back should go to apple's feedback page on either iOS or the iPhone/iPad and request the feature back.
    Reply
  • yhselp - Wednesday, September 14, 2016 - link

    I'm very glad Apple have seemingly fixed performance and UI issues for the 5s compared to iOS 9.

    After upgrading yesterday I was pleasantly surprised. At least for now. I hope I don't jinx it. The 5s is now noticeably smoother; navigating menus, multitasking, and general use overall is now more in line with how fast it used to be on iOS 8. In-app performance seems to have improved as well; I specifically tested an app that used to work great on iOS 8, then ran poorly on iOS 9, and now seems to work great again on iOS 10. Furthermore, the UI itself is now better optimized for a 4-inch display - not only is it better than iOS 9, but there are also improvement over how it used to be on iOS 8.

    So far so good then. Haven't encountered any major hitches, and battery life seems to be holding up. Still, some things are sometimes actually slower than how I remember them from iOS 8, but the opposite is true as well - sometimes the 5s feels faster than ever. Overall, so far, I'd say the smoothness is on par with iOS 8.

    One thing that still baffles me is the Music app. I still pretty much hate it, although it's an improvement over iOS 9 both in terms of usability and 4-inch friendliness. Maybe it's better suited to how most people seem to consume music nowadays - internet music, music services, etc. I can't believe that so few people listen to music in a more traditional way that it's worth ignoring them. Why is it so hard for Apple to at least offer more control over how the music library is sorted? I want to be able to browse by artist, tap on a band, and see all their songs I have on my device in one place with little bars above every group indicating which albums they're from; just as it used to be, and not how it is now. On top of that, the Music app is now less sexy than ever, there's no cover flow at all (at least, I can't seem to find it), and the UI can still get unnecessarily cluttered on a 4-inch display. For me, the best Music app would be a hybrid of how it used to look on iPhone 5 running iOS 6 with some of the improvements from iOS 7 and 8.
    Reply
  • yhselp - Wednesday, September 14, 2016 - link

    I can't help but think - thank God they made the SE, because without it iOS 10 might not have been as 4-inch friendly as it is.

    I'd be very much interested to hear any impressions on how iOS 10 works on iPhone 5/5c.
    Reply
  • yhselp - Wednesday, September 14, 2016 - link

    Update: One important thing that has seen a downgrade, in my opinion, is notification banners. When you're doing something, and someone sends you a message the banner that appears on the top of the screen is bigger, gets in the way, and it's harder to reply quickly without opening the Messages app - pulling down the banner is harder, and once done it takes up to whole screen.

    For me, that is a major downgrade as it makes banner more obtrusive on a 4" device, and make it hard to reply to messages quickly. I understand it might have been made in a bid to improve visibility on 4" devices, but I don't think it was the right call.

    This might prove to be iOS 10's Achilles' heel on 4" devices. I would very much like to see it fixed.
    Reply
  • mdriftmeyer - Wednesday, September 14, 2016 - link

    You'd be wrong. Works great on my iPhone 5s. Notifications now are more easily flipped through and understood at quick glances. Reply

Log in

Don't have an account? Sign up now