4

I am testing an application where there is a button with a cross on an "add new contact" form.

I was expecting the cross to close the form (cancel the new contact request), but instead it cleared all the fields in the form.

In fact, it seems that the most common results in google image for "clear button image" include a cross:

Clear all button google image search

What is the best icon for a "clear all" button that has no text?

Is a cross acceptable?

1
  • 1
    My gut instinct says even if it has no text, it needs to have a warning popup "Are you sure you want to clear the form"
    – Perchik
    Commented May 22, 2014 at 14:10

3 Answers 3

2

"Clear" is to "Erase" so an "X" would be an appropriate icon, but you do not "clear" a form. You "reset" the form and that has a different icon. It's more of a recycling symbol.

An alternative to "reset" is "refresh" but that implies reloading the original data for the form. "reset" and "refresh" have similar looking icons. Refresh tents to have two arrows while reset has only one arrow.

The term "to clear a form" is regional and used in some parts of the world while "to refresh a form" is used in other parts. So the icon and term depends partly on location.

1
  • 1
    cross and the color code of red can be confusing in some locales. as is checkmark, cultures vary quite wildly in this regard be careful.
    – joojaa
    Commented Aug 28, 2014 at 19:45
0

In my opinion, a cross is the norm and quite intuitive. Many of the example shown in your image seem to have a lot of color or elements that complicate the X visually. Since I typically would not want to draw much attention to this function, I'd would use a grey circle with a white X on it. Something like one of these: enter image description here

1
  • So back to my example, if I have a "clear" button and decide to add a "close" button which cancels the "new contact" action, how would you have them both look like?
    – Arlaud Pierre
    Commented May 22, 2014 at 14:15
0

Normally a clear icon for a text field or search box is an X inside a circle

enter image description here

Whereas close is a cross inside a square that also has a specific location on the top right hand corner.

enter image description here

The location of the icon is the determining factor here.

If you want to make things clearer, you could replace it with a composite icon that combines a "form" icon with a cross, something like this

enter image description here

or you could just reinforce the idea by adding text to the "clear all" button.

2
  • The icon with a document reminds me of the "remove row" icon in libreoffice. It looks more like a "remove document" or "remove form" icon than a "clear all" icon, which doesn't solve the confusion problem of the cross.
    – Arlaud Pierre
    Commented May 22, 2014 at 14:42
  • @ArlaudPierre Yeh, perhaps. I didn't intend it as the definitive icon for this purpose, it was just a very rough example of what I meant when I said "composite icon".
    – Franchesca
    Commented May 22, 2014 at 14:51

Your Answer

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

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