Note: This is an old post and may or may not accurately represent my current views, current technology, etc.

Mobile UX is changing fairly rapidly, and it’s an exciting field to watch (well, if you’re into that sort of thing; if not, you may want to skip out on this post). Many UI elements of PDAs and cell phones were based on traditional computer UI because the devices often had limited ability to navigate, those that had resistive touchscreens weren’t particularly responsive or accurate, and most design is iterative.

When Apple popularized capacitive touchscreens with the iPhone, they decided to lean heavily on skeuomorphism. People were interacting with something new in strange new ways, and Apple likely believed that relying on existing things from the real world meant that people could more quickly adapt. “Oh, this is a switch, I get it.” Plus, the visuals were more intriguing than anything people had been seeing on most other devices at the time.

Now, we’re seeing a trend toward flat design and, more importantly, minimalism. The excessive flamboyance of skeuomorphism is no longer in favor and we’re seeing designers quickly ditch gradients, shadows, and life-like textures. Some of this is good, but the important part that has to be considered when designing a UI for a mobile device is the interaction. Users need a clear visual that something is interactive and a sense of what it does before it is pressed. There (mostly) aren’t hover states to rely on, so obviousness is even more important than on the desktop. On top of that, if you take away the desire for skeuomorphism, you take away the need to do things the way they’ve always been done. Your calculator app doesn’t need to look like a calculator. A mobile device can do far more than a calculator, so why limit it to the features of a device that many people don’t even care to own anymore?

iOS date/time pickers

iOS date/time pickers, old and new

iOS date/time pickers, old and new

Consider the iOS date/time pickers. Whoever created the original one on the left thought, “Let’s make this a visually interesting wheel that’s fun to interact with.” With some sparkles and lights, you could feel like you’re spinning the wheel in The Price is Right. The problem is a user interacts with his or her phone a lot and this design quickly becomes tedious (even if you know the hidden double-tap the time gesture). It takes a lot of effort even when you’re just trying to set the time to something simple like 9pm. The new design is an attempt at minimalism, keeping some of the depth, but it doesn’t solve the core interaction problem. These controls are cumbersome!

Android date/time pickers

Android time and date pickers

Android time and date pickers

The Android variations of these haven’t been much better. When the visual style of Android was updated for Honeycomb (Android 3.0) in 2011, emphasis was placed on the visuals and not the interactions of these same pickers, much like iOS this past year.

UX to the rescue

Fortunately, UX has started to see some emphasis on Android fairly recently. For example, there have been two different time pickers to surface as the primary means of time selection among apps that have demonstrated some consideration toward UX. The first is the analog clock:

Analog

Android analog time picker

Android analog time picker

As UI elements that are focused on UX, you have to use them to appreciate the interaction model. In this one, you are presented with the clock hours arranged like an analog clock. Selecting an hour animates to showing the minutes in five minute intervals around the clock. A quick tap will go to the nearest 5-minute interval, but you can drag to give precise times. If you’re unsure and tap on the hour or minute at the top, that selection will be highlighted with a slight animation, the phone will vibrate lightly, and the clock face will show the unit you tapped. Tapping AM or PM at the top will toggle between the two.

This interaction model is surprisingly intuitive and extremely fast. Since you’re most frequently inputting times that are in 5-minute intervals (e.g., 3:15 instead of 3:14), this makes it a very efficient picker in terms of taps/drags to get what you want. Compare that to any of the wheel-like pickers were you have to tap or drag several times.

Digital

Android digital time picker

Android digital time picker

This version is pure UX. There are no visual frills to get you excited. As you press the buttons to create a time, the valid buttons are white and the invalid buttons become grayed out. For instance, if you type a 9, you’ll see the left-most digit placeholder disappear (since you can’t have a time that is four digits and starts with a 9), all digits above 5 fade (since you can’t have a time like 9:60pm), and the AM/PM selectors light up. At this point, you can either tap AM or PM to immediately set the time to 9pm or tap two more digits and then AM or PM. The OK button is only ever enabled after you’ve put in a valid time, mirroring the rest of the experience.

The fading of the invalid buttons might seem like it has little value, but that immediately reduces the cognitive load on the user and helps reveal the shortcut of being able to just tap the hour plus AM/PM to be done quickly. With a time like 9:00pm, you can press just three buttons (9, PM, OK) and the fading guides you along.

Conclusion

The alternatives provide examples of UI that focus on the experience rather than the presentation of information and they’re absolutely the better than the built in pickers. Open source implementations of these and other pickers are available (such as the BetterPickers project), so consider using them in your next (or current) project. Hopefully we’ll see flexible versions of these added to the Android support library and perhaps in a future iOS version.