7 ms·

Using icons in a navbar instead of labels tends to make it harder to use, not easier. Look at the example this article uses. It shows a house without a door, a

Using icons in a navbar instead of labels tends to make it harder to use, not easier. Look at the example this article uses. It shows a house without a door, a calculator, a multi-story building and a shopping cart. The house usually means 'Home', 'Exit', or 'Location'. The shopping cart usually means 'Purchase', 'Cart' or 'Checkout'. Those are fairly clear. But then, why would you use a calculator for 'Contact'? And how is the multi-story building different from the house? More often than not, when I visit a website that uses symbols in its navbar instead of text, I need to mouseover to find out what the heck the buttons are for. When symbols are used in tandem with text links, I do find it often makes navbars easier to use, but to replace the text links altogether, the symbols need to be completely unambiguous – and that's hard to accomplish if your navbar consists of multiple similar links like 'order', 'checkout', 'cart', 'currency', 'shipping', etc.

calinet6 14y ago
Yeah yeah, everyone should know about the perils of "Mystery Meat Navigation" from the 1996 book "Web Pages That Suck." I'm sure that the icons were being used only as demonstration here, and that no one would actually do such a thing in this day and age.
- Samuel_Michon 14y ago
  "no one would actually do such a thing in this day and age" You'd think! http://www.cardiffcontemporary.co.uk/content.asp http://www.cardiffcontemporary.co.uk/content.asp (Do try the 'Accessibility' link) Also: http://explore.bfi.org.uk/ http://explore.bfi.org.uk/ (Keep scrolling...)
- tiredoffps 14y ago
  A lot of UI designers are doing this actually. They got the idea from using Facebook, Twitter logos with no labels. It doesn't work for icons that aren't commonly used.
tiredoffps 14y ago
agreed. I don't know why so many UI Designers do this. It's terrible UX to require a hover over to read a label. It's best to do both, an Icon and a label. Street signs got it right 30+ years ago.
- cema 14y ago
  Aha, but not the European (International) street signs!
bdc 14y ago
To play devil's advocate, let's consider that it might actually be important to push new icons into the public icon lexicon. Right now I'm typing this comment in a browser window that has three icons at the top right: a little line like this _, two layered squares []], and an X. What do those do? Obviously, they minimize, 'restore', and close the window. Why 'obviously'? These symbols are not intrinsically 'obvious'. They have become a standard since roughly the days of Windows 3.1. We expect them to be there, and I prefer the icons to a little status bar that says "Minimize, Restore, Close." Then there are three icons below that, a left-facing arrow (<-), a right-facing arrow (->) and an arrow that loops back on itself in a circle. Again, the meanings are 'obvious', insofar as they are not obvious but are part of the public icon lexicon. It can be said this is "common knowledge" that these represent the 'navigate back', 'navigate forward', and 'reload' functionalities of my browser. How did these icons become standard? Through initial experimentation, then widespread acceptance and propagation. The good ideas caught on, and bad ones were lost to the sands of time. There are some crappy icons out there that didn't make it. Consider a recent example - the share icon[1]. A decade ago this thing didn't exist. Now it's everywhere. It's beginning to become commonplace. These days, many applications have a basic 'share' functionality, and few use an icon that looks different from this. So is it a standard at this point? Maybe. [1] https://www.google.com/search?q=share+icon https://www.google.com/search?q=share+icon
- Samuel_Michon 14y ago
  "a little line like this _, two layered squares []], and an X. What do those do? Obviously, they minimize, 'restore', and close the window. Why 'obviously'? These symbols are not intrinsically 'obvious'." True, they make no sense. A Mac user who has never used Windows will not understand them. On OS X, the buttons have the colors of a traffic light (red=close, yellow=minimize, green=zoom). Windows users trying a Mac for the first time understand this instantly. "They have become a standard since roughly the days of Windows 3.1." No, Windows 3.1 had different buttons [1]. The 'standard' you're referring to was introduced 3 years later, in Windows 95. "We expect them to be there, and I prefer the icons to a little status bar that says "Minimize, Restore, Close."" Sure, you can get used to anything, just like you can learn what math symbols and traffic signs mean. That doesn't make it intuitive, quite the opposite. "Consider a recent example - the share icon" There is no such thing as 'the share icon'. Looking at the Google Image results, there are tons of different icons that are supposed to mean 'share'. If there is one share icon that I see a lot, it's "arrow jumping out of a window frame" [2]. "Let's consider that it might actually be important to push new icons into the public icon lexicon." Sure, but that only works if everyone implements them and even then, those buttons will need to be accompanied by text labels for at least five years. [1] http://www.microsoft.com/typography/ttfinst/ttfinst8.gif http://www.microsoft.com/typography/ttfinst/ttfinst8.gif [2] http://bit.ly/10IELWe http://bit.ly/10IELWe

calinet6 14y ago

Yeah yeah, everyone should know about the perils of "Mystery Meat Navigation" from the 1996 book "Web Pages That Suck." I'm sure that the icons were being used only as demonstration here, and that no one would actually do such a thing in this day and age.

Samuel_Michon 14y ago
"no one would actually do such a thing in this day and age" You'd think! http://www.cardiffcontemporary.co.uk/content.asp http://www.cardiffcontemporary.co.uk/content.asp (Do try the 'Accessibility' link) Also: http://explore.bfi.org.uk/ http://explore.bfi.org.uk/ (Keep scrolling...)
tiredoffps 14y ago
A lot of UI designers are doing this actually. They got the idea from using Facebook, Twitter logos with no labels. It doesn't work for icons that aren't commonly used.

tiredoffps 14y ago

agreed. I don't know why so many UI Designers do this. It's terrible UX to require a hover over to read a label. It's best to do both, an Icon and a label. Street signs got it right 30+ years ago.

cema 14y ago
Aha, but not the European (International) street signs!

bdc 14y ago

To play devil's advocate, let's consider that it might actually be important to push new icons into the public icon lexicon. Right now I'm typing this comment in a browser window that has three icons at the top right: a little line like this _, two layered squares []], and an X. What do those do? Obviously, they minimize, 'restore', and close the window. Why 'obviously'? These symbols are not intrinsically 'obvious'. They have become a standard since roughly the days of Windows 3.1. We expect them to be there, and I prefer the icons to a little status bar that says "Minimize, Restore, Close." Then there are three icons below that, a left-facing arrow (<-), a right-facing arrow (->) and an arrow that loops back on itself in a circle. Again, the meanings are 'obvious', insofar as they are not obvious but are part of the public icon lexicon. It can be said this is "common knowledge" that these represent the 'navigate back', 'navigate forward', and 'reload' functionalities of my browser. How did these icons become standard? Through initial experimentation, then widespread acceptance and propagation. The good ideas caught on, and bad ones were lost to the sands of time. There are some crappy icons out there that didn't make it. Consider a recent example - the share icon[1]. A decade ago this thing didn't exist. Now it's everywhere. It's beginning to become commonplace. These days, many applications have a basic 'share' functionality, and few use an icon that looks different from this. So is it a standard at this point? Maybe. [1] https://www.google.com/search?q=share+icon https://www.google.com/search?q=share+icon

Samuel_Michon 14y ago
"a little line like this _, two layered squares []], and an X. What do those do? Obviously, they minimize, 'restore', and close the window. Why 'obviously'? These symbols are not intrinsically 'obvious'." True, they make no sense. A Mac user who has never used Windows will not understand them. On OS X, the buttons have the colors of a traffic light (red=close, yellow=minimize, green=zoom). Windows users trying a Mac for the first time understand this instantly. "They have become a standard since roughly the days of Windows 3.1." No, Windows 3.1 had different buttons [1]. The 'standard' you're referring to was introduced 3 years later, in Windows 95. "We expect them to be there, and I prefer the icons to a little status bar that says "Minimize, Restore, Close."" Sure, you can get used to anything, just like you can learn what math symbols and traffic signs mean. That doesn't make it intuitive, quite the opposite. "Consider a recent example - the share icon" There is no such thing as 'the share icon'. Looking at the Google Image results, there are tons of different icons that are supposed to mean 'share'. If there is one share icon that I see a lot, it's "arrow jumping out of a window frame" [2]. "Let's consider that it might actually be important to push new icons into the public icon lexicon." Sure, but that only works if everyone implements them and even then, those buttons will need to be accompanied by text labels for at least five years. [1] http://www.microsoft.com/typography/ttfinst/ttfinst8.gif http://www.microsoft.com/typography/ttfinst/ttfinst8.gif [2] http://bit.ly/10IELWe http://bit.ly/10IELWe