Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
add comment

2 Answers 2

up vote 5 down vote accepted

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.

share|improve this answer
    
+1. I completely agree. –  Andrew Leach Apr 29 '12 at 9:21
    
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 '12 at 23:15
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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