How to tell a user that a search is being performed when they stop typing

Question

I'm developing a web application and inside this application I have the following form

Whenever the user changes the value of the Tax Code field and there is a pause in typing, a database search is performed automatically. I added a search icon as a placeholder but the user is not able to understand when the application is performing the search. I thought about adding a loading icon when the user pauses and the search begins and then hide it again when the user resumes typing.

Any suggestion about this?

Answer 1

I would suggest a miniature progress wheel at the end of the input that only displays once a search is going on. I've seen this behavior before (I believe on user name boxes) and I believe that progress wheels are so clear that everyone will understand that something is going on.

Once a user types, hide it briefly (or grey out to reduce flicker) and then show it again. Once the search is complete provide a positive reinforcement (with say a green tick)

or provide a drop down selection or similar to the user so they can make an additional choice.

Answer 2

If I understood you right, then you are practically working on an autocomplete field. The standard for those is to offer search results like with a dropdown on the bottom. Therefore the easiest thing would be to add searching... as first item in the drop down whenever a search is performed.

Maybe animate the … / three dots

• .
• ..
• ...
• (reset)

when the search is performed to have something that geta the users attention. Remove the item when the search results come in and offer them for click-insert. That should be both subtle and effective as it's exactly where the user has his current focus.

Example:

Performing AJAX/Background Search
+-----------------------------+
| I am looking fo             |
+-----------------------------+
| searching..                 |
+-----------------------------+

Result
+-----------------------------+
| I am looking for a          |
+-----------------------------+
| Wale                        |
| Welsh                       |
| Warehouse                   |
+-----------------------------+

Answer 3

I think the search icon (great icon by the way) can be used to make the user understand that a search is going on pretty much as is. The only changes I would make are:

1. The icon should only be displayed while a search is going on, once the search is over the icon should disappear
2. While the search is going on, the icon should be blinking (optional)

The reason (2) is optional, is because there are some that are against blinking icons and such. I personally find that mild animations are always the best at getting the users attention.

Answer 4

I am a bit confused by all the people suggesting this is about AutoComplete.

AutoComplete suggests a completion of what you are typing, eg: Google suggesting search phrases.

That is not the same as showing search results.

I think conflating the two and the fact that a search is taking time is going to cause confusion.

I like the idea of a little search icon to indicate that a field triggers a search - so the search is next to those fields to indicate to the user that the field is special.

When a search is being performed, that icon can animate. There is less blink effect if an icon animates than if it pops into view.

Note that if you have such an icon it should also be clickable to trigger the search instantly because some people will try to click it.

One note about searches in general - use timeouts if you want to avoid triggering animations if there's a case your searches will be very fast.

Don't assume searches are always fast. Evernote on Windows drives me crazy because they try to start searching after I type in 2 characters and that's a distinct pause (I have over 17,000 notes and a relatively old laptop that was fast 6 years ago). They trigger this search without delay - I'm a 80wpm typist typing letters in a gestalt burst and it still kicks in regardless of the speed of typing!

Answer 5

From what I understand, you want the user to be aware that the TaxCode field is a autocomplete field and a search is being performed as they type.

In my experience, making the field a drop down with auto-complete filtering has worked. I'm assuming that the values in Tax Code are not random user generated values and that the value entered can be one of a possible range of codes. So when the user begins typing, the matching values will be filtered and displayed in the drop down and can be selected via keyboard arrows. If no values are entered, the field would work like a normal drop down list.

Here is a working demo.

A limitation of this approach would be if the amount of values in the dropdown are an extremely large number and would in turn cause long screen loading times for the user. .