Force user to answer simple question before revealing two different inputs

Question

Context: This is part of a web application where user are dynamically constructing outbound mail correspondence digitally. This particular step is reached when the user needs to determine how to push the digital paperwork to the correct group/person for filing internally. This can not be done automatically because in most cases a person needs to make decisions based on some internal business rules/exceptions.

The current debate is weather to force users into answering a simple question that exposes the proper routing controls or to expose all of the routing controls directly. The example below show our current mockups. A user can only send the correspondence to a person directly or a specific work group, not both! So should we ask the user to answer a simple question before showing the proper routing input or allow them to have direct access to both inputs?

With simple question:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Without simple question:

^{download bmml source}

This is a system where the internal customer service people will be on the screen multiple times a day. The concern is we don't want to slow user down; but we need to ensure proper document routing as correspondence affects user accounts and workflows for other administrative units. Is forcing users to answer this simple question appropriate or should be leave them with direct access to the two inputs?

Answer 1

The key requirement is “A user can only send the correspondence to a person directly or a specific work group, not both!” That makes your second design problematic because you need to control for the user having input for both Specific Person and Workgroup, which would likely require complicated enabling and clearing. For example, if users enters specific person then decides to change it to a workgroup, they have to clear the Specific Person text box first; if the user decides change from a workgroup to a specific person, they have to reset workgroup to a “none” option. That can make for a confusing UI. It’s better to having a control that makes the choice explicit, like in first mock-up.

As for efficiency, when the user selects the radio button for either Workgroup or Specific User automatically advance the focus to the field that appears to allow entry of the workgroup/user. This is technique done in the MS Office when the user selects to print a range of pages –the cursor automatically moves to the text box to enter the page numbers. Alternatively, consider using command buttons, rather than radio buttons, to select workgroup or specific. The Workgroup command button displays an opened dropdown of the workgroups (like the radio button should) and the Specific User button opens the dialog to lookup the person (assuming the user almost always needs to look the person up). One way or the other, this makes the first design as fast in number of clicks as the second.

Eliminate the “Which __ “ text (let the selected radio button be the caption for field), and the first design has no more reading than the second. Put a default in for the workgroup (which you can’t easily do for the second design), and now the first design is faster on average than the second design –much faster if most of the time the user sends the correspondence to a single particular workgroup (e.g., their own). Consider also defaulting the radio button –one of the two options has to be more common, and if it’s workgroup, then maybe most of the time the user can skip all of this. Can’t get faster than that.

Now shorten “Who internally should get this correspondence?” to “Send internally to” (or just “Send to” if there’s nowhere else to send it). Less clutter makes a faster UI, and if these are regular users, they don’t need details –they only need to recognize what’s needed.

Answer 2

If the user can only perform one of two actions, they shouldn't be able to try and perform 2 actions.

Option 1 solves that need, but hides potentially useful information from the user (what can I do with both answers?). This may or may not be a problem.

An Option 3 would be to make the controls in Option 2 inactive, and provide the radio buttons for the user to make a selection. When a selection is made, make the selected control active.

• If the user first selects one, then the other, there's a visual indication which will be used.
• If they go 1 to 2 to 1, the workgroup they looked up (or list of users they looked up) are still there.

Answer 3

How about graying out (disabling) both the inputs until the user has selected one or the other mode (via radio button)? Then you enable the appropriate additional element(s). That way, the user can see "what's coming up" without actually being able to enter anything, and can plan their course of action better (they can see what data they'll be asked for once they choose a mode). Being grayed out (disabled), they will be discouraged from actually entering anything at that point.

By the way, is it now considered proper to offer radio buttons without one of the choices preselected? I remember way back when that a radio button must always have one and only one selection made, but that rule seems to have fallen by the wayside. I suppose you can always use Javascript to check that a choice has been made, upon form submission.

Answer 4

I always like to support the most common behavior as much as possible, then treat the secondary behavior as an alternative to that.

For example, if most users send to a work group, then show that option in the form by default. Add a little link or toggle to change the form to allow for send-to-individual. This saves most of your users from stopping to make a decision.

Amazon does this when you buy an eGiftCard:

The form's default allows sending a card to one person. The "Send to more people" link changes the text entry to a multi-line entry that accepts multiple addresses. Start with the most common behavior and offer the other as an alternative.