Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The best icon is a text label

thomasbyttebier.be

Post reply on HN
Print view View original

31–40 of 213 posts

Re: The best icon is a text label

#31

Post by archagon »

I thought about this a lot while designing my latest iPad app. On the one hand, icons make everything look beautiful and cohesive, and give you an almost intuitive sense of the UI if done right. On the other hand, it's hard to convey the meaning of a complicated tool using an icon alone, and I hate guess-and-checking the meanings of icons in other apps. My solution was to keep unlabelled icons for the obvious UI elements (in my case, undo/redo, play/rewind/record, erase, and metronome) and add small text labels underneath the icons that referred to more complicated or unique actions. For visual coherence, the labeled icons were kept in their own section: http://i.imgur.com/EeLzlVH.png

So yeah, I think the article is spot on.

Re: The best icon is a text label

#33

Post by mschuster91 »

flakmonkey wrote: post #30
mschuster91 wrote: post #22

If you decide to use icons, offer a hover-tooltip. Even if you decide to use a textual button, offer a hover tooltip if there's a keyboard shortcut. (Hello phpStorm, I'm looking at YOU!)

This doesn't work for touch-based devices, unfortunately.

Yeah but I for one won't do coding on a system where I'm typing on the screen. IDEs massively benefit from keyboard shortcuts because you can leave your hands on the keyboard.

Re: The best icon is a text label

#34

Post by dalke »

jrapdx3 wrote: post #14
statoshi wrote: post #3

Indeed; I've noticed often while observing people of older generations that one of their big problems using apps today (especially mobile) is that they don't have the same understanding of iconography as younger generations. It's usually not intuitive for them.

Is it really a matter of intuition or just familiarity with the interface? I suspect it's the latter, likely older people you've encountered aren't "early adopters" of technologies vs. their younger contemporaries and simply not yet learned the meaning of the symbols. OTOH a younger person confronting a piece of "antiquated" equipment, e.g., an old camera where everything had to be set manually might well feel totall…

I agree with you.

There's a series which includes examples where kids are asked to use old technology, like a VCR ( https://www.youtube.com/watch?v=kesMOzzNBiQ ) or rotary phone ( https://www.youtube.com/watch?v=XkuirEweZvM ). They fumble, rather like their grandparents might have fumbled with the unfamiliar interface when it first came out.

The major difference is that children don't worry so much about making mistakes and feeling dumb.

Re: The best icon is a text label

#35

Post by peterjmag »

rconti wrote: post #4

I always laugh when I see that "unclear laundry icons" image, because I recently had the experience of trying to use a combined washer/dryer machine in a foreign country. The icons truly are asinine, you can't even get close to guessing what you want. For fun, I looked it up. Some of the icons are obvious, a few make sense once you know the basics , and still others seem almost sillier once explained. http://www.text…

Well, I'm not sure I'd call them "asinine". Like any icon set, they require a bit of learning—they're not necessarily meant to be immediately recognizable to a first time user. They address a different problem: it's simply impractical to print laundry + care instructions in all 24 official EU languages (or even just a few of the most common ones) on a tag the size of a postage stamp.

European road signs[1] are another example where text labels wouldn't be practical. Many of the symbols are meaningless in and of themselves, but you of course pick up their meaning pretty quickly when you're learning to drive. If you're an American driving over here for the first time, you wouldn't expect to automatically understand the system without first at least glancing at a travel guide or some other reference.

All that said, I do think it sucks that the whole laundry symbol system is copyrighted.[2]

[1] https://en.wikipedia.org/wiki/Vienna_Convention_on_Road_Sign...

[2] https://en.wikipedia.org/wiki/Laundry_symbol#National_and_in...

Re: The best icon is a text label

#36

Post by dragonwriter »

roywiggins wrote: post #32
mschuster91 wrote: post #22

If you decide to use icons, offer a hover-tooltip. Even if you decide to use a textual button, offer a hover tooltip if there's a keyboard shortcut. (Hello phpStorm, I'm looking at YOU!)

Tooltips aren't going to be much help on mobile though.

> Tooltips aren't going to be much help on mobile though.

Not today, but if pressure sensitive touch becomes a widespread thing, distinguishing the "hover"/"click" distinction could be a thing on touch interfaces as well -- bringing back some of the depth of interaction that touch has lost with comparison to desktop.

Re: The best icon is a text label

#37

Post by makecheck »

The best icon is one you can opt-into. Don't eliminate them.

For instance I liked OS X's original toolbars, in that you could easily shift between modes that displayed text or did not display text. (Then they entered their phase where toolbars couldn't be customized and all icons were the same shape, which is far less sensible.)

Re: The best icon is a text label

#38

Post by daveguy »

lazerwalker wrote: post #21
adevine wrote: post #19

Earlier quoted context omitted.

When I see a pushback against icon-only buttons, I think a lot of it has to do with the fact that the mobile space is changing so rapidly that things don't have a chance to "settle down" like they did for previous technologies. I mean, I don't think it's inherently obvious that a triangle pointing to the right means play, a square means stop, and a circle means record. However, it didn't take cassette players and VCR…

I feel like the hamburger button is a special example, since the fact that your mobile app has a "here's where we shoved the features we couldn't fit in anywhere else" menu is usually a smell that you have deeper design issues at the information architecture level.

Hamburger button? Is that what people are calling the three lines button? I think that's one that will catch on. I didn't get it at first, but I think now it's here to stay. It also isn't necessarily a sign of bad design. I think it's mostly used as the "main menu" on a small mobile screen interface where you typically use the majority of the screen for information display. Not a bad design at all.

Re: The best icon is a text label

#39

Post by com2kid »

brenschluss wrote: post #17

> Don’t use an icon if its meaning isn’t a 100% clear to everyone. When in doubt, skip the icon. Reside to simple copy. A text label is always clearer. The article is misguided, in that it assumes that the meaning of an icon only exists in the lines/color/visual form of the icon. Icons are visual language . You have to teach the user what the icon means. Either the user has seen the icon before (such as in airports),…

> You have to teach the user what the icon means.

Recognition speed presumably goes up with familiarity. I have Age - 6 years of experience reading, I have far less than that with whatever icon you come up with.

Let's take starting an app as an example.

On my Smartphone I use the email client "Nine". I probably open up the app manually (versus tapping on a notification) about 5 or 6 times a day.

It took me ~3-5 months of use to be able to look for the icon first versus looking for the text. Note that this is WITH keeping the icon in the exact same place on my home screen the entire time.

So that is what, 450 impressions for, well, no real speed improvement.

In a sea of words, a good icon can help an app stand out. But I'd argue that a good textual name helps more.

If you have multiple products, having your company name start off the title of all your products just means I cannot find your product in my alphabetized app list.

Changing app names is another huge problem. Google's constant re-branding of how I send SMSs on my phone has been very unconductive to me remembering anything. Half the messaging apps out there have the same type of icon (a speech bubble), the textual names make them unique.

That said Facebook cheats by calling theirs Messenger. :)

Also, enough blue icons. Stop it. Everything is one of 3 shades of blue, gross color differentiation kicks in WAY before shape matching does. The three easiest apps to find on phone are the three apps that still have "out of fashion" black icons.

> Icons are like visual acronyms.

I disagree that the analogy is 100%. Our brains have this giant section dedicated to nothing but recognizing characters in our native written language. Sure we have a lot of brain power going to shape recognition in general, but character recognition is so incredibly trained in our heads that it should be our go to.

Re: The best icon is a text label

#40

Post by com2kid »

pool wrote: post #8

For someone who follows HN somewhat, I really don't keep up on any current cool-and-hyped stuff. I'll just see websites become more and more useless with three-stripe icons for menus and then just random mysterious icons, and I'll tell myself that that no doubt these no-context meaningless icons must be derived from whatever iphones are doing this week.

> I'll just see websites become more and more useless with three-stripe icons for menus

Hilariously enough, this is now known to be a UX nightmare. HN has had multiple articles on why it is a UX nightmare, even when users know to click the hamburger menu (and everyone does by now), they don't engage or explore as much as they would with a layout that doesn't hide half (or more) of the user's choices.

Post reply on HN