33

How do you work out what icon type or image you need for a feature?

There's been quite a lot of very small questions here in the form of "What is a good icon for feature X?".

Instead we should be looking for a general guide in creating or brainstorming for an icon, that can be applied in a lot of situations and applications.

This could possibly be done by looking an intermediary step:

Feature / Semantics

  1. Terms that represent this feature
  2. Icon for that term

E.g.

Level of anger for client

  1. heat map
  2. Icon for heat map

This question is about step 1, the step you use to create a list, ideas or resource for possible icons that will be applied to the feature.

1

4 Answers 4

38

I usually use brainstorming techniques to get to the terms/ideas. One example of such a process is:

  1. Find a large piece of paper. Draw 3 columns
  2. First column: Use free association to produce a list of words that come to mind when you think of the original concept. Set your mind to generating without judging, and set your goal to generate as many words as possible in some limited amount of time. Stop only when your alotted time runs out.
  3. Second column: For each word in original column list the antonym. Still no judging!
  4. Fold the paper to hide the first column.
  5. Take a break. Talk to somebody.
  6. Third column: Looking only at the second column list antonyms for every entry

Now you, in a very limited amount of time, have produced long list of words that somehow relate to the original concept. Consider all 3 columns as you choose

Note: this process is even better performed in groups. Each participant individually performes steps 1. and 2. Then everybody give their piece of paper to the next person, who performes step 3. and 4. Pass the papers again before performing step 6. In the end all lists are given to the person needing the term input

5
  • Hey, I like this option :). It's a bit time consuming though, specially if you just need one new icon for a small new feature. Will certainly give it a go when I need a whole batch of new icons for something.
    – Jeroen
    Commented Dec 2, 2011 at 15:59
  • Actually, I often set my own time limit to 3 minutes giving the individual process a total time span of 9 minutes + the coffee break ;)
    – katDNA
    Commented Dec 2, 2011 at 18:39
  • This is actually a great suggestion! I just tried it with online merriam-webster (clicking to antonyms and then to its antonyms again), giving me a boatload of options. Think I may automate this suggestion somehow (surely there's a dictionary with antonyms that has a developer API... :D)
    – Jeroen
    Commented Dec 2, 2011 at 19:50
  • 3
    Nice idea, to automate the word generation - I have to state one concern though: this being a creative process, one very important part is to kick your brain the b.. and make it leap out of the set "stream", habit has lured it into. This is what our brains are made for - recognizing a pattern and reacting exactly as it did the last time. If you skip the kicking (or storming), then you risk cheating yourself of valuable ideas
    – katDNA
    Commented Dec 7, 2011 at 20:15
  • Great idea! This reminds me of how Ben Franklin would translate his prose arguments into poetry and then later translate the poetry back to prose. Commented Feb 25, 2014 at 13:42
11

Creating recognizable icons is a supreme royal pain in the boo-tocks. There is no analytic Process to follow that consistently yields decent icons. All you have are some vague guidelines from the usual style guides (e.g., Windows and Mac), which cover more the graphic style of the icons than the semantics.

In my experience, if an immediately obvious icon doesn’t pop to mind, then there is no naturally intuitive icon for your users. This means highly effective icons are pretty much limited to standard icons that everyone has memorized (such as the floppy disk to mean Save), and icons for concepts very closely related to physical objects and attributes (e.g., a printer image to mean Printer Properties or a red rectangle to mean “color this red”). Otherwise, any icon you come up with, even after substantial research and testing, is probably going to have mediocre performance at best.

For most things in the UI, it’s best to use icons to reinforce what the text labels say, not serve as the primary label by themselves. Be satisfied with an icon image that is vaguely associated with the concept. The icon’s greatest potential usability benefit is to help experienced users more quickly recognize the action or object. For this purpose, it’s more important to have distinct icons than meaningful ones. This means the right icon depends on the other icons it will be seen with. For example, a printer icon for Printer Properties will be problematic if you also need an icon for Print Document. Generally there is no one “good icon for Feature X.”

If you must create icons with recognizable meanings for inexperienced users, then you must iteratively test them on your users. For the most part, I see little point in going on a web site like this and asking, “What’s a good icon for Feature X?” and picking the one with the most votes (unless maybe one answer has some actual testing behind it). Instead, take a bunch of suggested icons from various sources and test them all systematically. Test each in the context of other icons that will appear with it. Test for both recognizing the meaning of the icon and recognizing what it’s supposed to be a picture of. Be prepared to go through multiple iterations for some icon designs just to get the picture right.

And I don’t envy you.

2
  • 1
    Thanks for your response. Hoping other answers can prove you wrong though, by showing some process to do it nonetheless :).
    – Jeroen
    Commented Dec 2, 2011 at 15:58
  • +1 for "if an immediately obvious icon doesn’t pop to mind, then there is no naturally intuitive icon for your users"
    – Mayo
    Commented Mar 18, 2015 at 22:00
1

I want to start off with my current answer to this question, which often is unsatisfactory (which is the reason why I asked the question here :D).

There are two resources we use for this mapping:

  1. Search feature for our icon pack (IconExperience)
  2. Search through WikiMedia to get an idea
3
  • So you are looking for the terms and ideas for icons that could represent the feature not the icon itself?
    – Sheff
    Commented Dec 2, 2011 at 10:21
  • Aye. The terms/ideas would represent the feature, and in turn the icon would represent the terms/ideas. Ideally I'd have a search engine where i enter "Client Anger Level" and the engine returns (amongst many others) "Heat Map". (After that, finding an icon seems easy.)
    – Jeroen
    Commented Dec 2, 2011 at 11:01
  • Nice idea, I'm not aware of any service like this. Be interesting to see the answers.
    – Sheff
    Commented Dec 2, 2011 at 11:07
0

Well, I use

to get ideas and to see if there are some common terms that represent the thing I'm looking for.

I repeat this a couple of time with different search terms until I find an appropriate icon for our software.

3
  • "with different search terms" ... but how do you get from the feature name/semantics to those terms? Just from experience?
    – Jeroen
    Commented Dec 2, 2011 at 12:42
  • @Jeroen I usually have a command (verb) in mind and some nouns that describes the context and the metaphor. The choice will always me limited by some constraints (eg. only use icons from a certain icon pack or must match other adjacent icons). Maybe it is the "experience", but I rarely hold her tongue when it comes to descriptive words. The biggest issue in my case is to find icons that matches the context and that fits into the overall. Commented Dec 5, 2011 at 10:01
  • 1
    iconarchive.com is good companion to iconfinder.com
    – agib
    Commented Dec 14, 2011 at 10:06

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.