3

I'm currently adding a new section to a form which consists of two radio buttons, however, I'm struggling to decide if I should include a label for the sake of clarity. Above both of the radio buttons is a brief explanation of the options, so is the label on the first radio button unnecessary? Any feedback would be greatly appreciated.

Design 1 (no label):

enter image description here

Design 2 (label included):

enter image description here

  • I'm afraid we need the "brief explanation" above the buttons to judge if it's sufficiently clear without the label. Can you add it? – Michael Zuschlag Aug 1 '18 at 22:35
  • Hey @MichaelZuschlag, the images now include the description. – CinnamonBun Aug 1 '18 at 23:39
  • Can the approach be slightly changed? I mean does it have to be radio buttons? – DarkBlaze Aug 2 '18 at 5:56
  • Another thing to consider is that you might also want to label (or not label) based on how other items on the form (or the rest of your page) is designed. As with any 'rules' you want to be able to apply it consistently. – Michael Lai Aug 2 '18 at 5:56
5

I'd keep it simple:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In the numeric field determining the number of months you can put only valid values (like 1, 3, 6, 12, 24, etc.) or place a combobox there with valid durations (like 1 month, 3 months, 1 year, 2 years, etc.).

  • I like this. It is like Design 1, but with clear phrasing and better layout. – gerstemout Aug 2 '18 at 16:39
  • I believe MSDN advises against putting textboxes in the middle of sentences. Just something to keep in mind if you're targeting Windows – bace1000 Aug 3 '18 at 20:23
  • @bace1000 - if it is so - how do they argument that? I.e. why do they advise against? – Mike Aug 5 '18 at 20:15
  • Search for "Accessibility" in this article docs.microsoft.com/en-us/windows/desktop/uxguide/vis-layout. They say that mid-sentence controls can't be localized easily, and don't play well with assistive technologies. – bace1000 Aug 5 '18 at 21:17
  • It's clear to me now and their reasoning is sound. Now it depends on the OP what the target audience is with respect to localisation and assistive technologies. – Mike Aug 6 '18 at 7:18
3

Hide the input field for "month" till the user selects "Fixed term" and display the input field next to "Fixed term" instead of below it, this will make it more obvious that those two elements are related.

0

I think the labels are certainly helpful here, personally, but I would make an additional couple of changes:

  1. Have the field and "month(s)" text hide when the "Ongoing" option is selected. That's helpful for clarifying what the expectation is if someone fills in the field but selects the other radio button.
  2. Add a trailing ellipsis to the label "Fixed term" (e.g. "Fixed term…"). This is helpful if the "Ongoing" option is selected and the field has been hidden as a way of indicating that more input would be required if you picked the fixed term option instead (this is a bit of a common convention; Apple recommends it for buttons that open other dialogs, for instance).
  3. Default to the most likely radio button being selected. If you default to fixed term, that'll preserve the ease of data entry for users (either fill in the number of months, or change to ongoing), and also will ensure you get a validation error if someone fails to set that field.
0

If you know most of your users have some type of contract, you could also go with;

Please select type of contract; (select field > preselected: Ongoing), when users clicks on select field dropdowned is Fixed options also, 3 / 6 / 9 months or whatever can be your case.

Can be nicely made with Material UI dropdowns that are looking nicer than standard ones.

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.