Search code examples
user-interfaceuser-interactioninteraction-design

Graphical, user friendly representation for 'All', 'Some', 'None'


I'm building a reporting tool where the user can filter results by selecting one or more options from various checkbox lists.

To save space I'd like to shrink each list once the selections are made but have a symbol next to each to remind the user whether they have picked some, all or none of the options.

I could use the words 'filtered' and 'none' but was trying to think if there was a simple icon which would convey the same thing.

Has anyone tackled this before or seen a good example?

Thanks


Solution

  • Take the filter icon and fill it with different levels to indicate the options.

    For example:

    Filter Levels

    Excuse my dodgy sketches - but hopefully you get the idea.