Video: Selection-dependent inputsSometimes a question we ask people in a web form requires some follow-up information. This differs from additional inputs because additional inputs are triggered by the user. That is they say, hey, I want to specify more information. In a situation where we need follow-up questions answered, it's actually the system or us who are making that same request. For that, we turn to selection dependent inputs. Let's again look at an example. Here's a simple form applying selection dependent inputs. The first initial question we ask people is, "are you a new user or a returning user?" If you're a new user, we're going to actually ask you to create an account.
Viewers: in countries Watching now:
In this course, interaction designer Luke Wroblewski shows how to create web forms that encourage visitors to enter information and covers ways to capture input without the use of forms. The course covers boosting conversion rates and customer satisfaction, organizing the structure of forms, aligning and grouping form elements, assigning the correct input field types, validating input, and handling data entry errors. The last chapter highlights alternatives to static forms, such as using dynamic inline forms, using web services, and leveraging device capabilities, which can be used to gather additional information or replace a traditional form altogether.
- Understanding why forms matter
- Deciding on the form length and structure
- Adding tabs to a form
- Creating required fields
- Adding input masks
- Creating selection-dependent inputs and actions
- Displaying success and error messages
- Adding inline validation
- Understanding gradual engagement
- Enabling touch and audio input on devices
Sometimes a question we ask people in a web form requires some follow-up information. This differs from additional inputs because additional inputs are triggered by the user. That is they say, hey, I want to specify more information. In a situation where we need follow-up questions answered, it's actually the system or us who are making that same request. For that, we turn to selection dependent inputs. Let's again look at an example. Here's a simple form applying selection dependent inputs. The first initial question we ask people is, "are you a new user or a returning user?" If you're a new user, we're going to actually ask you to create an account.
If you're a returning user, we're just going to ask you to log in. Note that the input fields that follow on from this initial question are different. So the first question triggers a series of different questions after it, and that's the basic idea behind selection dependent inputs. This little model that I was showing you there is just one way of actually designing these in UI. There's actually a lot of different variations and we'll look at a few. Here's an example of actually soliciting feedback for someone around a product. Note that there is a series of initial questions; are you asking a question, sharing an idea, reporting a problem? And then follow-on question that comes from that.
Similarly on Google Apps page, you can see the same UI being used for I want to use an existing domain, or I want to buy a new domain. Once you make that initial choice, a series of follow-up questions show up directly below. One more example and I'll start to illustrate some of the problems with some of these approaches and talk about how we can actually tackle them. On Apple's Checkout form, you have a series of selection dependent questions at the top. Would you like to pay with a credit or debit card, do you want to pay with an Apple Gift Card, or do you actually want to finance your purchase? Selecting Apple Gift Card instead of Credit/Debit card brings up a different set of fields than the initial field.
You'll note on the right that we're asking for an Apple Gift Card number or Store Credit number. At the top, we're actually asking for a Credit Card Number, Expiration Date, and Security Code. So the follow-on questions are different. Now this example actually illustrates one of the challenges with the selection dependent inputs. How do we know which fields are mutually exclusive and which ones are not? That is, if I fill in information about my credit card and my Apple Gift Card, will both be processed, or is only the current active tab the fields that get processed in the form? This is one of the problems with this top-level tab navigation interface and we'll look at a few other solutions to tackle it.
One way to try and solve this problem is maybe to flip the tabs on the side and give people a series of options directly below. Here the question of mutual exclusivity might not apply as much because it seems more like a single selection is made with information contained therein. As I've illustrated through these examples, there's a number of different ways to solve the selection dependent inputs problem. So we did some testing to see which method actually works best. Once again, we ran some usability studies and we tried it on a couple different techniques. Let me illustrate some of these techniques upfront to show you what we are looking at.
We looked at Page Level, Horizontal Tabs, Vertical Tabs, Drop-down Menu, Expose Below and Within solutions, and Inactive Until Selected and Expose within Groups. Here's an example of each. Page Level solution puts the initial choice on Page One. So you can see here where we're asking somebody to select a Notification Preference, Contact me through e-mail, Telephone, SMS, and so on. Somebody selects one of these. Then the next screen they go to actually asks them the follow-on questions. That is, the input field is dependent on their first answer.
The Horizontal Tab solution we saw in a few examples earlier, what we're doing here is asking the same notification preferences question, but we're doing so with a series of horizontal tabs at the top of the section of the form. So once again, e-mail has a series of follow-on questions as does SMS. This method does bring up these issues of mutual exclusivity which we'll talk about in a little bit more depth. Another option is Vertical Tabs. So what we're trying to do here is really align with the path to completion through the form and bring a series of choices once again around Notification Preferences in line with First Name, Last Name, Gender, and then coming down through Contact Info.
We've also included radio buttons to try and make it more clear that only one of these options is selected, but when you change from e-mail say to SMS, the follow-on questions appear on the right. Next method we'll look at is Drop-down Lists. So what we're doing here is actually containing a series of follow-on questions within a section of the form bounded by a drop-down list. So if you switch from e-mail to SMS, you can see that the information inside that form field applies to what's active in the drop-down menu. Another technique is Expose-Below Radio Buttons.
Here we present the initial choice pretty similarly to what we did on the page level option at the beginning. But instead of taking you to a separate page to answer follow-on questions, what we're actually doing is exposing the follow-on questions directly below the choice you make. So when I pick SMS, you can see directly below a series of choices I'm given, I have my follow-on questions. A very similar technique, we're here actually exposing within a set of initial choices, you can see the same follow-on questions for SMS. Note the big difference between this approach and the previous one is that here we're directly embedding the questions below your initial choice rather than presenting them in a separate section down at the bottom consistently.
Two more techniques and then we'll get to some of our results. Exposed Inactive services all the options with all of their follow-on questions in one big form, but only highlights the one that's currently active. So you can see while you can select between Telephone, SMS, and Instant Messenger, all the follow-on questions associated with that initial choice are grayed out and inactive. The one you've actually got selected, in this case SMS, has a series of active input fields, the follow-on questions for SMS. And last but not least, here we're exposing everything on the form, but allowing people to select at the top level which one they're actually going to interact with.
So the radio button for SMS indicates the active choice and the fields below it represent the follow-on questions for that choice. We tested these variations on 23 people using standard usability and eye tracking metrics. Participants were asked to complete each of the eight designs in random order. We did this to minimize familiarity bias. We also asked people just to complete the form fully and accurately. So what did we learn? The best performing was actually the Horizontal Tabs shown here. People were able to quickly go through, pick the selection they wanted, and fill in the subsequent follow-on questions.
In this particular study, the mutual exclusivity issues I brought up earlier didn't come up. That is people weren't confused if they filled out information under multiple tabs whether or not each of those fields would be counted. Interestingly, we saw with the Vertical Tabs, the one stacked on the side with radio buttons that people actually did have mutual exclusivity concerns. That is, they felt they needed to fill in each of the sections as they went down the path to completion. This is different from what I've seen in other tests. So the final consensus on my end is both variations have that same issue.
That is, people may be confused whether or not multiple options are counted in their results. The second best performing of the options was actually this; the Vertical Tabs. I believe in both cases this is due to people being able to quickly move through a section, find what they need to fill in, and get out. Overall, we saw in each of the examples we tested that hiding irrelevant form controls from people until we needed them resulted in forms that are easy on the eyes and completed quite quickly. That is when we didn't show all the options to everyone, they were able to use less eye gazes to see what information is required and get through the form faster.
This was pretty consistent across all the tests. The other thing that we saw was that displaying inline options and their selection dependent inputs in close proximity to one another seemed to lead the highest satisfaction scores. So what that means is when the distance between where the initial question was and where the follow-on questions were, when that distance is low, people tend to have an easier time making the association between that initial question and the follow-on question. The All Options Exposed as Inactive or All Options Exposed in General were basically nonstarters.
They had the lowest success rates, highest number of errors made, and lowest satisfaction of all the solutions. Our eye tracking data showed that participants made a whopping eighteen (18) more vexations with their eyes using the Expose Group solution than they did with any of the inline exposure solutions. That's a lot more time and effort required to parse what's going on in the form. The All Options Exposed as Inactive or All Options Exposed also led to a lot of filling in of irrelevant form fields. That is, people started to fill in fields that didn't apply to them because they were just exposed and on the form, once again leading us to that finding that hiding irrelevant form controls from people is generally a good option.
So how do we think about selection dependent inputs in aggregate? If there is lots of dependent inputs, using the page level control is generally a good idea. You'll get average completion times, average satisfaction scores, and things will basically just be okay. But the sheer fact that there's a lot of follow-on questions from that initial question leads us to using as much screen space as possible, a.k.a. another page. Vertical and Horizontal Tabs perform really well, but can have these mutual exclusivity issues in both solutions. So if you're going down that direction, at least be aware that there's that opportunity for people to get confused.
If you have a long list of initial inputs and just a few dependent questions for each of those, drop-down menu can be your friend, thereby stacking a number of options inside of this drop-down control and then bringing up those follow-on questions right there in close proximity to your initial choice. If you have a short list of initial options and just a few dependents, exposing them inline in a series of radio button choices could be a great way to go because it maintains that close proximity again of initial question and follow-on questions. In all cases, you want to maintain a clear relationship between your initial question and the follow-on questions.
You'll note in all the examples we show we try to use this yellow highlight color to accentuate which things are actually associate with your initial choice. And last but not least, try to avoid jumping that really disassociates those initial options. This usually happens when you have too many follow-on questions and the form skips up and down and people get disoriented about where they are.
There are currently no FAQs about Web Form Design Best Practices.