How to Find the Best Icon to Represent a Concept?

Question

I am developing a visual programming language, and after reading this paper it looks as if icons are a very good solution to improve the language and increase understanding. But since I am a programmer and not a UI designer, I am hardly capable (now) of thinking how to select icons that convey the semantics of my programming language.

For example, in my language an object (represented by a rectangle) that is connected to a process (represented by an ellipse) with a link that ends with an open circle means that the process uses the object as a tool an does not change it (see image below):

But what icon should I use instead of the open circle? a tool? a book (read-only)? a handle of a machine? And of course, this is not the only link that can be used in the language. I would also like to add icons to objects that are arguments and stuff like that.

All questions asking "what is the best icon for XXX" are closed because they are too specific, so my question is: How do I select which icon to use? Are there any books/papers/tutorials that I can read on the subject?

Answer 1

The short answer is a bunch of you brainstorm some ideas, then use iterative testing on real users to narrow and refine the choices. See How do you create or select an icon for a feature? for details.

However, consider that the "perceptual resemblances" afforded by icons may not be as important to you as other considerations, including those that Moody discusses in the paper you cite. These other considerations may compete with achieving evocative icons:

• Discrimination. The most evocative icons for two difference concepts may end up looking similar to each other, yielding confusion.

• Clutter. Icons often need to be large and detailed so users recognize what they’re supposed to evoke, but this can make large visually cluttered diagrams that are hard to read.

• Labeling space. Simple outline symbols allow you put their label inside their bounds, making the label unambiguous. Icons may be filled with detail forcing you to put labels beside them; in dense diagrams, it can become unclear what is labeling what.

• Expressiveness. Simple shapes allow you to use other graphic dimensions (e.g., shade, patterns) to encode additional information. Such encoding may be unsuitable for icons; for example an eraser needs to be pink or white to be recognizable, but that means you may not be able to use color coding (blue, green, etc.).

Consider that any degree of perceptual resemblance your icons evoke will likely be modest at best because the abstract concepts you have in visual programming don’t lend themselves to being visualized well. Also consider that you should have relatively few symbols and you can provide novices easy access to a legend or key, so learning should be fast even with arbitrary symbols. Overall, you may be better off with simple shapes than icons.

Or maybe you can have both: By default and for novices, use (large and cluttering) icons so it’s easy to learn and suitable for the simple programs a novice is likely to start with. Allow the user to globally “simplify” the icons to similar shapes once they’re learned and the user is ready for more complex programs. For example, a process may be represented by a gear that becomes a circle on simplification. An object property is a drawer that becomes a rectangle on simplification. Maybe you should choose the simple shapes first to meet your other considerations, then work backwards to make them into evocative icons for novices.

Answer 2

It seems you are not looking for icons, but for symbols. There is quite a fundamental difference (see http://www.iicm.tugraz.at/thesis/ahollosi_html/node6.html) and if you understand this difference you have your problem already half solved.

You are using an ellipse as process, a rectangle as an object,... in other words: you use symbols already, so don't start looking for icons now.

Either you should create your own symbolic language, similar to UML, or you could use an existing set of symbols, like flowchart symbols. Or you could start from a certain existing basis and add your own symbols on top of that. In this case you could perfectly use your open circle as long as you give clear meaning to it, preferable in several ways. Will the symbols be draggable form a palette? In that case the symbols on the palette must be well desribed, e.g.: read only connection / read-write connection / process / object /... What happens when you click a connection? Do you get to see some properties somewhere? Can a user change the properties of an existing connection? Basically you should have a look at Rational Rose and how they handle connection like "has a", "is derived from",...

If you truly are looking for an icon to indicate "read only" (which I doubt), the first thing that pops in my mind is a pencil with a cross on top of it or a lock.

Answer 3

What you should be thinking about is what symbol represents an object or perhaps a segment of data and what symbol represents a process or perhaps an action.

The answer may depend on you users:

• If the are programmers, they will be used to conventions from UML and from IDE's (e.g. rectangles for classes, lightning for events).

• If they are not programmers (and possibly even if they are), then it would take less time for them to understand if you think of equivalents outside the software world (e.g. a set of mechanical wheels, a pipe or a magnifying glass for a process, a package or a book for an object). Try and find a pair that can go together in real life and use that.

If your users are from a specific domain, try and find equivalents from their domain.
E.g. if they are programmers you could use equivalents from the computer hardware world (e.g. a CPU and a file).

Try scetching a few alternatives in a simple, yet realistic example of a scenario and asking different people what the understand from the image (without giving them any prior information, perhaps you should show one image to each person, to prevent accumulative comprehension).