Principles of Icon Design | Hacker News Reader

Principles of Icon Design

uxdesign.cc

210 pointspraveenscience56 comments

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.

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.

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.

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.

https://old.reddit.com/r/explainlikeimfive/comments/1tasqz/e...

Here's an interesting reddit discussion about it with an image of an older style play button.

And an older more in depth discussion on the same thing

http://www.stackprinter.com/export?service=ux.stackexchange&...

"They first appeared as tape transport symbols on reel-to-reel tape decks during the mid-1960s." See https://gizmodo.com/the-secret-histories-of-those-ing-comput..., which is linked to from this article which you may also find interesting: https://medium.com/@mwichary/the-ghost-tech-in-todays-langua...

I looked it up and they date back to the 1960s on reel-to-reel tape recorders. The pause button was added later when companies found that they couldn't properly translate the word pause into every language. The idea is that the two bars look like the square stop button and look like a frame stopped while it is rolling to the next frame. The reasoning behind the square is that it's the play triangle without a direction; it is stopped in both directions.

This machine is apparently from 1961, so it must have been quite early in the 60s: http://www.reelprosoundguys.com/images/1962_GRUNDIG_TK_46.jp...

I think many traffic signs are visual. Ie they would not work as well if you did random assignment of sign graphics vs its purpose. Not all of them are, of course.

For a very basic and obvious example, possibility to turn right vs turn left signs look different not just because of convention but they resemble the shape of the road.

And some tape decks supported playing the other side of the cassette without flipping, so had a second play button with the arrow reversed, or for those that did it automatically, one button with both arrows.

Or the media progress-bar.

Very insightful comment. You nailed it.

There are a lot of interesting case studies I remember reading about logos about 15-20 years ago, where the big thing was dropping the company name from the logo and using the logo image only. A couple of the examples I recall are target, Starbucks and maybe McDonald's. A lot of this was justified on "globalism", to your point, where the logo conveyed the brand universally unlike a company name or tag line.

One thing to be aware of with both names and logos, is potentially what the name/logo may mean in other places throughout the world.

I'm with you on the context issue. Funny thing is as soon as OP ranked the dash icons in order of clarity, the very first one - right arrow, ranked "clearest" - I had no idea what it was. I had to think for a sec and realize it was a turn signal. For me, without that symbol being shown specifically on the right side of the cluster, with a big steering wheel in the middle, it loses a lot of meaning.

The Play button is internationally standardized in ISO/IEC 18035, as well. Using your own icons confuses users.

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.

Seconded. Most recently I saw they'd done this to Blender (2.8) but it's happening everywhere.

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.

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.

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.

Word Wrap. Amateurs.

I miss recognizable colors, and clear silhouettes.

Too many icons now are monochrome squiggles and blobs on a (rounded) rectangle silhouette. About as horrible as it can get.

For real! GIMP became almost unusable for me when they introduced that monochrome icon theme, although luckily you can switch back in the options menu (for now at least). Colors are an important part of making icons recognizable at a glance, especially when you have a ton of them in one place.

here f'n here.

Most of the time text would be more useful than iconography. Even when you don't understand the language, text and iconography are about the same - some squiggly lines that mean nothing, that you have to attach meaning to.

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

PS - Btw, skeumorphic design is back, watch out for it in the next decade.

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

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.

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.

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

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.

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.

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.

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.

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.

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.

And, these icons adhere to international standards. They are not just "made up" to suit a designer's whim.

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.

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.

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

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

You can use a icon just to rappresent fat (like this one 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...

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

The problem of using words in an icon is that it only means anything for the people who speak that language.

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

Don't worry, I get what you mean. Thank you for your suggestions (I really don't know why you got downvoted. It wasn't a perfect solution but I don't think it deserved to be downvoted). My idea was something like some bubbles under skin or some fat in a cell but none of those clearly represent body fat, hence my question :)

The context is for a fitness app.

An M in the shape of two large arcs. ;)

A caliper, percent sign, stylized bacon, a person with a double outline, bubbles?

How about the words "body fat" ?

The Noun Project has a few options that might work (most don't meet your requirements), including a couple showing a lean person with arrows by the midsection instead: https://thenounproject.com/search/?q=body%20fat

Thank you for your suggestion. It's not exactly what I look for but it can help me as inspiration.

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

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

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.

This has literally nothing to do with UX Design.

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?

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.

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.

I really like the design of Heroes of Might and Magic 2 spells:

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

HOMMIV spells - what do these do? 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

Reply on news.ycombinator.com