16 ms·

The best icon is a text label

603 points by ZeljkoS 11y ago

maniacalrobot 11y ago
I'd agree that many Icons are context sensitive and many require the user to learn their use, but they do, mostly, provide a language agnostic approach to navigation. An icon is the same size in any language, whereas the title could be very different.
- dragonwriter 11y ago
  > I'd agree that many Icons are context sensitive and many require the user to learn their use, but they do, mostly, provide a language agnostic approach to navigation. They are "language agnostic" in that an icon system is its own language.
  - dmckeon 11y ago
    And it sometime appears that almost every icon system is its own special snowflake, unique more for its creator's convenience, with more creativity than reusability. The result is more like having dozens or hundreds of different dialects of Esperanto - each system intends to be rational and useful, but the overall effect on users of multiple icon systems is more like cacophony than expressive consistency. OTOH, the core challenge of using text labels is finding texts that work and are meaningful and reasonably consistent across dozens of written natural languages.
statoshi 11y ago
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.
- jrapdx3 11y ago
  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 totally lost vs. the old-timer who knows how to use it from prior experience. It's not really a generational thing, more associated with environment, exposure to the device in question, education and similar factors. It's all too easy to assume everyone else has the same background and knowledge base as we ourselves, but that's in fact rarely the case. When others aren't similar to us, it's not safe to believe their apparent deficits are due solely to factors like age or obvious personal characteristics.
  - dalke 11y ago
    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 https://www.youtube.com/watch?v=kesMOzzNBiQ ) or rotary phone ( https://www.youtube.com/watch?v=XkuirEweZvM 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.
rconti 11y ago
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.textileaffairs.com/lguide.htm http://www.textileaffairs.com/lguide.htm
- function_seven 11y ago
  Thanks, I came in here looking for that. Here are some more explanations: http://www.davisimperial.com/resources/care_lables.html http://www.davisimperial.com/resources/care_lables.html I assume the "No Christmas Crackers" symbol means "Do Not Wring Out".
- deleted 11y ago
  [deleted]
- roywiggins 11y ago
  I encountered this machine, which had a manual on top, hooray! But it didn't include explanations of any of the symbols: https://imgur.com/Sdwrvqv https://imgur.com/Sdwrvqv I ended up going for "40 degrees shirts and pants" since that matched what I was actually trying to wash, but God help anyone trying to use that machine with any specific requirements.
  - chei0aiV 11y ago
    "aws 51012 labels" brought this as the first result: http://docs.whirlpool.eu/_doc/W10802912EN.pdf http://docs.whirlpool.eu/_doc/W10802912EN.pdf
- peterjmag 11y ago
  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_Signs_and_Signals https://en.wikipedia.org/wiki/Vienna_Convention_on_Road_Sign... [2] https://en.wikipedia.org/wiki/Laundry_symbol#National_and_international_standards https://en.wikipedia.org/wiki/Laundry_symbol#National_and_in...
iffycan 11y ago
Amen to the Apple Mail icon problem he mentions. It gets me every time, too.
- DrJokepu 11y ago
  Ctrl-click anywhere on the toolbar and select either "Icon and Text" or "Text Only". Problem solved!
  - RadioactiveMan 11y ago
    Great to know, but I wonder "how on Earth is anyone supposed to know they can do that?"
    - deleted 11y ago
      [deleted]
- deleted 11y ago
  [deleted]
pool 11y ago
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.
- CaptSpify 11y ago
  I always think "Am I turning into a stereotypical old person? Unable to use a computer?" I always feel like I'm just out of touch.
  - pool 11y ago
    I guess we gain perspective. We have the stereotype of old people being cranky and stupid (like I come from the era of cd-rom cupholder jokes, faxing images of floppies, etc.), but probably there were intelligent old people out there telling us about missing context and we didn't listen or by its nature what they had to say couldn't get press or something.
    - homonculus1 11y ago
      CD-roms and disc media don't change for years, though. Popular apps change their interfaces every few months, it seems, and don't come with a manual. Learning the basics of a computer is more or less once-and-done, whereas keeping up with idiot designers is a constant task and a huge pain in the ass even when you're trying. And I say all this as a college student, which makes me one of the prime demographics for most of these apps.
    - honestcoyote 11y ago
      I think you're on to something huge and important. Some years ago I was working for an educational software company. We sold directly to schools. As expected, we'd get a lot of feedback from teachers using the product. For a while, everyone from the execs on down would ignore this feedback with a laugh. The majority of teachers we dealt with were absolutely clueless about anything involving software. Their reports reflected this ineptness. One day, I had an epiphany that maybe, just maybe, these people were worth listening to. We went over the written feedback, translated their ramblings into something approximating proper bug reports, and it turned out they were doing a wonderful job of pointing out many of the problems (especially UI) hiding in our blind spots. We had dismissed them because of a perceived cluelessness, and probably because of some internalized ageism & sexism (most of these teachers were middle aged+ women and most of my team was not). And yet when we finally listened to them, we put out an update which led to several accolades, a sudden drop-off in complaints, and probably our best selling product.
miles_matthias 11y ago
Definitely agree with this. This is also something we're looking to update, along with the great article about how the hamburger icon fails on mobile: http://deep.design/the-hamburger-menu/ http://deep.design/the-hamburger-menu/
TillE 11y ago
I'd love to see some empirical data, but my intuition is that text + colored icon is the ideal (in terms of how quickly you can find what you want) for both new and experienced users. Every little clue helps navigation, and makes me feel more confident about using an application.
- adevine 11y ago
  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 VCRs to be out that long before everyone knew what they meant. In that case, I think having more info (like the text 'Play') is unnecessary. In the mobile space, I feel like there is pushback because it's also not immediately apparent that 3 horizontal lines means "menu". I wonder how long that will be the case, though.
  - lazerwalker 11y ago
    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.
    - daveguy 11y ago
      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.
    - true_religion 11y ago
      Or you know... it's a symptom of needing a menu.
masklinn 11y ago
On the one hand text labels are convenient when you can read them, on the other hand when you can't (say because you're in japan and japan loves the hell out of its text labels) icons you might be able to decipher are better than text you definitely won't.
brenschluss 11y ago
> 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), or if the user hasn't, your UI has to accommodate that. Once that happens, then icons are way faster. Icons are like visual acronyms. The sequence of letters 'T', 'C', 'P', 'I', 'P' means nothing to someone who doesn't already know what 'Transmission Control Protocol/Internet Protocol' is, but once you do, TCP-IP is way faster to recognize, speak, type, and to share.
- Sir_Cmpwn 11y ago
  I think the author does address this - further down, he gives examples of icons that have little meaning to outsiders, but that regular users will understand.
- com2kid 11y ago
  > 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.
n0us 11y ago
Non-text icons is one of the reasons I don't use IDEs all that often. I'm always wondering "damn, what did that icon do again?" or "I wonder where I can find the button to run this thing" but then I click the wrong thing sometimes and totally screw up my layout then spend a while looking for another button that will get me partially back to the way I was before I can even start looking for the button I wanted again. I guess I would get used to it eventually but it bugs me. (I'm looking at you Eclipse)
mschuster91 11y ago
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!)
- matt-attack 11y ago
  I can't for the life of me figure out why apple is so insistent on not using tooltips in OS-X (example, Safari).
- flakmonkey 11y ago
  This doesn't work for touch-based devices, unfortunately.
  - mschuster91 11y ago
    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.
  - Mindless2112 11y ago
    In Android apps you can long-press action-bar icons to get a tooltip -- assuming the developer provided one.
  - izacus 11y ago
    Don't we have "ForceTouch" or something now that can provide more information about touched thing?
- roywiggins 11y ago
  Tooltips aren't going to be much help on mobile though.
  - dragonwriter 11y ago
    > 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.
dizzystar 11y ago
I remember getting into a debate about this subject with a self-described UI expert. It was part enlightening and part frustrating. He failed to see the point that so many of his ideas were US-centric, and didn't make sense in any context outside of English-speaking languages, and to be honest, they barely made sense in English. The author brings up Gmail, which has an icon for "archive" that makes zero sense no matter how I try to connect the dot, but at least Gmail gives you and out: turn the confusing icons to text. Despite being a programmer -- but not front end work -- I find myself struggling more and more with UI and especially icons. I think so much of it reflects the current trend of zero empathy for the end-user. Fortunately, I know enough about computers to get around many of these issues, but icons are the one area that I still struggle with. Unless you have some site with several million users, teaching end-users is a wasted effort, and it does well to either piggy-back on other ideas or use text. Even Facebook is using text, and it seems a little odd that anyone smaller would feel they have some lessons to teach the end-user about UI. UI, in my opinion, doesn't mean "pretty," it means "usable," which is sort of implied by U meaning "user." If a significant portion of your user-base is computer illiterate, which will often be the default, it does well to UI to the lowest common denominator. Once your user presses the back button because your icons made them feel stupid, you lost a customer, and that is a very high price for "pretty."
- CamperBob2 11y ago
  Here's one argument you can use against icon advocates: "The ancient Egyptians already tried hieroglyphics. They didn't work. What makes you think they will this time?" Still waiting for a good answer to this one. When someone does successfully counter it, I imagine the rebuttal will involve Chinese pictograms or something else that has worked well for a while but isn't likely to survive the next thousand years.
  - GFK_of_xmaspast 11y ago
    (a) they're not pictograms and (b) hieroglyphs worked for thousands of years.
    - 11y ago
archagon 11y ago
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 http://i.imgur.com/EeLzlVH.png So yeah, I think the article is spot on.
makecheck 11y ago
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.)
- joveian 11y ago
  I agree; e.g. word processors, photo editing, etc. can have vast numbers of options and at some frequency of use having a bunch of little icons on the screen is a reasonable choice vs. alternative. Having the traditional "text, icons, or text and icons" option seems like a good deal there defaulting to something with text. I also set up my browser such that half of the tab bar is favicon-only bookmarks; I can very easily get to the few sites that I look at most days or want a reminder to look at. I also use favicons to identify tabs. I remove most of the standard browser icons in the interface and just leave the few I use regularly, so I can remember what they all do. So maybe it is best to think of icons as visual interface optimization that is best performed by the user. Especially for web sites or default application modes I agree with the author that there should be text involved most of the time.
pavanred 11y ago
I used to flash different ROMs on my HTC Desire frequently a while back. I was experimenting with MIUI ROM and accidentally flashed a Chinese ROM. And, it so happened that I had to travel and I wasn't able to flash an English ROM back for a couple of days. I was surprised that I could manage just fine for a couple of days with a Chinese ROM (I don't know Chinese), I remember thinking about the UX because though I couldn't read the menus, I could manage just fine using the icons, for example a trash can in messages menu is definitely delete message.
gburt 11y ago
Icons, but not text, can be language agnostic and probably more resilient to cultural variation. Obviously well-recognized icons like arrows fit this property more so than time and culturally dependent things like floppy disks for save buttons.
- pinaceae 11y ago
  this english-centric viewpoint of the article really bothers me. no mention of i18n, no language variation. just try using labels with a more verbose language like german. welcome to hell. a good icon works across cultures and languages, allows optimized and pixel-perfect UI.
  - AdmiralACK 11y ago
    As someone who speaks both languages fluently, it doesn't bother me at all. The iconography could use some tweaking, but this false sense of being offended is ridiculous.
    - pinaceae 11y ago
      what I am saying is that once your app is using multiple languages, is available in multiple geographies this "just use labels" stuff goes out of the window. Cancel becomes what, "Zurücksetzen"? "Abbrechen"? All longer strings, good luck with your tiny button. Not even mentioning Mandarin or Japanese yet. Oder aber das ist einfach Enterprise-Software Problematik und die Consumer-App Afferl spielen weiter mit ihren Zehen.
    - startling 11y ago
      Who's offended? We're talking about good design.
megablast 11y ago
Icons can transcend different languages though, a huge boon for small devs.
- artursapek 11y ago
  And using text labels means your labels are different dimensions in different languages.
  - mwcampbell 11y ago
    So? Use an automatic layout algorithm that can deal with that. Users will want different font sizes for your labels, too.
ape4 11y ago
No mentioned of the red | yellow | green buttons at the top of a window in MacOS.
jd3 11y ago
I agree. Whenever the option to change icons to text labels is available, I will use it. It's a shame that Apple's finder is ostensibly shit when it comes to text label support. No forward, no change/shadow when `pressed`, etc. It's been maddening trying to use most websites these days that load 20MB of javascript and abstract their interface elements behind incomprehensible picons and boxes. http://i.imgur.com/YyOYqxV.png http://i.imgur.com/YyOYqxV.png
- Cyberdog 11y ago
  I have no idea what that screenshot is of, but it sure as hell ain't the proper Finder. Maybe it's a look-alike skin for Gnome or something?
  - jd3 11y ago
    I have skinned my OS X install with custom fonts[0], traffic lights[1], and icons[2][3]. [0]: https://github.com/dtinth/YosemiteAndElCapitanSystemFontPatcher https://github.com/dtinth/YosemiteAndElCapitanSystemFontPatc... [1]: https://github.com/alexzielenski/ThemeEngine https://github.com/alexzielenski/ThemeEngine [2]: http://freemacsoft.net/liteicon/ http://freemacsoft.net/liteicon/ [3]: https://www.xs4all.nl/~ronaldpr/emaculation/Mac_Icons_and_Textures.sit.hqx https://www.xs4all.nl/~ronaldpr/emaculation/Mac_Icons_and_Te... as you can see, I'm obviously a SCARY elite hacker that should not be messed with ;) http://i.imgur.com/bl5hdAN.png http://i.imgur.com/bl5hdAN.png
    - flycaliguy 11y ago
      Do you experience any performance issues with a skinned OS X? I'm a graphical junkie and would love to start hacking away at my GUI.
      - jd3 11y ago
        Uh, no. Maybe if you use that awful flavours program that hooks into the system graphics API and swizzles all of the changes, but I patch the system files themselves (ThemePark, [S]ArtFileTool, ThemeEngine, whatever AZielenski comes up with next). In fact, the GraphiteAppearance and SystemAppearance.car files are /smaller/ than they were when I started. All you need to do is log out/back in, restart, or simply kill and restart the program for the changes to take effect. You probably need to disable that incredibly stupid rootless `feature` on 10.11 though
alariccole 11y ago
The article took a wrong turn for me. Seemed to say that there was a fallacy in assuming frequent users would understand you iconography, then goes on to praise exactly that, for popular sites.
fogisland 11y ago
Various icons without text often make me feel like dumb...
spurgu 11y ago
The paradox here is that the most effective UI would be one where you'd have minimal "signs" (text or otherwise) telling you what to do. The problem with this is that you'd have to _learn_ how to master it. What we have is a compromise. Something that tries to cater both to casual as well as power users. I'm thinking about for example a swipe based touch interface. A lot of functions now are click here, then click there, when they could be done in a simple gesture. But the problem is that one would have to learn the gesture somehow in the first place. And people don't read manuals, even if there were any nowadays.
deleted 11y ago
[deleted]
laichzeit0 11y ago
Usability testing with eye tracking software. It's the only way to objectively show designers how crap their design ideas are. It's not even expensive to get this done anymore.
userbinator 11y ago
The fundamental problem with icons is that they can mean so many different things, as the example with washing shows. I've heard this summed up as "a picture is worth a thousand words, but you don't want a thousand words when one will do." I don't use Apple Mail, so this is an example of what a completely new user --- albeit one who has used computers for a long time --- thinks when they see those icons along the top: - It's a closed envelope. Mail? Send? Close? - Write? Edit? Compose? Sign? - No idea what this is. - Trash can. Deleted items? Delete? - Left-pointing arrow --- but coming from bottom and looking like it expands outward. Back? Open message in separate window? - Two left-pointing arrows. Rewind? - Forward to next message? And why is this arrow not coming out of the bottom, unlike the two to its left? - Flag. This is probably the clearest of them all.
- Animats 11y ago
  "It's a closed envelope. Mail? Send?" On web sites, it used to be "send mail to site operator". Now it's "spam this page to someone else so we can monetize it."
- marcosdumay 11y ago
  Most of those are pretty standard on phones. - Closed envelope: No idea - Compose - No idea either - Delete - Reply - Reply to all - Forward - Flag. The meaning of this changes, but not the overall idea. The problem is, WTF are those doing in an desktop application?
agumonkey 11y ago
In latin, for genericity.
- alejohausner 11y ago
  Actually, Latin was once the international language, but has been largely supplanted by English. Hence if I use English labels in my app, I'm being cosmopolitan!
intrasight 11y ago
In browser UX, you simply mouse-over an icon to get it's tooltip. But screens are big so there's almost always room for labels. In mobile UX, there's just not much room for labels. I don't see why more apps don't use a tap-and-hold approach for showing a tooltip.
- keeperofdakeys 11y ago
  I doubt a lot of users would know that you can even do this, as handy as it is.
leeoniya 11y ago
also known as Mystery Meat Navigation https://en.m.wikipedia.org/wiki/Mystery_meat_navigation https://en.m.wikipedia.org/wiki/Mystery_meat_navigation
zamalek 11y ago
On Windows Phone 8.1 the settings screen is "text labels" and is completely unusable. They added icons in 10 and this resulted in a huge improvement. Text-only is as-bad as icon-only. Combine the two.
- alejohausner 11y ago
  I always say that a picture, plus a few words, is worth a thousand words.
mirimir 11y ago
And then there are those of us who block so much crap that icon fonts sometimes don't load. Hover text is usually enough, though.
ipsin 11y ago
The best icon is a text label, written in the language of the user? Sure. But the easiest icon is that weird squidgy thing that looks like a ... well, I don't know, I'm expecting users will click on it and eventually figure it out. Squidgy thing takes maybe an hour to create. The internationalization team's SLA is not an hour.
alejohausner 11y ago
I came here looking for tips on how to turn on text labels in various UIs, and have not been disappointed.
altonzheng 11y ago
I think companies need to test their UI's with senile people first. Nothing has given me more insight into user experience than watching my grandma trying to use an iPad.
frik 11y ago
I personally prefer Icon+Text over Text-only. And icon-only is often confusing on websites/apps - it only works if one uses the website/app regularly like the Office <=2003 toolbar. Also the recent trend for black and white icons makes them sometimes harder to understand. Colorful icons worked fine, in older Office <=2010 and elsewhere. Though finding a good icon set with 500+ generic icons that fits one needs means taking compromisses.
bsenftner 11y ago
I was an original Macintosh Beta tester back in 1983, and I raised this exact same issue. I built all my apps with text + icon buttons and got penalized for it. One of several reasons why an early Mac beta developer left Mac development, not writing code for the OS for a decade afterwards. (PC users were lucky to have Windows 1.0 around that time, and I did well writing GUIs for corporations that wanted better.)
WalterBright 11y ago
Discussed at length a couple days ago: https://news.ycombinator.com/item?id=10738891 https://news.ycombinator.com/item?id=10738891
jv22222 11y ago
A little thought experiment about this subject: If the iPhone Used Text Labels Instead of Icons - http://is.gd/QuWioS http://is.gd/QuWioS
mrlyc 11y ago
I have two modes of thinking when I use a computer program: text mode and graphics mode. I am in text mode while I am reading or writing. I find icons confusing as I have to change from text mode to graphics mode to figure out what the icon means. The only time I prefer icons is when I am already in graphics mode while using graphics software.
reitanqild 11y ago
Also on (Windows) desktop you can (could) always hover over to see a description. On mobile you have to try and hope it is not the "irrevocably delete thread" button.
huuu 11y ago
The best icon has a text label. I think icons next to a text label are very useful because they guide the eye so you can quickly see where your buttons are.
js8 11y ago
I think we forgot many of the lessons from the 90s, in naive attempt to emulate Apple. Here's list of standard things that every application in the 90s had, that are frequently missing from the current UIs: - Menu - Typically at the top of the screen or window, you can go there and find everything you can do with the application, at the consistent place; moreover, as you go over menu entries, an helpful explanation what does what will appear at the bottom of the screen. - Toolbar - A place which has most commonly used tools. They are represented by icons, text, or both (and you can actually make a choice in settings). Typically, you can configure the toolbar to your heart's content. Toolbars can also depend on the context. - Context menu - Right clicking on some object will give you menu of things that you can do with that object. Again, explanation of what each of these actions does appears helpfully at the bottom of the screen. - Tooltips - As you mouse over any UI element, it will helpfully explain you what it's purpose. - Buttons - Things that are clickable look visually differently than other things that are not. For example, they have different shading. Buttons may also give feedback that they are clickable when you mouse over them. Also, if you click thing that is clickable, it will give a feedback that it was clicked by changing the shading. I think the big problem here is that UX/UI people want to be artists and so create art, not useful application for end users (which often means follow some standard!). So the end result is even more disastrous when programmers design UI (at least they are rational about it, in some sense), but the cause is the same - it's putting your own ego (behold at my artistic creation!) in front of actual usability.
- herval 11y ago
  While some of these are obvious - removing borders from buttons on iOS made everyone confused, in my personal observation - others are not necessarily "a naive attempt to emulate Apple". Eg.: you can't have (useful|easy to figure out) tooltips or "right click" on touchscreen devices.
  - js8 11y ago
    That's because touchscreen devices suck for the real work! Their popularity is actually mostly due to Apple, too. Still, that's not an excuse, think out of the box, come up with some other way to do the same thing. There are ways. Some applications for example had a "query" button which let you examine the UI, what each element does. I don't see why touch devices couldn't have the same thing as a (hardware) button. Steve Jobs hated buttons, but they have their place. If you eliminate all of them, of course you end up less productive. And yeah, unfortunately, my list is very obvious.
yati 11y ago
One of the best things I've read lately. At my last job, I voiced exactly the same concerns over the clarity of icons, and was always told that the users are going to get used to it after training (it was an enterprise product). It was really frustrating as a (back-end) programmer to load up my work in the browser and to hover over each icon every time to test it. I didn't get used to it, no one else ever was going to.
andrepd 11y ago
You level criticism at Twitter for being unclear to new users, then excuse that same behaviour from Tumblr because meaning is clear to existing users. Isn't it a bit inconsistent?
mheiler 11y ago
Icons are little symbols that are equally incomprehensible in any language.
fauigerzigerk 11y ago
Yes, BUT, you have to look no further than at the top of this page to see how utterly unclear text labels can be.
OJFord 11y ago
> Facebook as a final example: they lately traded their > unclear hamburger menu icon for a frictionless navigation > that combines icons with clear copy. Well done No, not well done. They went from almost conforming to the OS' (on Android) design guidelines, to totally ignoring them. The 'hamburger' button is not "unclear", because it's so commonplace that at the very least it has an intuitive meaning in the context of an Android app - it's where I expect more options, settings, etc. How do I know that is now kept behind the much less clear icon that seems to show a man moving quickly?
- OJFord 11y ago
  This comment has been unexpectedly contentious - points have been going up and down in about equal amounts (currently 0) - but nobody wants to comment on why they disagree?
ada1981 11y ago
Wait, I've been googling gcal for the last 2(?) years when my calendar tab needs populated when I could have just been clicking on the chessboard thing in gmail??! I was wondering where the hell gcal went! >> Google decided to hide other apps behind an unclear icon in the Gmail UI, they apparently got a stream of support requests, like “Where is my Google Calendar?” <<
jgalt212 11y ago
Amen, the ribbon is the worst thing to happen to MS office.

603 points by ZeljkoS 11y ago

I'd agree that many Icons are context sensitive and many require the user to learn their use, but they do, mostly, provide a language agnostic approach to navigation. An icon is the same size in any language, whereas the title could be very different.

dragonwriter 11y ago
> I'd agree that many Icons are context sensitive and many require the user to learn their use, but they do, mostly, provide a language agnostic approach to navigation. They are "language agnostic" in that an icon system is its own language.
- dmckeon 11y ago
  And it sometime appears that almost every icon system is its own special snowflake, unique more for its creator's convenience, with more creativity than reusability. The result is more like having dozens or hundreds of different dialects of Esperanto - each system intends to be rational and useful, but the overall effect on users of multiple icon systems is more like cacophony than expressive consistency. OTOH, the core challenge of using text labels is finding texts that work and are meaningful and reasonably consistent across dozens of written natural languages.

statoshi 11y ago

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.

jrapdx3 11y ago
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 totally lost vs. the old-timer who knows how to use it from prior experience. It's not really a generational thing, more associated with environment, exposure to the device in question, education and similar factors. It's all too easy to assume everyone else has the same background and knowledge base as we ourselves, but that's in fact rarely the case. When others aren't similar to us, it's not safe to believe their apparent deficits are due solely to factors like age or obvious personal characteristics.
- dalke 11y ago
  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 https://www.youtube.com/watch?v=kesMOzzNBiQ ) or rotary phone ( https://www.youtube.com/watch?v=XkuirEweZvM 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.

rconti 11y ago

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.textileaffairs.com/lguide.htm http://www.textileaffairs.com/lguide.htm

function_seven 11y ago
Thanks, I came in here looking for that. Here are some more explanations: http://www.davisimperial.com/resources/care_lables.html http://www.davisimperial.com/resources/care_lables.html I assume the "No Christmas Crackers" symbol means "Do Not Wring Out".
deleted 11y ago
[deleted]
roywiggins 11y ago
I encountered this machine, which had a manual on top, hooray! But it didn't include explanations of any of the symbols: https://imgur.com/Sdwrvqv https://imgur.com/Sdwrvqv I ended up going for "40 degrees shirts and pants" since that matched what I was actually trying to wash, but God help anyone trying to use that machine with any specific requirements.
- chei0aiV 11y ago
  "aws 51012 labels" brought this as the first result: http://docs.whirlpool.eu/_doc/W10802912EN.pdf http://docs.whirlpool.eu/_doc/W10802912EN.pdf
peterjmag 11y ago
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_Signs_and_Signals https://en.wikipedia.org/wiki/Vienna_Convention_on_Road_Sign... [2] https://en.wikipedia.org/wiki/Laundry_symbol#National_and_international_standards https://en.wikipedia.org/wiki/Laundry_symbol#National_and_in...

iffycan 11y ago

Amen to the Apple Mail icon problem he mentions. It gets me every time, too.

DrJokepu 11y ago
Ctrl-click anywhere on the toolbar and select either "Icon and Text" or "Text Only". Problem solved!
- RadioactiveMan 11y ago
  Great to know, but I wonder "how on Earth is anyone supposed to know they can do that?"
  - deleted 11y ago
    [deleted]
deleted 11y ago
[deleted]

pool 11y ago

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.

CaptSpify 11y ago
I always think "Am I turning into a stereotypical old person? Unable to use a computer?" I always feel like I'm just out of touch.
- pool 11y ago
  I guess we gain perspective. We have the stereotype of old people being cranky and stupid (like I come from the era of cd-rom cupholder jokes, faxing images of floppies, etc.), but probably there were intelligent old people out there telling us about missing context and we didn't listen or by its nature what they had to say couldn't get press or something.
  - homonculus1 11y ago
    CD-roms and disc media don't change for years, though. Popular apps change their interfaces every few months, it seems, and don't come with a manual. Learning the basics of a computer is more or less once-and-done, whereas keeping up with idiot designers is a constant task and a huge pain in the ass even when you're trying. And I say all this as a college student, which makes me one of the prime demographics for most of these apps.
  - honestcoyote 11y ago
    I think you're on to something huge and important. Some years ago I was working for an educational software company. We sold directly to schools. As expected, we'd get a lot of feedback from teachers using the product. For a while, everyone from the execs on down would ignore this feedback with a laugh. The majority of teachers we dealt with were absolutely clueless about anything involving software. Their reports reflected this ineptness. One day, I had an epiphany that maybe, just maybe, these people were worth listening to. We went over the written feedback, translated their ramblings into something approximating proper bug reports, and it turned out they were doing a wonderful job of pointing out many of the problems (especially UI) hiding in our blind spots. We had dismissed them because of a perceived cluelessness, and probably because of some internalized ageism & sexism (most of these teachers were middle aged+ women and most of my team was not). And yet when we finally listened to them, we put out an update which led to several accolades, a sudden drop-off in complaints, and probably our best selling product.

miles_matthias 11y ago

Definitely agree with this. This is also something we're looking to update, along with the great article about how the hamburger icon fails on mobile: http://deep.design/the-hamburger-menu/ http://deep.design/the-hamburger-menu/

TillE 11y ago

I'd love to see some empirical data, but my intuition is that text + colored icon is the ideal (in terms of how quickly you can find what you want) for both new and experienced users. Every little clue helps navigation, and makes me feel more confident about using an application.

adevine 11y ago
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 VCRs to be out that long before everyone knew what they meant. In that case, I think having more info (like the text 'Play') is unnecessary. In the mobile space, I feel like there is pushback because it's also not immediately apparent that 3 horizontal lines means "menu". I wonder how long that will be the case, though.
- lazerwalker 11y ago
  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.
  - daveguy 11y ago
    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.
  - true_religion 11y ago
    Or you know... it's a symptom of needing a menu.

masklinn 11y ago

On the one hand text labels are convenient when you can read them, on the other hand when you can't (say because you're in japan and japan loves the hell out of its text labels) icons you might be able to decipher are better than text you definitely won't.

brenschluss 11y ago

> 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), or if the user hasn't, your UI has to accommodate that. Once that happens, then icons are way faster. Icons are like visual acronyms. The sequence of letters 'T', 'C', 'P', 'I', 'P' means nothing to someone who doesn't already know what 'Transmission Control Protocol/Internet Protocol' is, but once you do, TCP-IP is way faster to recognize, speak, type, and to share.

Sir_Cmpwn 11y ago
I think the author does address this - further down, he gives examples of icons that have little meaning to outsiders, but that regular users will understand.
com2kid 11y ago
> 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.

n0us 11y ago

Non-text icons is one of the reasons I don't use IDEs all that often. I'm always wondering "damn, what did that icon do again?" or "I wonder where I can find the button to run this thing" but then I click the wrong thing sometimes and totally screw up my layout then spend a while looking for another button that will get me partially back to the way I was before I can even start looking for the button I wanted again. I guess I would get used to it eventually but it bugs me. (I'm looking at you Eclipse)

mschuster91 11y ago

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!)

matt-attack 11y ago
I can't for the life of me figure out why apple is so insistent on not using tooltips in OS-X (example, Safari).
flakmonkey 11y ago
This doesn't work for touch-based devices, unfortunately.
- mschuster91 11y ago
  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.
- Mindless2112 11y ago
  In Android apps you can long-press action-bar icons to get a tooltip -- assuming the developer provided one.
- izacus 11y ago
  Don't we have "ForceTouch" or something now that can provide more information about touched thing?
roywiggins 11y ago
Tooltips aren't going to be much help on mobile though.
- dragonwriter 11y ago
  > 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.

dizzystar 11y ago

I remember getting into a debate about this subject with a self-described UI expert. It was part enlightening and part frustrating. He failed to see the point that so many of his ideas were US-centric, and didn't make sense in any context outside of English-speaking languages, and to be honest, they barely made sense in English. The author brings up Gmail, which has an icon for "archive" that makes zero sense no matter how I try to connect the dot, but at least Gmail gives you and out: turn the confusing icons to text. Despite being a programmer -- but not front end work -- I find myself struggling more and more with UI and especially icons. I think so much of it reflects the current trend of zero empathy for the end-user. Fortunately, I know enough about computers to get around many of these issues, but icons are the one area that I still struggle with. Unless you have some site with several million users, teaching end-users is a wasted effort, and it does well to either piggy-back on other ideas or use text. Even Facebook is using text, and it seems a little odd that anyone smaller would feel they have some lessons to teach the end-user about UI. UI, in my opinion, doesn't mean "pretty," it means "usable," which is sort of implied by U meaning "user." If a significant portion of your user-base is computer illiterate, which will often be the default, it does well to UI to the lowest common denominator. Once your user presses the back button because your icons made them feel stupid, you lost a customer, and that is a very high price for "pretty."

CamperBob2 11y ago
Here's one argument you can use against icon advocates: "The ancient Egyptians already tried hieroglyphics. They didn't work. What makes you think they will this time?" Still waiting for a good answer to this one. When someone does successfully counter it, I imagine the rebuttal will involve Chinese pictograms or something else that has worked well for a while but isn't likely to survive the next thousand years.
- GFK_of_xmaspast 11y ago
  (a) they're not pictograms and (b) hieroglyphs worked for thousands of years.
  - 11y ago

archagon 11y ago

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 http://i.imgur.com/EeLzlVH.png So yeah, I think the article is spot on.

makecheck 11y ago

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

joveian 11y ago
I agree; e.g. word processors, photo editing, etc. can have vast numbers of options and at some frequency of use having a bunch of little icons on the screen is a reasonable choice vs. alternative. Having the traditional "text, icons, or text and icons" option seems like a good deal there defaulting to something with text. I also set up my browser such that half of the tab bar is favicon-only bookmarks; I can very easily get to the few sites that I look at most days or want a reminder to look at. I also use favicons to identify tabs. I remove most of the standard browser icons in the interface and just leave the few I use regularly, so I can remember what they all do. So maybe it is best to think of icons as visual interface optimization that is best performed by the user. Especially for web sites or default application modes I agree with the author that there should be text involved most of the time.

pavanred 11y ago

I used to flash different ROMs on my HTC Desire frequently a while back. I was experimenting with MIUI ROM and accidentally flashed a Chinese ROM. And, it so happened that I had to travel and I wasn't able to flash an English ROM back for a couple of days. I was surprised that I could manage just fine for a couple of days with a Chinese ROM (I don't know Chinese), I remember thinking about the UX because though I couldn't read the menus, I could manage just fine using the icons, for example a trash can in messages menu is definitely delete message.

gburt 11y ago

Icons, but not text, can be language agnostic and probably more resilient to cultural variation. Obviously well-recognized icons like arrows fit this property more so than time and culturally dependent things like floppy disks for save buttons.

pinaceae 11y ago
this english-centric viewpoint of the article really bothers me. no mention of i18n, no language variation. just try using labels with a more verbose language like german. welcome to hell. a good icon works across cultures and languages, allows optimized and pixel-perfect UI.
- AdmiralACK 11y ago
  As someone who speaks both languages fluently, it doesn't bother me at all. The iconography could use some tweaking, but this false sense of being offended is ridiculous.
  - pinaceae 11y ago
    what I am saying is that once your app is using multiple languages, is available in multiple geographies this "just use labels" stuff goes out of the window. Cancel becomes what, "Zurücksetzen"? "Abbrechen"? All longer strings, good luck with your tiny button. Not even mentioning Mandarin or Japanese yet. Oder aber das ist einfach Enterprise-Software Problematik und die Consumer-App Afferl spielen weiter mit ihren Zehen.
  - startling 11y ago
    Who's offended? We're talking about good design.

megablast 11y ago

Icons can transcend different languages though, a huge boon for small devs.

artursapek 11y ago
And using text labels means your labels are different dimensions in different languages.
- mwcampbell 11y ago
  So? Use an automatic layout algorithm that can deal with that. Users will want different font sizes for your labels, too.

ape4 11y ago

No mentioned of the red | yellow | green buttons at the top of a window in MacOS.

jd3 11y ago

I agree. Whenever the option to change icons to text labels is available, I will use it. It's a shame that Apple's finder is ostensibly shit when it comes to text label support. No forward, no change/shadow when `pressed`, etc. It's been maddening trying to use most websites these days that load 20MB of javascript and abstract their interface elements behind incomprehensible picons and boxes. http://i.imgur.com/YyOYqxV.png http://i.imgur.com/YyOYqxV.png

Cyberdog 11y ago
I have no idea what that screenshot is of, but it sure as hell ain't the proper Finder. Maybe it's a look-alike skin for Gnome or something?
- jd3 11y ago
  I have skinned my OS X install with custom fonts[0], traffic lights[1], and icons[2][3]. [0]: https://github.com/dtinth/YosemiteAndElCapitanSystemFontPatcher https://github.com/dtinth/YosemiteAndElCapitanSystemFontPatc... [1]: https://github.com/alexzielenski/ThemeEngine https://github.com/alexzielenski/ThemeEngine [2]: http://freemacsoft.net/liteicon/ http://freemacsoft.net/liteicon/ [3]: https://www.xs4all.nl/~ronaldpr/emaculation/Mac_Icons_and_Textures.sit.hqx https://www.xs4all.nl/~ronaldpr/emaculation/Mac_Icons_and_Te... as you can see, I'm obviously a SCARY elite hacker that should not be messed with ;) http://i.imgur.com/bl5hdAN.png http://i.imgur.com/bl5hdAN.png
  - flycaliguy 11y ago
    Do you experience any performance issues with a skinned OS X? I'm a graphical junkie and would love to start hacking away at my GUI.
    - jd3 11y ago
      Uh, no. Maybe if you use that awful flavours program that hooks into the system graphics API and swizzles all of the changes, but I patch the system files themselves (ThemePark, [S]ArtFileTool, ThemeEngine, whatever AZielenski comes up with next). In fact, the GraphiteAppearance and SystemAppearance.car files are /smaller/ than they were when I started. All you need to do is log out/back in, restart, or simply kill and restart the program for the changes to take effect. You probably need to disable that incredibly stupid rootless `feature` on 10.11 though

alariccole 11y ago

The article took a wrong turn for me. Seemed to say that there was a fallacy in assuming frequent users would understand you iconography, then goes on to praise exactly that, for popular sites.

fogisland 11y ago

Various icons without text often make me feel like dumb...

spurgu 11y ago

The paradox here is that the most effective UI would be one where you'd have minimal "signs" (text or otherwise) telling you what to do. The problem with this is that you'd have to _learn_ how to master it. What we have is a compromise. Something that tries to cater both to casual as well as power users. I'm thinking about for example a swipe based touch interface. A lot of functions now are click here, then click there, when they could be done in a simple gesture. But the problem is that one would have to learn the gesture somehow in the first place. And people don't read manuals, even if there were any nowadays.

deleted 11y ago

[deleted]

laichzeit0 11y ago

Usability testing with eye tracking software. It's the only way to objectively show designers how crap their design ideas are. It's not even expensive to get this done anymore.

userbinator 11y ago

The fundamental problem with icons is that they can mean so many different things, as the example with washing shows. I've heard this summed up as "a picture is worth a thousand words, but you don't want a thousand words when one will do." I don't use Apple Mail, so this is an example of what a completely new user --- albeit one who has used computers for a long time --- thinks when they see those icons along the top: - It's a closed envelope. Mail? Send? Close? - Write? Edit? Compose? Sign? - No idea what this is. - Trash can. Deleted items? Delete? - Left-pointing arrow --- but coming from bottom and looking like it expands outward. Back? Open message in separate window? - Two left-pointing arrows. Rewind? - Forward to next message? And why is this arrow not coming out of the bottom, unlike the two to its left? - Flag. This is probably the clearest of them all.

Animats 11y ago
"It's a closed envelope. Mail? Send?" On web sites, it used to be "send mail to site operator". Now it's "spam this page to someone else so we can monetize it."
marcosdumay 11y ago
Most of those are pretty standard on phones. - Closed envelope: No idea - Compose - No idea either - Delete - Reply - Reply to all - Forward - Flag. The meaning of this changes, but not the overall idea. The problem is, WTF are those doing in an desktop application?

agumonkey 11y ago

In latin, for genericity.

alejohausner 11y ago
Actually, Latin was once the international language, but has been largely supplanted by English. Hence if I use English labels in my app, I'm being cosmopolitan!

intrasight 11y ago

In browser UX, you simply mouse-over an icon to get it's tooltip. But screens are big so there's almost always room for labels. In mobile UX, there's just not much room for labels. I don't see why more apps don't use a tap-and-hold approach for showing a tooltip.

keeperofdakeys 11y ago
I doubt a lot of users would know that you can even do this, as handy as it is.

leeoniya 11y ago

also known as Mystery Meat Navigation https://en.m.wikipedia.org/wiki/Mystery_meat_navigation https://en.m.wikipedia.org/wiki/Mystery_meat_navigation

zamalek 11y ago

On Windows Phone 8.1 the settings screen is "text labels" and is completely unusable. They added icons in 10 and this resulted in a huge improvement. Text-only is as-bad as icon-only. Combine the two.

alejohausner 11y ago
I always say that a picture, plus a few words, is worth a thousand words.

mirimir 11y ago

And then there are those of us who block so much crap that icon fonts sometimes don't load. Hover text is usually enough, though.

ipsin 11y ago

The best icon is a text label, written in the language of the user? Sure. But the easiest icon is that weird squidgy thing that looks like a ... well, I don't know, I'm expecting users will click on it and eventually figure it out. Squidgy thing takes maybe an hour to create. The internationalization team's SLA is not an hour.

alejohausner 11y ago

I came here looking for tips on how to turn on text labels in various UIs, and have not been disappointed.

altonzheng 11y ago

I think companies need to test their UI's with senile people first. Nothing has given me more insight into user experience than watching my grandma trying to use an iPad.

frik 11y ago

I personally prefer Icon+Text over Text-only. And icon-only is often confusing on websites/apps - it only works if one uses the website/app regularly like the Office <=2003 toolbar. Also the recent trend for black and white icons makes them sometimes harder to understand. Colorful icons worked fine, in older Office <=2010 and elsewhere. Though finding a good icon set with 500+ generic icons that fits one needs means taking compromisses.

bsenftner 11y ago

I was an original Macintosh Beta tester back in 1983, and I raised this exact same issue. I built all my apps with text + icon buttons and got penalized for it. One of several reasons why an early Mac beta developer left Mac development, not writing code for the OS for a decade afterwards. (PC users were lucky to have Windows 1.0 around that time, and I did well writing GUIs for corporations that wanted better.)

WalterBright 11y ago

Discussed at length a couple days ago: https://news.ycombinator.com/item?id=10738891 https://news.ycombinator.com/item?id=10738891

jv22222 11y ago

A little thought experiment about this subject: If the iPhone Used Text Labels Instead of Icons - http://is.gd/QuWioS http://is.gd/QuWioS

mrlyc 11y ago

I have two modes of thinking when I use a computer program: text mode and graphics mode. I am in text mode while I am reading or writing. I find icons confusing as I have to change from text mode to graphics mode to figure out what the icon means. The only time I prefer icons is when I am already in graphics mode while using graphics software.

reitanqild 11y ago

Also on (Windows) desktop you can (could) always hover over to see a description. On mobile you have to try and hope it is not the "irrevocably delete thread" button.

huuu 11y ago

The best icon has a text label. I think icons next to a text label are very useful because they guide the eye so you can quickly see where your buttons are.

js8 11y ago

I think we forgot many of the lessons from the 90s, in naive attempt to emulate Apple. Here's list of standard things that every application in the 90s had, that are frequently missing from the current UIs: - Menu - Typically at the top of the screen or window, you can go there and find everything you can do with the application, at the consistent place; moreover, as you go over menu entries, an helpful explanation what does what will appear at the bottom of the screen. - Toolbar - A place which has most commonly used tools. They are represented by icons, text, or both (and you can actually make a choice in settings). Typically, you can configure the toolbar to your heart's content. Toolbars can also depend on the context. - Context menu - Right clicking on some object will give you menu of things that you can do with that object. Again, explanation of what each of these actions does appears helpfully at the bottom of the screen. - Tooltips - As you mouse over any UI element, it will helpfully explain you what it's purpose. - Buttons - Things that are clickable look visually differently than other things that are not. For example, they have different shading. Buttons may also give feedback that they are clickable when you mouse over them. Also, if you click thing that is clickable, it will give a feedback that it was clicked by changing the shading. I think the big problem here is that UX/UI people want to be artists and so create art, not useful application for end users (which often means follow some standard!). So the end result is even more disastrous when programmers design UI (at least they are rational about it, in some sense), but the cause is the same - it's putting your own ego (behold at my artistic creation!) in front of actual usability.

herval 11y ago
While some of these are obvious - removing borders from buttons on iOS made everyone confused, in my personal observation - others are not necessarily "a naive attempt to emulate Apple". Eg.: you can't have (useful|easy to figure out) tooltips or "right click" on touchscreen devices.
- js8 11y ago
  That's because touchscreen devices suck for the real work! Their popularity is actually mostly due to Apple, too. Still, that's not an excuse, think out of the box, come up with some other way to do the same thing. There are ways. Some applications for example had a "query" button which let you examine the UI, what each element does. I don't see why touch devices couldn't have the same thing as a (hardware) button. Steve Jobs hated buttons, but they have their place. If you eliminate all of them, of course you end up less productive. And yeah, unfortunately, my list is very obvious.

yati 11y ago

One of the best things I've read lately. At my last job, I voiced exactly the same concerns over the clarity of icons, and was always told that the users are going to get used to it after training (it was an enterprise product). It was really frustrating as a (back-end) programmer to load up my work in the browser and to hover over each icon every time to test it. I didn't get used to it, no one else ever was going to.

andrepd 11y ago

You level criticism at Twitter for being unclear to new users, then excuse that same behaviour from Tumblr because meaning is clear to existing users. Isn't it a bit inconsistent?

mheiler 11y ago

Icons are little symbols that are equally incomprehensible in any language.

fauigerzigerk 11y ago

Yes, BUT, you have to look no further than at the top of this page to see how utterly unclear text labels can be.

OJFord 11y ago

> Facebook as a final example: they lately traded their > unclear hamburger menu icon for a frictionless navigation > that combines icons with clear copy. Well done No, not well done. They went from almost conforming to the OS' (on Android) design guidelines, to totally ignoring them. The 'hamburger' button is not "unclear", because it's so commonplace that at the very least it has an intuitive meaning in the context of an Android app - it's where I expect more options, settings, etc. How do I know that is now kept behind the much less clear icon that seems to show a man moving quickly?

OJFord 11y ago
This comment has been unexpectedly contentious - points have been going up and down in about equal amounts (currently 0) - but nobody wants to comment on why they disagree?

ada1981 11y ago

Wait, I've been googling gcal for the last 2(?) years when my calendar tab needs populated when I could have just been clicking on the chessboard thing in gmail??! I was wondering where the hell gcal went! >> Google decided to hide other apps behind an unclear icon in the Gmail UI, they apparently got a stream of support requests, like “Where is my Google Calendar?” <<

jgalt212 11y ago

Amen, the ribbon is the worst thing to happen to MS office.