For a B2B web application that we are designing, we have a selection box with a drop-down menu to select the values of which are essentially labels. A user can select from an existing list of labels, but can not create a custom label. Tags are added by a different user and are not updated too often. There is no upper limit on the total number of labels this drop-down menu can have, but there is a lower limit of at least 1 label to select.
We are trying to explore two design patterns, but we can not determine which one would be best for our users, both short and long term. We expect our users to interact with this user interface component at least a few times a week.
Pattern 1) We show a drop-down menu with a placeholder text, "Select from the labels below"> By clicking on this field, we show the drop-down menu with all the labels available to choose from. We will add a search layout within the drop-down menu to allow the user to search for a particular tag in the list:
Pattern 2) We show an input field with a placeholder text & # 39; Write to search or select labels & # 39;> When you click on this field, we show the drop down menu with labels in alphabetical order> As the user type the name of the labels, label in the drop-down list> The user selects the value> Write the next label value or scroll through the drop-down menu to find and select the labels you want to add.
This can be useful if the user knows the names of the labels they want to add. But at the same time, it is used mainly, in other applications that we investigate, where the user can add a value according to his will (labels / personalized values), which we do not have.
What interaction pattern would be better in your opinion / experience and why?