How to have both Search and Add options?

Question

I have a list of data. I want the user to be able to search within the list by typing in an input field. I also want the user to be able to add, either because of no search results, or without having to search in the first place.

I'm aware of the approach appending the search result to the list, as seen here: Need examples/suggestions for search and add if not exists feature

I want to use that approach, in addition to having a stand alone add option. The append-to-list approach only works for users that search first. If the user knows that they want to add, they should not have to search to do it. They probably wouldn't think to search before having to add.

A possible solution would be to have a single input and button that are for "Search/Add". I think this is efficient, but also unusual.

The other approach is to have a "search" input and button (at the top right), and and "add" input and button (beneath the list). This is more clear, but would it be weird having two ways to add to the list that look so similar?

Which do you recommend?

Thank you.

Answer 1

You could use a single input field. When query is typed, the results show up. When the Add button is used, it will be added to list.

Feedback appreciated.

Answer 2

Please think about why user tap the search field? I would not expect to add data by a search field. The approach appending to the result list is not the primary way to add, it solves the problem which there's no result.

I suggest to use the mentioned approach and provide another add button in your flow.These two approaches will access the same process to add data.

Answer 3

The best recommendation is to be clear on the assumptions each approach is based on.

The append-to-list approach assumes that users wouldn't or shouldn't search before adding an item, there is a possibility that this is wrong.

The three controls approach assumes it would feel weird for users to use.

One way to address this issue in a user-centred way is by testing with users and collecting their feedback. Just draw the two interactions on a white sheet of paper and ask people to complete a task using them. The gathered result will be far more useful than guesses.

Answer 4

What about an editable combo-box (a.k.a. drop-down list) with the action button next to it?

When the user starts typing, the list below changes to contain only the terms starting with the typed string. If nothing matches the user input, nothing gets displayed.

From my developer's experience I know that such control in e.g. WPF has enough logic to inform on the user's choice (if chosen from the list) or the typed value.