7

I have a page that allows a user to filter/search the content on that page by using keywords:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

As the user types in the search box, the contents in the data table is filtered. At any point (as long as there's data in the data table), he can select multiple rows by checking the checkboxes and clicking one of the actions to perform that action on multiple rows.

Currently, if one removes the text in the search box, then the search results are "cleared" in the sense that the filters are removed and ALL rows are displayed.

Search generates urls like: http://site.com/blah/blah/blah/search/my-seach-terms

If the user visits http://site.com/blah/blah/blah/search/ or http://site.com/blah/blah/blah/ , then the filters are also removed and ALL rows are displayed.

I would now like to add a button/link somewhere, so that the user can click on it to explicitly clear the filtering and show ALL rows.

I am having a bit of a struggle trying to decide where to put it. I need it in a position that won't be easy to mistakenly click and a place that is visible so that the user knows "hey, I can clear the filtering and return to where I started".

Can any of you suggest a spot for the "clear search results link" that is easy to spot/recognize and also hard to accidentally click?

After a bit more research, I came across the search box in Windows Explorer:

Normal State (My search box looks almost identical to this): enter image description here

When keywords are entered: enter image description here

As can be seen, the magnifying glass turns into an "x" to clear the search box when keywords are entered. Is this a good idea? Do people get confused?

I think the down side of this approach is that it's hard for users without Javascript as they would be expecting a submit button to submit the query, and an "x" doesn't say "submit this search query".

And another one which is close to the results here: enter image description here

Improve this question

2 Answers 2

Reset to default
6

As the search results are only tied to the search term it would be natural to place a clear link/button as near to the search-box as possible, preferably inside the search-box(as done in Safari).

Also I would recommend you to keep more distance between the search-box and the action buttons(preferably by putting action buttons below the table) as the action buttons operate on the table and are not directly related to the search or the search-box itself.

Improve this answer
1
  • In my implementation, the magnification glass also acts as a "submit button" so that people can still submit the form without javascript. The magnification glass is added to the right of the search field. It is also more familiar for users who might be confused if the search box does not have a submit button. In this instance, where do you suggest I place the "clear search results link" if it should be close to the search box?
    – F21
    Apr 29, 2012 at 23:15
1

I have no research to back it up, but I like it when the search box has a small X on the right side that clears the results. It is in use in various UIs, including the find window on browsers.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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