My team would like to implement a way to inform users that our web app's search bar requires at least 3 characters in order to start a search?
What are the best practices when provided feedback to users about the minimum amount of characters one should enter in order to start a search?
I would reckon that there should be some instant feedback text nearby (typically below) the input to let the user know what more they need to do.
You probably only want to show the feedback when the search field is actively being targeted.
Take Stack's comment feature, before the user starts typing it says "Enter at least 15 characters":
Now after I start typing a comment and it says how many characters are left:
Another example is React Icons, it simply shows a message as a placeholder over where the results will later be shown, saying how many characters are required before the search will begin. This example has the feedback a little further away, but can be used to sit over the results element(s)
I think it depends on how the search box is displayed and designed:
If it's displayed inside a page, with enough empty space around itself, you might be able to add a caption text below the input field mentioning the character limit.
If it's displayed as a single-line element (inside top bar or navbar), displaying the caption can be a little tricky, and you need to consider a few things:
The character limit can also be mentioned directly inside an empty results page, if changing the view is not a problem.
In your case, if you have a search bar, some solutions would be:
When the input field is focused, expand the search bar vertically and show a caption below the input field.
When the search is submitted, check if the minimum character limit is met, and if not, show either a tooltip, a small notification or place a red text inside the input field (if you have enough space).
Let the user execute an empty search and display the character limit inside the empty results page.
You could show a dropdown or a tooltip that updates after anything is typed in the input and the count isn't achieved yet. If the search field shows the results in a dropdown, you can utilize the same dropdown, but display instructions instead of found items. If not - you can go for a tooltip.
You can show said instruction after a little delay (aka debounce), say, 200-400ms. So if the user is fast enough (e.g. if they are typing normally), they won't see the instructions text while entering the start of every query. But if they type and stop (so, most likely, they are done and are expecting something to happen), we show them the instructions and they know to continue typing.
Something like this:
I would use an event-driven tool-tip which appears on the search the moment a user starts typing.
