User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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:
alternative 2:
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.
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:
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.
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:
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.
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.
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.
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.'
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.
