5 ms·

Please though, if you ever use these (or any icons, frankly), PLEASE accompany the icons with text so my aging parents -- and heck, me too -- know what they mea

by mholt 6y ago

Please though, if you ever use these (or any icons, frankly), PLEASE accompany the icons with text so my aging parents -- and heck, me too -- know what they mean. All too often I am helping my family members navigate UIs that are "clean" yes (plenty of whitespace! too much) but with icons that hide everything and don't mean anything. "Oh, to send it to your daughter? Click the 3 lines in the top right corner, then click the two lines joined by a circle. Er, the one that looks like a chart. Yeah, that means 'share' apparently. You just have to know that." I kind of miss the days when software didn't change so much and came with instruction manuals.

benrbray 6y ago
The symbols are pretty standardized these days. I am always perplexed on the rare occasion I encounter a physical radio, but I wouldn't ask them to waste space by adding text to the buttons! On the web, hover text is probably good enough.
- alxlaz 6y ago
  For the love of everything that is holy, if in your design the icons for "Undo" and "Jump Backwards" are practically identical -- as in this font, where only the outline of the arrows differs -- , please, please "waste space" by adding text to the buttons. Don't make people discover which one's "undo" and which one's "discard the current screen" by trying the buttons out. That's not a friendly interface. An interface can be friendly without looking like a five year-old's doodle. A wall of text is intimidating and unfriendly, sure, but nobody older than eight is intimidated by having to read six or seven words.
  - benrbray 6y ago
    Fair enough! I didn't look closely at this icon set, and definitely agree that we should strive for high-clarity icons if they're the only signal about what a button does.
- falcolas 6y ago
  To abuse a different saying, "Space wasted for clarity is not wasted space." At least make it configurable.
- thiht 6y ago
  You would think so, but nope. The last "bad luck" I had was with the Google Photos app, where they use a speech bubble icon for... sharing pictures. And there's no tooltip on it. It gave me a hard time finding out how to share a picture.
_Microft 6y ago
I don't see three lines but there are three dots in the top right corner... Yes, text labels please or at least tooltips if on a desktop platform. Here is an example for icons that are saved by their labels: the Windows 10 Mail app has a menu with two magnifying glass icons. One with the handle to the bottom left symbolizes search, one with the handle to the bottom right is for zooming. Now imagine that these would not have their accompanying text labels. ><
spankalee 6y ago
A clever way that the Material Design icon font works is to define ligatures for all the icon names, so the text in the document is default readable by a screen reader. This only helps when the icon is used for something relevant to its default name. I'm not sure how you opt-into a more descriptive name because some alt-text on the containing elements, ie <mwc-icon-button> has a label attribute for this.
- henrikeh 6y ago
  That is clever for sure, but the comment replied to referred to not understanding the symbols, despite being able to see them.
eplanit 6y ago
It seems like when "UI" became "UX" is when that kind of design arrogance started to be more common.
- eyelidlessness 6y ago
  UI never "became" UX, they are different but related with overlapping concerns. Typically a person doing User Interface work should have User eXperience considerations in mind. This is not a thing that changed, it's always been the case (even if there wasn't a name for it or it wasn't in common usage).
- JimDabell 6y ago
  This isn’t new at all; it has been commonplace for decades. People have been complaining about this since at least 1998, when the term "mystery meat navigation" was coined: https://en.wikipedia.org/wiki/Mystery_meat_navigation https://en.wikipedia.org/wiki/Mystery_meat_navigation
karmakaze 6y ago
Those 'phone' icons are the most generic things. Maybe useful to distinguish an iPhone vs iPhone X/11. If I was expecting anything other than a phone there's a 50:50 chance I could believe it was something else.
- com2kid 6y ago
  They are a bit confusing since now days the microphone tends to be on the bottom side of the phone and there is a notch of some type on the top. My first thought was that the phone icon was upside down, camera notch goes on the top!
  - deathanatos 6y ago
    > They are a bit confusing since now days the microphone tends to be on the bottom side of the phone The microphone has been at the bottom side of the phone since they looked like https://www.ooma.com/wp-content/uploads/blog/2019/02/telephone-slang-ooma.jpg https://www.ooma.com/wp-content/uploads/blog/2019/02/telepho... ? My first thought was also that the phone was upside down though, and that the line was where they're usually a thing for speakers.
    - com2kid 6y ago
      I meant the microphone grill itself is now on the bottom side, not even below the screen but on the actual thin edge.
      - yencabulator 6y ago
        Nokia phones from the 90s had that...
puranjay 6y ago
I remember those dark days when everyone was using a different icon for "share" and you never really knew what icon did what. The icons even changed across Android/iOS versions, and there was Microsoft in the corner tooting its own horn on Windows Phone. I'm hardly tech illiterate, but the way apps use icons these days makes me almost go into "those darn kids" mode.
- deathanatos 6y ago
  > I remember those dark days when everyone was using a different icon for "share" and you never really knew what icon did what. Is that not… today? Android is "a node splitting into two nodes", OS X is "leave the box". Neither scream "share" to me, especially when there's no text accompanying the hieroglyph.
  - ComputerGuru 6y ago
    Mobile is such a stupidly confined platform for UX with its imprecise input constrained not only to boxes 1cm/1cm wide but also the lack of hover. They're crude approximations that fail to benefit from true human dexterity and simultaneously rob us of hover and other input signals that can be used to enrich the UX and show hints or provide context. And desktop UI designers scrambled over one another to throw out their rich and carefully designed UX paradigms to adopt a similar least common denominator for their user interfaces.
  - puranjay 6y ago
    It's still like that. But at least we've come to some consistency across versions. iOS 5 and 6 had different icons. Android's icon would change with every new version in the early years. There's no Windows Phone anymore.
crazygringo 6y ago
I mean, that's honestly really hard sometimes. On mobile you very often simply don't have the space for text. And if you say "well just make it a scrollable area for all the options" let me tell you, many people will never realize there are any further options to be scrolled to, especially if your phone's height randomly happens to make it so that the viewport area terminates between lines rather than in the middle of a line. And just in case you say "well then you shouldn't have that many options, simple is better", you're probably wrong. The functionality is probably there because it's necessary for certain users. I agree it's a little annoying to have to learn what the icons mean. But they're also awfully standardized at this point. There are a couple different common versions of menu and share and link, and occasionally the context doesn't clarify among search/find/zoom or back/undo... but otherwise it's pretty good. A gear icon always means settings, a person icon always means user/account, etc. For real -- every computing environment has common conventions you just have to learn, whether Ctrl+Z/X/C/V, or pinch-to-zoom, or what the Apple logo is for in your menu. Icons aren't particularly worse here.
vezycash 6y ago
Even if there are no text, add tooltips. The crazy part is that apps without descriptions and tooltips do not include help files. The worst offenders are electron apps from devs who use Macs exclusively.
- cutemonster 6y ago
  How do tooltips on mobile? Discoverable tooltips?
  - beardyw 6y ago
    The world needs hover for touch screens. Someone sort it out.
  - vezycash 6y ago
    Some sites and app have small question mark icons that can be pressed to reveal more information - tooltips.
tinus_hn 6y ago
If it’s a desktop, proper ui is a menu bar that has all the actions listed. On touch platforms you’re out of luck though because those haven’t had 30 years to settle down yet.
andrei_says_ 6y ago
This, a thousand times. My mom just got an android tablet. The material icons are extra cryptic. Also, in some apps (looking at you, zoom), timed controls disappear way soon, before she can even orient herself and figure out what’s what. It takes her 5 min to switch her camera on. “Camera icon” means nothing because it’s too abstract. I say “square with a triangle next to it”. The text which is sometimes available along icons is often tiny and next to impossible to read. I’m wondering if in 20-30 years I will be struggling with interfaces streamlined for other generations.

by mholt 6y ago

benrbray 6y ago

The symbols are pretty standardized these days. I am always perplexed on the rare occasion I encounter a physical radio, but I wouldn't ask them to waste space by adding text to the buttons! On the web, hover text is probably good enough.

alxlaz 6y ago
For the love of everything that is holy, if in your design the icons for "Undo" and "Jump Backwards" are practically identical -- as in this font, where only the outline of the arrows differs -- , please, please "waste space" by adding text to the buttons. Don't make people discover which one's "undo" and which one's "discard the current screen" by trying the buttons out. That's not a friendly interface. An interface can be friendly without looking like a five year-old's doodle. A wall of text is intimidating and unfriendly, sure, but nobody older than eight is intimidated by having to read six or seven words.
- benrbray 6y ago
  Fair enough! I didn't look closely at this icon set, and definitely agree that we should strive for high-clarity icons if they're the only signal about what a button does.
falcolas 6y ago
To abuse a different saying, "Space wasted for clarity is not wasted space." At least make it configurable.
thiht 6y ago
You would think so, but nope. The last "bad luck" I had was with the Google Photos app, where they use a speech bubble icon for... sharing pictures. And there's no tooltip on it. It gave me a hard time finding out how to share a picture.

_Microft 6y ago

I don't see three lines but there are three dots in the top right corner... Yes, text labels please or at least tooltips if on a desktop platform. Here is an example for icons that are saved by their labels: the Windows 10 Mail app has a menu with two magnifying glass icons. One with the handle to the bottom left symbolizes search, one with the handle to the bottom right is for zooming. Now imagine that these would not have their accompanying text labels. ><

spankalee 6y ago

A clever way that the Material Design icon font works is to define ligatures for all the icon names, so the text in the document is default readable by a screen reader. This only helps when the icon is used for something relevant to its default name. I'm not sure how you opt-into a more descriptive name because some alt-text on the containing elements, ie <mwc-icon-button> has a label attribute for this.

henrikeh 6y ago
That is clever for sure, but the comment replied to referred to not understanding the symbols, despite being able to see them.

eplanit 6y ago

It seems like when "UI" became "UX" is when that kind of design arrogance started to be more common.

eyelidlessness 6y ago
UI never "became" UX, they are different but related with overlapping concerns. Typically a person doing User Interface work should have User eXperience considerations in mind. This is not a thing that changed, it's always been the case (even if there wasn't a name for it or it wasn't in common usage).
JimDabell 6y ago
This isn’t new at all; it has been commonplace for decades. People have been complaining about this since at least 1998, when the term "mystery meat navigation" was coined: https://en.wikipedia.org/wiki/Mystery_meat_navigation https://en.wikipedia.org/wiki/Mystery_meat_navigation

karmakaze 6y ago

Those 'phone' icons are the most generic things. Maybe useful to distinguish an iPhone vs iPhone X/11. If I was expecting anything other than a phone there's a 50:50 chance I could believe it was something else.

com2kid 6y ago
They are a bit confusing since now days the microphone tends to be on the bottom side of the phone and there is a notch of some type on the top. My first thought was that the phone icon was upside down, camera notch goes on the top!
- deathanatos 6y ago
  > They are a bit confusing since now days the microphone tends to be on the bottom side of the phone The microphone has been at the bottom side of the phone since they looked like https://www.ooma.com/wp-content/uploads/blog/2019/02/telephone-slang-ooma.jpg https://www.ooma.com/wp-content/uploads/blog/2019/02/telepho... ? My first thought was also that the phone was upside down though, and that the line was where they're usually a thing for speakers.
  - com2kid 6y ago
    I meant the microphone grill itself is now on the bottom side, not even below the screen but on the actual thin edge.
    - yencabulator 6y ago
      Nokia phones from the 90s had that...

puranjay 6y ago

I remember those dark days when everyone was using a different icon for "share" and you never really knew what icon did what. The icons even changed across Android/iOS versions, and there was Microsoft in the corner tooting its own horn on Windows Phone. I'm hardly tech illiterate, but the way apps use icons these days makes me almost go into "those darn kids" mode.

deathanatos 6y ago
> I remember those dark days when everyone was using a different icon for "share" and you never really knew what icon did what. Is that not… today? Android is "a node splitting into two nodes", OS X is "leave the box". Neither scream "share" to me, especially when there's no text accompanying the hieroglyph.
- ComputerGuru 6y ago
  Mobile is such a stupidly confined platform for UX with its imprecise input constrained not only to boxes 1cm/1cm wide but also the lack of hover. They're crude approximations that fail to benefit from true human dexterity and simultaneously rob us of hover and other input signals that can be used to enrich the UX and show hints or provide context. And desktop UI designers scrambled over one another to throw out their rich and carefully designed UX paradigms to adopt a similar least common denominator for their user interfaces.
- puranjay 6y ago
  It's still like that. But at least we've come to some consistency across versions. iOS 5 and 6 had different icons. Android's icon would change with every new version in the early years. There's no Windows Phone anymore.

crazygringo 6y ago

I mean, that's honestly really hard sometimes. On mobile you very often simply don't have the space for text. And if you say "well just make it a scrollable area for all the options" let me tell you, many people will never realize there are any further options to be scrolled to, especially if your phone's height randomly happens to make it so that the viewport area terminates between lines rather than in the middle of a line. And just in case you say "well then you shouldn't have that many options, simple is better", you're probably wrong. The functionality is probably there because it's necessary for certain users. I agree it's a little annoying to have to learn what the icons mean. But they're also awfully standardized at this point. There are a couple different common versions of menu and share and link, and occasionally the context doesn't clarify among search/find/zoom or back/undo... but otherwise it's pretty good. A gear icon always means settings, a person icon always means user/account, etc. For real -- every computing environment has common conventions you just have to learn, whether Ctrl+Z/X/C/V, or pinch-to-zoom, or what the Apple logo is for in your menu. Icons aren't particularly worse here.

vezycash 6y ago

Even if there are no text, add tooltips. The crazy part is that apps without descriptions and tooltips do not include help files. The worst offenders are electron apps from devs who use Macs exclusively.

cutemonster 6y ago
How do tooltips on mobile? Discoverable tooltips?
- beardyw 6y ago
  The world needs hover for touch screens. Someone sort it out.
- vezycash 6y ago
  Some sites and app have small question mark icons that can be pressed to reveal more information - tooltips.

tinus_hn 6y ago

If it’s a desktop, proper ui is a menu bar that has all the actions listed. On touch platforms you’re out of luck though because those haven’t had 30 years to settle down yet.

andrei_says_ 6y ago

This, a thousand times. My mom just got an android tablet. The material icons are extra cryptic. Also, in some apps (looking at you, zoom), timed controls disappear way soon, before she can even orient herself and figure out what’s what. It takes her 5 min to switch her camera on. “Camera icon” means nothing because it’s too abstract. I say “square with a triangle next to it”. The text which is sometimes available along icons is often tiny and next to impossible to read. I’m wondering if in 20-30 years I will be struggling with interfaces streamlined for other generations.