Advertisement

On UI inconsistency in iOS 5

Chris Rawson
Updated ·4 min read

A while back, designer Jake Marsh commented on an inconsistency in Apple's use of linen textures in iOS 5 (hat tip to Daring Fireball). In both OS X Lion and iOS 5, the linen texture is "underneath" other UI elements in almost every instance.

In Lion, linen textures lie beneath the Mission Control interface, the main login screen, folders in Launchpad, and web pages in Safari. In iOS 5, linen lies beneath the multitasking tray, in Siri's interface, in folder backgrounds, and once again (on the iPad) underneath web pages in Safari.

Marsh points out that the metaphor of linen textures lying "beneath" the interface completely breaks down with Notification Center. With Notification Center acting as an overlay on top of other interface elements, it essentially means that the standard interface is "sandwiched" between two layers of linen textures.

Two different proposals exist for fixing this inconsistency. Max Rudberg proposes shifting Notification Center to a background layer, so instead of sliding over the home screen or whatever app you're in at the time, the foreground layer would slide away with Notification Center appearing from "underneath" it. This would be a decent solution on the iPhone, but it wouldn't work quite so well on the iPad. An arguably better solution is the one Nik Radjenovic proposes: get rid of the linen texture in Notification Center and replace it with a background that more clearly establishes Notification Center as a pullover UI element separate from the "what lies beneath" metaphor implied by the linen background.

This may seem nitpicky at first, but Apple's usual attention to UI details like this is arguably one of the things that makes iOS a pleasure to use. Inconsistencies like the "sandwiching" of linen-textured UI elements are subtle, but when UI inconsistencies start stacking up they can result in an experience that drastically and negatively affects usability. [We looked at inconsistent iPhone UI concepts back in 2007, before there was an App Store or iOS even. –Ed.]

The iPad's Music app in iOS 5 is a perfect example of how UI inconsistency creates a subpar experience. I've already described at length how Apple's overhaul of iOS 4's iPod app rendered music playback on the iPad a frustrating experience in iOS 5; I got so fed up with the poor interface in the Music app that I've almost completely stopped using my iPad for music playback and defaulted to using my iPhone 4S instead.

Apple has already fixed some inconsistencies in iOS's look and feel; as of iOS 5, pages in the Calendar app can be "turned" just like pages in iBooks, which wasn't possible in iOS 4. Sadly, the same is not true of the Contacts app on the iPad; despite having the same "pages in a book" design as both Calendar and iBooks, swiping on pages in Contacts does precisely nothing. [See our post from last week on the 'leaky abstraction' problem in skeuomorphic UIs. –Ed.]


Top to bottom: Swipe to turn page, swipe to turn page, swipe to experience frustration.


UI inconsistency across devices can be just as irritating. Again, the Music app is a great example. On the iPhone and iPod touch, the Music app is largely list and text-driven, and playback controls are consistently colored throughout the interface so you can tell the state of a control at a glance. On the iPad, the Music app is visually-driven, with control colors that are not only inconsistent with the color scheme on smaller iOS devices but also internally inconsistent within the app itself. Putting the same app from the iPhone and iPad side-by-side, it's very hard to believe they both came from the same design team.



The same company designed both of these apps. True story.


The Camera app is another example of contradictory behavior in user interfaces across devices. On the iPhone and iPod touch, the shutter button, controls for switching between still photos and video recording, and a link to your camera roll are all pinned to the screen edge near the home button, which makes taking a picture extremely easy and something you can do one-handed. On the iPad, these controls shift around depending on the device's orientation, constantly presenting the controls on the screen's bottom. This makes taking pictures and recording video on the iPad far more difficult, particularly in landscape orientation where the shutter button is several inches away from the edges of the device you're actually gripping.


iPhone: Easily reachable camera controls. iPad: Not so much.


Just like the use of linen in the background of Notification Center, all of these UI hiccups are easy to fix, but I have to wonder why they need to be fixed in the first place. Apple usually pays far better attention to the tiniest details in its interfaces; it may be time for Apple's designers to step back from piling on new features and instead do a Snow Leopard-like audit of what's already in iOS.