Lifting the lid on the iOS 7 UIPicker
Updated April 28th, 2014: The issues discussed in this article relating to the tap areas and consistency of the iOS 7.0 UIDatePicker have been fixed in iOS 7.1. In particular, you can now scroll the AM/PM column by dragging above or below the text, and you can tap a value in the minutes and AP/PM column to select the value. The expanded tap areas mean the picker is easier to use, particularly when embedded in a UITableView.
It’s great to see Apple addressing these issues in point updates, though it seems to confirm that iOS 7.0 was rushed and I’m still not a fan of the 3D effect in a predominantly flat UI. It’ll be interesting to see what they have in store for iOS 8.0.
One of the significant visual changes in iOS 7 is the ‘flattening’ of the UIPicker, and by association the UIDatePicker. On the surface, the new picker looks much cleaner. I’ve never been a fan of the heavy-handed visual treatment given to the iOS 6 picker, and the pseudo 3D rotational effect using gradient overlays probably grated on most anal engineering and designer types. ‘They’re faking it!’, I thought. So when the new iOS 7 picker arrived on the scene there was a piece of me that thought, ‘cool, they’ve cleaned it up and done the 3D effect properly’. That was until I got to use the thing.
I found the new picker quite visually pleasing initially but having used it, I’m not so sure. For example, the UIDatePicker has simplified the colour palette to black and grey, which makes it harder to distinguish the day from the month. The colour highlight on ‘Today’ has been lost too. They’ve also squeezed in an extra two rows above and below the selection, which from an information density perspective is great, but it has reduced the hit areas of each row. Worse than that, the hit areas on the UIDatePicker are inconsistent (Fixed in iOS 7.1). Marc Edwards summarised some of these issues a few weeks ago in this tweet.
Say what you will about the visual styling, but iOS 6’s picker was far easier to use. http://t.co/9gzINNGWqM— Marc Edwards (@marcedwards) September 1, 2013
As you can see from Marc’s diagram, you can no longer drag above and below the AM/PM column to move it. This is a huge pain because now you have to place your finger over the content in order to make your selection. In iOS 6 I’d often push or pull underneath the selected AM/PM value to change it. You’re also not able to tap the AM/PM or minute items to select them, which is completely inconsistent because you can tap the day and hour items! WAT (Fixed in iOS 7.1)
To add insult to injury, the hit area in the iOS 7 UIDatePicker does not extend to the boundaries of the control. The actual hit area is highlighted in blue below. So now you can’t fat-finger the edges of the picker either. (Fixed in iOS 7.1)
The inset tap area causes real problems when the picker is placed inline within a UITableView. It’s the same old ‘scroll views within scroll views’ conundrum developers have been struggling with since the dawn of graphical user interfaces, but made worse because you can easily miss the tap area within the control’s bounds and end up inadvertently scrolling the whole UITableView. (Fixed in iOS 7.1)
Don’t get me wrong, I think inline pickers are the way to go. It puts them in context with what you’re doing and avoids the issues of placement consistency across the iPhone and iPad. I just wish the tap targets were easier to hit and extended out to the bounds of the control.
Another issue I have with the picker is that Apple have stripped back so much of the ornamentation and deferred so much to the content that pickers with only a small amount of content can look downright weird. Without fully populated rows the transformed text looks out of place and at a glance it’s hard to tell why. It’s not until you move it that it makes sense.
Under the bonnet
From a usability point of view, the new UIPicker has taken one step forward and a few steps back. But the fun really starts when you take a look under the covers.
Here’s the iOS 6 UIDateTime picker view hierarchy displayed in Reveal.
…and here’s the iOS 7 UIDateTime picker.
As you can see, they’ve gone to town with the new implementation. It’s pretty obvious why performance would suck on lower-end devices. Impressive as the 3D transforms on the cells are, it’s hard not to feel like this is overkill for the magnified tumbler effect. The UIDatePicker contains no less than 12 UITableViews with each cell having its own unique 3D transform. The hierarchy is further bloated by the fact that UITableViewCell in iOS 7 introduces a UITableViewCellScrollView that contains the UITableViewCellContentView, neither of which appear to be utilised in the UIDatePicker.
Whether the UIPicker was implemented this way on purpose or not, I don’t know, but it’s certainly not optimised. Maybe Apple really did want the latest version of iOS to push the performance boundaries, but unlike the navigation bar blur effects which were ramped down on poorer performing devices, the implementation of the UIPicker doesn’t support this kind of fallback.
So that’s the new iOS 7 UIPicker. I was left wondering whether the 3D rotation effect was really worth it, both in terms of performance and usability. I’m not even sure the effect has a place in a predominantly flat UI. I can’t see it changing any time soon but I wouldn’t be surprised to see a few fixes and optimisations from Apple in subsequent releases to address some of the issues mentioned above. Watch this space.
If you want to have a peek under the covers yourself, get on over to http://revealapp.com and give Reveal a spin.