I have a form that allows a user to enter a product link, previously they had three fields: a brand and URL were required, and an optional notes field.

They get the URL from another system and after observing user behaviour I found that they were almost always entering an ID from the other system in the notes field.

To make this process less prone to human error, I constructed an API that allowed the form to obtain a list of products from the other system, the user selects the product from a list and it automatically fetches the correct URL, correct ID which it adds to the notes field, and allows for some additional functionality using extra information it can gather from the API.

I have added the form to use this method above the original form, and explained to the users that it is preferable to use this one where possible, and to use the old form if custom data is being entered that does not fit the model employed by the new form.

I thought this was simple enough. However, I have witnessed users getting confused and doing all sorts of silly things. Entering a URL the old way then selecting a product, clicking the wrong 'create' button etc.

How can I make it more obvious that these forms are exclusive, only to use one or the other?

I have considered hiding the old form (with the 3 fields) unless a button is clicked to show it, or maybe use tab controls, but I feel these options make the forms less accessible.

Edit: I should clarify, these forms are for internal use only, not public, and will be used by experienced administration staff

enter image description here

2 Answers 2


Understanding the requirement, the user has to first browse through the product list within the drop-down Product to check for his product and only if he doesn't find the product on the list he has to input custom data. Hence, it is not ideal to use a control to choose between the forms.

Best Approach

Add an option "Product not listed" within the drop-down Product.

enter image description here

Only when this particular option is selected show the fields to enter the custom data.

enter image description here

This way you can eliminate the confusion caused to the users and improve the user experience as now the users made to choose between the forms themselves by only using the information they have instead of directly making them choose between two forms displayed.

  • I think this is the best solution for this situation, with one exception, the "Product not listed" option should be at the top, not the bottom, because in the case of a large amount of choices, the user should not have to scroll a lot to look for it
    – Darren H
    Commented Feb 5, 2018 at 13:45

I guess it depends on how often do clients input custom datas but, you could keep the newer(Automated) form 'open/shown', then have a text link/checkbox, like 'custom data?' to access the old form, but instead of opening another line of fields, i would replace the "Product" select with the "URL" and "Notes" fields.

  • This idea sounds good, but when I think about it, it's very close to a tab control. That might be worth me reconsidering
    – Darren H
    Commented Jan 31, 2018 at 11:07
  • @DarrenH how about a typeahead field? That way, you wont need to create two forms, if the user start typing and it exists in the object, it'll list the suggested product, or if not, that means it's a custom data. In case the user click on the suggested product, just update the fields automatically ('Brand' in this case). Can't you change the order of the fields? 'Product' as the first field, would make more sense in case of a typeahead field. typeahead example
    – Takebo
    Commented Jan 31, 2018 at 11:21

Your Answer

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

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