I have a scenario in an appointment booking web applicaiton, where there is a form, where I need users to be able to search for previous clientele, and if they are not found, have the option of entering new record. I am not sure what is the best way to approach this on the form. I was thinking some form of autocomplete/search, but i am not sure how to best let them add a new record at that point. I feel like this must be a common problem with known solutions. How would you approach this?
2 Answers
There are three uses cases to consider here,
- One is that the clientele already exists and you need to edit the information or just view or their data
- One is that the clientele already exists but its not the clientele you are looking for
- One is that the clientele does not exist.
So accounting for the three use cases, I would suggest a design which uses autocomplete to quickly filter down to the desired clientele(if the clientele exists) or to see if the clientele is the same as what we are checking for. Hence the layout would look like this :
download bmml source – Wireframes created with Balsamiq Mockups
So here the user searches for a client and the auto complete helps him filter down.If a matching clientele name is found then it retrieves the values but also gives him an option to add a new clientele with the same name.
However if no match is found then you can have something like this :
where a error message is given and you can add a new clientele if needed
If you have a use case where a user already knows in advance whether or not the client already exists in advance you can also integrate the "Add new client" option inside the search dropdown.
What is critical here is that the dropdown list should be shown immediately when the input field is focused, so that the "Add new client" option is visible without having to type.