Expected Behavior for Page with Two Forms, One With Error State

Question

Our application embraces a bit of a dark pattern: two forms on one page. Filter and Search are independent forms. 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 -

Answer 1

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.

Answer 2

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.

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.

Answer 3

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.