I'm working with a results grid for which I am adding an "alphabet filter": enter image description here

The darkened portion indicates the selected letter for which to filter.

I'm attempting to find a good way to indicate how the user can "clear" the currently selected letter. My first instinct is to put an "X" symbol somewhere near the currently selected letter, but I'm worried about the size of the "X" indicator.

I'm also considering using a "clear" button immediately to the left of the alphabet but that just seems lazy/ugly.

Is there any consensus on which is a better option? Are there any other possibilities I'm not thinking of?

1 Answer 1


"All" option to the left of the "#" would be an easy fix.

If you're thinking about adding more advanced functionallity in the future - namely multiple selection, consider doing it this way:


download bmml source – Wireframes created with Balsamiq Mockups

I really like this option for complex filters.

  • Thanks! I've actually used this exact thing for a multi-select checkbox dropdown before, I don't know why I didn't think of it here. I guess I was stuck in a "single-select" frame of mind.
    – skeryl
    Dec 9, 2014 at 22:07
  • @skeryl Maybe I'm just in a multi-select "tag" frame of mind :)
    – Navot
    Dec 9, 2014 at 22:13

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.