I’ve made a form that, when a form element changes, a search query is fired and the result is displayed by animating the big number in the middle. For one reason the number doesn’t always change, and for another, users of this app don’t always seem to notice the change, even though the animation of the number ticking up takes 1-2 seconds.
This led to users accidentally hitting the reset button after filling out the form because it was located at the bottom right and was colored gray. Moving the reset button and coloring it red made this work better. Alternatively, one could make an “Update” button at the bottom, but since the form delivers results continuously, it wouldn’t do much.
Are there any other UX tricks that may improve the experience of continuously receiving results? The result isn’t as apparent as when the entire page refreshes with a list of search results, but rather, just an animated number.
One thought is to add an information box when a search query is refined but the result is not updated. Otherwise it seems that the form did not respond. Another thought is some kind of “loading” animation. Another thought is to add an “Update” button, but I don’t know if it should simply trigger the re-animation of the already found result, or display the information box in case the number is the same.
The site is live here in case the screenshot is not tangible enough to review.