Mobile app version of vmapp.org
Login or Join
XinRu324

: How can an Icon symbolize "Search Relevance"? 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

@XinRu324

Posted in: #Icon #InterfaceDesign #Symbols

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:


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).
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.

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @XinRu324

4 Comments

Sorted by latest first Latest Oldest Best

 

@Courtney577

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.

10% popularity Vote Up Vote Down


 

@Kaufman565

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:




And the rest to complete the set:

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

10% popularity Vote Up Vote Down


 

@Kevin459

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:



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:

10% popularity Vote Up Vote Down


 

@Harper654

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).

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme