3

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.

Self-updating form without submit button

3

I have made search filters like this before, and I noticed that users expected that the search would not start until they hit "enter" on the filter field (which was nice because they thought it was way more responsive than it actually was). This is all about the expectation that they are in control of the moment that the data they entered gets submitted to the system. If users have this expectation, then they will not even see the animation that indicates a search is in progress.

I would suggest that this is the perfect candidate for a Placebo Button.

Many pedestrian crossings have the "green man" come on as part of the timing, rather than happening only when the button is pressed. Leaving a placebo button there gives the users the illusion of control.

2

Maybe you could add some kind of loading animation next to the number, so the order of actions will be: 1. Change filter 2. Loading animation and numbers turn to ----- at the same time 3. Stop loading animation and show the result (with or without the numbers animation)

Another thing I noticed is that the filters box and the result box are separated the same way the results is separated from the next box on the right. Main rule when we talk about perceiving information is to group elements that belong together, are related somehow or are dependent to each other. That may help a little bit.

And the third thing is to add some wordings that will join the two boxes again, something like "Average monthly salary based on the selected criterias"

  • +1. Your 3 observations are spot on. I just wanted to reinforce the 2nd one: there is currently no visual indication that the form and the number are connected. They should share the same background or container to help the user make the link between the two. – celinelenoble Nov 7 '18 at 2:06
1

The Placebo button mention by Franchesca is a good solution. You could simply reanimate the result number when the button is clicked, so as to give an extra fake confirmation that some calculations are taking place.

However, you might also be suffering from Banner Blindness, anything that looks like an Ad or different enough will instantly be ignored altogether by users. Your center red container seems to behave this way.

Another optimization you could do is joining the result box with the form box itself, to visually indicate they belong to each other. This follows the proximity and similarity principles from Gestalt.

Lastly, I would be careful with your use of the RED color in the page. Think about how the red contrasts with form error notifications.

Consider moving the result figure to below the form, in compliance with the F pattern. Users scan the page in an F pattern, meaning your result figure is not in an optimal location.

If nothing else works and you need some proof, install Hotjar into the page to get a heatmap and see were users are hovering their mouse on. It is free.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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