What should the behaviour be of tabs in a form?

Question

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?

Answer 1

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.

Answer 2

I would suggest some thing like this.

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

Answer 3

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.

Answer 4

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.

Answer 5

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