Radio controls, steppers, and drop-down menus: Simplicity in input

A recent video series from user experience thought leader Luke Wroblewski focused on the topics of making the best use of radio controls in applications. There are a wide number of input controls available to use in mobile applications, and touch interfaces are opening up a whole new world of controls that are suited perfectly to specific tasks.  Watch the video below:

Think back to a few years ago when you went online to try and book a flight. It used to be completely different than it is now – you would have to do a lot of filling in this field and that field. Not so much anymore; with drop-down menus, this process is becoming more and more intuitive. However, Luke points out in this video that there are actually better ways to accomplish the same tasks that drop-down menus are setting out to accomplish; yes, they are convenient, but with the amount of operations inherent in a drop-down process, it really should be the last resort for input controls.  Here’s more from Luke on the subject of drop-down menus in an article from Smashing Magazine:

“Drop-down select menus are one of the hardest input types to use. First, you have to click on the menu to open it. Then, you have to maneuver through a potentially long list of small targets. Once you find the value you want, you need position your cursor on the right target and select it. To top it off, many implementations of drop-down menus on the Web require you to keep your cursor on the menu while navigating the list, or else the menu closes!

Even dexterous users often miss them and need to start over. Couple this interactive challenge with the small screens of mobile devices and the need for a different solution for select menus becomes quite obvious.” – “Forms on Mobile Devices: Modern Solutions”, Smashing Magazine

Are there simpler solutions available? The drop-down can be used as a fallback if nothing else works. Radio controls – simple buttons – can enable users to make selections that get them to where they need to be quicker.  Radio controls – rather than resorting to complex drop-down options – form interactions that make our choices instantly seen. Luke does point out that there are limits to what you can do with radio controls, but encourages developers to experiment with the radio group input at first and then falling back to the drop-down menu option if all else fails.

Another related video in this UX series focused on the notion of simplifying inputs with “steppers”. Software needs to collect input from users, and it’s likely that applications inherently have controls that allow it to do just that. However, not all controls are created equally, and in fact, some are much better suited to specific tasks than others (see above discussion on drop-down menus vs. radio buttons!).  Watch the video below:

To illustrate this, Luke takes another look at the flight booking form used in the first video. Once he specifies where he’s heading from and going to, he has a series of additional questions thrown at him, and in this particular case, they are all represented as drop-down menus. What’s wrong with the drop-down, which has been a faithful form of input control? There’s nothing inherently wrong with it, but with touch interfaces, the developer’s goal is to make the process of information gathering as streamlined and intuitive as possible. In Luke’s expert point of view, drop-down menus are not necessarily the best way to go about this. For example, if you’re using a touch interface, first the user must tap the control that brings up a dialog record (drop-down), select the value, find the choice you want by scrolling and scrolling, and then, finally, tap done. That adds up to at least four separate tap operations, and when you consider how many controls you would have to deal with if this was made more intuitive, the difference is stark. Again, just as in the first video, drop-downs are meant to be used as a last resort and not the first solution that a developer uses for input.

That’s where steppers can come in. Steppers are a very simple input control that enables to people to choose incremental values quickly and easily. Steppers can allow users to increase and decrease values, but it can also be used to make adjustments. It’s also a very touch-friendly input control, as the buttons are separated with an input field in between.  

Brent, a web developer who had the chance to attend Luke’s “Mobile Design Now” talk, took these notes on input controls; in particular, steppers and drop-down menus:

Drop-downs are the UI of Last Resort

  • Fundamental issue: they’re a lot of work
  • Consider steppers, action sheets, segmented control/radio button groups, switchers, and sliders as alternatives
  • There are a lot of options, use what’s appropriate given the content and context
  • Be aware of the limitations in alternate controls
  • Reduce input effort

Will, a UX developer who attended a day-long workshop given by Luke on mobile inputs at the UX Immersion 2012 conference, had this to say about steppers and input controls in general:

·         Try to use the standard input types for mobile websites because they have been optimized for the operating system.

·         When you use standard input types, good things happen, because people already know how to use them. But don’t be afraid to go beyond the standard ones.

·         Try not to use select menus in Android if contents are longer than the screen because people may think their choice is limited to what is on the screen.

·         Try non-standard input types when there are too many taps, like the four required to use the select menu picker in iOS.

·         A stepper is easier than a picker if you have a small range (3 to 5) of numeric choices.

·         Only present input controls when people actually need them. Use progressive disclosure. Don’t hit them with everything up front in a long form.

The basic theme here seems to be simplicity: simplicity in usage, simplicity in what the user has to do in order to accomplish a task, simplicity in input controls.

For more in this user experience series from Luke Wroblewski, check out the following links:

·         Multiple input types and the 2 in 1 form factor 

·         2 in 1 and Wide Screens: Orientations

·         Virtual Keyboards and 2 in 1's

·         Asking for App Permissions on 2 in 1 Devices

·         Application Input Modes Are Crucial to Accessibility

·         Intel Developer Zone - User Experience





Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.