7 ms·

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 h

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

arjie 9y ago
> 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.
- ORioN63 9y ago
  It's about learning the environment. You already know the meaning of the browser icons as well as you know traffic signs. On the other hand on a unknown setting, like a newly installed app, an icon can represent too many things for a person to guess which is the real semantic of the icon in question.
yoz-y 9y ago
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.
- everyone 9y ago
  Yeah. Well put. I guess poor use of pictograms in mobile and wep-apps is becoming so common these days it made my original comment a bit lopsided. Ive used a lot of programs like Autocad, Photoshop, 3DSmax, Ableton, Reason, Cubase and so on. Icons + tooltips are a great solution in that context. When you are just starting off you use the tooltips, later you know what each symbol means, and after more experience you can perform all your most common tasks with keyboard shortcuts. Autocad is particularly good for that. You can make an entire drawing with just the keyboard, it makes sense because youre making an accurate measured drawing so will want to type in all the dimensions/angles anyway.
- noxToken 9y ago
  Android has toast messages baked in. When you long press something, it can display a small tooltip at the bottom with the message. Toasts disappear automatically, and they are dismissable with another touch event. iOS doesn't have the equivalent by default, but Stack Overflow shows that this behavior is achievable.
- user5994461 9y ago
  That's why the ribbon interface came to existence in office. Much bigger than the traditional menu bar. Enough room to have big meaningful pictures and a text.
  - gnaritas 9y ago
    You mean the one that is nearly universally hated? Those ribbons were a huge mistake and fuck you to users who knew how to use the software; it sucks.
icyblue0108 9y ago
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.
WalterBright 9y ago
> it will need to be translated 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.
- coldtea 9y ago
  >Is it harder to learn what the word "SAVE" means than to learn that a square box with a circle in it means "save"? Yes. The second is more distinct visually from other icons, and you can even discern it with just a glance, whereas various words are all juxtapositions of letters. There's a reason traffic signs the world over use a visual language.
  - WalterBright 9y ago
    Wow. Suppose I see a squiggle on some program. Where do I go to look up its meaning? I can't even type it in. Let's take that | that now means "ON" on electrical equipment. If you guessed that it meant "1" because you're a computer/electrical engineer, wouldn't you already know what "ON" meant? If you aren't, how would you guess what | means? Flip the switch back and forth to see what it does? If you're resorting to that, why bother marking the switch at all?
    - coldtea 9y ago
      >Suppose I see a squiggle on some program. Where do I go to look up its meaning? I can't even type it in. It's either one of the well known vocabulary of icons used across programs (e.g. floppy disk for save, house for "home", x for delete, etc), or a new one you can just hover over and read what it does in the tooltip. After the first time (or couple of times), you don't need to read that again, and you'll recognize it very fast (not like stopping and reading it).
      - WalterBright 9y ago
        Tooltips aren't always used. A further complication is that people tend to copyright icons, so the icons from one app to the next are substantially different. > x for delete I've seen 'x', 'delete', 'del', and the trash can. 'x' is also used to cancel or close. There's little consistency.
Kiro 9y ago
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.
shosko 9y ago
Sometimes text and visuals are both left open to interpretation. We use text and icons from noun project to double down on the point we're making.
ajmurmann 9y ago
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.
- tjl 9y ago
  My UX teacher at university consulted with our province on the design of new highway signs (I think it was for the icons that tell you what's at the next off-ramp/service centre). So, it certainly is possible to consider the use case (user-centred design is what she specializes in) and design the signs accordingly.
kleer001 9y ago
> Text is the clearest thing you can put on a button 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.
fpgaminer 9y ago
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".
- everyone 9y ago
  Interesting comment, I totally agree. Eg. For a casual user, very clear highly descriptive medium is best (eg tooltips), for a mid-level user familiar with the program, icons are ideal. For a super-user, they dont need any visual UI and can do everything from memory using keyboard commands or gestures. I think icons are mis-used more frequently by modern designers than text. Perhaps it is a lot easier to mis-use icons beceause their meanings are not standardised or codified. With English text for example, there are dictionaries and official sources for grammar, spelling and meaning. Also people are actively taught these officially accepted values in school. The suite of icons we're discussing (eg. disk icon for 'save' right facing arrow for 'play') have come from a mish mash of different contributors, only in the past few decades and in the tech industry where things have been in constant flux. The same icon can often mean two completely different things, and they can also often be stylized into an unrecognizable or ambiguous form.
brobrah 9y ago
I like that game :)
eriknstr 9y ago
> 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. [1]: https://www.amazon.com/Designing-Web-Graphics-3-Lynda-Weinman/dp/1562059491 https://www.amazon.com/Designing-Web-Graphics-3-Lynda-Weinma...
aisofteng 9y ago
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.

arjie 9y ago

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

ORioN63 9y ago
It's about learning the environment. You already know the meaning of the browser icons as well as you know traffic signs. On the other hand on a unknown setting, like a newly installed app, an icon can represent too many things for a person to guess which is the real semantic of the icon in question.

yoz-y 9y ago

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.

everyone 9y ago
Yeah. Well put. I guess poor use of pictograms in mobile and wep-apps is becoming so common these days it made my original comment a bit lopsided. Ive used a lot of programs like Autocad, Photoshop, 3DSmax, Ableton, Reason, Cubase and so on. Icons + tooltips are a great solution in that context. When you are just starting off you use the tooltips, later you know what each symbol means, and after more experience you can perform all your most common tasks with keyboard shortcuts. Autocad is particularly good for that. You can make an entire drawing with just the keyboard, it makes sense because youre making an accurate measured drawing so will want to type in all the dimensions/angles anyway.
noxToken 9y ago
Android has toast messages baked in. When you long press something, it can display a small tooltip at the bottom with the message. Toasts disappear automatically, and they are dismissable with another touch event. iOS doesn't have the equivalent by default, but Stack Overflow shows that this behavior is achievable.
user5994461 9y ago
That's why the ribbon interface came to existence in office. Much bigger than the traditional menu bar. Enough room to have big meaningful pictures and a text.
- gnaritas 9y ago
  You mean the one that is nearly universally hated? Those ribbons were a huge mistake and fuck you to users who knew how to use the software; it sucks.

icyblue0108 9y ago

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.

WalterBright 9y ago

> it will need to be translated 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.

coldtea 9y ago
>Is it harder to learn what the word "SAVE" means than to learn that a square box with a circle in it means "save"? Yes. The second is more distinct visually from other icons, and you can even discern it with just a glance, whereas various words are all juxtapositions of letters. There's a reason traffic signs the world over use a visual language.
- WalterBright 9y ago
  Wow. Suppose I see a squiggle on some program. Where do I go to look up its meaning? I can't even type it in. Let's take that | that now means "ON" on electrical equipment. If you guessed that it meant "1" because you're a computer/electrical engineer, wouldn't you already know what "ON" meant? If you aren't, how would you guess what | means? Flip the switch back and forth to see what it does? If you're resorting to that, why bother marking the switch at all?
  - coldtea 9y ago
    >Suppose I see a squiggle on some program. Where do I go to look up its meaning? I can't even type it in. It's either one of the well known vocabulary of icons used across programs (e.g. floppy disk for save, house for "home", x for delete, etc), or a new one you can just hover over and read what it does in the tooltip. After the first time (or couple of times), you don't need to read that again, and you'll recognize it very fast (not like stopping and reading it).
    - WalterBright 9y ago
      Tooltips aren't always used. A further complication is that people tend to copyright icons, so the icons from one app to the next are substantially different. > x for delete I've seen 'x', 'delete', 'del', and the trash can. 'x' is also used to cancel or close. There's little consistency.

Kiro 9y ago

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.

shosko 9y ago

Sometimes text and visuals are both left open to interpretation. We use text and icons from noun project to double down on the point we're making.

ajmurmann 9y ago

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.

tjl 9y ago
My UX teacher at university consulted with our province on the design of new highway signs (I think it was for the icons that tell you what's at the next off-ramp/service centre). So, it certainly is possible to consider the use case (user-centred design is what she specializes in) and design the signs accordingly.

kleer001 9y ago

> Text is the clearest thing you can put on a button 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.

fpgaminer 9y ago

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

everyone 9y ago
Interesting comment, I totally agree. Eg. For a casual user, very clear highly descriptive medium is best (eg tooltips), for a mid-level user familiar with the program, icons are ideal. For a super-user, they dont need any visual UI and can do everything from memory using keyboard commands or gestures. I think icons are mis-used more frequently by modern designers than text. Perhaps it is a lot easier to mis-use icons beceause their meanings are not standardised or codified. With English text for example, there are dictionaries and official sources for grammar, spelling and meaning. Also people are actively taught these officially accepted values in school. The suite of icons we're discussing (eg. disk icon for 'save' right facing arrow for 'play') have come from a mish mash of different contributors, only in the past few decades and in the tech industry where things have been in constant flux. The same icon can often mean two completely different things, and they can also often be stylized into an unrecognizable or ambiguous form.

brobrah 9y ago

I like that game :)

eriknstr 9y ago

> 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. [1]: https://www.amazon.com/Designing-Web-Graphics-3-Lynda-Weinman/dp/1562059491 https://www.amazon.com/Designing-Web-Graphics-3-Lynda-Weinma...

aisofteng 9y ago

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.