3

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?

2
  • 3
    you said you can skip does that mean you have to compulsorily skip or you can fill the other tabs as well?
    – Aman J
    Commented Oct 8, 2012 at 13:51
  • You can skip the other tabs, the fields in the tabs which are not selected are not submitted. Commented Oct 9, 2012 at 7:04

5 Answers 5

2

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.

6

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

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

6
  • 3
    Nice concept. The radio buttons should make clear that the tabs are alternate workflows, rather than multiple obligatory stages in the form. Commented Oct 8, 2012 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. Commented Oct 8, 2012 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. Commented Oct 8, 2012 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
    Commented Oct 8, 2012 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é
    Commented Oct 11, 2012 at 11:58
2

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

1

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

1
  • 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
    Commented Oct 8, 2012 at 21:28
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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