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.

Improve this question

4 Answers 4

Reset to default
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

Improve this answer
3
  • 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, 2019 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, 2019 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, 2019 at 14:47
2

Adding an alternative for comparison.

enter image description here

Improve this answer
1
  • 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, 2019 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.

Improve this answer
1

Could do something simpler.

Text button could be 'Generate' enter image description here

Improve this answer
2
  • 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, 2019 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, 2019 at 16:58

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.