Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm implementing a (subscription)form which is designed by another party.

A description of the form: - First there are a couple of text-fields - Then there is a section with tabs which contain form-fields - At last there are checkboxes for license-agreement

The behaviour of the tabs is like radio-buttons. If you choose for a tab, you have to fill out only the fields on that tab and you can skip the fields on the other tabs.

I wonder if that is good practice or are tabs more for a wizard-step situation?

share|improve this question
3  
you said you can skip does that mean you have to compulsorily skip or you can fill the other tabs as well? –  Amandeep Jiddewar Oct 8 '12 at 13:51
    
You can skip the other tabs, the fields in the tabs which are not selected are not submitted. –  Willem de Wit Oct 9 '12 at 7:04
add comment

5 Answers

up vote 2 down vote accepted

I do not know what the design looks like. But as you mention, there are 2 different options:

  1. Radio button behaviour (the users choose one tab and fill in the form on that tab)
  2. Check box behaviour (the users fill in a form and can choose to fill in the forms on the other tabs in addition)

The difference needs to be made clear with the styling and description of the tabs.

To quote the article of Luke W on Selection Dependent Inputs:

"While most users are familiar with the concept of navigation tabs on the Web, the manner in which they fill in Web forms frequently impairs the effectiveness of the section tabs approach. When completing a form, many users move from top to bottom and, as a result, often ignore horizontal options. There is also a lack of clarity about whether section tabs are mutually exclusive. Will I submit my selections on all three tabs with the form—or only the selections I made on the active tab?" http://www.uxmatters.com/mt/archives/2007/02/selection-dependent-inputs.php

Users will 'forget' the other tabs (especially with long forms). The users will get unsecure about submitting the form.

I would use tabbing carefully and test it with a few people. At least use it either as checkbox or radio button consistently in the whole form, don't mix them up.

share|improve this answer
add comment

I would suggest some thing like this. enter image description here

Source : http://www.lukew.com/ff/entry.asp?974

share|improve this answer
2  
Nice concept. The radio buttons should make clear that the tabs are alternate workflows, rather than multiple obligatory stages in the form. –  Jimmy Breck-McKye Oct 8 '12 at 16:54
1  
Based on reading the source article by Lukew, some users where still not clear whether there is mutual exclusivity or not. –  Anna Rouben Oct 8 '12 at 16:54
    
@AnnaRouben - hmm, when I first read the OP I was going to raise that as a point, but I thought the radio buttons might be enough to communicate the way the form would work. Evidently not. –  Jimmy Breck-McKye Oct 8 '12 at 16:56
1  
@JimmyBreck-McKye Radio buttons in this format look to me like a lazy designer, rather than an implication of mutual exclusivity. –  Izkata Oct 8 '12 at 18:07
2  
I'm not a supporter of this design. The problem is that the flow is broken: the item that you need to select first is under the items that you need to fill in afterward in this example. That doesn't result in a nice flow through the form. –  André Oct 11 '12 at 11:58
show 1 more comment

I think your decision about the tab use may depend on how clear it is for the users that the choice is mutually exclusive. For example, when it comes to delivery methods (UPS/Fedex/USPS) exclusivity is quite obvious. Visually tabs could be nice because it's clear what the choices are without clicking anywhere and also tabs are usually big and easy to tap. On the other hand, users are trained in a lot of interfaces that tabs don't imply exclusivity so I think it would be beneficial you run a little user study to evaluable if tabs work in your situation. Here are a couple of other frequently used options to show exclusivity without using tabs.

enter image description here

share|improve this answer
add comment

interesting answer on that...seems pretty clear.

Here's a link to a longer article Luke W wrote about testing 8 different methods for this.

Selection Dependant Inputs:

http://www.uxmatters.com/mt/archives/2007/02/selection-dependent-inputs.php

share|improve this answer
    
Link only answers (which is what this is) aren't good answers. If the link goes dark your "answer" becomes useless. Please summarise the salient points in the answer itself. –  ChrisF Oct 8 '12 at 21:28
    
Thanks for sharing the article, it helped me a lot! –  Willem de Wit Oct 9 '12 at 7:20
add comment

Use a drop-down for selecting the contact method, and show/hide the appropriate fields based on the current drop-down selection. The fields you can skip should not have any indication that they exist unless their contact method is selected in the drop-down.

This enforces mutual exclusivity, rather than simply implying it in a way that could easily be misunderstood with using tabs.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.