Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

enter image description here

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?

share|improve this question
1  
In order to get more responses you might want to change the title of your question. It gave me the impression on being about implementation (which would be off-topic), but it isn't. –  msparer Aug 11 at 10:58
2  
What type of data is returned? Because that could help determine what type of visual feedback is given –  Majo0od Aug 11 at 12:15
2  
Consider how most people write with keyboards. They do not look at the screen while typing but on the keyboard. So when they stop typing, chances are high that they are actually finished typing in anyway. Especially in a form where only one info chunck (one word?) goes in one form field. I guess almost every user will just type in the whole info into the form field before looking at it. –  Alexej Froehlich Aug 11 at 13:46
2  
@AlexejFroehlich Is it actually most people that look at the keyboard? Hmm. I've been living in this closed little world where all my friends can type properly. –  Cruncher Aug 11 at 15:00
1  
Oh and btw, on touch interfaces, you always look on the "keyboard", don't you? –  Alexej Froehlich Aug 12 at 12:41

5 Answers 5

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.

enter image description here

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)

enter image description here

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

enter image description here

share|improve this answer
1  
One problem seen sometimes with these wheels is that they look tacky if they are not perfectly centered. Depending on how long your search takes, it might not even be necessary. For example, check out the search box in the top right corner of Wikipedia, it seems to have about 500ms delay in searching. –  jmiserez Aug 11 at 15:11
    
@JeremieMiserez: True - in which case a threshold to show the progress wheel seems appropriate. If the search is that fast anyway then no additional visual cue should be required. –  Ian Aug 11 at 15:35
    
Also, Wikipedia sort of implies that it will start searching if you stop typing as the dropdown appears while you are typing the phrase "containing..." and your currently typed text. –  jmiserez Aug 11 at 16:17
1  
@JeremieMiserez and yet the OP feels his operation is long enough that a visual cue is required. –  Gusdor Aug 12 at 7:08
    
Sure, he can do that of course! –  jmiserez Aug 12 at 11:24

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                   |
+-----------------------------+
share|improve this answer

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.

share|improve this answer
1  
Instead of letting the icon blink I would let it move in a circle. I believe windows 3.11 or 98 did that. –  nwp Aug 11 at 12:22
3  
Any animation would do the trick, as long as it's mild enough not to annoy the user. –  eitanfar Aug 11 at 12:23
3  
For the animation, ... under the icon (appearing and disappearing form the left to right) is an option. –  yo' Aug 11 at 14:19

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. .

share|improve this answer

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!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.