49

We are having a discussion at the office today, about when to clear (or not to clear) a search box from its input.

Is there a preferred approach, something that the user expects? Like emptying the box when the user clicks on search, when he closes the window that showed up with the search action or not at all?

This specific scenario is that the user searches with a very long ID number (which probably will be pasted in the search box since it is too long to write by the user himself). When the user clicks on search, a table shows up with the results (the search box is still visible). So when to clear the box? When the user clicks on search, when he exits the table that showed up or not at all? Some of my colleagues says that it might be of value for the user to keep the number in the search box, even after he has closed the search, if he might want to do the same search again (he might have left the table to look something else up).

But is this expected?

60

If you clear the box, you're taking away control from the user. While you may seem like you're doing them a favor, you're robbing them of context for what they just typed in.

When you type things into a command prompt, the previous command you typed is still there.

Although you state that it's a long ID that the user probably just pasted in have you thought about how the user will compare.

For example, if your user is entering a GUID like this:

21EC2020-3AEA-4069-A2DD-08002B30309D

What if your user copied it like so: 21EC2020-3AEA-4069-A2DD-08002B30309? If you clear the search box after they type it in, and your user doesn't find the entry they are looking for, what's the first thing that they'll do? They'll either re-copy, re-paste, or COMPARE what they pasted with the original. In this case, they may notice that they mis-copied and didn't select the D at the end.

Compare using a standard single-display calculator with one that has multiple display lines. Which do you think has the superior UX?

Calculator comparison

To answer your question as to whether it's expected, there is a long history of keeping input around for review. Old calculators with a tape were designed for this reason. Accounting ledgers. YouTube 'history'. Command prompts in a terminal window. Temperature displays. Even volume controls on your car. When you change the volume, the volume level usually stays in the display for a few moments, even though the number has little meaning.

You may feel that a long obscure ID has little relevance to the user, but you can never know how the user is going to use that in their workflow. Maybe they use the ID to compare, correct mistakes, copy it out of the search window into a different browser.

I do have one suggestion that would seem especially appropriate given your users are entering IDs and CODEs in a search dialog. When they user clicks on the input select the whole entry for them, so they can either paste over the entry or start typing. I think you're right in that most CASES, users will rarely modify or add to the ID they entered ( apart from correcting mistakes ) so it's pretty important that you make it easy for the user to start a new search anew.

  • 13
    +1 for preselecting the text. This gives the convenience of clearing the box without the annoyance that it can create. – Jules Jun 14 '16 at 8:35
  • 11
    @Jules I actually hate preselecting of text because it breaks my mental model of how text boxes work. A lot of times, I want to select and delete a particular word from the box, but the entire search continually gets selected and it drives me batty. – Chase Sandmann Jun 14 '16 at 18:51
  • 1
    As far as preselecting text goes, choose the default behavior which makes most sense for most users for most use cases. Then we can take care of users' idiosyncrasies by providing advanced options to change this kind of stuff. – Nick Miller Jun 15 '16 at 3:29
  • 1
    If you're preselecting (which sounds suitable), you can implement it in a way which still allows the user to drag-select a section of the input starting from the first click. – Chris H Jun 15 '16 at 8:46
  • 1
    well, IMHO, on PC version, you don't pre-select (it's unexpected), and on mobile version, you provide a cross to the right that deletes the contents. – yo' Jun 15 '16 at 22:54
85

I have a personal hatred towards websites which clear content from the Search bar after I hit Search.

Here's why:

  1. It is completely unnecessary to clear the content out. There are multiple chances that the user might want to add something to that query. For example, if I search for American Psycho and I find that it's a movie with amazing ratings and I want to see if there's a director's cut edition of the movie (which won't be listed directly on the first search page) I need not have to enter the movie's name again to just add two more words. It increases the effort, creates frustration and could possibly have the user abandon the second query.
  2. Take a look at other popular Search Engines. For example, what would happen if Google's search cleared out content each time the user searched? Would it be a feasible model to have the user type everything back in?
  3. It provides context. It acts as a heading of the page for smaller devices. For desktops, agreed you could have it as the title of the browser, but for mobile devices, you could simply use the search bar as the heading.

You could simply hide the Search box when the user scrolls down and make it visible again when they scroll up if space is really an issue. Clearing the content does not solve anything.

The suitable approach I find to showing the search query on the Search bar is to put the query in Chips.

search-mockup

This makes it easier to:

  1. Add content to that query after the end of the chip.
  2. Make changes in the query by editing it by clicking on the chip.
  3. Clear the entire query by pressing X [Close] at the end of the chip.
  • 1
    Many of the search input functionality allows you to bring up previously search terms/history so I don't think it is as much of an issue, but I do like the idea of given the user the option to clear rather than assuming that it is what they want. – Michael Lai Jun 13 '16 at 11:16
  • 1
    Another way to do it is to have the previous search query in a Block that allows the user to perform an edit to it by clicking on the box or clear it entirely by pressing X [Close]. – Swapnil Borkar Jun 13 '16 at 11:39
  • 2
    I agree with the answer - emptied search boxes are annoying. As to the search history that Michael Lai mentions - is that not more a function of the browser? And sites that clear the search box generally don't offer search histories. – DetlevCM Jun 13 '16 at 11:40
  • 1
    So, the idea is to persist the previous search query on the Results page itself. However, if you could keep a log in the search bar itself regarding the previous searches user has made, it will only be beneficial to you. Since yours is an ID number, it is far more important since it is not exactly in the user's memory. Navigating to a different category, yes you can clear the search bar, but it is better if you have the previous query available as a suggestion. It is likely that the user can incrementally search specific items WRT the previous search query on the result page itself. – Swapnil Borkar Jun 13 '16 at 12:35
  • 7
    @tessfred, if it was "probably" pasted, then doing anything that clears the search box will earn the undying hatred of any user who types it in manually and makes a typo on the 28th character. – Mark Jun 13 '16 at 20:28
4

You can also provide a separate clear search or reset sort of a feature in your search bar's input box. By which you are not taking the control from the users and also you give them an option to perform the task.

2

Search box are essentiall just input fields that serve a special purpose. Input fields usually keep their input, unless the user deletes it himself.

Making an input simply disappear without an explicit "delete" option would be bad, since it takes control from the user and it contradicts with standard input field behaviour.

But you don't even need a delete or reset button. Simply highlight the input when the field is focused. That way, users can:

  • overwrite the input by typing or pasting
  • set the cursor to add missing or delete wrong characters
  • copy the input, should they need it for something else
  • leave the field without consequences should they have clicked it by accident
-3

The input fields should be cleared out.

It is an input field not a page title.

For good UI the functional parts should serve a singular purpose.

Not clearing the input is simply lazy and annoying done more out of a tradition of laziness than actual logic.

Think of a better way to handle the case of re-initiating the search.

Perhaps a clickable search history would be useful.

For if you claim the input field should retain my last search, I would ask why then does it not retain my last 3 searches? Or 5? Or 10?

What if it functioned like the Terminal? Could I just press the up arrow to recover my last submitted input?

There are plenty of options that could provide a better experience.

Realize that adding a title instead of using the input contents as the title is perceptually simpler even though we're talking about two elements vs one element.

It's not elegant to combine purposes into one element that doesn't suit both purposes equally well.

  • 2
    I like the ideas of providing alternatives, but dislike callint it "lazy" and dismissing the notion that it could be intentional for good purpose. – JDługosz Jun 15 '16 at 17:05
  • Wait.. U mad bro? – user2912840 Jun 15 '16 at 17:17
  • 3
    "For good UI the functional parts should serve a singular purpose." - I disagree with this part the most. If something accomplishes multiple tasks reducing the number of needed elements that is good UI. – Bacon Brad Jun 15 '16 at 17:58
  • @ baconface, well you're wrong. Look at any UI, all the good ones have a singular purpose for each button and input. – user2912840 Jun 16 '16 at 23:54

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.