2

I have a search form on my site. I would like other people's thoughts on this idea.

The flow goes like this: The user will type in the search field with the checkbox selected by default, and then click Enter to submit the form. However, if someone does not want the checkbox ticked, they will lose focus on the form by unchecking it, causing them to either:

  • Click the magnifying glass or
  • Refocus on the form and click Enter.

Would it be better to have Enter submit the form regardless of focus?

search

1

I don't know your concept but how often is the "Translate my search" used? Anyway set the most popular option as default, move it below the search field and add a button for "Search". Then there's little room for misunderstanding how to perform the search.

1

How about moving the focus back to the input field when state is changed on the checkbox? Like so (jQuery):

$("#checkbox").change(function() {
    $( "#search-field" ).focus();
});

Demo: JSFiddle

The difference from your suggestion (if I understood it correctly) would be that Enter works as desired also after using the checkbox, but other parts of the page layout would keep its default behaviour as far as Enter is concerned. E.g. if people use Tab and Enter to select other links, this would not undesirably trigger the search.

  • I would avoid this solution. If you are using the keyboard, you type your query, tab to the checkbox and then.. then what? If you change focus, there is no way to toggle the checkbox without tabbing to that checkbox again. And for those using screen readers, they would really have a hard time understanding your UI. Leave the focus and tab order as is and ad a search-button as suggested by @imakesoft . – Ilias Bennani Aug 31 '16 at 6:52
  • @ilias-bennani I don't really understand what you consider a problem when using a keyboard, so I made a demo JSFiddle. Can you try it out and elaborate on the problem (if it's actually a problem)? – bjornte Aug 31 '16 at 10:53
  • I tried your example and - as mentioned - you cannot toggle the checkbox just using your keyboard. The most common way of toggling the checkbox using the keyboard is to 1: Tab to the checkbox and then 2: pres space bar repeatedly in order to check/uncheck the checkbox. In your example, I have to 1: tab to the checkbox, 2: pres spacebar to toggle the checkbox once and then 3: once agan tab away from the inputfield to the checkbox just to be able to uncheck the checkbox. Sure, your solution does work, but it does not follow what users do expect. – Ilias Bennani Aug 31 '16 at 11:15
  • @ilias-bennani Is it a common use case to want to toggle the checkbox repeatedly? To what end? Pressing the checkbox twice will effectively do nothing, so why bother? Do you have research to back this up? – bjornte Aug 31 '16 at 11:47
  • Common practice is to leave the focus as is, just to let the user undo / redo the action if needed. Research? Well, take a look at any checkbox out there. If you can find one that behaves the way you suggest, I can show you 100 that does not. It is all about what users are used to. Keep the consensus. – Ilias Bennani Aug 31 '16 at 12:14

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.