Comment by Samuel_Michon | Hacker News Reader

Comment by Samuel_Michon | Hacker News Reader

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.

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.

"no one would actually do such a thing in this day and age"

You'd think!

http://www.cardiffcontemporary.co.uk/content.asp (Do try the 'Accessibility' link)

Also: http://explore.bfi.org.uk/ (Keep scrolling...)

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.

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

"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

[2] http://bit.ly/10IELWe

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

Nope, that's not obvious either. Also a result of convention.

It does require people to know what a traffic light is, and those colors are a convention, that's true. However, if they know what a traffic light is, and if they've used Windows before, no explanation is necessary. There are plenty of things that switchers have difficulty with (like the fact that 'minimize' and 'zoom' behave differently in OS X than they do in Windows), but this isn't one of them.

Also, even if people didn't understand the traffic light metaphor, a quick mouseover would clear it up: if you hover over the red button, it turns into a (X), if you hover over the yellow button, it turns into a (–), if you hover over the green button, it turns into a (+).

In Windows, 'X' "makes no sense", while in OS X, 'X' is "clear." Okay, got it :).

In isolation, you could say Windows and OS X both use an X on a red background (on mouseover). However, we're not talking about just one button and one hover state, it's part of a set of three (plus hover states).

'Cat, Dog, Rabbit' makes sense, 'Cat, Sonic boom, Carpentry' does not.

Highly amusing. In my experience, even Mac users do not know what the green button does. I've heard people say, "Every time I click it, the size of the window changes somewhat, but I'm not sure in what way.".

Yes, that confuses a lot of people. 'Zoom' toggles between the 'standard state' and the 'user state'.

"Your app determines the initial size and position of a window, which is called the standard state. If the user changes a window’s size or location by at least 7 points, the new size and location is the called the user state. The user can toggle between the standard state and the user state by clicking the zoom button in the title bar. Follow the guidelines in this section so that users can have the zoom experience they expect."

https://developer.apple.com/library/mac/#documentation/UserE...

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.

Aha, but not the European (International) street signs!

Reply on news.ycombinator.com