Preloader for search form

Question

I have a tool (webapp) that allows people to search my database. They are able to choose filters and sort their results, etc. I wanted to add to the experience to let the user know that their search is loading, once they click the submit button.

So the search form looks like this

*** SEARCH FIELD || SUBMIT BUTTON ****

* FILTERS *

* RESULTS *

I am trying to decide between:

• the submit button turning into a graphical preloader. So it initially has a value of 'SEARCH', on click, it is replaced with a preloader gif, to give the effect of a loading. This is nice, tidy and simple.
• or a preloader in the center of the screen. This would also need to be accompanied by a transparency layer over the top of the current screen, to make the preloader more outstanding. This seems a bit over the top, and its the same as everyone else.
• another thought, would be to remove all the current results from the search, and replace them with a preloader (the results will come through reloading the page NOT ajax).

I don't think any of them will have much effect on conversions. I was more concerned about the actually experience. I want people to know that when they have clicked the search button, we have received their request and are loading their results, particularly if the search is taking a while.

I am open to other ideas.

Answer 1

I would suggest a loader for the grid only, after the user clicks on search. This is how we had it done previously.

Answer 2

The loader should be in context with wherever the information will be presented once it loads, not the search field. That way, the eye is already drawn to the correct place when the data presents.

That's probably why you see so many treatments like the one you mention the loader on top of a transparency layer. The user is shown that the system is doing something, but the relevant content area is still visible.