14

I have two fields.

The first is a checkbox, checking this checkbox enables the textarea below it.

Un-checking the checkbox disables the textarea below it.

I'm looking for a suitable way to indicate to the user that the textarea will not be submitted as part of the form, even if they have filled information out and unchecked the first field.

Currently the textarea when disabled is a greyed out state.

My intention is to keep this form as brief as possible without being confusing for the user.

5 Answers 5

32

Why not try to hide the text area when you click the disable button instead of greying it out? I've tried this approach in a long web form interface and hiding the unused or optional fields works great. When the textarea is gone the mental model of the user should be that no information is submitted because the form is not visible.

Otherwise, you can put some grey text below the textarea when its disabled, saying:

"No information will be submited from this field".

1
  • 6
    Brilliant. I ended up going with your second alternative. I'm not a fan of hiding UI elements, especially since the target audience for this form is primarily mobile users. For the record I don't think hiding UI elements is a bad idea in general, just not for this specific use case. Anyway, thanks for the second suggestion. Jun 7, 2016 at 9:14
5

I agree with Andrew about check and uncheck.

However, instead of checking and un-checking the elements; use show and hide method, which means, when user checks the checkbox; show the textarea or else hide it.

The behavior will directly inform the user that to enable textarea he/she has to check the checkbox first. It's called progressive disclosure.

4

Keep the behavior as you describe it, but when the user un-checks the checkbox clear any text entered in the field and then disable it.

EDIT :

When the checkbox is checked again the cleared text will be fetched back to the text area. This will save the work of the user when the checkbox is un-checked by mistake.

4
  • 3
    On a mobile interface, a single wrong touch could delete all the text I was typing on my smart-phone for 5 minutes ? - please don't!
    – Falco
    Jun 7, 2016 at 11:15
  • 4
    @Falco one possible solution for what you say is when checked again the cleared text will be fetched back to the text area. Jun 7, 2016 at 11:30
  • 2
    @DesignerAnalyst I had the same question as Falco but your solution to that makes your answer better. You should include it in your answer. Jun 7, 2016 at 16:13
  • Agreed.. Your solution to restore the text saves this answer. Jun 7, 2016 at 20:34
3

Make use of the label text for the fields:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3

Why do you need the check box at all? If someone wouldn't want the contents of the text area to be submitted, why would they write something there in the first place?

Unless the text area is prefilled by default, I think you could probably do without the check box.

Instead, you could write the purpose of the text area in gray right into the area, perhaps ending in "(optional)". That purpose text should not be transmitted, of course.

1
  • It's not prefilled. It's used when generating a report of an incident, the checkbox indicates 'action was taken', the textarea asks 'what action was taken'? It's so we can filter reports between action taken/not taken and see what action was taken, or whether they still need to report that information. However, we don't want the user to be able to indicate that a certain action was taken without saying action was taken in the first place. Jun 8, 2016 at 12:15

Your Answer

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

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