When a text field should have Clear button?

Question

I'm talking about little cross appearing inside text field after typing a text, espessially for search fields in desktop interfaces. But any considerations about general text fields on any platforms are also appreciated.

Some sites use clear button but others don't. I wonder what are pros and cons of both versions?

Example sites with clear button in search field:

• apple.com/search
• yahoo.com (on search results page)
• pinterest.com
• asos.com
• translate.google.com

And without:

• google.com
• youtube.com
• stackexchange.com
• github.com
• twitter.com

Answer 1

One of the obvious cases is the one mentioned by Nirav Chadda's answer, which can be shortened to "1 click is better than multiple key strokes". This is related to less effort and better usability

Another case can be seen on Yahoo, in this specific case you can see Yahoo's Basketball Fantasy page.

For this purpose, let's assume I'm an user who wants to add a new player to the team. So I'll click a button labeled "Add Player" and then I'll be directed to the following screen:

This screen displays all players based on some default filters and sorting, in this case, All Available Players sort by Pre-Season rank.

However, let's say I want to look for some player which I don't remember if named Devin or Devon, so I'll look for Dev , type part of the name and this is what I'll get:

Now, I have a list of 4 players. Please note the search field retains my "dev" search and added a "delete" icon (arguable but for me this is a close icon). I check the players and they're not a good fit for my team, so I want to get back to the list of ALL available players. So I click the icon and the first page shows up again (or if I used a different filter, whichever filter I have used).

So, this clear/close/delete icon not only deletes the characters in the search field, but also clears all dynamic info created on the search process (eg, AJAX'd processes).

An icon clearing only the inputted string would leave me with all the results I searched for. But... if I clear that field, it's safe to assume I don't want its results either. This could be easily solved by adding another button to go back or using the back button in user's browser. However, the clear icon simplifies everything in an elegant way providing great usability and less effort for user

Answer 2

HTML5 input fields with type=search display the crossmark in Chrome and Safari.

I can imagine the crossmark being useful on mobile devices. Tapping the crossmark is easier to delete your input vs having to continuously tap or pressing the backspace button.

Answer 3

It depends from the context. If the user knows the value to enter and it’s less likely that he will change it later Than the ‘clear’ button is not needed. Vice versa if the common behaviour for that field Is that the user will probably iterate on the value Then yes, a clear button can be beneficial. Example: on a search field the user will probably refine the query multiple times while checking the goodness of the results. Clear button needed. Instead if the field is a ‘date of birth’ the value is well known to the user and it’s not going to change. No need for a clear button. Makes sense? Having less ‘stuff’ on the page reduce the user cognitive load (having to stop to recognise and giving sense to elements on the page) and by consequence the interface looks simpler. Hope this can help.

Answer 4

So essentially its purpose is to clear the input type field.Lets analyse the process for both:

Case 1 : Without the cross sign Typically in order for me to clear the search field I would do the following :

• Press backspace mulitple times to clear what we wrote word by word.
• Hold down the backspace key momentarily to clear the field altogether.
• Select all (Ctrl+A) and hit delete.

Case 2 : With the cross sign Here the process involves a single click to clear the field.

Key points to consider

• Depends on your decision to clear the field,partially or as a whole,cross sign won't retain partial words if needed.

• Depends on your swiftness/user experience with keyboard/mouse.Some people are pretty swift with using the keys,that they don't touch the mouse at all for anything whereas some are pretty quick with using a mouse.

Answer 5

If I am typing, one mouse click is certainly not easier than a keyboard combination or two as suggested in another answer.

Pressing CTRL+A then DELorBkSPC can be done almost immediately.

To click a button with the mouse, I need to first move one hand from keyboard to mouse, locate the pointer on screen, move the pointer to the icon, click on the icon, then relocate back to the keyboard.

Selecting text on touchscreens is more fiddly though, so for content designed for touchscreens, the clear button is useful. - while PCs with touchscreens are becoming more common, the primary input device will still be a physical keyboard, so there is little pressure to add this where it did not exist before, though it may be something to think about in the future.

Where an interface is primarily point and click, dictating use of the mouse, it will be more useful.