Using icons vs using words
I noticed that Tildes docs make a point out of using words instead of labels. The stated reason is that icons may be difficult to understand, and I honestly don't get how is this the case.
Icons, when used right, are much more usable and intuitive than any text labels. They are small, distinct, they draw attention and you can tell what they do just by looking at them instead of reading them.
Take the classic upvote/downvote scrollers used on Reddit, Imgur, etc. It uses icons for upvotes and downvotes, but there isn't a single person I know who doesn't know what those mean. It's intuitive and usable. It doesn't require localization. It just works.
In contrast, the "Vote (10)" button on Tildes. It uses text, on a page full of text. It's an important UI element, one of the most used UI elements really, but it's not visually highlighted in any way. The amount of votes, which is an important metric, isn't distinct, making it hard to read. The "text button" style it uses is usually reserved for buttons that are used rarely, such as "Edit" or "Delete", or buttons that open more menus, such as "Edit" or "Reply". It's not intuitive.
Yes, this is a minor thing, but it's minor things that make the overall experience pleasant or unpleasant. And it shows how icons (and highlights), when used right, make user experience better.
Maybe it's a product of spending too much time inside a terminal, but I like that almost everything is text.
Me too. Generally not a fan of icons at all.
Icons have their uses, but they're misused a lot of the time and aren't good design in general. Here's an icon button from my RSS reader - try to tell me what it does. Here's an examination of gmail's icons, almost all of them make no sense.
Icons are basically just another language that you have to learn, and different sites often don't even use the same icon for the same function. It's even worse on mobile where you usually can't hover over buttons to get a tooltip telling you what they do, so you just have to blindly tap icons and see what happens.
Funny. I have previously said exactly the same thing to developers I've worked with who want to create icon-only interfaces.
I have had people seriously tell me that this how people should learn what a system does. My response is that trial-and-error does not make for a good user experience - especially if one of those blind taps produces an unwanted outcome.
While I agree that most icons are misused and therefore not good design, I disagree that icons are not good design. The problem is that they are heavily misused and not enough thought goes into when an icon is an appropriate replacement.
Sure, I'm not denying that it's possible to use them well, just that it's not simple. Do you have an example of something that you think is a particularly good use of icons?
Small home icon for home. Icon like a printer for print. Shopping cart icon. Green checkmark for good, red x for bad. Padlock for lock. Green man walking for go, red hand for stop.
There are plenty that, as you mentioned, happen to be "learned" but have been around long enough now they are pretty universal - floppy disk for save, pencil for edit, 3 dots for menu, speech balloon for comment, down arrow for download, stop signs, yield signs, speed limit signs, etc.
There's no "easy" solution, but I don't think we should dismiss icons just because they can be tough to design. In some cases it's intuitive (up/down arrow; thumbs up/down) and should be considered for that reason.
Even things that seem as obvious as this aren't universal. In Japan, the expected symbol for yes/correct/etc. would be a red circle (○) and no/incorrect/etc. would be a blue X (×). This is why Playstation controllers have those icons and colors on two of the buttons, and if you play a Japanese game the circle is used for the "confirm" button and the X is "cancel" (North American games usually flip them because the X is easier to press and we don't have that cultural meaning).
Yeah I thought about leaving that one out because it's more of a "learned" one than intuitive. But picking and criticizing one from a list doesn't detract from the point.
ALL icons are learned rather than intuitive. There are some that we learn so early in life that we think they're intuitive, but they're still learned - just like textual language.
How do you know that a square with a triangle on it means "house"? Because that's how we teach youn pre-literate children to draw houses. How do you know that a "house" icon means "go to the home page"? Someone decided that the first page of a website is called "home page", rather than "landing page" or "arrival page" or "welcome page" or "start page" or "navigation start" or "intro screen" - and you learned that terminology. And, having learned that the name for that page is "home", you've linked that with the learning that a triangle on a square means "house", so you assume that the "house" icon takes you to the page called "home".
As for the floppy disk icon... who sees floppy disks any more? Some people don't even know that the icon represents a floppy disk, which was a prehistoric data storage medium from the last millennium. They just learned that that icon means "save" the same way they learned the letters "s-a-v-e" means "rescue" or "store".
Even basic icons like arrows aren't intuitive if you don't know what function they're activating. An up arrow might unambiguously represent "up"-ness but what, exactly, is going up when you click on that icon? Are you going to be taken to another link/field higher up the page? Is the screen going to scroll up? Is the item you click on going to be moved up the page? Will a number on the screen increase? "Up" may mean up, but what is the "up"-ness being applied to?
This pedantry does not add to the discussion. There's a distinct and important difference between a pictorial representation of something (intuitive) and an icon meant to represent an action that is not a pictorial representation of that action. The difference is that one icon will require more people to learn it rather than it being intuitive and this is an important consideration when we are thinking about whether to replace text for an action with an icon.
You're doing the exact same thing Deimos did and trying to make an argument that it's possible for someone to not understand a particular icon. This doesn't matter. What matters is when the majority understand what an icon represents.
You could make the argument that someone without a printer would never understand a printer icon. But why does that matter? Only a person with a printer will want to print something and the majority of people seeing the icon that want to print will understand it's there for printing.
I beg to differ. I think that understanding the origins of our so-called "intuitive" pictographs and icons is extremely relevant to a discussion about how to best use those icons. If we don't take a moment to question our cultural assumptions, we won't realise that while a red hand might mean "stop" to a lot of people in western cultures, it could be seen as a "good luck" wave to people in China (red is the colour of good fortune and luck). On a related topic, did you know that those little gold cat statues that wave their arms are actually beckoning to bring good luck into the premises? They're not waving hello, as a lot of westerners think.
It's all contextual, though. There are no universalities when it comes to pictorial representations.
And, as Deimos said and I agree, icons are just another language for people to learn. You yourself are implicitly agreeing with this point of view when you say that people with printers will recognise a printer icon but people without printers won't recognise it. It's a learned thing. Someone has to look at the icon and connect it to a real-world equivalent.
The problem with that is that most things we would want icons for on a website don't have a real-world equivalent. What does a home page look like, so that I might create a pictorial representation of it, rather than an icon which is not a representation of it? What does upvoting look like, so that I might create a pictorial representation of it? What does deleting a comment look like, so that I might create a pictorial representation of it?
These things don't look like anything. There is no real-world imagery for "go to home page" or "upvote" or "delete" that I can use to create pictorial representations for these actions. Anything I create would be a non-representative icon which has to be learned.
So, as well as expecting people to know English to read "vote", we also expect them to learn online iconography to read "upvote arrow". How does that help people? How is it making users' lives easier to require them to understand two languages, English and iconography, to navigate a website?
They already know English. Why not just use that?
And why does this website need icons anyway? What additional benefit would that provide people? They can already see the word "vote" and click on it to vote on a comment. What benefit would people get from seeing an arrow or a thumbs-up symbol (which would have to have a text label saying "vote" as well)? As I used to say when working on software projects, if we spend the time and effort on this feature, what's the pay-off? What's the benefit that makes the cost worthwhile?
Thank you! That's the nicest thing anyone's said to me this week. :)
Apologies, it was not clear that this is what you were getting at. Yes, we need to take cultures into consideration. I already addressed that some of the "intuitive" icons I listed are culturally biased and probably should not have been included there, as on the internet you're bound to run into some users who will take issue with them being used as examples.
There are also no universalities when it comes to text, if we're going to be pedantic about it. I could not understand that the word "print" means print or "post" means post. This discussion does nothing to add to the reality of what we are addressing - the user interface on a website that we are currently using. There are realities about our user base that we need to take into consideration.
I can't make heads or tails of why you are asking this question without making the assumption that you are not familiar with user interface design or some basic neurobiology. So in case you aren't educated on the topic, here's a few reasons why icons can be useful:
My point wasn't only about cultural misinterpretation. The underlying point is that, if the same icon can mean different things to different people, then it's clear that the icon's meaning is learned rather than intuitive. When we say something is "intuitive" we often mean "I learned its meaning so long ago that I forgot I learned it and assume I always knew it". When did you learn that red means "stop"? When does a Chinese child learn that red means "good luck"? When did you learn that a triangle on top of a square means "house"? We learned these things at such an early age that we've forgotten we learned them. We think they're intuitive, but they're not.
That's my point. If a Chinese person and an American person can interpret the same icon in different ways, it's not intuitive, it's learned.
Just to help you with that: I spent nearly a decade working as a Business Analyst on various software development projects. I worked with users, understanding their requirements before development, and then watching them test software during development, and finally training them in how to use the new software after it's finished. I've watched users struggle to understand icons that developers thought were obvious. I've watched them search for functions that they know should be on the page but they can't find because it's identified by a picture they don't recognise. During training, I had to tell them what the icons meant.
Iconography is just another language for people to learn.
That study is only about reading speed. It doesn't even mention images.
As long as you've somehow designed a pan-cultural icon, unlike a red hand or a waving cat.
Is that really a benefit, though?
Not necessarily. The 'post comment' button here is easy to see and tap/click on.
The abstract of that article (I can't access the full study) says "In this study, icons were easily learned, but verbal representations and labeled icons were preferred over unlabeled icons." [emphasis mine]
What's the point of an icon if it needs a text label to describe it? On a desktop website, you can have hover-text. On a mobile website, you can't. The text label has to be displayed on screen next to the icon, taking up more space than either the text or the icon alone. That negates your previous benefit of compactness.
I never disagreed with this. I said this should be considered when choosing if/when to use an icon.
As have we all. Again, I never made the argument that all icons are good. I said some icons are good.
I'll be honest with you, I just quickly googled it and hardly checked the article. This is an established fact in neurobiology and I really don't have the time to source it properly.
This adds nothing to the discussion. We've already established that these exist.
It's much easier to have a sign that shows children crossing the street and a speed limit number on it than to say "please reduce your speed to this number because children often cross in this area". There are situations in which an icon can save a significant amount of space.
Please read the words I am using. Can does not imply that it always will be.
This is a good point to stop and say that the pedantry is doing nothing here. This discussion is about whether it is ever appropriate to replace text with an icon. This is not a discussion about whether you can create an example where it's not appropriate to insert an icon. This whole thread stems from Deimos stating "icons... aren't good design in general" which is not the opinion held by professional interface developers or the average person.
That's not a part of the icon. Here's a crappy example from google.
Icons can be like a visual virus. Once you have an icon, it looks weird next to text, so you have to make that text into an icon, too. If you leave everything as text, you can have the same visual consistency without having to think up inscrutable icons for everything.
Also, in support of the "vote" text specifically, I find it a lot more usable on phones. Tapping on text feels more predictable than tapping on an arrow (whose tap area may not even match its shape exactly).
I think you do, because you immediately follow it up with
The big problem here is designing the right icon. UI designers (that are good) are hard to find and require a certain set of skills. I say this as someone who regularly designs "visualizations" of various sorts (I jokingly refer to myself as a powerpoint engineer, because sadly, I'm almost always called upon to "spruce" up powerpoints for directors and up - this is in addition to my normal job which involves visualizing data and designing interfaces).
I absolutely agree that the vote count on posts needs to be more visible. There's a nice big box on the top right of a post that lets you know it's score, but a comment it's hidden at the bottom. To keep things consistent, a similar style box should exist on comments. Top left, ideally, as that's how most of our users read (top to bottom; left to right).
I'm fairly sure the location of the votes on the comments is intentional. It's both so a user has to read a comment before seeing the score, and because that's where all the other actions you can make on a comment live.
I think that having the votes at the bottom is a good choice for this reason. However, on your own posts, it would be nice to have the score at the bottom instead of at the top to keep it consistent.
I agree that designing an intuitive icon is hard. But you don't have to design it if there is already an established one.
Just look at any editor with formatting support: B/I/U icons look the same in anything from Word 97 to GitHub, and it works because it's consistent. By the time the user sees your use of those icons, he is likely to already know what those mean. That's the power of established UI elements.
Absolutely and we can and should leverage existing "known" icons.
Lots of comments here referencing "up arrow" to vote.
Did you actually thought about it or are just talking about having Reddit UI here as well?
An up arrow without a down arrow as well is going to be a lot confusing, if you spend 2 minutes thinking about it.
https://www.nngroup.com/articles/icon-usability/
Yes, icons need text labels (video).
... and if you have to include a text label as well as the icon, you might as well just dump the icon and use the text label by itself. The icon isn't serving any purpose if its meaning has to be explained alongside it.
I'm not arguing that we should use icons, but the primary benefit of an icon is that it provides an immediate visual cue that tells you where the action you want is. Colors and shapes are powerful tools that allow us to apply a visual filter and efficiently carry out a task. Text alone doesn't perform that function.
Of course, that also requires you to have no more than a few icons in a given area, otherwise you lose that benefit as well (see programs with banners cluttered with 20+ icons that have no clear purpose until you hover your mouse over them).
What if all actionable links on a page were displayed in a different colour to text intended for reading, and highlighted - kind of like the 'Post comment' button here? That's using colours and shapes to "provide an immediate visual cue that tells you where the action you want is".
In a way, the fact that it's a button style makes it a form of icon. I would even go as far as to say that the +/- for collapsing comments is also a form of icon. They may not be images, sure, but they still perform the same function. Hell, we actually do have an icon on this site and it's the logo at the top that takes you to the home page.
Specifically, though, these are just what we call "affordances", which are important in good user interface designs. Sometimes an icon does the job, and sometimes a simple piece of text works in its place. Sometimes one works better than the other. In either case, it just needs to be clear that an action is possible, and Tildes at least seems to do a pretty good job at this even with just text :)
Not really. Most people would say that an icon is picture-based rather than text-based. An icon would have some form of image that indicates posting a comment, rather than the plain text saying "post comment".
Yes, it does. So, in the context of the OP's request for icons here, we can see that they aren't necessary.
I agree. I'm speaking generally regarding the benefit of icons. But for Tildes especially, the feature set is small enough that icons really aren't necessary.
I'd quibble on that: an explained icon gives an additional visual cue. Think of logos, avatars, etc., which don't provide additional information so much as confirming and more rapidly assimilated (once learned) information.
Not saying Tildes should adopt this, but it's a consideration.
In addition to being right about all of this, you forgot one of the best reasons to use icons: icons make localization a whole lot easier.
That's not true. Icons must be accompanied by a text label, so if you're translating you're going to have to translate that label anyway. They don't save any effort at all, and are often worse for localization due to using icons that don't make sense in any languages except English.
A common example is using a small icon that looks like a section of chain for the meaning "link". Lots of text editors (including reddit's new one) do this, they have a little chain icon that you can click to create a link. It makes no sense at all for languages that don't use the same word for "link of a chain" and "link to a website". This is a very common mistake with icons—relying on an association that only makes sense when you have a certain language/cultural background.
Just to explain/add another reason if anyone doesn't understand why:
Accessibility. There are many users that require screen-readers. Every graphical element in a website needs to have a textual equivalent.
And text-only browsers can't display images. In addition, if the icons fail to load for whatever reason (CDN down, location changed but the page is not yet updated, accidental deletion, user has a bad Internet connection, etc) you need to have text labels.
Pop-up text labels on icons have an advantage over simple text: they have no chance of wrecking your templates or creating visual imbalance when the text length is not what you expected it to be. And that's a pretty common issue I'm seeing, especially when you translate to a language that tends to use longer words. UIs translated from Japanese, Korean, Chinese are the worst offenders, but it's pretty common in English -> Russian (my first), for example.
Cultural/language background doesn't matter all that much in my opinion, especially if you are relying on pre-estabilished icons. For example, take the "Save" icon, always using an image of a floppy disc. It's used to be a disk because most of the first PCs had no HDD, and even the ones that had one had no network connectivity, so "Save" operation naturally involved writing to a floppy disk. Now floppy disks aren't used at all, but the "Save" icon is still a disk, simply because "disk" icon is what is familiar to the user.
Most formatting editor icons are pre-estabilished, so it's okay to use them. Even if the user is confused by "link" icon once (and I remember that I was confused by it once!), they quickly realize what it means and then apply that knowledge to any UI that uses it. Which is an awful lot of UIs, so it's totally worth it.
I actually mentioned that.
Should have used an icon for that, instead of hiding it in your text.
Should have used an icon to indicate sarcasm!
Ah my bad! Missed that one sentence.
People seems to be hating a lot on icons, but I disagree. Sure, a lot of sites have dumb, unintiutive icons but that is not what OP is suggesting. Common icons like the voting arrows, edit/deleting symbols are almost universal. Tildes certaining shouldn't go icon crazy, but they would certaining assist in highlighting important elements, and make it easier to understand and use the UI.
I see an "up" arrow next to a comment. What goes "up" when I click on that arrow?
Will I be taken up the screen to the comment above this comment?
Will the screen navigate back to the top, showing me the parent post?
Will the screen scroll up, showing me the comments below this comment?
Will the comment itself be shifted up the page, for higher visibility?
"Up" may mean up, but what is the "up"-ness being applied to?
True, but if you have used forums before it is pretty intuitive. I love icons. I am studying Japanese alongside my degree and occasionly I will go on sites in Japanese, and icons let me use the site quickly, instead of slowly reading half the page looking for what I want.
They shouldn't replace text completely, but they can certainly assist it.
Only if every forum uses an icon in exactly the same way. If one forum uses "+" to indicate "I like this, give it a vote" and another forum uses "+" to indicate "unhide/expand the hidden entries", that's not very intuitive.
If an "up" arrow means "vote for this" on one forum and "scroll up" on another forum, that's not very intuitive.
How? How does having a picture of an arrow next to a Japanese word help you if you don't know what the word means?
And, if we're using a text label to describe what an icon does, why not just use the text label instead?
I'm for very limited icon use. I like how the site uses mostly text, but there are a few places an icon would make sense. An example is voting. I think the vote button should be an icon instead of just being a text link at the very bottom. Voting is one of the most important things you can do on this site, but the vote button is very discrete.