1

Are there any guidelines on how to present a mandatory input field which can either take in user input or be generated for the user?

(Example - A mandatory promo code field which can both take in user input OR generate it for the user incase they fail to provide one. )

I'm not sure which of the following would be easier for the user to understand:

Option 1: enter image description here

Present it upfront and provide an option to generate it for them incase the user doesn't have it.

Option 2: enter image description here

Provide it as a radio button and incase they don't opt for it, auto generate the number for them once they submit the form.

10

Talk to your users!

Options 1,2:

enter image description here


A better option:

Talk to your users, ask them to enter the Segment ID and let them know right away that you can auto generate it for them in case they don't have it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Thank you, this is very helpful! Your solution definitely works great for my case. However, out of curiosity, would option 2 be any better if a checkbox was used instead of a radio button? – Ashwin Nepal May 17 at 8:29
  • @AshwinNepal You are welcome, glad it helps. Option 2 has another issue, which is auto-generating the ID on form submission. Especially that the field is mandatory, the user will be confused if he/she doesn't have the ID unless you make it very clear that it is okay if they don't have it as it will be auto-generated for them when they submit the form. A check-box is better than a radio-button, radio-button should not be used in this case. – Mo'ath May 17 at 14:43
  • @AshwinNepal Remember that you need to define the default/expected behavior. Meaning, do you want to auto-generate the ID by default but offer the user the option to input it, or you expect users to input the ID and in case they don't have it, you auto-generate it for them. The design I provided works for the second case, where you expect the user to input the ID, and if they don't have it, you offer to auto-generate it. – Mo'ath May 17 at 14:47
2

Adding an alternative for comparison.

enter image description here

  • This is a good alternative design. Good job disabling the text-field when the check-box is selected to indicate it is auto-generated and uneditable. It of course gets enabled and cleared when the check-box is unselected. – Mo'ath May 17 at 15:02
1

Option 1 is easier to understand and the "Generate Segment ID" should be a link to autofill the above input.

In Option 2, the radio button provides no choice to the user than struggling to find a segment Id. Difficult to understand it will be generated automatically.

1

Could do something simpler.

Text button could be 'Generate' enter image description here

  • 1
    I think this design could be very tricky. No user testing to prove it but I would expect some users to enter the Segment ID and then click the GENERATE FOR ME button too thinking it is the next step. This design doesn't indicate the availability of two options (input or generate), and I expect that a good chunk of users users won't learn that the GENERATE FOR ME button will remove their code and auto-generate a new one till they use it and carefully notice that their code was changed to the new auto-generated one. – Mo'ath May 17 at 14:56
  • 1
    True. I guess the generate button could be disabled once user puts some input. But that could still lead to confusion. Thanks anyway. – Arif Kazi May 17 at 16:58

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.