Three reasons why the iOS picker is broken

by Geordie Kaytes

Normally we try to avoid complaining about minor design decisions in Apple’s iOS. (This is a lie.)

Many of the industry’s nitpicks with iOS 7 are matters of taste (“flat” vs. “skeuomorphic”), or are based on dubious data (hollow icons). However, we occasionally run up against something that is fundamentally broken from a UX/UI perspective.

Apple’s native “picker” is one of those things.

The picker is the special UI element that appears when you interact with a drop-down menu on the web (as well as in many native apps). Its style had not changed significantly since the original iOS, and was reminiscent of the “cryptex” in The Da Vinci Code. Taste-wise, it left much to be desired, but it was a useful and usable interface element.

The new picker is frustrating and confusing for three main reasons:

  1. The touchable area has been unnecessarily reduced, making interactions more difficult
  2. The “frosted glass” blur treatment allows the underlying site color to show through, potentially creating low-contrast and unreadable select items
  3. Aside from readability, as colors show through the blurred element, they risk arbitrarily highlighting dropdown items

Y u no scroll?

Tapping and dragging above the topmost row item does nothing.

The first issue is already a well-worn topic, but I assume that Apple must have some solid user testing data to back up its choice. That doesn’t mean I have to like it. As shown in this screenshot, what was once (in iOS 6 and earlier) usable, draggable space is no longer active.

I can only assume that testing revealed significant “slips” in user interaction, with people accidentally scrolling this area without meaning to. How else could one justify radically shrinking the touchable area? Considering that the user’s ability to recognize and correct a slip here is very high (the selection isn’t submitted until the user touches “done”), Apple’s choice here is hard to understand.

The Fix

Keep the nice, new visual style, but go back to the old touch zones. The fat-fingered among us will appreciate it.

Let your inner Windows Vista shine through

Unreadable select elements on dark background

I wish “frosted glass” treatments would go back to 2007 and stay there. In a bizarre homage to the Windows Vista “Aero” style, the picker (along with several other iOS 7 UI elements) lets the underlying color of the site glow through its modal panel. This can create a contrast nightmare, with a pure black background resulting in a contrast ratio of just 2.27:1 (for you hex nerds, that’s #0F0F0F on #4D4D4D); this is well below the W3C minimum for even large text.

iOS does have a “high contrast” mode that brightens up the picker background. Turning it on requires your user to find an obscure switch nestled deep within the Settings app’s hierarchy. We shouldn’t consider that an acceptable workaround.

The Fix

The picker should calculate a reasonable level of contrast with the underlying background, and apply that tone to the picker text. Apple already performs a similar feat in iTunes, so the solution is well within reach. I’d be surprised if this fix isn’t already cued up for an upcoming iOS 7 update.

Pretty colors, zero meaning

One principle of good UI design is that color should say something (Usually, “Pay attention to me!”). Arbitrary use of color can be confusing, and requires the user to expend mental effort figuring out what, if any, special meaning is being assigned.

Beyond its accessibility issues, the picker’s background blurring allows bright colors to leak through, creating strange “highlighted” areas where they shouldn’t exist:

Mobile site with dropdown and orange box

Orange box highlights arbitrary text in picker when dropdown is active

This one ALWAYS gets me, but it’s also the one issue you can actually do something about. Pay attention to little quirks like this when you’re testing your site (you are testing your site with real users, right?) and you can mitigate the impact to your overall experience.

The Fix

Test your site on a real device with real users. If you find that issues like this are causing confusion, don’t blame Apple – just fix it!

Like any software, iOS 7 is a work in progress. We’ll never have access to the full research or justification behind Apple’s decisions, but some of them appear sub-optimal from a UX perspective. Hopefully we’ll see some updates in the coming months that address these issues, un-breaking a critical part of the mobile experience.

About Geordie Kaytes

Geordie possesses an enthusiasm and energy that clients love to engage with, and he brings that infectious spirit to every project. He specializes in product...