10

I have a web page with an autocomplete enabled combo textbox/dropdown. The user is able to enter values manually or pick a value from the list. While free text input is acceptable, I would like to visually warn the user that the data they have manually entered does not match a value in the list.

For reasons related to page layout I would like to avoid displaying anything on the page itself - the warning must be something that floats around. That being said, there are a few specific questions that I have:

  • Where should the warning message appear? Above the textbox? Below?
  • What should the warning message say? "The data you have entered does not match any listed values"?
  • Should the warning message disappear on it's own after X seconds, or should the user have to click it?
12

The way I read it the free input will filter a list dynamically as the user types. In the case that a user enters something that doesn't match any of the items that are being filtered then the appropriate place to notify of this is where the user currently has their focus, namely where the filtered results are listed.

Simply switch out the list of possible autocomplete results for a label explaining that the current input doesn't match any item. That way the user will be notified of this right away, without moving focus from the filter control, in contrast to popping up a message on the side/top/bottom outside the control which will force the user to switch focus.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    @Mervin thanks for the input! I see what you mean. However, personally I believe "exactly matches" would be redundant, since "matches" and "exactly matches" basically entails the same semantic. It's like something is "dead" or "extremely dead" – AndroidHustle Jan 7 '13 at 15:04
  • 2
    +1, just a question: how do you "blur away" and what is a "blur" listener? (Hoping to learn something new again today) – Marjan Venema Jan 7 '13 at 20:10
  • 1
    @MarjanVenema To blur is the opposite of focus. As a focused control loses focus, the blur listener kicks in! :-) – AndroidHustle Jan 7 '13 at 21:29
  • 1
    @MarjanVenema the blur event is what the browser raises when a user moves focus (via clicking, tabbing, etc) away from an element on the web page. a blur handler is a javascript function which responds to the event. jqfundamentals is a good learning source. – jbabey Jan 8 '13 at 2:22
  • 1
    @AndroidHustle i've used something similar to your two examples. thank you for the inspiration! – jbabey Jan 8 '13 at 2:23

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.