Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Selection-dependent inputs

From: Web Form Design Best Practices

Video: Selection-dependent inputs

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.

Selection-dependent inputs

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.

Show transcript

This video is part of

Image for Web Form Design Best Practices
Web Form Design Best Practices

30 video lessons · 12773 viewers

Luke Wroblewski
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Form Design Best Practices.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.