13 votes

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.

44 comments

  1. [2]
    rodya
    Link
    Maybe it's a product of spending too much time inside a terminal, but I like that almost everything is text.

    Maybe it's a product of spending too much time inside a terminal, but I like that almost everything is text.

    36 votes
    1. Catt
      Link Parent
      Me too. Generally not a fan of icons at all.

      Me too. Generally not a fan of icons at all.

      15 votes
  2. [13]
    Deimos
    Link
    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...

    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.

    28 votes
    1. Algernon_Asimov
      Link Parent
      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...

      Icons are basically just another language that you have to learn,

      Funny. I have previously said exactly the same thing to developers I've worked with who want to create icon-only interfaces.

      so you just have to blindly tap icons and see what happens

      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.

      13 votes
    2. [11]
      Gaywallet
      Link Parent
      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...

      they're misused a lot of the time and aren't good design in general

      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.

      10 votes
      1. [10]
        Deimos
        Link Parent
        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?

        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?

        11 votes
        1. [9]
          Gaywallet
          Link Parent
          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...

          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.

          8 votes
          1. [8]
            Deimos
            Link Parent
            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...

            Green checkmark for good, red x for bad.

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

            15 votes
            1. [7]
              Gaywallet
              Link Parent
              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.

              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.

              4 votes
              1. [6]
                Algernon_Asimov
                (edited )
                Link Parent
                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...

                it's more of a "learned" one than intuitive.

                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?

                14 votes
                1. [5]
                  Gaywallet
                  Link Parent
                  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...

                  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.

                  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.

                  1 vote
                  1. [4]
                    Algernon_Asimov
                    Link Parent
                    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...

                    This pedantry does not add to the discussion.

                    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.

                    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.

                    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?

                    You're doing the exact same thing Deimos did

                    Thank you! That's the nicest thing anyone's said to me this week. :)

                    5 votes
                    1. [3]
                      Gaywallet
                      Link Parent
                      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...

                      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

                      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 no universalities when it comes to pictorial representations.

                      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.

                      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.

                      How is it making users' lives easier to require them to understand two languages, English and iconography, to navigate a website?

                      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:

                      • Humans can understand and process images significantly faster than text.
                      • As previously mentioned, icons reduce the requirement for localization - a save icon works for all languages, rather than needing to translate save into every localization.
                      • Icons can be much more compact than the text they are replacing
                      • Icons can be easier to click in both a traditional and touch-based interface
                      • Most users prefer certain icons
                      • An icon can still have text and utilize the best of both worlds.
                      1. [2]
                        Algernon_Asimov
                        Link Parent
                        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...

                        Apologies, it was not clear that this is what you were getting at. Yes, we need to take cultures into consideration.

                        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.

                        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

                        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.

                        • Humans can understand and process images significantly faster than text.

                        That study is only about reading speed. It doesn't even mention images.

                        • As previously mentioned, icons reduce the requirement for localization - a save icon works for all languages, rather than needing to translate save into every localization.

                        As long as you've somehow designed a pan-cultural icon, unlike a red hand or a waving cat.

                        Icons can be much more compact than the text they are replacing

                        Is that really a benefit, though?

                        Icons can be easier to click in both a traditional and touch-based interface

                        Not necessarily. The 'post comment' button here is easy to see and tap/click on.

                        Most users prefer certain icons

                        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]

                        An icon can still have text and utilize the best of both worlds.

                        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.

                        3 votes
                        1. Gaywallet
                          Link Parent
                          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...

                          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.

                          I never disagreed with this. I said this should be considered when choosing if/when to use an icon.

                          I've watched users struggle to understand icons that developers thought were obvious.

                          As have we all. Again, I never made the argument that all icons are good. I said some icons are good.

                          That study is only about reading speed. It doesn't even mention images.

                          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.

                          As long as you've somehow designed a pan-cultural icon, unlike a red hand or a waving cat.

                          This adds nothing to the discussion. We've already established that these exist.

                          Is that really a benefit, though?

                          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.

                          Not necessarily.

                          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.

                          The text label has to be displayed on screen next to the icon

                          That's not a part of the icon. Here's a crappy example from google.

  3. panic
    Link
    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...

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

    10 votes
  4. [5]
    Gaywallet
    Link
    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...

    The stated reason is that icons may be difficult to understand, and I honestly don't get how is this the case.

    I think you do, because you immediately follow it up with

    Icons, when used right

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

    8 votes
    1. [2]
      Flashynuff
      Link Parent
      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...

      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.

      9 votes
      1. Luna
        Link Parent
        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 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.

        4 votes
    2. [2]
      ACCount0
      Link Parent
      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...

      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.

      4 votes
      1. Gaywallet
        Link Parent
        Absolutely and we can and should leverage existing "known" icons.

        Absolutely and we can and should leverage existing "known" icons.

        1 vote
  5. crius
    Link
    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...

    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.

    8 votes
  6. [8]
    dredmorbius
    Link
    https://www.nngroup.com/articles/icon-usability/ Yes, icons need text labels (video).

    A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

    https://www.nngroup.com/articles/icon-usability/

    Yes, icons need text labels (video).

    4 votes
    1. [7]
      Algernon_Asimov
      Link Parent
      ... 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...

      To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context.

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

      7 votes
      1. [5]
        Emerald_Knight
        Link Parent
        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...

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

        5 votes
        1. [4]
          Algernon_Asimov
          Link Parent
          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...

          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.

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

          2 votes
          1. [3]
            Emerald_Knight
            Link Parent
            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...

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

            1 vote
            1. [2]
              Algernon_Asimov
              Link Parent
              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...

              In a way, the fact that it's a button style makes it a form of icon.

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

              Tildes at least seems to do a pretty good job at this even with just text :)

              Yes, it does. So, in the context of the OP's request for icons here, we can see that they aren't necessary.

              1. Emerald_Knight
                Link Parent
                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 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.

      2. dredmorbius
        Link Parent
        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...

        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.

        1 vote
  7. [9]
    Kraetos
    Link
    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.

    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.

    2 votes
    1. [4]
      Deimos
      (edited )
      Link Parent
      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...

      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.

      16 votes
      1. [2]
        Kiloku
        Link Parent
        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...

        Icons must be accompanied by a text label

        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.

        18 votes
        1. Luna
          Link Parent
          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...

          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.

          5 votes
      2. ACCount0
        (edited )
        Link Parent
        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....

        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.

        2 votes
    2. [4]
      ACCount0
      Link Parent
      I actually mentioned that.

      I actually mentioned that.

      4 votes
      1. [2]
        EViLeleven
        Link Parent
        Should have used an icon for that, instead of hiding it in your text.

        Should have used an icon for that, instead of hiding it in your text.

        10 votes
        1. ACCount0
          Link Parent
          Should have used an icon to indicate sarcasm!

          Should have used an icon to indicate sarcasm!

          3 votes
      2. Kraetos
        Link Parent
        Ah my bad! Missed that one sentence.

        Ah my bad! Missed that one sentence.

        1 vote
  8. [4]
    Das
    Link
    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,...

    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.

    2 votes
    1. [3]
      Algernon_Asimov
      Link Parent
      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...

      Common icons like the voting arrows

      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?

      7 votes
      1. [2]
        Das
        Link Parent
        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...

        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.

        1. Algernon_Asimov
          Link Parent
          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",...

          but if you have used forums before it is pretty intuitive.

          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.

          They shouldn't replace text completely, but they can certainly assist it.

          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?

          4 votes
  9. clone1
    Link
    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...

    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.

    1 vote