1

I have a problem to design a form. I know that :

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others

The form I try to remake enter image description here

In the PDF form, if you choose something in 2 - Nature des locaux or 3 Nature des travaux the checkbox are not independant, so checking one box uncheck the others.

Still in the same PDF form, the table let you choose beetween 3 choice, but you can also not choose.

So my question is what is the best input for this form ?

Radiobutton, Checkbox, another thing ?

My form : enter image description here

3
  • From what I get from this, use Radio buttons everywhere but for the table, don't make it a "required" form group. Dec 22 '20 at 10:53
  • Please include a screenshot of your example directly in the question so that we don't have to rely on having to visit an external site to be able to understand your problem.
    – musefan
    Dec 22 '20 at 12:08
  • I have include an exemple of the PDF form and a exemple of my UX Wireframe Dec 22 '20 at 13:05
4

The rule that radio buttons require a single selection applies to a list of radio buttons, not the whole form. Your form has multiple lists (some as short as two items), so each list is a group of mutually exclusive radio buttons. Within each group of radio buttons, the user can only choose one. When the form is completed, multiple radio buttons are selected –one from each group.

For example, one group is:

J’atteste que les travaux à réaliser portent sur un immeuble achevé depuis plus de deux ans à la date de commencement des travaux etaffecté à l’habitation à l’issue de ces travaux:

( ) maison ou immeuble individual

( ) immeuble collectif

( ) appartement individual

( ) autre (précisez la nature du local à usage d’habitation) [------]

(where “( )” is a radio button, and "[------]" is a text box of appropriate length)

Or, if you excuse my Google Translate:

I certify that the work to be carried out relates to a building completed for more than two years on the date of the commencement of the work and assigned to housing after this work:

( ) individual house or building

( ) apartment building

( ) individual apartment

( ) other (specify the nature of the premises for residential use) [------]

Next is a separate group that happens to have one set of radio buttons nested within the last radio button option:

Les travaux sont réalisés dans:

( ) un local affecté exclusivement ou principalement à l’habitation

( ) des pièces affectées exclusivement à l’habitation situées dans un local affecté pour moins de 50% à cet usage

( ) des parties communes de locaux affectés exclusivement ou principalement à l’habitation dans une proportion de [------] millièmes de l’immeuble

( ) un local antérieurement affecté à un usage autre que d’habitation et transformé à cet usage Adresse: [------] Commune: [------] Code postal: [------] dont je suis:

 ( ) propriétaire   

 ( ) locataire

 ( ) autre (précisez votre qualité): [------].

Or, according to Google:

The work is carried out in:

( ) a room assigned exclusively or mainly to housing

( ) rooms assigned exclusively to housing located in a room allocated for less than 50% for this use

( ) common areas of premises assigned exclusively or mainly to housing in a proportion of [------] thousandths of the building

( ) a room previously assigned to a use other than residential and transformed for this use Address: [------], Municipality [------] Postal code: [------] of which I am:

 ( ) owner  

 ( ) tenant 

 ( ) other (specify your position: [------].

The first three numbered items of the NATURE DES TRAVAUX Section each have a pair of radio buttons. For example:

  1. Fondations:

    ( ) n’affectent pas les fondations

    ( ) ou rendent à l’état neuf, par ajout ou remplacement, la moitié au plus des fondations.

Or:

  1. Foundations:

    ( ) will not affect the foundations

    ( ) will return foundations to new condition, by addition or replacement, at most half of the foundations.

I'm not sure I understand Item #4 Éléments de second œuvre. I think it might be your only check box.

[ ] ne rendent pas à l’état neuf les deux tiers ou plus de chacun des six éléments de second œuvre suivants

Or

[ ] will not restore two-thirds or more of each of the following six finishing elements to new condition

Where "[ ]" is a check box. However, it seems superfluous with or contradicted by the table below, so maybe I don't understand it. If the user selects it, can they forgo the table? If so, then checking it should disable the table.*

In the table, each row is a group of mutually exclusive options of:

  • Les travaux ne portent passur cet élément
  • Les travaux rendent à l’état neuf moins des deux tiers de cet élémentà l’issue des travaux
  • Les travaux rendent à l’état neuf les deux tiers ou plus de cet élémentà l’issue des travaux

Or

  • The work does not relate to this element
  • The work returns less than two thirds of this item to new condition after the work
  • The work returns two-thirds or more of this item to new condition after completion of the work.

They are all radio buttons.

As a designer, your main challenge is to visually divide your radio buttons into their groups or lists with graphic effects so the user can tell which option is mutually exclusive of what other option; otherwise, you user may not complete the entire form. This can be done with spacing, indenting, boxes, and background shading. Your screenshot of your prototype looks like a good start --I'd expect users to see that as two separate lists of four mutually exclusive options.

As a more difficult example, you need to show that the “owner, tenant, other” list is within the “other than residential” option. Indenting the list may be sufficient for this list. It will also help if it switches from disabled (dimmed) to enabled when the user selects the “other than residential” option. Likewise, the text boxes only enable when the user selects the corresponding option.

The table at the bottom is trickier still, but it may be sufficient to make the horizontal rules (dividing lines) darker and heavier than the vertical rules. That way, the user will tend to see each row as a group, rather than each column or the entire table. Maybe there should be no vertical rules at all.

*In general, you can use this opportunity and the graphic and interactive capabilities of an electronic form to make this form less confusing to the user. Probably could use improved wording too, which I say just because government forms almost always do!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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