4

What's a relatively simple image that could be used as an icon to symbolize "Relevance", such as Search Relevance?

I really can't think of anything that would be instantly recognizable, or even that a user might guess was the thing they were looking for. The best I've come up with so far is a magnifying glass with some other symbol inside:

  • A symbol indicating relevance score, like a percentage (%) sign
  • A symbol indicating relevance weight, such as balancing scales or a literal weight
  • A symbol indicating intelligence or learning, such as a graduation cap or light bulb

But I don't like any of these because combining 2+ objects makes icons look clumsy, and more importantly, none of them seem to immediately convey the purpose of the icon.

Anyone have a better idea?

Edit:

  1. I'm looking for a single icon to represent the concept. Users will click the icon to re-sort a list of search results according to search relevance (e.g., instead of alphabetical or by date).

  2. The context is a web-based application serving users in professional service industries (legal, financial, academic, etc.) so it's got to be clean and professional looking.

5
  • 1
    I see your problem, and would like to come up with some ideas; but tell me: what kind of site? educational? and is this icons you want when people have written something in a search field and then clicked "search"? so then comes a list-out with icons?
    – benteh
    Dec 21, 2013 at 10:18
  • 1
    The magnifying glass with the % symbol could work, it has the two main elements (search + relevance), and while the first is widely recognized, the second is not too bad either. Depending on your context, it could work really well...
    – Yisela
    Dec 24, 2013 at 10:02
  • The more I think about it, the less I like the idea of the magnifying glass, because that might imply that the other sorting icons have less to do with search. But how else to convey the idea?
    – Brian Lacy
    Dec 24, 2013 at 15:19
  • By the way -- in this particular case I'm looking for a very simple, sharp, black-and-white icon that works at about 16px. Couldn't make it easy, right? However, I'm definitely more interested in ideas here -- visual concepts that might convey the meaning of Relevance or Accuracy. We can adapt from there. Thanks!
    – Brian Lacy
    Dec 24, 2013 at 15:23
  • In statistics, the symbol for score is Z. The JetBrains IDEs use π for some reason. For a general audience, % is probably the best single character, but a custom icon as suggested in the answer below seems better. Mar 25, 2017 at 21:29

4 Answers 4

3

Allrighty - I´ll jump in. You could simply use smiley-faces, or you could use a coloured bar of some sort. Another alternative is to simply colour the text, so that the least relevant is a paler colour. Target with or without dart. These examples are very crude, but I hope you get the general idea. Of course, you could combine them. (Should I come up with other ideas, I will edit and add).

enter image description here

3
  • I guess I should have clarified in my question that I'm looking for a single icon representing the concept, not multiple icons indicating the relevance of specific items at the result level. I'll edit the question accordingly. Good ideas, though!
    – Brian Lacy
    Dec 24, 2013 at 15:10
  • Incidentally, the target idea isn't bad for this. It conveys accuracy, which is nearly as good as Relevance. Going to wait and see if anyone can add any new ideas though. Thanks!
    – Brian Lacy
    Dec 24, 2013 at 15:24
  • Not sure if I understand entirely; but you want one icon as a sort-option only (usually placed on top, with similar ex. "sort by date, sort alphabetically)? Not as one icon next to every search result? Can I then ask a stupid question: how is that useful? :-S
    – benteh
    Dec 24, 2013 at 22:25
0

Similar to boblet's simple coloured circles, I suggest a temperature rating system.

Red for hot, orange for warm, light blue for a little bit cold and dark blue for ice cold. Basic example:

Temperature Colours

That would give you four thresholds for rating (ex. {100% - 90%}, {89% - 70%}, {69% - 45%}, {45% - 0%}) but really you could add a few more colour stops in between these if you wanted to.

It is a very simple way to convey what you're trying to say. Just be sure to add a title tag to let the users who don't get it immediately know what it is when they hover over it.

If you were creating a table based layout with column headers you could also use a temperature gauge icon on the column that uses this.

Example:

temp gauge

0

You said its a set of icons related to search right?

I think you should implement the magnifying glass as a base symbol and a second element with it; create a set and use it.

For example:

percentage search icon triangle search icon

And the rest to complete the set:

For the date and for alphabetical indexing/categorisation, respectively:

calendar search iconalphabetical search icon

0
0

While relevance seems to be a tough concept to visualize in a simple manner, I would refer to how grade school teachers present topics of "matching" to young children.

1.) Objects: Putting two like objects side by side represents a match. So, maybe two simple apple icons with a vertical dotted line between them to show comparison.

2.) Puzzles: Fitting puzzle pieces together teaches visual matching concepts. So, maybe two simple puzzle pieces that are fit together.

Both options may be a bit cliché, but seem reasonably appropriate in this context.

Your Answer

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

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