(and is that a space where the as-yet-unannounced Dark Mode might appear in Control Center?)

At WWDC back in June, Apple unveiled iOS 10. Here, we take a look at some of the biggest design updates in iOS 10 as revealed during the keynote, at various preview sessions held over WWDC, and further detailed in Apple’s updated Human Interface Design Guidelines for iOS, all of which point us to where the iOS design puck is headed…

It’s Got A Widget, A Widget It Has Got!

Unexpected side-references to a really old John Smiths ad starring Jack Dee aside, one of the biggest UI design changes in iOS 10 is… widgets!

Apps will now be able to display concise and expanded widgets on the user’s Search screen (accessed by swiping to the right from the Home or Lock screens) and the Home screen – both in Notification Center and above an app’s icon when it’s 3D touched, to offer extra functionality.

The design and behaviour of widgets are both being improved in iOS 10 – and they really do look much nicer:

Widgets on the Search screen of iOS 10. Image from Apple.
Widgets on the Search screen of iOS 10. Image from Apple.

Apple recommends that designers of widgets follow a few simple guidelines, including:

  • Provide ample margins and padding. Avoid extending content to the edges of a widget.
  • Be adaptable. The width of a widget varies, depending on the device and orientation.
  • Avoid customizing the background of a widget.

Panning and scrolling isn’t supported inside widgets. Instead, they’re intended for super quick display and use (ideally for people to interact with using a single tap). Fortunately, Apple is taking a lot of the guesswork away and making it easy to design good-looking widgets, which can simply default to using the light blurred background and the ‘San Francisco’ system font, both already designed for legibility.

In general, use the system font in black or dark gray for text. The system font is designed for legibility, and dark colors work well with the standard widget background.Apple Human Interface Design Guidelines for iOS 10

Widgets have also been ‘promoted’ in terms of their visibility in iOS10, with a new ‘raise to wake’ feature turning an iPhone’s screen on and showing the lock screen with its widgets, ready to be interacted with when you simply pick up your phone (i.e. before you press the Home button).

It’s to be hoped that the cleaner design, expanded functionality, and increased visibility of widgets will encourage many developers to spend time making them for their apps in iOS 10.

Further reading: Apple’s Human Interface Design Guidelines for Widgets in iOS 10

The Control Center Is Dead. Long Live The Control Center!

It’s also worth noting that iOS’s Control Center (accessed by sliding up from the bottom edge of the iPhone’s screen) has a new ‘more widgety’ look too, and boasts increased usability in iOS 10:

iOS's re-designed Control Center. Left: iOS 9. Middle: How it looks in iOS 10... it now 'floats' so you can swipe across to get at the music player (right) as a standalone panel with larger, more user-friendly controls.
The re-designed iOS Control Center. Left: In iOS 9 it looks and functions like a simple slide-away tray. Middle: In iOS 10 it ‘floats’ so you can swipe across to get at other widgets, like (right) the music player which is now a standalone panel with larger, more user-friendly controls (and album art!)

Instead of looking and functioning like a ‘tray’ in iOS 9 (where its background extends all the way to the sides and bottom of the screen), in iOS 10 the Control Center is more ‘widgety’, floating on a layer above the Home/Lock screen without touching the edges.

It’s a subtle but important change in design which signals that the user can do more than simply swipe it back down to dismiss it…

And we can! Now by swiping across, we can quickly access other panels, like… in the case of the images above taken from the on-stage demo of iOS 10 by Craig Federighi… the re-designed music player with larger buttons.

Let’s be honest, in iOS 9 the music controls were looking a little ‘shoe-horned’ into Control Center. Now in iOS 10, they can breathe! 🎉

Clearer Controls

The new lighter default widget backgrounds offer greater contrast, and the updated design gives buttons more space… making both widgets and control center much clearer and more usable in iOS 10.

Looking a little more closely, we can see the total number of buttons and sliders in Control Center reduces only marginally, but this small change has a big benefit: The layout feels far more in keeping with the overall iOS design aesthetic as a result.

Control Center in iOS 10
Control Center in iOS 10

There are still five controls up top (for airplane mode/wifi/bluetooth/do not disturb/rotation lock) and a brightness slider; but then we have a large segmented control (in UIKit parlance) for AirPlay/AirDrop; a single big button for Night Shift; and now just four buttons at the bottom (for torch/timer/calculator and camera) instead of iOS 9’s five buttons (Night Shift being promoted to a space all on its own).

…waitaminute… a huge, full-width control JUST to toggle Night Shift mode? Looks suspiciously like there’s space for a ‘Dark Mode’ control to be added there if you just split it in half like the AirPlay/AirDrop buttons above it, don’t you think? 🙂

Heavy Music

Before we consider the addition of a system-wide Dark Mode rumoured to be coming to iOS soon (more on that in a minute), let’s address another big user interface design change in iOS 10…

…the long overdue re-designed Apple Music app!

Apple says it wants to give “greater clarity and consistency to every aspect of Apple Music” with the new design, which I don’t see anyone arguing with.

The first tab of iOS 10’s Apple Music is Library, now followed by For You (which was first in iOS 9), then Browse, Radio and Search (the “New” option, second in iOS 9, has been demoted from the tab bar altogether).

A heavyweight variant of the San Francisco typeface is employed for Apple Music’s main headings, followed by well spaced subheadings beneath.

It’s now easier to see your Playlists, Artists, Albums, Songs and (hooray!) Downloaded Music:

The new Library view in Apple Music for iOS 10 makes it easier to access Playlists, Artists, Albums, Songs and (finally!) Downloaded Music on your iPhone.
The new Library view in Apple Music for iOS 10 has larger typography and makes it easier to access Playlists, Artists, Albums, Songs and (finally!) Downloaded Music on your iPhone.

“Downloaded Music” (hidden away in iOS 9) now has proper visibility. Tapping it switches Apple Music to show “only music on this iPhone,” signalled by the addition of a thin grey banner at the top of the screen (in place of the “Library” heading, but taking less vertical space):

The 'Downloaded Music' view of Apple Music in iOS 10.
The ‘Downloaded Music’ view of Apple Music in iOS 10.

Overall, I really like this type-centric approach to Apple Music’s UI. Apple looks to have consistently applied it across all their platforms: from the iPhone to the iPad, iTunes on the Mac and Apple Music on AppleTV:

The re-designed Apple Music on iPhone, iPad and Mac...
The re-designed Apple Music on iPhone, iPad and Mac…
...and on AppleTV.
…and on AppleTV.

With a limited colour palette used for the textual elements throughout the new UI, the colours from album art and playlists really stand out, with the result that Apple Music in iOS 10 looks to be much more navigable, user-friendly and, heck, a bit more fun!

iPhone Dark Mode Hasn’t Yet Seen The Light

Finally, Apple *did* announce a Dark Mode UI at WWDC… but not for the iPhone as many people anticipated. Instead, it’s only the AppleTV which gets a system-wide dark mode… for the moment.

I’ve long been a fan of dark user interfaces which would allow more comfortable reading, viewing and messaging at night, whilst having the added side benefit of saving energy and extending battery life (granted, energy saving might be less of a factor when physically switching a screen pixel to black isn’t saving much power in a backlit LED display, and it would be much more effective when Apple moves the iPhone to an OLED display in future, but still).

Prior to the announcement of iOS 10, Federico Viticci at MacStories, along with Sam Beckett, put together a wishlist of iOS 10 features, including such a dark mode… producing this mockup showing Calendar, Messages and Apple Music with a dark user interface:

iOS dark mode concept - macstories
iOS dark mode UI concept, courtesy of MacStories.

I’m convinced a system-wide dark mode for iOS would be welcomed by millions of iPhone (and iPad!) users. If we don’t get it in iOS 10, then maybe 10.1 or 10.2… after all, there’s a space for it right in Control Center ALREADY, LOOOOOOK!

Where Apple might put the Dark Mode toggle in iOS 10's control center. Night Shift doesn't need all that space to itself, let's be honest ;)
Where Apple might put the Dark Mode toggle in iOS 10’s control center. Night Shift doesn’t need all that space to itself, let’s be honest 😉

🙂