32

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?

9
  • 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.
    – msp
    Aug 11, 2014 at 10:58
  • 2
    What type of data is returned? Because that could help determine what type of visual feedback is given
    – UXerUIer
    Aug 11, 2014 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. Aug 11, 2014 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, 2014 at 15:00
  • 1
    Oh and btw, on touch interfaces, you always look on the "keyboard", don't you? Aug 12, 2014 at 12:41

5 Answers 5

50

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

5
  • 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, 2014 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, 2014 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, 2014 at 16:17
  • 1
    @JeremieMiserez and yet the OP feels his operation is long enough that a visual cue is required.
    – Gusdor
    Aug 12, 2014 at 7:08
  • Sure, he can do that of course!
    – jmiserez
    Aug 12, 2014 at 11:24
12

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

3
  • 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, 2014 at 12:22
  • 3
    Any animation would do the trick, as long as it's mild enough not to annoy the user.
    – ethanfar
    Aug 11, 2014 at 12:23
  • 3
    For the animation, ... under the icon (appearing and disappearing form the left to right) is an option.
    – yo'
    Aug 11, 2014 at 14:19
2

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!

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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