I put up a couple of hundred icons that I'd drawn previously up with a public domain license. Here are the download counts and royalties from the last 10 months for reference:
http://i.imgur.com/clNZWUk.png
Little pictograms for buttons are often extremely vague and open to interpretation.
Eg. Heres a random game where upon opening it I was immediately confused
http://mobile.cdn.softpedia.com/apk/images/color-switch_1.jp...
(also the icons are all animated / rotating, making it even more confusing, made this game menu stick out in my memory as an egregious example)
Some designers seems to love the minimalism of if though, from an aesthetic reason, I assume.
Imo Text is the clearest thing you can put on a button to tell the user what that button does 'save' 'load' 'new game' etc. Yes, it will need to be translated, but thats simply putting in more work for a better product.
That really depends. Can you imagine photoshop's interface if it were all text? This is an extreme example but more generally I think text is better for discoverability but icons are better for visual memory and thus better suited for buttons in applications you use often.
On desktop there are always tool tips. On touch interfaces this was not yet figured out.
Icons and text are exactly the same thing. They're both language; visual forms that mean something.
We're more used to text, because text has a lot of nice properties as a medium for language so it has become pervasive. It's generally low dimensional and has high composability. For low bandwidth mediums it's ideal, because it's also low bandwidth.
But that doesn't mean icons aren't a language and aren't just as useful as text. They just have different strengths and weaknesses. Icons are higher bandwidth and higher dimensional (a tiny 32x32 grayscale image has 1024 dimensions!). But they're also very dense. What could take a large amount of physical space to describe with text, might only take a small 32x32 space with an icon.
All that to say, I don't disagree with your assessment of the situation. But I don't think it should be viewed as icons vs text, as if they're two completely different things. It should be viewed as a general problem of effective communication. Text can be just as bad. Imagine reading "subtract b from a and divide that result by q" versus "(a - b) / q". The latter is a more efficient language which most everyone will understand. Better to use the latter.
What if instead of writing "save" and "load" the designers wrote "serialize game state" and "deserialize game state". It means the same thing, but clearly "save" and "load" are better. Why? More people will understand them, and the extra information communicated by the verbose alternative isn't necessary.
Just as in a lot of situations an icon, if generally understood by the UI's target audience, can be a better alternative than writing "save" and "load".
> Imo Text is the clearest thing you can put on a button to tell the user what that button does 'save' 'load' 'new game' etc. Yes, it will need to be translated, but thats simply putting in more work for a better product.
I strongly disagree. I'm looking at my browser chrome right now and if the back, forward, reload, home, and bookmark buttons were displayed as that, it would be _awful_.
Even thinking about my IDE, if IntelliJ said "Class with main method" instead of the little C with play button icon or "Library class for which source is decompiled", it would drive me insane. That's most certainly making a worse product.
It's all about the language you can create and sure, no one is going to learn a new language to play some 2 minute game, but lots of great interfaces require a new language. It's about optimizing for the experienced user instead of the newbie.
Of course there are places where it should be the other way around, but it's not universal.
Pretty much the only thing I remember from my human machine interaction class aeons ago is a discussion of text vs. pictograms vs. abstract icons. Text is clearest but takes the longest time for experienced users to find what they are looking for. Abstract icons are unclear to new, untrained users but are super fast to find/discern by experienced users. Pictograms are a compromise.
Related: US traffic signs always bothered me because we have trained users who need to be able to identify the traffic signs as quickly as possible so that they can focus on the road. Yet we use traffic signs that are optimized for the opposite use case. Europe and most other countries are way ahead on that.
I agree. I always click the wrong button for Paste in Android, often resulting in copying instead which means I overwrite the clipboard. This is very annoying as I almost always have copied something from an entirely different page/tab/app.
Is translating it harder than trying to look up what a picture means on the internet? Is it harder to learn what the word "SAVE" means than to learn that a square box with a circle in it means "save"?
> Little pictograms for buttons are often extremely vague and open to interpretation.
True. I remember Lynda Weinman refered to this as "mystery meatball" navigation in one of the books she wrote on web design somewhere between the mid 90's to early 2000's. Probably it was the book Designing Web Graphics.3 [1] as looking through the Google results the cover of that one looks the most like what I seem to recall.
Tying into what was said in a sibling comment about the icons used in programs like Photoshop, I think the important thing to keep in mind is the context in which you consider adding icons. For a professional market piece of software like Photoshop where you expect your audience to put many hours into learning how to use the software and where you expect them to become power users, you can allow more in terms of UI elements that might steepen the learning curve, but which when learned can be employed by proficient users for faster and more productive workflow and which therefore will make the additional time required to understand them increase the value that your software provides.
Meanwhile for tools and websites that are used only occasionally, or where you don't expect repeat use but want to provide the best value for your users still, you should hold their hand more and make it immediately apperent what everything does and how to use it.
I've been thinking a bit about interfaces that would evolve with the user but my conclusion thus far has been that the amount of work required to implement that successfully would take a lot of time and might even never be worth it. That instead it still seems better to me to decide wether you are targeting heavy repeat use or not, and to optimize your UI accordingly in the manner I stated in the above paragraphs of text.
The difference between using text and icons for interfaces is that icons are clear to new users only if they are immediately identifiable. With universal things like email, that's easier to do; for example, the user knows there must be a "send" button and so immediately recognizes an arrow button. When the user needs to learn the interface (more generally, the mode of interaction), icons are harder to use effectively.
Well that specific random game was actually one of the most notable hits on smartphone in 2016. I believe for someone who are familiar with video games in general, these icons are very common though.
But yea the icon rotation might be annoying at some point.
This has been around for years. I was thankful for them when I was building my now failed company. I didn't end up licensing anything, but had I got to revenue, I certainly would have. Thank you to your team.
I think $40/yr or $2/icon is too far out of reach for me to use these icons as a proof of concept, blog, or early website launches. I have a website idea which would use about 100 of these icons, but I can't justify the cost yet since it brings in no revenue.
At 3$/mo (averaged) it's been a great deal for me. I do lots of website/other designs and they're royalty free so I can do anything I want with them (except use them as a logo). It makes it easy for me because say, I want a svg of a penguin, BAM got one right there (169 actually).
Likewise. Seems like a really great price if you're a designer, but too steep if you only use it occasionally. I use Noun Project semi-regularly with the CC licensing, but only for not-for-profit purposes, so $40 is too much.
I'd probably pay a one-off fee ($20? $30?) just to use the app though, even if it meant requiring attribution for all icons used.
The icons are embedded SVG so you can just copy and paste it from the page source. The icons are Creative Commons licensed so you don't even need to accept their TOS.
This really reminds my of the glory days of clip art :) I for one really liked those so no harm meant :)
The next thing is clippy coming back (oh wait that's all those chat bots) :)
There are about a million words in the English language. The site has a long way to go to get to "everything". Me, I'll stick with phonetic alphabets, which have long displaced icons.
Interestingly, iconic languages usually wound up assigning sounds to the icons and were transformed into phonetic alphabets. Icons just aren't practical.
I read some designers discussing the filter icon usually being a funnel which doesn't do much filtering. It does funnel something into something. https://thenounproject.com/search/?q=filter interesting to see the other options that show up.
Here's an idea; four arrows moving right, towards a line. The line has a hole in it, only allowing one of the arrows to pass through. Demonstrates filtering and doesn't have any accidental significance from symmetry.
Funnels are used for filtering all the time, think coffee, lab equipment, etc. The parameters of the filter - i.e the mesh - are what you are choosing to go in the funnel.
I can certainly see how this is useful, but is there also a complementary site that provides the opposite? I try to avoid using icons that resemble everyday items (the 3.5 inch floppy for 'save' is a good example).
Edit: there's actually a ton of good abstract stuff in here. Should have looked more closely.
What's the point of having a footer when you can't get to it? I see links for about and pricing that I wanted to click on, but I can't get to it. Super frustrating.
I would be using this service if they offer all possible resolutions with one click. I assume this is service which should be used by non-designers to quickly get icons for some proof of concept or similar.
I always look for the icons with multiple gears. Have not found one which would actually work: Gears not touching, size difference blocks, or three gears in deadlock. :)
It would be nice if they implemented machine learning to cluster icons with similar style together. Then your queries could return only icons in the stlye youve selected!
The point of modern emoji is that their look is standardized though. (past the original goal of Japanese cell phone communication, the consortium seems to be concerned with filling in gaps and making sure cultures are properly represented) So emoji should (ideally) be a common set of pictograms that people can send to each other and which can be displayed interchangeable by each IME. The Unicode Consortium also has more stringent standards for inclusion. [0] UI icons are excluded. 2.6K isn't a lot, [1] Unicode has tons of room, and no one is forcing you to use them. People have obviously found use for them and it has made them enthusiastic about interacting with their tech overlords. [2] I used to irrationally hate anything popular too, until I made an effort to try to understands people's motivations for liking it and tried it myself. Emoji are the missing expressive layer of our text that express nuance like sarcasm and mirth. Sure we have emoticons, but those were limited and emoji are much more diverse and versatile. [3] Maybe you should give them a try before being so quick to write them off. I don't exactly pepper my texts with them, but I do respect people's motivations for using them and I always make sure to send a popper [4] to my friends on their birthdays.
[+] [-] felixthehat|9 years ago|reply
[+] [-] everyone|9 years ago|reply
Eg. Heres a random game where upon opening it I was immediately confused http://mobile.cdn.softpedia.com/apk/images/color-switch_1.jp... (also the icons are all animated / rotating, making it even more confusing, made this game menu stick out in my memory as an egregious example)
Some designers seems to love the minimalism of if though, from an aesthetic reason, I assume.
Imo Text is the clearest thing you can put on a button to tell the user what that button does 'save' 'load' 'new game' etc. Yes, it will need to be translated, but thats simply putting in more work for a better product.
[+] [-] yoz-y|9 years ago|reply
On desktop there are always tool tips. On touch interfaces this was not yet figured out.
[+] [-] fpgaminer|9 years ago|reply
We're more used to text, because text has a lot of nice properties as a medium for language so it has become pervasive. It's generally low dimensional and has high composability. For low bandwidth mediums it's ideal, because it's also low bandwidth.
But that doesn't mean icons aren't a language and aren't just as useful as text. They just have different strengths and weaknesses. Icons are higher bandwidth and higher dimensional (a tiny 32x32 grayscale image has 1024 dimensions!). But they're also very dense. What could take a large amount of physical space to describe with text, might only take a small 32x32 space with an icon.
All that to say, I don't disagree with your assessment of the situation. But I don't think it should be viewed as icons vs text, as if they're two completely different things. It should be viewed as a general problem of effective communication. Text can be just as bad. Imagine reading "subtract b from a and divide that result by q" versus "(a - b) / q". The latter is a more efficient language which most everyone will understand. Better to use the latter.
What if instead of writing "save" and "load" the designers wrote "serialize game state" and "deserialize game state". It means the same thing, but clearly "save" and "load" are better. Why? More people will understand them, and the extra information communicated by the verbose alternative isn't necessary.
Just as in a lot of situations an icon, if generally understood by the UI's target audience, can be a better alternative than writing "save" and "load".
[+] [-] arjie|9 years ago|reply
I strongly disagree. I'm looking at my browser chrome right now and if the back, forward, reload, home, and bookmark buttons were displayed as that, it would be _awful_.
Even thinking about my IDE, if IntelliJ said "Class with main method" instead of the little C with play button icon or "Library class for which source is decompiled", it would drive me insane. That's most certainly making a worse product.
It's all about the language you can create and sure, no one is going to learn a new language to play some 2 minute game, but lots of great interfaces require a new language. It's about optimizing for the experienced user instead of the newbie.
Of course there are places where it should be the other way around, but it's not universal.
[+] [-] ajmurmann|9 years ago|reply
Related: US traffic signs always bothered me because we have trained users who need to be able to identify the traffic signs as quickly as possible so that they can focus on the road. Yet we use traffic signs that are optimized for the opposite use case. Europe and most other countries are way ahead on that.
[+] [-] Kiro|9 years ago|reply
[+] [-] WalterBright|9 years ago|reply
Is translating it harder than trying to look up what a picture means on the internet? Is it harder to learn what the word "SAVE" means than to learn that a square box with a circle in it means "save"?
The idea that icons are universal is utter bunk.
[+] [-] eriknstr|9 years ago|reply
True. I remember Lynda Weinman refered to this as "mystery meatball" navigation in one of the books she wrote on web design somewhere between the mid 90's to early 2000's. Probably it was the book Designing Web Graphics.3 [1] as looking through the Google results the cover of that one looks the most like what I seem to recall.
Tying into what was said in a sibling comment about the icons used in programs like Photoshop, I think the important thing to keep in mind is the context in which you consider adding icons. For a professional market piece of software like Photoshop where you expect your audience to put many hours into learning how to use the software and where you expect them to become power users, you can allow more in terms of UI elements that might steepen the learning curve, but which when learned can be employed by proficient users for faster and more productive workflow and which therefore will make the additional time required to understand them increase the value that your software provides.
Meanwhile for tools and websites that are used only occasionally, or where you don't expect repeat use but want to provide the best value for your users still, you should hold their hand more and make it immediately apperent what everything does and how to use it.
I've been thinking a bit about interfaces that would evolve with the user but my conclusion thus far has been that the amount of work required to implement that successfully would take a lot of time and might even never be worth it. That instead it still seems better to me to decide wether you are targeting heavy repeat use or not, and to optimize your UI accordingly in the manner I stated in the above paragraphs of text.
[1]: https://www.amazon.com/Designing-Web-Graphics-3-Lynda-Weinma...
[+] [-] aisofteng|9 years ago|reply
[+] [-] shosko|9 years ago|reply
[+] [-] icyblue0108|9 years ago|reply
[+] [-] kleer001|9 years ago|reply
Here here!
When I use a new bit of software one of my first acts is to try to change all the 'friendly' icons to text only.
[+] [-] jtraffic|9 years ago|reply
I think Google's autodraw[2] + noun project would make an excellent pairing.
[0] https://www.logojoy.com/ [1] https://www.tailorbrands.com/ [2] https://aiexperiments.withgoogle.com/autodraw
[+] [-] Cymen|9 years ago|reply
[+] [-] wtvanhest|9 years ago|reply
[+] [-] eddyg|9 years ago|reply
[1] https://news.ycombinator.com/item?id=2843728 [2] https://news.ycombinator.com/item?id=3498929
[+] [-] Jdam|9 years ago|reply
[+] [-] xs|9 years ago|reply
[+] [-] andruby|9 years ago|reply
Hiring a graphical artist for an hour will probably be a lot more expensive
[+] [-] desdiv|9 years ago|reply
[+] [-] penagwin|9 years ago|reply
[+] [-] Osmium|9 years ago|reply
I'd probably pay a one-off fee ($20? $30?) just to use the app though, even if it meant requiring attribution for all icons used.
[+] [-] throwthisawayt|9 years ago|reply
[+] [-] stephenboyd|9 years ago|reply
[+] [-] sosodaft|9 years ago|reply
All I wanted was a bacon egg and cheese icon...
[+] [-] desdiv|9 years ago|reply
[+] [-] freekh|9 years ago|reply
[+] [-] wlfmn|9 years ago|reply
[+] [-] Phlow|9 years ago|reply
[+] [-] laser|9 years ago|reply
Ex. "Bat" https://thenounproject.com/search/?q=bat&i=660766
"Swim" https://thenounproject.com/search/?q=swim&i=912051
"Eat" https://thenounproject.com/search/?q=eat&i=946933
[+] [-] WalterBright|9 years ago|reply
Interestingly, iconic languages usually wound up assigning sounds to the icons and were transformed into phonetic alphabets. Icons just aren't practical.
[+] [-] iamcurious|9 years ago|reply
[+] [-] apo|9 years ago|reply
- source graphics for figures in books and articles
- inspiration for new ways of expressing an idea graphically
- gauging variation in visual representation of a concept
- learning how to make a particular shape with vector graphics
- logo ideas
[+] [-] panic|9 years ago|reply
[+] [-] STRiDEX|9 years ago|reply
[+] [-] wyager|9 years ago|reply
[+] [-] achr2|9 years ago|reply
[+] [-] jazoom|9 years ago|reply
[+] [-] bbcbasic|9 years ago|reply
https://thenounproject.com/search/?q=Fuck&i=54850
Iconic karma sutra here:
https://thenounproject.com/term/sex/
[+] [-] tomcam|9 years ago|reply
[+] [-] rch|9 years ago|reply
Edit: there's actually a ton of good abstract stuff in here. Should have looked more closely.
[+] [-] dvcc|9 years ago|reply
[+] [-] criddell|9 years ago|reply
[+] [-] tlogan|9 years ago|reply
Am I missing something?
[+] [-] prh8|9 years ago|reply
[+] [-] qznc|9 years ago|reply
[+] [-] deevolution|9 years ago|reply
[+] [-] Animats|9 years ago|reply
There are now over 2600 emoji. Enough already.
[+] [-] cooper12|9 years ago|reply
[0]: http://unicode.org/emoji/selection.html
[1]: Just look at how many Chinese characters there are...
[2]: Campaigns to get certain emoji into unicode are quite popular, such as with the taco emoji (https://www.tacobell.com/feed/tacoemoji) and the dumping emoji (http://www.dumplingemoji.org/).
[3]: Eggplant emoji anyone?
[4]: http://emojipedia.org/party-popper/