For a B2B web app we are designing, we have a select box with a dropdown to select values from which are essentially tags. A user can select from an existing list of tags but they can not create a custom tag. Tags are added by a different user and are not too frequently updated. There is no upper limit on the total number of tags this dropdown can have but there is a lower limit of at least 1 tag to select from.
There are two design patterns which we are trying to explore, but we are not able to figure out which one to use/which one would be better for our users in both, short and long-term. We expect our users to interact with this UI component at least a few times a week.
Pattern 1) We show a drop-down with a placeholder text, ‘Select From Tags Below’ > On click of this field, we show the drop-down with all the available tags to choose from. We will add a Search provision inside the dropdown to allow the user search for a particular tag in the list:
Pattern 2) We show a searchable input field with a placeholder text ‘Type to Search or Select Tags’ > On click of this field, we show the drop-down with tags in alphabetical order > As user types the tags name, we show the tag in the dropdown list > User selects the value > Types the next tag value or scrolls through the dropdown to find and select the tags he would like to add.
This can be useful if the user knows the names of the tags he wants to add. But at the same time, is mostly used - in other apps we researched - where the user can add a value as per his/her will (custom tags/values), which we do not have.
Question: Which interaction pattern would be better in your opinion/experience and why?