6 ms·

Principles of Icon Design

210 points by praveenscience 7y ago

spectramax 7y ago
I really think that icons should be judiciously used, in the event of notification of a serious type. An alert, a warning or an immediate attention to a hazard. Icons have a cognitive overhead of learning it - if we design icons of different styles and artistic expression, they lose their efficiency in cognitive detection. An interface with lots of icons without text (For e.g. SolidWorks, 3DS MAX, Houdini) requires professional training and lots of experience. But a universally recognized icon such as the ones defined in ISO 7010 [1] are popularized and standardized - why? Because, if these icons are standardized, they gain popularity and recognizeability. I am guessing, the cognitive overhead in icon detection and interpretation becomes less as we are constantly exposed to these icons. It doesn’t have to be officially standardized. For example, Floppy disk icon (save a file) and on/off icons. Ofcourse, designers will continue to do things as a statement of artistic expression at the expense of all kinds of things - legibility, accessibility and as I said earlier, recognizeability. But that would make the world a really boring place, so let's allow creativity. There are a bunch of people that studied semiology of graphics. Frutiger did a lot of work in iconography. Vignilli and a few other [1] https://en.wikipedia.org/wiki/ISO_7010 https://en.wikipedia.org/wiki/ISO_7010 PS - Btw, skeumorphic design is back, watch out for it in the next decade.
- tpmx 7y ago
  This screen shot from the message/thread view in Gmail illustrates the problems of using icons without text labels when the icons aren't obvious enough: https://i.imgur.com/k7MFzdK.png https://i.imgur.com/k7MFzdK.png
- keith___talent 7y ago
  Agree to a point - not all icons are intuitive or well designed. (1) Often well designed icons can bring a sense of understanding or convey function of a tool. However many icons are invented/designed to convey an esoteric function that doesn’t exist in standard non-digital tools. In some cases a text description could be equally as useful but it might take up more room in an interface. Often a iconed toolbar creates a more intuitive interface for users whose focus is on creating images or manipulating complex data. Icons and a well thought out workspace differ from a CLE, but allow users with differing levels of understanding and experience to create useful documents and processes. Personally I think Autodesk is a company that profits primarily on user training for unintuitive software, they also seem to change their products to require relearning and sell certification. The point about Houdini, Max, and Solidworks needing deep training is ridiculous, a French horn only has 3 or 4 keys, so all players should be able to achieve proficiency easily. However in music, (and 3D modeling) deeper concepts exist to create meaningful and diverse compositions. (1) Icons are a recently modern idea - the 1964 Tokyo Olympics employed them to bridge language barriers. Today icons/pictographs are used in almost every interface and wayfinding (signage) device around the world. Skeuomorphic design is a good concept to help users understand general concepts. Advanced users who have a grasp of computing are more apt to interpret abstract icons and use them as time savers.
- sings 7y ago
  I do like the idea of a standardised set of icons for user interfaces. Beyond a certain set of core elements, which isn’t very large – search, cancel, arrows, settings – icons tend to only really serve a purpose after they are learnt for whatever specific application. Having a quasi-official set might help in making UI iconography more universal. Then of course allow creativity on top of that. To some degree this is already the case, but having a body add some rigour to these de facto conventions would be nice.
- aikah 7y ago
  > PS - Btw, skeumorphic design is back, watch out for it in the next decade. I think it was seen as cool for some people to talk negatively about skeuo, because it brought clicks. Most of these blogposts criticizing skeuomorphism never understood what it was about at first place, and it has nothing to do with how much bevel/emboss or drop shadow a UI has. Realword users like skeumorphism because they want some familiar UI, not some abstract/minimal thing that looks good only in Dribbble...
- skinpop 7y ago
  I've used 3DSMax for two decades and I wish they would replace all the buttons with text. How do you design a button that describes the idea of a "bias"? Well they tried and I still don't get it after all these years.
c3534l 7y ago
If I could lodge a complaint to all the UI designers: please stop making all the icons look the same in order for them to have the same "style." If I'm looking at a grid of essentially identical white-on-black pictograms with overlapping forms composed entirely of outlines with no variation in thickness or stroke, then you might as well just use actual words at that point.
- rogual 7y ago
  Seconded. Most recently I saw they'd done this to Blender (2.8) but it's happening everywhere.
- capex 7y ago
  In icon sets, variations in stroke thickness is a bad idea, without changing the context. People who can't evaluate design issues would simply categorise the product as "something's off here", or "I don't trust this". Your iconography has an impact at a deeper level.
  - TuringTest 7y ago
    That doesn't invalidate GP's points. A collection of B&W icons with similar base shapes (circle, square, rectangle) and no contrast is terrible for using the interface. Each icon needs a distinctive element, be it color, weight or shape, to make it stand out from the other icons near it. If you're designing a B&W icon set, at least make sure that each one has a very eye-catchinge, different outline.
- bryanrasmussen 7y ago
  As a general rule icons take up less horizontal space than actual words describing what they do, which is why designers prefer to use icons.
  - deleted 7y ago
    [deleted]
  - ta999999171 7y ago
cyxxon 7y ago
Even if I generally agree with the premise of the article and the tipps it gives, it too falls prey to some of the problems of icons. It presents the Yelp food icons as well thought out and intuitive, and I would not have had the slightest idea why the chinese food icon looks that way or what it should represent, because around where I live chinese food is not served or sold in these kind of boxes. The problem remains: if you don't already know the meaning, you can at best guess, but don't understand it intuitively.
keith___talent 7y ago
This is also a crap article on icon design. Too little focus on context or actual implementation. Every medium article seems to me a crap resume builder, loads of 1st year experts telling you the crap they learned in profession bootcamp.
warpech 7y ago
The author has criticised the design of the "electric power steering system warning light" icon without suggesting a better alternative. What's the point of criticizing then? Some concepts are easier to depict literally, others are not. The most important part about the car icons is the color: an orange icon means you can go, a red icon means you must immediately stop.
- falcolas 7y ago
  The one that entertained me was the water temp warning icon - an icon that’s at least 50 years old. Its meaning is as well (if not more) established as the floppy disk as save.
- jkoberg 7y ago
  And, these icons adhere to international standards. They are not just "made up" to suit a designer's whim.
- jfengel 7y ago
  Some color blind users can't detect the difference between orange and red. Color is a useful design extra, but you need to take all users into account. There are lots of ways to do it. You could just include a page in the manual: "These icons indicate emergencies. Those other icons are just warnings," and expect color-blind users to memorize it. It's not optimal, but it's better than nothing. Emergency icons might be larger, or perhaps flash (gently). You could include a octagonal stop-sign border around icons that indicate emergencies. Using color as an additional channel for the 90+% of people in the world who can see it. But the remaining set (over 10% of men) are a sizeable audience.
krm01 7y ago
In the 10+ years I've been running a UI/UX design firm for software companies, I've come to the conclusion that icon design, is not very different from logo design and brand design. A Nike swish logo by itself, without context of the brand we have with it today, is just a random piece of graphic. The pixels itself are worth practically nothing. But because when we see the Nike logo, we feel something (Athleticism, motivation, inspiration, energy, etc.) the mark is worth billions. The magic is not in the mark itself, it's in the context and meaning it builds up in the user's mind over time. Same goes for icons. When seeing a play button with a red background and a white triangle, it might suggest you're looking at a Youtube video. Icons, have no real meaning or worth without context that's built up over time. Both are 'investment graphics'. So the purpose of an icon should be to make the user familiar with something and initiate a mental model when you see it (You see Nike, you feel something. You see a Play button, you know you need to click it, etc.). Don't judge icons by their looks, but by their context. In other words: Can the icon you are adding in your UI, over time and by continuously link the mark to a specific outcome, make the product easier to use because it instantly gives the user a mental model of it's meaning and consequence when clicked.
- aikah 7y ago
  Thanks for your insight, you should write articles/blogposts about that aspect of UI/UX business that rarely talked about unfortunately. Icon relevancy is contextual, that's an important concept. To go further with the idea of context, a square on its own is meaningless, a square next to a circle and a triangle means stop, next to play and record. And it's also these relationships that will tell the user what to click on.
- kaetemi 7y ago
  The play button points at the direction the tape will roll in your cassette player. It had a very practical function once upon a time.
  - Isamu 7y ago
    Wow, I completely forgot about that fact. So the play triangle was an arrow saying "tape is rolling in this direction" and fast-forward and reverse double triangles were "tape is rolling fast" in the respective directions. Did these buttons first show up on cassette players? The reel-to-reels I can think of had multi-position switches.
aspaviento 7y ago
Since we are on topic, anybody has a suggestion for an icon that represents body fat without representing an overweighted person?
- hexmiles 7y ago
  You can use a icon just to rappresent fat (like this one https://www.flaticon.com/premium-icon/fat_1951542 https://www.flaticon.com/premium-icon/fat_1951542) and put it next to a person like a emblem in a similar way to this: https://www.iconfinder.com/icons/2740474/personal_protection_security_privacy_emblem_shield_with_person_symbol_user_access_user_authentication_icon https://www.iconfinder.com/icons/2740474/personal_protection... hope i did convey the idea. edit: You should probably use a icon like this one https://www.iconfinder.com/icons/830113/character_figure_man_person_icon https://www.iconfinder.com/icons/830113/character_figure_man... for the person instead the one i linked, since showing only the head instead of the entire body is not very clear (i used that one only for explain the emblem idea)
  - aspaviento 7y ago
    The problem of using words in an icon is that it only means anything for the people who speak that language.
    - hexmiles 7y ago
      you're right! The icon i selected was an example, i intended to use the drop like shape, without the word. I now realize it wasn't at all clear. But even without the text it still has some problems, since without context you may think it mean body hydratation level or blood, unless you use colors (yellow, blue and red ) to distinguish between them, but even then, they are not always available/possible and pose accessibility problems, for visually impaired (is the correct word?) etc... you could also use the text, if you target a specific locale, or also localizing the icons may make sense. Since i don't know where this icons will be used i don't know what the best solution and i don't have a perfect solution. I hope I have explained myself better. edit: grammar
yori 7y ago
Off-topic question: I see a lot of new posts coming from .cc websites. What is the appeal that .cc provides? Is it that the content is released under Creative Commons? That's not the case here. What kind of messaging or symbolism or underlying meaning one is aiming for when they are going for a .cc domain?
- hoorayimhelping 7y ago
  I doubt it has anything to do with the conceptual meaning of .cc and more with the practical consideration that uxdesign.cc was available and much cheaper than the alternatives.
- jfengel 7y ago
  There are some Creative Commons sites (notable arduino.cc), but mostly it's that .com is basically full, and squatters are sitting on a lot of it. So there's a burst of sites willing to take the hit of being associated with a lower-grade TLD. Why .cc? I guess because it's familiar-ish. It's easy to hit the "c" twice, and "c" is the first letter of "com". In this case, uxdesign.com refers to a blog that has lain fallow for a decade. It does no harm sitting there, and it may as well as long as its owner remembers to pay the trivial sum to renew it. But "uxdesign" might as well get new life in some other TLD.
seanhunter 7y ago
A much better guide would be to just follow Dieter Rams' 10 principles of good design, which can be found here [1] and elsewhere [1] https://www.designprinciplesftw.com/collections/ten-principles-for-good-design https://www.designprinciplesftw.com/collections/ten-principl...
b0rsuk 7y ago
I really like the design of Heroes of Might and Magic 2 spells: https://www.pngkit.com/png/detail/204-2044131_spells-heroes-of-might-and-magic-cursor.png https://www.pngkit.com/png/detail/204-2044131_spells-heroes-... Clear, quite colorful, and they communicate the spell function well. In the worst case, they're easy to memorize. I still like the black&yellow style. HOMM1 is also good. Heroes of Might and Magic 3 made them more decorative, but they're still clear: https://www.spriters-resource.com/resources/sheets/38/41309.png https://www.spriters-resource.com/resources/sheets/38/41309.... HOMMIV spells - what do these do? https://images.gog-statics.com/e0b6ea10a02d03060d95cb9f79ebce6e3bc4d8b219bd5b52494df1c543ac17b8_product_card_v2_mobile_slider_639.jpg https://images.gog-statics.com/e0b6ea10a02d03060d95cb9f79ebc... Might and Magic Heroes 5 - you need an art historian to figure these out. http://www.heroesofmightandmagic.com/heroes5/spells.shtml http://www.heroesofmightandmagic.com/heroes5/spells.shtml
DagAgren 7y ago
I've started strongly leaning towards the principle that if I have to choose between either an icon or text on a button, I will choose text. Icons are nice landmarks to guide the eye, but they are absolutely worthless to convey information or to find functions that you do not already have muscle memory for. Text is clearer, and the varying word shapes and lengths gives the eye a lot to work with already for locating things. Try sitting someone who has never seen your UI before down in front of it, and try to explain to them how to do something without pointing at the screen, and see how much they struggle if your buttons only have icons.
- jjoonathan 7y ago
  Yes! This was exactly the consensus in desktop app UX circles before mobile UX popularized "hamburger menu and heiroglyph" design, which intentionally sacrifices legibility to obtain screen space. It's unfortunate that many designers these days often jump for hamburgers and heiroglyphs in circumstances where that sacrifice doesn't make sense.
  - jkoberg 7y ago
    Turns out "designers" are not very creative or thoughtful, and mostly copy "trends"
- pcurve 7y ago
  Gmail had disastrous ui change many years ago where they replaced most text buttons with icons. They had to backpedal quickly. With that said, there's some benefit to icon. If there's third choice of using icon and text together (for certain actions), I'd use the combo.
kaelig 7y ago
I lead the team who built one of the public documentation sites mentioned in this article (https://polaris-icons.shopify.com/ https://polaris-icons.shopify.com/), ask me anything!
jkoberg 7y ago
If you're designing your own icons, you already failed. But, masturbation is pleasurable. I wonder if this "designer" realizes that the car dashboard icons are internationally standardized, and companies DO NOT redesign them.
wdb 7y ago
Arrows aren't really globally understood it's a cultural thing; depending on how you navigate the world. You might understand the arrows differently when used for indicating direction. It's a fascinating study in Anthropology :)
hizxy 7y ago
This has literally nothing to do with UX Design.

I really think that icons should be judiciously used, in the event of notification of a serious type. An alert, a warning or an immediate attention to a hazard. Icons have a cognitive overhead of learning it - if we design icons of different styles and artistic expression, they lose their efficiency in cognitive detection. An interface with lots of icons without text (For e.g. SolidWorks, 3DS MAX, Houdini) requires professional training and lots of experience. But a universally recognized icon such as the ones defined in ISO 7010 [1] are popularized and standardized - why? Because, if these icons are standardized, they gain popularity and recognizeability. I am guessing, the cognitive overhead in icon detection and interpretation becomes less as we are constantly exposed to these icons. It doesn’t have to be officially standardized. For example, Floppy disk icon (save a file) and on/off icons. Ofcourse, designers will continue to do things as a statement of artistic expression at the expense of all kinds of things - legibility, accessibility and as I said earlier, recognizeability. But that would make the world a really boring place, so let's allow creativity. There are a bunch of people that studied semiology of graphics. Frutiger did a lot of work in iconography. Vignilli and a few other [1] https://en.wikipedia.org/wiki/ISO_7010 https://en.wikipedia.org/wiki/ISO_7010 PS - Btw, skeumorphic design is back, watch out for it in the next decade.

tpmx 7y ago
This screen shot from the message/thread view in Gmail illustrates the problems of using icons without text labels when the icons aren't obvious enough: https://i.imgur.com/k7MFzdK.png https://i.imgur.com/k7MFzdK.png
keith___talent 7y ago
Agree to a point - not all icons are intuitive or well designed. (1) Often well designed icons can bring a sense of understanding or convey function of a tool. However many icons are invented/designed to convey an esoteric function that doesn’t exist in standard non-digital tools. In some cases a text description could be equally as useful but it might take up more room in an interface. Often a iconed toolbar creates a more intuitive interface for users whose focus is on creating images or manipulating complex data. Icons and a well thought out workspace differ from a CLE, but allow users with differing levels of understanding and experience to create useful documents and processes. Personally I think Autodesk is a company that profits primarily on user training for unintuitive software, they also seem to change their products to require relearning and sell certification. The point about Houdini, Max, and Solidworks needing deep training is ridiculous, a French horn only has 3 or 4 keys, so all players should be able to achieve proficiency easily. However in music, (and 3D modeling) deeper concepts exist to create meaningful and diverse compositions. (1) Icons are a recently modern idea - the 1964 Tokyo Olympics employed them to bridge language barriers. Today icons/pictographs are used in almost every interface and wayfinding (signage) device around the world. Skeuomorphic design is a good concept to help users understand general concepts. Advanced users who have a grasp of computing are more apt to interpret abstract icons and use them as time savers.
sings 7y ago
I do like the idea of a standardised set of icons for user interfaces. Beyond a certain set of core elements, which isn’t very large – search, cancel, arrows, settings – icons tend to only really serve a purpose after they are learnt for whatever specific application. Having a quasi-official set might help in making UI iconography more universal. Then of course allow creativity on top of that. To some degree this is already the case, but having a body add some rigour to these de facto conventions would be nice.
aikah 7y ago
> PS - Btw, skeumorphic design is back, watch out for it in the next decade. I think it was seen as cool for some people to talk negatively about skeuo, because it brought clicks. Most of these blogposts criticizing skeuomorphism never understood what it was about at first place, and it has nothing to do with how much bevel/emboss or drop shadow a UI has. Realword users like skeumorphism because they want some familiar UI, not some abstract/minimal thing that looks good only in Dribbble...
skinpop 7y ago
I've used 3DSMax for two decades and I wish they would replace all the buttons with text. How do you design a button that describes the idea of a "bias"? Well they tried and I still don't get it after all these years.

c3534l 7y ago

If I could lodge a complaint to all the UI designers: please stop making all the icons look the same in order for them to have the same "style." If I'm looking at a grid of essentially identical white-on-black pictograms with overlapping forms composed entirely of outlines with no variation in thickness or stroke, then you might as well just use actual words at that point.

rogual 7y ago
Seconded. Most recently I saw they'd done this to Blender (2.8) but it's happening everywhere.
capex 7y ago
In icon sets, variations in stroke thickness is a bad idea, without changing the context. People who can't evaluate design issues would simply categorise the product as "something's off here", or "I don't trust this". Your iconography has an impact at a deeper level.
- TuringTest 7y ago
  That doesn't invalidate GP's points. A collection of B&W icons with similar base shapes (circle, square, rectangle) and no contrast is terrible for using the interface. Each icon needs a distinctive element, be it color, weight or shape, to make it stand out from the other icons near it. If you're designing a B&W icon set, at least make sure that each one has a very eye-catchinge, different outline.
bryanrasmussen 7y ago
As a general rule icons take up less horizontal space than actual words describing what they do, which is why designers prefer to use icons.
- deleted 7y ago
  [deleted]
- ta999999171 7y ago

cyxxon 7y ago

Even if I generally agree with the premise of the article and the tipps it gives, it too falls prey to some of the problems of icons. It presents the Yelp food icons as well thought out and intuitive, and I would not have had the slightest idea why the chinese food icon looks that way or what it should represent, because around where I live chinese food is not served or sold in these kind of boxes. The problem remains: if you don't already know the meaning, you can at best guess, but don't understand it intuitively.

keith___talent 7y ago

This is also a crap article on icon design. Too little focus on context or actual implementation. Every medium article seems to me a crap resume builder, loads of 1st year experts telling you the crap they learned in profession bootcamp.

warpech 7y ago

The author has criticised the design of the "electric power steering system warning light" icon without suggesting a better alternative. What's the point of criticizing then? Some concepts are easier to depict literally, others are not. The most important part about the car icons is the color: an orange icon means you can go, a red icon means you must immediately stop.

falcolas 7y ago
The one that entertained me was the water temp warning icon - an icon that’s at least 50 years old. Its meaning is as well (if not more) established as the floppy disk as save.
jkoberg 7y ago
And, these icons adhere to international standards. They are not just "made up" to suit a designer's whim.
jfengel 7y ago
Some color blind users can't detect the difference between orange and red. Color is a useful design extra, but you need to take all users into account. There are lots of ways to do it. You could just include a page in the manual: "These icons indicate emergencies. Those other icons are just warnings," and expect color-blind users to memorize it. It's not optimal, but it's better than nothing. Emergency icons might be larger, or perhaps flash (gently). You could include a octagonal stop-sign border around icons that indicate emergencies. Using color as an additional channel for the 90+% of people in the world who can see it. But the remaining set (over 10% of men) are a sizeable audience.

krm01 7y ago

In the 10+ years I've been running a UI/UX design firm for software companies, I've come to the conclusion that icon design, is not very different from logo design and brand design. A Nike swish logo by itself, without context of the brand we have with it today, is just a random piece of graphic. The pixels itself are worth practically nothing. But because when we see the Nike logo, we feel something (Athleticism, motivation, inspiration, energy, etc.) the mark is worth billions. The magic is not in the mark itself, it's in the context and meaning it builds up in the user's mind over time. Same goes for icons. When seeing a play button with a red background and a white triangle, it might suggest you're looking at a Youtube video. Icons, have no real meaning or worth without context that's built up over time. Both are 'investment graphics'. So the purpose of an icon should be to make the user familiar with something and initiate a mental model when you see it (You see Nike, you feel something. You see a Play button, you know you need to click it, etc.). Don't judge icons by their looks, but by their context. In other words: Can the icon you are adding in your UI, over time and by continuously link the mark to a specific outcome, make the product easier to use because it instantly gives the user a mental model of it's meaning and consequence when clicked.

aikah 7y ago
Thanks for your insight, you should write articles/blogposts about that aspect of UI/UX business that rarely talked about unfortunately. Icon relevancy is contextual, that's an important concept. To go further with the idea of context, a square on its own is meaningless, a square next to a circle and a triangle means stop, next to play and record. And it's also these relationships that will tell the user what to click on.
kaetemi 7y ago
The play button points at the direction the tape will roll in your cassette player. It had a very practical function once upon a time.
- Isamu 7y ago
  Wow, I completely forgot about that fact. So the play triangle was an arrow saying "tape is rolling in this direction" and fast-forward and reverse double triangles were "tape is rolling fast" in the respective directions. Did these buttons first show up on cassette players? The reel-to-reels I can think of had multi-position switches.

aspaviento 7y ago

Since we are on topic, anybody has a suggestion for an icon that represents body fat without representing an overweighted person?

hexmiles 7y ago
You can use a icon just to rappresent fat (like this one https://www.flaticon.com/premium-icon/fat_1951542 https://www.flaticon.com/premium-icon/fat_1951542) and put it next to a person like a emblem in a similar way to this: https://www.iconfinder.com/icons/2740474/personal_protection_security_privacy_emblem_shield_with_person_symbol_user_access_user_authentication_icon https://www.iconfinder.com/icons/2740474/personal_protection... hope i did convey the idea. edit: You should probably use a icon like this one https://www.iconfinder.com/icons/830113/character_figure_man_person_icon https://www.iconfinder.com/icons/830113/character_figure_man... for the person instead the one i linked, since showing only the head instead of the entire body is not very clear (i used that one only for explain the emblem idea)
- aspaviento 7y ago
  The problem of using words in an icon is that it only means anything for the people who speak that language.
  - hexmiles 7y ago
    you're right! The icon i selected was an example, i intended to use the drop like shape, without the word. I now realize it wasn't at all clear. But even without the text it still has some problems, since without context you may think it mean body hydratation level or blood, unless you use colors (yellow, blue and red ) to distinguish between them, but even then, they are not always available/possible and pose accessibility problems, for visually impaired (is the correct word?) etc... you could also use the text, if you target a specific locale, or also localizing the icons may make sense. Since i don't know where this icons will be used i don't know what the best solution and i don't have a perfect solution. I hope I have explained myself better. edit: grammar

yori 7y ago

Off-topic question: I see a lot of new posts coming from .cc websites. What is the appeal that .cc provides? Is it that the content is released under Creative Commons? That's not the case here. What kind of messaging or symbolism or underlying meaning one is aiming for when they are going for a .cc domain?

hoorayimhelping 7y ago
I doubt it has anything to do with the conceptual meaning of .cc and more with the practical consideration that uxdesign.cc was available and much cheaper than the alternatives.
jfengel 7y ago
There are some Creative Commons sites (notable arduino.cc), but mostly it's that .com is basically full, and squatters are sitting on a lot of it. So there's a burst of sites willing to take the hit of being associated with a lower-grade TLD. Why .cc? I guess because it's familiar-ish. It's easy to hit the "c" twice, and "c" is the first letter of "com". In this case, uxdesign.com refers to a blog that has lain fallow for a decade. It does no harm sitting there, and it may as well as long as its owner remembers to pay the trivial sum to renew it. But "uxdesign" might as well get new life in some other TLD.

seanhunter 7y ago

A much better guide would be to just follow Dieter Rams' 10 principles of good design, which can be found here [1] and elsewhere [1] https://www.designprinciplesftw.com/collections/ten-principles-for-good-design https://www.designprinciplesftw.com/collections/ten-principl...

b0rsuk 7y ago

I really like the design of Heroes of Might and Magic 2 spells: https://www.pngkit.com/png/detail/204-2044131_spells-heroes-of-might-and-magic-cursor.png https://www.pngkit.com/png/detail/204-2044131_spells-heroes-... Clear, quite colorful, and they communicate the spell function well. In the worst case, they're easy to memorize. I still like the black&yellow style. HOMM1 is also good. Heroes of Might and Magic 3 made them more decorative, but they're still clear: https://www.spriters-resource.com/resources/sheets/38/41309.png https://www.spriters-resource.com/resources/sheets/38/41309.... HOMMIV spells - what do these do? https://images.gog-statics.com/e0b6ea10a02d03060d95cb9f79ebce6e3bc4d8b219bd5b52494df1c543ac17b8_product_card_v2_mobile_slider_639.jpg https://images.gog-statics.com/e0b6ea10a02d03060d95cb9f79ebc... Might and Magic Heroes 5 - you need an art historian to figure these out. http://www.heroesofmightandmagic.com/heroes5/spells.shtml http://www.heroesofmightandmagic.com/heroes5/spells.shtml

DagAgren 7y ago

I've started strongly leaning towards the principle that if I have to choose between either an icon or text on a button, I will choose text. Icons are nice landmarks to guide the eye, but they are absolutely worthless to convey information or to find functions that you do not already have muscle memory for. Text is clearer, and the varying word shapes and lengths gives the eye a lot to work with already for locating things. Try sitting someone who has never seen your UI before down in front of it, and try to explain to them how to do something without pointing at the screen, and see how much they struggle if your buttons only have icons.

jjoonathan 7y ago
Yes! This was exactly the consensus in desktop app UX circles before mobile UX popularized "hamburger menu and heiroglyph" design, which intentionally sacrifices legibility to obtain screen space. It's unfortunate that many designers these days often jump for hamburgers and heiroglyphs in circumstances where that sacrifice doesn't make sense.
- jkoberg 7y ago
  Turns out "designers" are not very creative or thoughtful, and mostly copy "trends"
pcurve 7y ago
Gmail had disastrous ui change many years ago where they replaced most text buttons with icons. They had to backpedal quickly. With that said, there's some benefit to icon. If there's third choice of using icon and text together (for certain actions), I'd use the combo.

kaelig 7y ago

I lead the team who built one of the public documentation sites mentioned in this article (https://polaris-icons.shopify.com/ https://polaris-icons.shopify.com/), ask me anything!

jkoberg 7y ago

If you're designing your own icons, you already failed. But, masturbation is pleasurable. I wonder if this "designer" realizes that the car dashboard icons are internationally standardized, and companies DO NOT redesign them.

wdb 7y ago

Arrows aren't really globally understood it's a cultural thing; depending on how you navigate the world. You might understand the arrows differently when used for indicating direction. It's a fascinating study in Anthropology :)

hizxy 7y ago

This has literally nothing to do with UX Design.