You can see an example here:

enter image description here

As you can see, I am stuck with having to tell the user what each icon means. I also mention what a functionality does, such as "Click on a feature to filter out applications that do not have it".

This takes up a lot of space on the page and it is hampering my efforts in making other types of landing pages.

The user input I have received is that the legend is good because a "warning sign" icon by itself does not tell the user much, for example.

One solution

Have a collapsible legend which is closed by defualt. The problem with this is that all users would want to use the legend.

Second solution

For each icon that is not a CHECK or X, have a tooltip for it. Notice on that page, that one of the icons is underlined. Underlining means there is a tooltip for it. The problem with this is that I don't know if the underlining is a good enough indication to hover your mouse over the icon. The second problem is that there will be more than just icons. As you can see in the legend, it also tells you that you should click the check box.

I am just lost and wondering if anyone has some other suggestions.

  • 1
    I'd be interested in the source of the screenshot as comparing these helpdesk tools is interesting to me too :-) Can you share it? Commented Aug 6, 2012 at 17:52
  • 1
    The integration and work around icons you have are used for attachments and refresh in many other applications/web. It would be a bad idea to try and give a meaning to them other than their widely accepted meaning. Commented Aug 6, 2012 at 19:46
  • @greenforest It's this. Commented Aug 6, 2012 at 20:40

4 Answers 4


A third solution would be to write it out next to the icon what it means.

A fourth solution would be not to use icons, but only table cells with background colors and text.

Writing is an iconography in itself.


download bmml source – Wireframes created with Balsamiq Mockups


Right now, your column headers make the columns wide enough to insert the words "Caveat", "Integration" and "Workaround" with an (?) icon next to them. If that's always the case, I don't think you need the legend at all. Have a tooltip appear on hover on the (?) icon, like you do on the row labels, and you're done.


If most users want to use the legend, go with it, instead of against it: have the legend, have it collapsible, but have it OPEN by default.

Make the manner in which it can be collapsed/expanded very obvious: a text link with the word 'legend' in it, rather than +/- signs.

Remember the last state (collapsed/expanded) on a per user basis and make that the initial state for that user when (s)he returns.


don't feel boxed into having to provide all alternatives in a grid fashion. most people would rather get quickly to (say) one of three different choices, rather than having to wade through many micro choices.

  • That doesn't help anyone who has to implement a solution like this.
    – Sam Hasler
    Commented Aug 8, 2012 at 16:50

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.