Our application embraces a bit of a dark pattern: two forms on one page. Filter and Search are independent forms. wireframe, webpage with sidebar filter, main column search When the Search form fails validation - currently our only validation is "search term shorter than two characters" - the user can ignore the error-state Search form and interact with the Filters instead.

What is the expected behavior when a user ignores the Search error and proceeds to apply Filters?

  • Ignore the search as if it didn't happen, just apply the filters?
  • Apply the filters and keep the Search form in error state until error is remedied?
  • Prevent filters from being applied until Search form error state is addressed?
  • Something else?

Thanks for your insight -

  • So if the user clicks in the search field button whatever is selected in the filters is ignored for the results and the other way round? – Alvaro Feb 1 '17 at 14:16
  • Currently, our requirements state that Search starts a new result set, clearing out any filters applied. Once Search Results exist, they can be filtered. – dogwoodtree-dot-net Feb 1 '17 at 14:30

I think the first question to ask is why are you validating search text? If the user can ignore the validation error then don't show it. An error message seems like an unnecessary extra step, the user doesn't need to know they aren't supposed to search for 2 or less characters, just guide them to learn their searches need to be more detailed. The requirement is met because you do not allow the user to search for less than 2 characters, but you do not actually show them the error.

Given that all results are displayed on the page from the start, an alternative and possibly better way to do this could be to have an auto-complete result list that updates as a user types a letter at a time in the search box. It eliminates the need for the error message and is a more user-friendly to help them to filter to find the data they need.

  • Sadly, the search validation requirement was dictated by our stakeholders; we're pretty much stuck with it. – dogwoodtree-dot-net Feb 1 '17 at 15:22
  • Keep the validation in the technical production of the interface but delete the actual communication of it to the user. Just show 'No results', don't actually show the error message. Do you know why they have asked for you to validate in this way? Is there a technical reason? – 80gm2 Feb 1 '17 at 15:36
  • Wouldn't that be antithetical to the Error Message Guidelines spelled out by Jakob Nielsen - nngroup.com/articles/error-message-guidelines – dogwoodtree-dot-net Feb 1 '17 at 15:58
  • Clarify something for me, does the user begin on this page with a list of results which they can then filter by category and THEN use the text box to search for? – 80gm2 Feb 1 '17 at 16:28
  • 1
    Yes, the page loads all the available options (at this point a fairly small set, but they expect it to expand over time), and those available options can be searched and filtered or just filtered. – dogwoodtree-dot-net Feb 1 '17 at 16:34

Normally, a search is a filter done in the server side. The search results are the filtered results of all the elements.

In your case as all the results are shown from the start, the search is understood better as another filter than as a search that calls for results.

If you see it this way then the answer is simpler: as the search is another filter, if there is nothing specified or nothing valid (less than 2 characters) then that filter doesn't apply. The others, however, still apply.

enter image description here

This is just a quick sketch (it is lacking labels, etc.). I added also "All" in Category, Topic and Format, as I think it reflects more clearly what is visible.


Our Solution

Because the only error condition for the search form is a "too short" search (one of only a single character), we chose to interpret the user ignoring the error-state search field as abandoning text-search for checkbox-based filtering.

Per stakeholder requirements, search results can be filtered. To apply a filter to a result set, a string of query parameters is appended to the URL. In building that URL, the search query - the value in the search input field - is also appended, if it has been set. It was a trivial level of effort to add an additional check with the "If there's a value in the search field" to extend that check to "If there's a value in the search field AND it's at least 2 characters."

No major refactoring of markup.

We're still stuck with something of a dark pattern, but it's the dark pattern necessitated by the approved design.

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.