3 ms·

Why Distinct Icon Outlines Help Users Scan Faster

20 points by waterhole 15y ago

reso 15y ago
Then why are all the icons in the iOS interface the same shape? I wonder if this isn't a oversimplification.
- jblow 15y ago
  Just because Apple did it doesn't mean it's good. Whoever made that UI design decision did not understand the way human silhouette recognition works. iOS icons are terrible. All the time on my iPhone I just find myself staring at the screen not knowing where anything is. This never happens to me on the PC. It is just a bad style decision and I wish they would change it.
- deleted 15y ago
  [deleted]
- hollerith 15y ago
  Well, I seem to use color to pick out icons on OS X. If the icons were black and white, then I think the OP has a valid point.
notatoad 15y ago
yet another article about UI where the author presents a hypothesis as though it were the conclusion of research. does nobody actually do usability testing before writing?
jannes 15y ago
I've seen this exact advice in the Tango icon theme guidelines several years ago: http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Frequent_Mistakes http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Fre... But i think it only applies for low-contrast backgrounds, like in these examples, for high-contrast backgrounds it doesn't necessarily make scanning harder. It depends on whether multiple distinctive colors are used for the icon itself. Icons without distinctive shapes often only use one colors for the icon itself and another color (or even multiple colors) for the background. I think this complicates scanning much more. Also, removing unnecessary complexity from icons is almost always benefiting. So, yes, if possible, you should remove meaningless background shapes.
- palish 15y ago
  "it only applies for low-contrast backgrounds, like in these examples, for high-contrast backgrounds it doesn't necessarily make scanning harder" Not sure what you mean... It seems like these examples are very high contrast, no? There are multiple places where a pixel is (255,255,255) and an adjacent pixel is about (63,63,63), for example.

20 points by waterhole 15y ago

reso 15y ago

Then why are all the icons in the iOS interface the same shape? I wonder if this isn't a oversimplification.

jblow 15y ago
Just because Apple did it doesn't mean it's good. Whoever made that UI design decision did not understand the way human silhouette recognition works. iOS icons are terrible. All the time on my iPhone I just find myself staring at the screen not knowing where anything is. This never happens to me on the PC. It is just a bad style decision and I wish they would change it.
deleted 15y ago
[deleted]
hollerith 15y ago
Well, I seem to use color to pick out icons on OS X. If the icons were black and white, then I think the OP has a valid point.

notatoad 15y ago

yet another article about UI where the author presents a hypothesis as though it were the conclusion of research. does nobody actually do usability testing before writing?

jannes 15y ago

I've seen this exact advice in the Tango icon theme guidelines several years ago: http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Frequent_Mistakes http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines#Fre... But i think it only applies for low-contrast backgrounds, like in these examples, for high-contrast backgrounds it doesn't necessarily make scanning harder. It depends on whether multiple distinctive colors are used for the icon itself. Icons without distinctive shapes often only use one colors for the icon itself and another color (or even multiple colors) for the background. I think this complicates scanning much more. Also, removing unnecessary complexity from icons is almost always benefiting. So, yes, if possible, you should remove meaningless background shapes.

palish 15y ago
"it only applies for low-contrast backgrounds, like in these examples, for high-contrast backgrounds it doesn't necessarily make scanning harder" Not sure what you mean... It seems like these examples are very high contrast, no? There are multiple places where a pixel is (255,255,255) and an adjacent pixel is about (63,63,63), for example.