Iconomania or fear of not using icons
“And these stupid icons! A pictogram is a sign that cannot be explained in any human language. No wonder there was a speech! "
Jeff Raskin.
Today, no matter what product is designed, it is almost always appropriate or not - icons are used. Customers demanding the use of icons in the interface have become so accustomed to the mentality of the widespread use of icons that this circumstance can be taken for a cultural phenomenon. Almost all developers adhere to the same principle.
Why did this happen? What's wrong with the icons? Is it possible to do without them?
Let's try to figure it out.
Immersion in materiel
Sometimes, for simplicity, I will call icons everything that relates to a graphic representation of an idea, concept or object.
')
An ideogram is a symbol that depicts an idea or concept. To be precise, an ideogram can convey a concept through resemblance to a physical object, and also be called an icon.
A pictogram is a symbol that resembles a depicted concept or object.
A simple example:
So (not strictly), if a dog is depicted - this is an icon, if the dog is in a crossed out circle, then an ideogram.
In a general sense, the pictogram is understandable without words, the real objects of the physical world are quite easy to imagine as an icon. But what to do if we want to put something more complicated into a sign: some kind of action or non-obvious notion?
How is it
Word of Jeff Raskin:
Icons (icons), these familiar to all small pictures that serve to designate buttons and other objects, are an essential feature of modern interfaces. Apple Computer, a well-known leader in interface development, tells us that “icons can significantly increase clarity and increase the attractiveness of an application. In addition, the use of icons allows you to greatly simplify the process of translating programs into other languages. Whenever you need to add an explanation or an inscription, try using an icon instead of text ”(Apple Computer 1985, p. I-32). In later versions of this guide, the approach to the use of pictograms was no longer so dogmatic, but the harm it created could no longer be repaired.
Icons make the interface more visually attractive and, under certain conditions, can contribute to greater clarity. However, over time, the shortcomings of the icons have become clear. For example, in both the Macintosh operating system and Windows, tools are already used to explain the meaning of icons. If you move the cursor over an icon, a small window appears with text in which its description is given.
The main problems of ideograms are the choice of metaphor and the construction of an associative array.
Coming up with a metaphor is a headache for an ideogram developer. He really wants to have a bank of metaphors for pain relief. The truth is that there is no such bank and cannot be.
This problem creates another problem - the problem of conflict of metaphor and literal understanding of the ideogram.
What is bad associative series?
Wikipedia word:
In 1936, Milton Erickson wrote an article in which he outlined the results of his experiment with a test of verbal associations, the essence of which is that a person unconsciously gives an associative link to a stimulus word with those words that describe his problem. For example, on the stimulus word "belly" the subject gave the following words: big, anxiety, baby, fear, surgery, illness, forgotten. And this was information about her unwanted pregnancy, which she did not remember.
Any developer of the icon will tell you that an ideogram is invented by an association: he transfers the metaphor to himself, interrogates his colleagues, friends for an association: what images do they have with this or that concept? As Milton Erickson showed in his experiment, a verbal association is an unconscious subjective essence.
A simple example: you need to come up with an icon on the site for the information block “I am the manager”. Everyone will have different associations, someone with a white shirt, someone with a diplomat in his hands, someone with a tie - people will have different associative links to the stimulus. Therefore, a photo bank of metaphors will never be created.
How to be?
Again to Jeff Raskin:
An obvious question arises, which I have repeatedly heard from users who first encountered such text boxes: “Why not use text instead of icons at once?” In fact, why not? After all, in fact, instead of explaining, pictograms often require explanations for themselves. The use of pictograms instead of words is quite suitable in order to hide or encrypt some information from prying eyes. The problem of pictograms can be considered as a problem of limited visibility. The interface shows the pictogram, but its meaning is invisible, or its image may give the wrong message for those for whom this image is unfamiliar or who this image may be interpreted differently.
The simplest thing you can do is not to invent any ideograms, but to use text. In many cases, the text will work better. Do not be afraid of this.
In 1990, in the Soviet Union were not afraid to write with words. Microwave Electronics SP23 ZIL, 1990 release. Metro designers scooped inspiration from the microwave oven!
In 2012, developers are very afraid of the text and use a whole set of ideograms, emoticons in a DAEWOO microwave. Even headlines in the form of icons.
The developers of LightWave 3D threw out almost all the icons from the controls, working windows, menus, and pasted text.
For comparison, the 3D Max interface:
If the icon has to be used.
Word of Denis Kortunov:
The choice of what will be depicted on the icon is always a compromise between recognizability and originality. Before you come up with a metaphor for the icon, it is very desirable to see how it is done in other products. Perhaps the best solution would be not to invent something original, but to do it as everywhere else.
An example of originality:
Conclusion
In the 1970s, by order of the US Department of Transportation (US Department of Transportation), a system of 50 pictograms was developed, originally intended for airports, which subsequently became widespread and universally recognized. Designers designed icons based on criteria such as clarity, international recognition, vandalism and wordless clarity.
Thus, there are 50 icons that are understandable to all. What happens if one of the criteria is not taken into account? There will be a crutch in the form of a signature - the icon did not work.
And if you come up with your system? What do you think is depicted on this sign?
The answer is on the page http://artgorbunov.ru/bb/soviet/20080623/
If you think about icons except those 50 icons - a crutch on a crutch: icons need to be signed, icons without a signature need pop-up windows. Icons need a good, recognizable metaphor. But the truth is that in interfaces, in some cases an icon is a visual trash that can be eliminated, without losing meaning.
For self-study:
1. Pictogram
2. Ideogram
3. DOT pictograms
4. ISO 7001
5. Laundry symbol
6. Canadian Fashion Connection - Laundry symbols
7. Pictography
8. Ideogram
9. Vienna method
10. The role of Otto Neurath in the birth of modern infographics
11. 10 mistakes in icon design
12. Erickson Milton, Wikipedia article
13. Walter Isaacson, “Steve Jobs. Biography"
14. Designing the user interface icon language
15. Icon design
16. Icon creation process
17. Computer icon
18. Icons from various interfaces
19. Pictograms, Icons and Symbols
20. Jeff Raskin, “Interface: New Directions in Computer Systems Design”
Jeff Raskin.
Today, no matter what product is designed, it is almost always appropriate or not - icons are used. Customers demanding the use of icons in the interface have become so accustomed to the mentality of the widespread use of icons that this circumstance can be taken for a cultural phenomenon. Almost all developers adhere to the same principle.
Why did this happen? What's wrong with the icons? Is it possible to do without them?
Let's try to figure it out.
Immersion in materiel
Sometimes, for simplicity, I will call icons everything that relates to a graphic representation of an idea, concept or object.
')
An ideogram is a symbol that depicts an idea or concept. To be precise, an ideogram can convey a concept through resemblance to a physical object, and also be called an icon.
A pictogram is a symbol that resembles a depicted concept or object.
A simple example:
So (not strictly), if a dog is depicted - this is an icon, if the dog is in a crossed out circle, then an ideogram.
In a general sense, the pictogram is understandable without words, the real objects of the physical world are quite easy to imagine as an icon. But what to do if we want to put something more complicated into a sign: some kind of action or non-obvious notion?
How is it
Word of Jeff Raskin:
Icons (icons), these familiar to all small pictures that serve to designate buttons and other objects, are an essential feature of modern interfaces. Apple Computer, a well-known leader in interface development, tells us that “icons can significantly increase clarity and increase the attractiveness of an application. In addition, the use of icons allows you to greatly simplify the process of translating programs into other languages. Whenever you need to add an explanation or an inscription, try using an icon instead of text ”(Apple Computer 1985, p. I-32). In later versions of this guide, the approach to the use of pictograms was no longer so dogmatic, but the harm it created could no longer be repaired.
Icons make the interface more visually attractive and, under certain conditions, can contribute to greater clarity. However, over time, the shortcomings of the icons have become clear. For example, in both the Macintosh operating system and Windows, tools are already used to explain the meaning of icons. If you move the cursor over an icon, a small window appears with text in which its description is given.
The main problems of ideograms are the choice of metaphor and the construction of an associative array.
Coming up with a metaphor is a headache for an ideogram developer. He really wants to have a bank of metaphors for pain relief. The truth is that there is no such bank and cannot be.
This problem creates another problem - the problem of conflict of metaphor and literal understanding of the ideogram.
What is bad associative series?
Wikipedia word:
In 1936, Milton Erickson wrote an article in which he outlined the results of his experiment with a test of verbal associations, the essence of which is that a person unconsciously gives an associative link to a stimulus word with those words that describe his problem. For example, on the stimulus word "belly" the subject gave the following words: big, anxiety, baby, fear, surgery, illness, forgotten. And this was information about her unwanted pregnancy, which she did not remember.
Any developer of the icon will tell you that an ideogram is invented by an association: he transfers the metaphor to himself, interrogates his colleagues, friends for an association: what images do they have with this or that concept? As Milton Erickson showed in his experiment, a verbal association is an unconscious subjective essence.
A simple example: you need to come up with an icon on the site for the information block “I am the manager”. Everyone will have different associations, someone with a white shirt, someone with a diplomat in his hands, someone with a tie - people will have different associative links to the stimulus. Therefore, a photo bank of metaphors will never be created.
How to be?
Again to Jeff Raskin:
An obvious question arises, which I have repeatedly heard from users who first encountered such text boxes: “Why not use text instead of icons at once?” In fact, why not? After all, in fact, instead of explaining, pictograms often require explanations for themselves. The use of pictograms instead of words is quite suitable in order to hide or encrypt some information from prying eyes. The problem of pictograms can be considered as a problem of limited visibility. The interface shows the pictogram, but its meaning is invisible, or its image may give the wrong message for those for whom this image is unfamiliar or who this image may be interpreted differently.
The simplest thing you can do is not to invent any ideograms, but to use text. In many cases, the text will work better. Do not be afraid of this.
In 1990, in the Soviet Union were not afraid to write with words. Microwave Electronics SP23 ZIL, 1990 release. Metro designers scooped inspiration from the microwave oven!
In 2012, developers are very afraid of the text and use a whole set of ideograms, emoticons in a DAEWOO microwave. Even headlines in the form of icons.
The developers of LightWave 3D threw out almost all the icons from the controls, working windows, menus, and pasted text.
For comparison, the 3D Max interface:
If the icon has to be used.
Word of Denis Kortunov:
The choice of what will be depicted on the icon is always a compromise between recognizability and originality. Before you come up with a metaphor for the icon, it is very desirable to see how it is done in other products. Perhaps the best solution would be not to invent something original, but to do it as everywhere else.
An example of originality:
Conclusion
In the 1970s, by order of the US Department of Transportation (US Department of Transportation), a system of 50 pictograms was developed, originally intended for airports, which subsequently became widespread and universally recognized. Designers designed icons based on criteria such as clarity, international recognition, vandalism and wordless clarity.
Thus, there are 50 icons that are understandable to all. What happens if one of the criteria is not taken into account? There will be a crutch in the form of a signature - the icon did not work.
And if you come up with your system? What do you think is depicted on this sign?
The answer is on the page http://artgorbunov.ru/bb/soviet/20080623/
If you think about icons except those 50 icons - a crutch on a crutch: icons need to be signed, icons without a signature need pop-up windows. Icons need a good, recognizable metaphor. But the truth is that in interfaces, in some cases an icon is a visual trash that can be eliminated, without losing meaning.
For self-study:
1. Pictogram
2. Ideogram
3. DOT pictograms
4. ISO 7001
5. Laundry symbol
6. Canadian Fashion Connection - Laundry symbols
7. Pictography
8. Ideogram
9. Vienna method
10. The role of Otto Neurath in the birth of modern infographics
11. 10 mistakes in icon design
12. Erickson Milton, Wikipedia article
13. Walter Isaacson, “Steve Jobs. Biography"
14. Designing the user interface icon language
15. Icon design
16. Icon creation process
17. Computer icon
18. Icons from various interfaces
19. Pictograms, Icons and Symbols
20. Jeff Raskin, “Interface: New Directions in Computer Systems Design”
Source: https://habr.com/ru/post/166723/
All Articles