23

I have three radio buttons and text input fields, but the user is only supposed to be able to use the input fields if the radio button is checked. What would be the best approach? To hide the input fields until radio button is checked or to disable them and enable them when radio button is checked?

alternative 1:

enter image description here enter image description here

alternative 2:

enter image description here enter image description here

  • 1
    If you could explain why would the user use the input field, it will add more context to be able to provide a possible solution. In general, progressive disclosure is a better option and in this might make sense here, as user needs to do task A only after which he can do task B. So, focus on task A first and then show him what else he needs to do or can do. – Amit Jain Apr 26 '16 at 10:17
  • 1
    Are both columns check-able simultaneously or are they all part of the same group (i.e. have the same name="" attribute)? If they are in the same group then I recommend labeling them One, Two, Three, Four, Five, Six to avoid confusion for us visitors :) – MonkeyZeus Apr 26 '16 at 14:43
  • 11
    Why does there need to be two boxes? I would think that a single text entry block to handle any of the radio button options would suffice. – BooleanCheese Apr 26 '16 at 15:23
29

When you grey out a control, you are communicating "something is currently disabled, but may become available if you do something else on the page".

The only down-side of this approach is the disabled controls will occupy space on the page, so if those disabled controls are rarely used and/or there are many of them, it could be adding unnecessary visual complexity for very little value.

When you hide something and only reveal it on demand when it is needed (progressive disclosure), it ensures the page is kept simple until circumstances dictate additional controls need to be displayed.

The only down-side of this approach is the page will need to adapt to display the newly revealed controls. It is unlikely the user will be surprised by progressive disclosure because it is a robust interaction pattern that has been around for many years.

Both approaches are valid and have their pros and cons. Ultimately your decision will be based on the value of the additional controls, the quantity of additional controls and the frequency of their use.

14

Why have a separate text box for each field if the user can only input a value once? Just have a single text box to hold the value of whatever option they select:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The label of the box can change based on which option they select. You can either hide this field until they've selected one of the options or just have it labelled something generic so it can apply to any of the options.

  • 2
    +1 for questioning the question. The original sketch seems like a waste of screen space to me. The other answers make good general points, but I suspect this might be an XY question. Anyway, your solution would provide the best UX, imho. The user can see the connection between the radio button and the text box, rather than wondering 'why are there 6 boxes? why can't I type into the other 5? what are they even for?' etc. – underscore_d Apr 27 '16 at 8:46
  • 3
    This approach easily leads to making mistakes and there are a few questions I would ask beforehand: 1) Is the connection between the selected option and the value field clear? 2) Do people forget to change the radio but edit the input field (or vice versa) Or is this irrelevant because the value is mostly the same? 3) If the value changes when a radio get selected, should it change even when the user has edited it? – jazZRo Apr 27 '16 at 9:08
  • 1
    space could be even further reduced by using a dropdown/combobox element for the options. – daniel May 24 '16 at 15:14
6

I can see both sides of those designs and I don't think that either is "wrong" but I would always recommend keeping things simple for the user. In this instance, that would mean having the boxes visible but greyed out.

This accomplishes two things:

  1. The user is aware from the beginning that they will need to prove additional text. Were the box hidden, a percentage of users would just tick the box and think they were done, only to be annoyed by the "Please provide data" error that would pop up.
  2. There are fewer technical concerns. Your page layout would not change when things appear / you don't need to worry about clearing/retaining data. Simple things but they all add to the test conditions needed for your product.

Given the nature of the data you're capturing, I would challenge the use of check boxes, as opposed to drop down selections. Are check boxes necessary? They're always fiddly, especially on designs for mobile devices.

5

In the company where I work, the UX team always wants "every input visible to the user" firstly because you are communicating the user the whole process, and secondly because an appearing field is more hard to recognize, leading to many errors in filling the inputs before submitting the form.

This is quite always true, but of course there are some edge cases, for example, if the form is really messy, then clean up something and let the field appear (in some fancy way to be seen) could be a better way.

  • A very good general point, but in this case, the OP indicates that only the text box corresponding to its adjacent radio button will ever be usable - meaning that of "every input visible to the user", 5 of them will always be not applicable, i.e. useless. That's way too much visibility! – underscore_d Apr 27 '16 at 8:51
2

If you hide them first, and show them once a radio button has been chosen, you have to indicate that this is going to happen. If you don't, users might not expect this to happen, and can get confused or even annoyed by the fact they have to do "yet another" action to complete this part of the form.

If you cannot clearly state somehow what the next step for the user is going to be, showing them from the start but disabling them (and graying them out for example) will probably give a better view of what the user will have to do next, thus giving a better user experience.

0

If we are talking about a web page, on mobile devices with smaller screens, I can imagine the 'hide' approach being problematic.

My own habit when browsing on mobile is to zoom in and 'fit' the width of the text I'm reading to the screen width (by double-tapping on the text). This way I have maximum text size without losing much information about where I am in the document (at least laterally). If you go for the 'hide' approach, and your mobile users zoom into the text as I do, they will initially not be seeing the text fields that appear when they make a selection.

So I would say 'disable,' don't 'hide.'

0

I would prefer to hide them and show them on hover. this will bring to the user the idea that he must select (click) on a field to put a text. the user will play first with the pointer up and down and he will notice very easily that the input box will remain shown whenever he/she will click.

I am not with the idea to hide it completely unless you click ... sudden action is not a good practice. and also I am not with the idea to show them and disable it ... you do put elements in the pages not to disable them this will give the idea that there is something wrong in the page. and of course I am not with combining all radio boxes with on input box, because that solution will not bring in mind that there is an input box related to what radio button I have just select it, what if the user what to change his mind and select another radio button!!

So my Solution is in between all other solutions, hiding the input box and in the same time shows them and the decision in the users hands. depend on the moment of his pointer.

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.