16 ms·

Gmail Icons are Hard

324 points by bloomca 8y ago

angrydev 8y ago
All of these icons have tooltips that appear within 100ms of hovering over them. Surely there is a better part of the new gmail UI to pick apart?
- nightski 8y ago
  Isn't that kind of a poor choice then if the intent is to have the user hover over the icon? Also what about touch? If there was a functional advantage of the icons that would be great. But I'm guessing it was chosen just to "look prettier".
  - JoshuaEN 8y ago
    Icons take up less space on the screen, which is useful if you are using a smaller browser window (or a phone screen).
    - thedaemon 8y ago
      But the trend, and the default GMail settings for UI spacing is far too spaced out. I'm finding it difficult to use some of the newer UI's with such wide spacing, without using the app fullscreen. Microsoft CRM, I'm looking at you. It's 100% not usable unless it's full screen.
- WorldMaker 8y ago
  What about keyboard or touch users that don't exactly have a "hover" equivalent?
  - ucaetano 8y ago
    You can switch to text labels: https://support.google.com/mail/answer/2473038?hl=en&authuser=0 https://support.google.com/mail/answer/2473038?hl=en&authuse...
    - realworldview 8y ago
      Fortunately
- airstrike 8y ago
  Except that forces you to hover over each one of them until you find what you're looking for, rather than simply writing out e.g. "Mark as SPAM" or "Mark as read"
  - robbrown451 8y ago
    Until you learn what they mean, and then you get the advantage of more fits on the screen, and arguably, quicker mental processing (I'd say it takes less work to find an icon than to pick out the right text label).
scotchio 8y ago
Maybe I'm crazy, but I think those icons do a pretty good job...
- ghayes 8y ago
  I think the idea is that you know what they do from having learned and interacted with the icons. If you're a fresh user, it could be a pretty unintuitive learning curve.
  - nailer 8y ago
    I've been using gmail since you needed to have an invite. I just learnt that: > Two envelopes in a stack means 'mark as read' from this article. I had no idea what it did before.
- realworldview 8y ago
  You’re crazy.
zawerf 8y ago
IIRC it used to be all text. I remember feeling the same thing when they rolled out the icon only design and was frustrated that I had to relearn something I had already been using daily (memory is fuzzy, it was many years ago). Now I am actually okay with it. For a product that is daily use, you get used to the icons fairly quick and am glad it doesn't take that much screen real estate. What I hated is that it inspired a lot of other products that are NOT meant for daily interaction to do the same thing. For example I probably only interact with the dropbox desktop client once every blue moon and they have icons that make no sense (First icon is two squares for opening Paper which I don't use. Next icon is a globe which is for opening the web ui. All I want to do is revert a file!).
- koube 8y ago
  Bitbucket has recently changed to an icon theme, with genius icons such as: 1. <> 2. </> 3. a one node graph 4. a three node graph 5. a two node digraph 6. the refresh symbol 7. an arrow pointing to a cloud 8. a page I have no idea what any of these mean and I hate it. Plus, it takes 8 seconds to load anything so if you click on the wrong one it's extra annoying. If anyone's curious, the answers are: 1. <>: source 2. </>: source, as far as I can tell it's the same button again 3. one node graph: commits 4. three node graph: branches 5. two node digraph: pull requests 6. refresh symbol: pipelines 7. array pointing to cloud: deployments 8. page: downloads
  - lainga 8y ago
    Are there, at least, tooltips?
    - koube 8y ago
      Tooltips do come up but you have to put your mouse on the icon itself, if your mouse is on the enclosing button and the button is highlighted, the tooltip won't come up until you move the mouse to the icon itself.
    - Navarr 8y ago
      Yes, and by default the menu is expanded so that you see the words. Here it is shrunk (not default): https://i.imgur.com/liRIiHG.png https://i.imgur.com/liRIiHG.png (left) https://i.imgur.com/zTOooiS.png https://i.imgur.com/zTOooiS.png (right) Expanded: https://i.imgur.com/zj9P8d4.png https://i.imgur.com/zj9P8d4.png (left) https://i.imgur.com/Fv2irRH.png https://i.imgur.com/Fv2irRH.png (right)
ungzd 8y ago
The problem is not that icons are not self-describing (diskette save icon does not describe "save" operation either), but that these icons look like indistinguishable grey circles until you start to focus attention to them. The same applies to iOS and Android application icons, despite they have vibrant colors. I always can't find what I need, they look the same. I end up using search box if I want to run app that is not on home screen.
falcon620 8y ago
Their product managers and designers spent too much of their "clutter budget" on stupid stuff so they felt they had to reduce the clutter by making those things that should have been icon+text buttons into icon-only buttons.
albertgoeswoof 8y ago
I like to imagine that the people that get annoyed with poor iconography are the same people that use Vim and other esoteric software. Instead of commenting on google's design, we could be commenting on software that isn't proprietary, closed source and anti-consumer, with access provided for free solely to enable data mining and maximise ad revenue.
- oneeyedpigeon 8y ago
  > I like to imagine that the people that get annoyed with poor iconography are the same people that use Vim and other esoteric software. Graphic designers and information architects aren't using vim. In fact, vim suffers from the same lack of transparency/discoverability as these icons do.
- cpburns2009 8y ago
  I hate poor iconography. A while ago it took me a good 15 minutes to figure out how to mark an email as "unread" in the Gmail Android client. Apparently an envelope icon means "mark as unread". The newish (within the past couple years) navigation icons on Android are great: a left pointing triangle, a circle, and a square. At least the triangle points the same direction as old back button. Disclaimer: I do use Vim when SSHed into a server because that's the CLI editor I happened to learn and it supports regex search.
  - roywiggins 8y ago
    An envelope icon can also mean "mark as read" in GMail. It's like a treasure hunt, but for your email. Fun[1]! [1]not fun
  - MereInterest 8y ago
    Also, the "Mark as unread" button is only present if you are in your inbox with the email selected. There is nothing analogous to the desktop's "Mark as unread" which is at the top of an open email, and returns you to the inbox when used. Also, there is no indication that the emails are selectable at all. The icon to the left of each email is a portrait of the sender, which in no way corresponds to the action of selecting an email.
neivin 8y ago
Design for the sake of design... Companies spend too much on designers.
- whoisjuan 8y ago
  They spend too little. The problems that real design solves have nothing to do with this. Anyone can just pick icons from a library and make them buttons. How easy is to blame a designer for these choices. People who say "design for the sake of design" are exactly the people who need design. For starters, everything is designed. Show me one human-produced thing that wasn't actually consciously designed by someone. Is that design for the sake of design? There's a difference between good design and bad design. It's important to learn how to tell the difference, but more important to learn how critical to success is good design (regardless if it comes from a trained designer or not.)
  - ksk 8y ago
    Sure, who could argue that bad is better than good? :) The question is - But, Why. I'd bet half a paycheck that the only people who really really care about the new "cool" designs are (1) Bosses looking to take credit (2) Bored tech writers looking for content (3) UX Peers looking for validation (4) Tech people looking for new toys. Normal folks just want all that fancy UI stuff to go away. They would be just as productive on a UI based on Mac OS 8.
ibdf 8y ago
There should be a Hacker News "Challenge HN:" post, where you complain (point out) about some broken system and you challenge other people/developers/designers to do better. Challenge HN: Improve Gmail Icons
- nafizh 8y ago
  For open source projects, it makes sense. Otherwise, why should HN spend its time solving a for profit company's product flaws?
  - acct1771 8y ago
    Ask custom CSS authors.
  - wycy 8y ago
    Mainly for the joy of (possibly, but perhaps unlikely) having your artwork/improvement(s) rolled into a very public product.
  - sprt 8y ago
    Because we're hackers.
  - TeMPOraL 8y ago
    For the remote chance of unbreaking a widely-used commercial product. What's with the idea that one has to always capture the profits for themselves?
- notatoad 8y ago
  done: https://imgur.com/n13GmJB https://imgur.com/n13GmJB
  - billysielu 8y ago
    huge improvement
  - golfer 8y ago
    Now translate those into the 72 languages that Gmail supports. [0] https://en.wikipedia.org/wiki/Gmail#Language_support https://en.wikipedia.org/wiki/Gmail#Language_support
Isamu 8y ago
Under Settings -> General select Button Labels: Text Life is too short.
- realworldview 8y ago
  Unambiguous, non-disruptive and not distracting. Life is to short to live by the whim of profit-led iconography which aims to keep people guessing and attentive whilst distracting them from the real utility and product necessity.
roywiggins 8y ago
I had no idea the icons could be changed to text in Settings. I know what they all do, but there's something about them that bugs me a lot. There's always a slight hesitation where I think about what they mean.
overcast 8y ago
I have a severe distaste for icons. Look at HN, there's zero thinking involved outside of reading a language. You know exactly what something does, and it can easily be multilingual as a result. I'm hoping the next big trend in design focuses on minimalist interfaces. Nothing but text, and some photos if needed. So tired of all the fluff, particularly on small phone screens.
- roywiggins 8y ago
  Web Brutalism? https://medium.com/envato/brutalism-the-ugly-web-design-trend-taking-over-the-internet-2dbc8e822e37 https://medium.com/envato/brutalism-the-ugly-web-design-tren...
- __jal 8y ago
  I don't hate icons, per se. I just find them hard to use. For whatever reason, I have to think about icons a lot more than words, even after I'm very familiar with them. Watching others, most folks don't seem to have this problem - words and icons seem about equally fluid for them. And I'm fine if they don't move - I remember them by location. But I'm very slow to 'read' icons. The most common situation that highlights this is tab-application-switching. Those are never in the same order twice, and I have to stare at them until I can pick out the icon of the app I'm thinking of. I've looked for hacks that would replace the icons with words, but haven't seen one, at least on MacOS.
  - alexbecker 8y ago
    I absolutely have the same problem. I think other people do to, but now I'm not sure if I've observed this or I'm just assuming other people have the same problems as me.
- gowld 8y ago
  Text is very difficult for UI layouts, especially on small screens, and especially for lower-vision users, since (a) words take up more space than icons, (b) different languages have different length words.
manigandham 8y ago
First thing I do is switch to text labels. Icons are proven to be harder to recognize. Images are great for conveying complex information but icons are much smaller and harder to recognize, especially in gmails soft bubbly grayscale icons that refuse to use any colors or even borders.
jokoon 8y ago
Oh yeah! I remember I was looking for a "mark as unread" in the android gmail app, never finding it for a long time until I tried that icon, wondering what it was. It was the mail icon button.
- LoSboccacc 8y ago
  can we also spend a second complaining how the mark as read is not contextual in the web version of gmail? I hate that.
jmkim 8y ago
REALLY HARD
alexggordon 8y ago
I think this article misses a couple important points when it comes to UI AND UX. I'd argue that an important element of UI is discoverability. Yes, a "A box with downward arrow" is not in and of itself enlightening about what it does. By looking at that icon I am not sure what it does. However, I can discover what it does in very few actions. Clicking on it results in selecting all the emails on the page, and the box changes to checked. Clicking the down icon results in a selection menu with "All", "None", "Read", "Unread" and "Starred"[0]. Clicking on one of those items selects only those items. Given that interaction, can anyone here say they still don't understand what it does? My one criticism is that selecting something like "stared" doesn't filter down to only those items too, so you can now select things that aren't on the page of items you're currently seeing. Apple's original iOS did not convey a sense of "immediate understanding" that this article demands, but rather focused on discoverability. That is the same mentality that went into make this UI/UX. My point is you can't judge one without the other. Removing all animations from the original iOS would have come close to ruining it. Showing a picture of a Google UI, and criticizing it without allowing it the benefit of discoverability is tantamount to the same lack of context as removing those animations. Also, following this posts advice: > Luckily, this menu can be switched to text labels in Settings. And changing to text button labels[1] doesn't even change that first icon[2], so I'm not sure that post is really for any other purpose than creating material for some echo chamber. [0] https://i.imgur.com/D8CogSS.png https://i.imgur.com/D8CogSS.png [1] https://i.imgur.com/jOaTKDs.png https://i.imgur.com/jOaTKDs.png [2] https://i.imgur.com/tkhSoom.png https://i.imgur.com/tkhSoom.png
- Ajedi32 8y ago
  Another thing is that once you _do_ discover what an icon means, it only takes a few repetitions before you start to remember. I don't even use Gmail anymore (I've completely switched over to Inbox) but when I opened that article the first thing I did was "read" all the icons on the page. The only ones I had trouble with were "Mark as Read" and "Move to Folder", but even those only took a couple seconds of thought for me to comprehend.
  - hawski 8y ago
    I would probably mostly remember the relative position of the button. So next time when they would add something in-between I would click the third from the left and would be surprised that something else happened. I have it the same even with labels, truth to be told. I hate that nowadays Google seems to shuffle All, Images, Videos, News around, because I learned that Images are always the second one and then it opens Videos on full moon and News on Wednesday. Now I have to always parse before I tap/click.
AdamTReineke 8y ago
Yesterday, I learned that my sixty-year old mother uses a screen reader on her tablet. Her vision is fine but she never knows what icons mean so the screen reader is able to read out the describing text and decipher them for her.
- notimetorelax 8y ago
  This is a perfect example of why accessibility features are not only for visually impaired! Accessibility done right can bring value for a wider audience.
  - dingo_bat 8y ago
    Only if your icons are bad. Otherwise this problem wouldn't exist.
    - gowld 8y ago
      Do you know what the universally comprehensible icons are for every software function? If so, you could make great money (or other forms of wealth) by licensing them to software developers.
    - sevensor 8y ago
      I think the problem is that icons are categorically bad for people who are unable to interpret their visual language. I switched my preference to text as soon as the icons were rolled out, and forgot about them. I resented that the designers were imposing a new metaphorical scheme and expecting us all to adapt to it, to suit their own needs. It's the pinnacle of arrogance.
      - bigiain 8y ago
        Google imposes a version of "a new metaphorical scheme" on every website owner and expects them all to adapt to it - it's hardly surprising they also expect human brains to adapt to suit them... I mean it's not like anyone ever met an arrogant Googler, right?
emgee_1 8y ago
So you read HN. Hacker news. You set up iSync (mbsync) and all Your Gmail via IMAP. Since you are a hacker, you use emacs (or if you are less fortunate :-) vim) Now configure mu4e, notmuch or gnus. All Your actions are now a simple keystroke away: C compose R reply F forward And never bother with Gmail interface :-)
- themodelplumber 8y ago
  I like it. Any downsides to know about? Thanks.
  - emgee_1 8y ago
    No downsides. All your mail is downloaded locally and off line available. Fast Search with mu. Really if there is one thing you should do this year is take some time and discover emacs. Just for orgmode alone. You will Thank me later :-) In a nutshell: Emacs is a machine. A lisp machine. It will work for you instead that you work for your computer. It will do anything you want ( and more) Now is the time to discover this shining gem in all of softwares.
    - themodelplumber 8y ago
      Ok, you got me. I'm going to give it a shot. :-)
- Pxtl 8y ago
  There's delicious irony in how many jargon-y terms are in here that would be, to non-geeks, just as opaque as those icons. - HN - mbsync - IMAP - emacs/vim - mu4e/notmuch/gnus
  - emgee_1 8y ago
    Yes you are right. However, this is not the New York times nor the economist nor the guardian. This IS hacker news. :-)
- phlo 8y ago
alejohausner 8y ago
If you want to say something and be understood, use words in a commonly-used language: English. Using icons is, effectively inventing new words. Nobody has seen those words before: they are the designer's private language.
- gowld 8y ago
  That's a provincial point of view. Despite Anglo hegemony, billions of people prefer non-English. Anyway, English invents new words or new meanings all the time. What does a "cloud" have to do with webservers?
  - cabaalis 8y ago
    > What does a "cloud" have to do with webservers? I've always assumed it had to do with the common use of a cloud to refer to the internet or other network on diagrams. With a cloud being used because it conveyed a sense of "the unknown" or "uncontrollable." Which is an interesting meaning progression to the current version of "cloud."
    - gowld 8y ago
      > common use of a cloud to refer to the internet or other network on diagrams. You know that because you are a network software developer. In summary, though, "Cloud icon represents the cloud, and we use the word "cloud" because ... we use a cloud icon to represent it."
  - alejohausner 8y ago
    Sorry about that. I didn't mean that English is best. I meant that existing languages can say things better than icons invented by programmers, who are people with skills that have been honed on communicating with computers, not communicating with other humans.
jgtrosh 8y ago
I agree with the spirit. More precisely I especially agree that static icons cannot easily convey actions; instead they look like things which are supposed to be associated with a purpose, symbols which are usually clumsy, or combined shapes which rarely convey the intent immediately. On the other hand I find the article slightly dishonest on a couple of points. Not because I believe the icons are particularly obvious, but because the descriptions seem to miss the point. Here goes: > - Ok, clock now. This is universally undestood sign that could mean literally _anything_. What time is it? The clock is associated with time. In the context of received mail, it seems quite natural that a time-related action would be setting a reminder. > - Right-pointing rectangle? This looks most like road sign pointing to some place, but actually means TAG. Huh? To me this obviously looks like sticky notes you can add in books or on files to categorize content, a.k.a. quite literally tags.
- tbabb 8y ago
  Very much disagree that those things are clear. - Obviously the clock is time related, but there is no clue how. After reading this, I still don't know what it does. Is it a "remind me later" icon? - The right pointing rectangle is too abstract. I agree with the article that it looks like a road sign, or like gmail's own "importance" markers. IMO, if they rotated it 45 degrees and put a hole in the point, it would be much more clear.
- gnode 8y ago
  > it seems quite natural that a time-related action would be setting a reminder. I think this highlights that everyone potentially has a different understanding. That wasn't obvious to me, or the article's author. Personally I would expect a reminder button to have a bell icon.
  - kbenson 8y ago
    > Personally I would expect a reminder button to have a bell icon. Likely because you've associated a bell with "alarm", and you're associated "alarm" with "reminder", but that's likely a learned association because of these systems because alarm really means danger. An "alarm clock" is probably the origination of that association, but I think the terminology could have just as easily gone with "notification clock" or "wake-up clock" originally, and we woulnd't be using "alarm" as we do much of the time now. I think what this actually points to is that while some icons have become normalized over time, (settings is usually indicated by bars, or the "hamburger" icon, power has a well accepted icon now), there exist people that still don't know them well because they either haven't used modern devices enough, or used older devices without a standard enough that it takes longer to recognize the convergence. I imagine any proposed icon standard probably has about a decade before it's widely understood by most people, because of the lag in usage in popular applications, which lags exposure to people, and the large number of people that use technology where it would be present sparingly enough that it takes a long time to become obvious and accepted. In the end though, I think that's what's needed, as skeuomorphic and conceptual based icons have problems as noted here.
_sdegutis 8y ago
I have a hard time designing the UI on https://editfight.com https://editfight.com because it’s supposed to be easy and simple and obvious on both desktop and mobile, but there’s almost no space on mobile. So I resorted to icons at first and then moved half the icons to a pop out menu and turned them back into words. The only icons left are ones that are either obvious or easily learnable and memorizable. And I had to change a few and even draw a few myself (SVG) because they were too similar to each other. There’s still one I’m not super happy with but it’s a very strange feature that only makes sense when you finally need it. Icon design and UI design in general is very hard to get 100% right for everyone.
- nneonneo 8y ago
  Odd, for a site calling itself “editfight” you sure are quick to ban people. Maybe you need some kind of interstitial or landing page if you want to explain what your idea is (it’s clearly not just for people to randomly doodle).
  - _sdegutis 8y ago
    The name editfight.com is kind of a historic name and every time I've suggested changing it, all the regulars incite in an uprising and demand I leave it alone. Sorry for the confusion though. I just updated the site to shows the rules and a brief explanation of what it is when visiting it for the first time. Thanks for your feedback :)
gnode 8y ago
In the past hover text helped to fill in the knowledge gaps when met with unfamiliar or ambiguous icons. On mobile and other touch devices, where there is no mouse, this breaks down. We could do with some kind of replacement for hover text on touch UIs, maybe a return of the "What's this?" question mark button Windows used to have.
- gowld 8y ago
  In a well-built mobile app, long-press is "Hover"
  - cpburns2009 8y ago
    This is why "discoverability" sucks. I've used Android for 9 years, and I'm aware of long-pressing but I didn't know it was a substitute for mouse-hovering. Is this standard? I thought it was a substitute for right click.
    - tomcatfish 8y ago
      It's fairly standard, or used to be at least, with right click only happening in text areas.
    - gowld 8y ago
      You're right that you can't differentiate "Hover" from "context-click" on mobile. But there's not need to have two separate actions for "show info tooltip" and "context menu", since they don't interfere. Poking at something to see what it does is something most people do since toddlerhood. The only challenge is getting over your fear that irreversible operations are triggered on touchdown not touchup.
math0ne 8y ago
I think in most applications this is important but in my email, I value density above all else.
ape4 8y ago
Actions that have arrow-like things in mail: forwarding, replying, moving mail to a mailbox. We need better ways of saying these things.
maaaats 8y ago
At least in the browser I can hover and see some help text. On mobile it's a shot in the dark.
deleted 8y ago
[deleted]
ken 8y ago
It's not advertised, but Gmail still supports a "basic HTML" mode, which uses real text and real buttons/menus/links for everything. I think it's nicer than the new all-gray, all-icon, all-JS version (except for a couple annoying bugs which will probably never get fixed). They've removed any way to enable it from Gmail itself. You have to search Gmail Help ("See Gmail in standard or basic HTML version"), which has a magic link you can visit to enable it.
- reaperducer 8y ago
  Also, if you have a crap connection, Google will try to detect your speed and sometimes offer to switch you to the basic mode.
Pxtl 8y ago
I've said it over and over again: I speak english, not pictogram. The only platform I've ever seen that got icons right was Windows Phone, because it had a hard-coded "..." button that always did the same thing: 1) Show all the labels, and 2) Show all the additional text-labeled (non-icon) actions that were hidden by default. So the first thing you did when faced with an unfamiliar set of icons was touch the "..." button which showed you the full list of things you could do.
- ScoutOrgo 8y ago
  It really is frustrating using new software for work that has only icons with ~3 second hover delay of showing the action label.
  - Pxtl 8y ago
    Worse on mobile where you can't hover.
    - vcpnt51 8y ago
      On Android you can long press the button and you get a tooltip. It works as long as the app isn't using custom UI elements.
- Mithorium 8y ago
  I was interested to see what that looked like and found Opening down: http://www.mobiletechworld.com/wordpress/wp-content/uploads/2011/01/Appbarstitch.jpg http://www.mobiletechworld.com/wordpress/wp-content/uploads/... Opening up: http://i.stack.imgur.com/gZdjo.png http://i.stack.imgur.com/gZdjo.png I like it
  - vcpnt51 8y ago
    First is WP 8, second is Windows 10. They have nothing to do with each other.
  - Pxtl 8y ago
bluesofuse 8y ago
Icons are tough in general. But I think if you're able to use an icon that is even remotely related, people's brains will click and they will think, "Ok, that makes sense."
pishpash 8y ago
Three stripes or three downward arrows are the dumbest invention. Three horizontal dots already existed, and literally means ellipsis from other contexts.
vitaflo 8y ago
Reminds me a bit of this toolbar in Google Sheets. The last option is not underline (it's text color). Always trips me up. https://imgur.com/a/7w1NwvO https://imgur.com/a/7w1NwvO
lerie82 8y ago
idk, it took only one time using gmail to understand what the icons meant, stop complaining please, how the hell did this even make hn?!
bdcravens 8y ago
I've noticed an increasing trend of designs that constrain themselves to the FontAwesome set, and it's not uncommon that the same icon on different sites triggers entirely different actions.
- jvagner 8y ago
  Yes, this. I don't mind it for cosmetic purposes, but it's getting used for interfaces in confounding ways. I hit a personal wall of "will & interest" this weekend trying to re-learn an app I've used for a long time that updated with some interface changes. I think it's actually possible to reach a "too many interfaces" limit. Or at least I'm getting there.
vortico 8y ago
I've been using basic HTML Gmail since the new one came out. https://support.google.com/mail/answer/15049?hl=en https://support.google.com/mail/answer/15049?hl=en Works great with vim-like browsers and has no icons, just text.
deleted 8y ago
[deleted]
sjs382 8y ago
Wow, I have the opposite experience, but I'm pretty accustomed to GMail and it's icons. Up until this moment I'd been annoyed that my action bar in GMail was text-only after the update to the new interface. I was even wondering why the author was writing about the old GMail and went searching through the comments looking for others who were just as confused and checking GMail settings (it was there—I just missed it). The icons are much easier (for me) to decipher upon quick glance, once I know their meanings. The text requires me to actually read the buttons before clicking, which is slower if I'm not doing it repetitively (like tagging/archiving a weeks worth of emails on a Friday). That said, I'll always prefer a combination of icons and labels.
golfer 8y ago
Why does the bottom of the page say "All fights retarded" ? wtf?? Totally unnecessary.
booleandilemma 8y ago
Seems to me like this person is making a mountain out of a molehill. The functionality of the icons can be learned quickly and they look aesthetically better than text. You can’t make an icon that is naturally unambiguous to everyone, everywhere.
_eric 8y ago
This website reminded of littlebigdetails[0] when it comes to analysing user interfaces. The difference is that the latter points out what's good about them. [0] http://littlebigdetails.com/ http://littlebigdetails.com/
adregan 8y ago
I'm a developer in his 30s and my time has finally come to be "that guy": We've already gone through this. It's called mystery meat navigation, and it was so prevalent and discouraged that it even has a wikipedia entry[0]. Hopefully it'll go out of fashion again. 0: https://en.wikipedia.org/wiki/Mystery_meat_navigation https://en.wikipedia.org/wiki/Mystery_meat_navigation
- overcast 8y ago
  ...and now we have that horrible hamburger menu.
  - notriddle 8y ago
    At least the standard "hamburger menu" opens a list of textually labeled options. That's better than icon-only toolbars.
    - oneeyedpigeon 8y ago
      And by the same argument, a traditional menu would be even better.
  - ryanwaggoner 8y ago
    I kind of love that Reddit has gone all in and just made it an actual hamburger icon in their redesign: https://www.evernote.com/l/AALYMDHabuxLvLSKPlM6fMyCozTZysM2aNQ https://www.evernote.com/l/AALYMDHabuxLvLSKPlM6fMyCozTZysM2a...
    - TeMPOraL 8y ago
      In 5 years someone will write an article that "explains" how the three vertical dots/bars icons really symbolize a hamburger. This article will get popular. In 10 years, this will be a common misconception taught in professional books.
- gitonup 8y ago
  As another developer in his 30s, I don't think it's quite the same. Mystery meat navigation is purely opaque, whereas icons like GMail's are at least trying to convey meaning via their imagery. The Wikipedia page for Mystery Meat Navigation actually has an example that is completely opaque as well, as does this example video by the coiner of the term: https://www.youtube.com/watch?feature=player_detailpage&v=zZ_aaCYCxVQ https://www.youtube.com/watch?feature=player_detailpage&v=zZ... I don't think it's quite fair to call bad iconography "Mystery Meat" because it's not executed well. The difference is that users can (and do) learn what the icons mean and then can find them visually, whereas in true MMN, you'd absolutely have to move your mouse over what you were trying to find. GMail has the challenge of trying to not make their UI busy while at the same time trying to come up with iconography for "Archive", which is not as prevalent in the zeitgeist as "Bold" in a word processor.
cbhl 8y ago
I feel sorry for the designers that had to work on the redesign that introduced these icons in the first place. They had to add a bunch of padding around the buttons in the toolbar based on a top-down redesign mandate. Buttons needed to be big enough to be used with fingers/touchscreens, with one glorious responsive UI for desktop and mobile. They discovered that labels didn't fit inside the "safe area" for certain languages, like German (and monitors had lower resolutions then). The icons were a compromise. And then desktop web stagnated under a "mobile-first" mandate from the top. (Since then, the mandate-du-jour has changed.) One of the great things about the newest GMail redesign is that there are settings around this -- you can make the padding narrower and you can change the UI to use text labels again.
brazzy 8y ago
The only intuitive user interface is the nipple, everything else is learned.
edejong 8y ago
Most of these icons would be much clearer if a dabble of colour and depth was added. All these flat design aficionados have only aesthetics in mind, not usability.
askvictor 8y ago
To everyone wanting text buttons, consider that a surprisingly large amount of the population has literacy problems (perhaps an email client isn't the best example for this, since you're using it to read and write words, but consider the general case). Icons are going to make their life easier (assuming there isn't room for icons+text all the time). This is an counter-point/trade-off to vision-impaired accessibility where you need words everywhere. Icons are hard (to get right) in general. Do you stick with skeuomorphisms when half your user base know them well, but the other half have no idea what they mean (e.g. floppy disk to save)?
- bo1024 8y ago
  But if literate people don't get what the icons mean, why would less-literate people?
  - askvictor 8y ago
    Maybe some people are more wordy, and some more visual? You'd be surprised at how people adapt to not being able to read - there is literature of children who 'fake' reading - they essentially memorise the shape of a thousand or so words (over the course of their school) so it appears they can read to some degree, but have no idea when they come across a word they haven't memorised.
jonathankoren 8y ago
I always hit Gmail’s in app “back” button when I want to reply. I honestly had to ask someone how to reply to an email in gmail.
cheapsteak 8y ago
People often make the mistake of thinking text and icons are two ways of doing the same thing Labels are good at telling you what things are, but finding specific frequently performed actions in a list of text that all look similar will yield frustration Icons (and especially icons with colour, or icons plus colour) are good at allowing you to quickly find something you're already looking for, but expecting icons to perform the job of labels to provide initial information will yield confusion
testplzignore 8y ago
> This means move, but even since Windows 95 days it was clear nobody is going to come up with a good metaphor for move. Nobody did. Why not a cow? Everyone knows cows go mooooooo-ve :)
- rbrcurtis 8y ago
  Change approved.
- dingaling 8y ago
  Comment est-ce que je peux déplacer cet e-mail ci? Il faut appuyer la vâche? Pourquoi? I realise you were only joking but it does illustrate why i8n icons are difficult.
sgustard 8y ago
What's the implication of this article? Is it that Google did not do user testing? Or they did user testing and found the icons work fine? Or they know labels work better, but intentionally chose to use icons anyway? "I don't like X and it's obvious that Y would be better" is a fun topic, but I'm not so sure why people are so quick to accept an anecdote as gospel.
pkamb 8y ago
The icon that gets me is the "paperclip" for Attach vs. the "chain link" icon for Hyperlink. Two icons in the toolbar, both small rounded metal loops. I have to hover for the tooltip every time.
craftyguy 8y ago
I don't have this problem in mutt
V-2 8y ago
Gmail isn't the only service guilty of that. Here's an icon from the Outlook web mail app: https://ibb.co/ic66Qd https://ibb.co/ic66Qd What does it mean?
kup0 8y ago
Once I learned that I could switch to text labels in Gmail, I can never go back. Even though I've learned the icons, I am still more productive with text labels instead. Even knowing the icons' meanings, my brain has to pause a second to think about what they do.

324 points by bloomca 8y ago

All of these icons have tooltips that appear within 100ms of hovering over them. Surely there is a better part of the new gmail UI to pick apart?

nightski 8y ago
Isn't that kind of a poor choice then if the intent is to have the user hover over the icon? Also what about touch? If there was a functional advantage of the icons that would be great. But I'm guessing it was chosen just to "look prettier".
- JoshuaEN 8y ago
  Icons take up less space on the screen, which is useful if you are using a smaller browser window (or a phone screen).
  - thedaemon 8y ago
    But the trend, and the default GMail settings for UI spacing is far too spaced out. I'm finding it difficult to use some of the newer UI's with such wide spacing, without using the app fullscreen. Microsoft CRM, I'm looking at you. It's 100% not usable unless it's full screen.
WorldMaker 8y ago
What about keyboard or touch users that don't exactly have a "hover" equivalent?
- ucaetano 8y ago
  You can switch to text labels: https://support.google.com/mail/answer/2473038?hl=en&authuser=0 https://support.google.com/mail/answer/2473038?hl=en&authuse...
  - realworldview 8y ago
    Fortunately
airstrike 8y ago
Except that forces you to hover over each one of them until you find what you're looking for, rather than simply writing out e.g. "Mark as SPAM" or "Mark as read"
- robbrown451 8y ago
  Until you learn what they mean, and then you get the advantage of more fits on the screen, and arguably, quicker mental processing (I'd say it takes less work to find an icon than to pick out the right text label).

scotchio 8y ago

Maybe I'm crazy, but I think those icons do a pretty good job...

ghayes 8y ago
I think the idea is that you know what they do from having learned and interacted with the icons. If you're a fresh user, it could be a pretty unintuitive learning curve.
- nailer 8y ago
  I've been using gmail since you needed to have an invite. I just learnt that: > Two envelopes in a stack means 'mark as read' from this article. I had no idea what it did before.
realworldview 8y ago
You’re crazy.

zawerf 8y ago

IIRC it used to be all text. I remember feeling the same thing when they rolled out the icon only design and was frustrated that I had to relearn something I had already been using daily (memory is fuzzy, it was many years ago). Now I am actually okay with it. For a product that is daily use, you get used to the icons fairly quick and am glad it doesn't take that much screen real estate. What I hated is that it inspired a lot of other products that are NOT meant for daily interaction to do the same thing. For example I probably only interact with the dropbox desktop client once every blue moon and they have icons that make no sense (First icon is two squares for opening Paper which I don't use. Next icon is a globe which is for opening the web ui. All I want to do is revert a file!).

koube 8y ago
Bitbucket has recently changed to an icon theme, with genius icons such as: 1. <> 2. </> 3. a one node graph 4. a three node graph 5. a two node digraph 6. the refresh symbol 7. an arrow pointing to a cloud 8. a page I have no idea what any of these mean and I hate it. Plus, it takes 8 seconds to load anything so if you click on the wrong one it's extra annoying. If anyone's curious, the answers are: 1. <>: source 2. </>: source, as far as I can tell it's the same button again 3. one node graph: commits 4. three node graph: branches 5. two node digraph: pull requests 6. refresh symbol: pipelines 7. array pointing to cloud: deployments 8. page: downloads
- lainga 8y ago
  Are there, at least, tooltips?
  - koube 8y ago
    Tooltips do come up but you have to put your mouse on the icon itself, if your mouse is on the enclosing button and the button is highlighted, the tooltip won't come up until you move the mouse to the icon itself.
  - Navarr 8y ago
    Yes, and by default the menu is expanded so that you see the words. Here it is shrunk (not default): https://i.imgur.com/liRIiHG.png https://i.imgur.com/liRIiHG.png (left) https://i.imgur.com/zTOooiS.png https://i.imgur.com/zTOooiS.png (right) Expanded: https://i.imgur.com/zj9P8d4.png https://i.imgur.com/zj9P8d4.png (left) https://i.imgur.com/Fv2irRH.png https://i.imgur.com/Fv2irRH.png (right)

ungzd 8y ago

The problem is not that icons are not self-describing (diskette save icon does not describe "save" operation either), but that these icons look like indistinguishable grey circles until you start to focus attention to them. The same applies to iOS and Android application icons, despite they have vibrant colors. I always can't find what I need, they look the same. I end up using search box if I want to run app that is not on home screen.

falcon620 8y ago

Their product managers and designers spent too much of their "clutter budget" on stupid stuff so they felt they had to reduce the clutter by making those things that should have been icon+text buttons into icon-only buttons.

albertgoeswoof 8y ago

I like to imagine that the people that get annoyed with poor iconography are the same people that use Vim and other esoteric software. Instead of commenting on google's design, we could be commenting on software that isn't proprietary, closed source and anti-consumer, with access provided for free solely to enable data mining and maximise ad revenue.

oneeyedpigeon 8y ago
> I like to imagine that the people that get annoyed with poor iconography are the same people that use Vim and other esoteric software. Graphic designers and information architects aren't using vim. In fact, vim suffers from the same lack of transparency/discoverability as these icons do.
cpburns2009 8y ago
I hate poor iconography. A while ago it took me a good 15 minutes to figure out how to mark an email as "unread" in the Gmail Android client. Apparently an envelope icon means "mark as unread". The newish (within the past couple years) navigation icons on Android are great: a left pointing triangle, a circle, and a square. At least the triangle points the same direction as old back button. Disclaimer: I do use Vim when SSHed into a server because that's the CLI editor I happened to learn and it supports regex search.
- roywiggins 8y ago
  An envelope icon can also mean "mark as read" in GMail. It's like a treasure hunt, but for your email. Fun[1]! [1]not fun
- MereInterest 8y ago
  Also, the "Mark as unread" button is only present if you are in your inbox with the email selected. There is nothing analogous to the desktop's "Mark as unread" which is at the top of an open email, and returns you to the inbox when used. Also, there is no indication that the emails are selectable at all. The icon to the left of each email is a portrait of the sender, which in no way corresponds to the action of selecting an email.

neivin 8y ago

Design for the sake of design... Companies spend too much on designers.

whoisjuan 8y ago
They spend too little. The problems that real design solves have nothing to do with this. Anyone can just pick icons from a library and make them buttons. How easy is to blame a designer for these choices. People who say "design for the sake of design" are exactly the people who need design. For starters, everything is designed. Show me one human-produced thing that wasn't actually consciously designed by someone. Is that design for the sake of design? There's a difference between good design and bad design. It's important to learn how to tell the difference, but more important to learn how critical to success is good design (regardless if it comes from a trained designer or not.)
- ksk 8y ago
  Sure, who could argue that bad is better than good? :) The question is - But, Why. I'd bet half a paycheck that the only people who really really care about the new "cool" designs are (1) Bosses looking to take credit (2) Bored tech writers looking for content (3) UX Peers looking for validation (4) Tech people looking for new toys. Normal folks just want all that fancy UI stuff to go away. They would be just as productive on a UI based on Mac OS 8.

ibdf 8y ago

There should be a Hacker News "Challenge HN:" post, where you complain (point out) about some broken system and you challenge other people/developers/designers to do better. Challenge HN: Improve Gmail Icons

nafizh 8y ago
For open source projects, it makes sense. Otherwise, why should HN spend its time solving a for profit company's product flaws?
- acct1771 8y ago
  Ask custom CSS authors.
- wycy 8y ago
  Mainly for the joy of (possibly, but perhaps unlikely) having your artwork/improvement(s) rolled into a very public product.
- sprt 8y ago
  Because we're hackers.
- TeMPOraL 8y ago
  For the remote chance of unbreaking a widely-used commercial product. What's with the idea that one has to always capture the profits for themselves?
notatoad 8y ago
done: https://imgur.com/n13GmJB https://imgur.com/n13GmJB
- billysielu 8y ago
  huge improvement
- golfer 8y ago
  Now translate those into the 72 languages that Gmail supports. [0] https://en.wikipedia.org/wiki/Gmail#Language_support https://en.wikipedia.org/wiki/Gmail#Language_support

Isamu 8y ago

Under Settings -> General select Button Labels: Text Life is too short.

realworldview 8y ago
Unambiguous, non-disruptive and not distracting. Life is to short to live by the whim of profit-led iconography which aims to keep people guessing and attentive whilst distracting them from the real utility and product necessity.

roywiggins 8y ago

I had no idea the icons could be changed to text in Settings. I know what they all do, but there's something about them that bugs me a lot. There's always a slight hesitation where I think about what they mean.

overcast 8y ago

I have a severe distaste for icons. Look at HN, there's zero thinking involved outside of reading a language. You know exactly what something does, and it can easily be multilingual as a result. I'm hoping the next big trend in design focuses on minimalist interfaces. Nothing but text, and some photos if needed. So tired of all the fluff, particularly on small phone screens.

roywiggins 8y ago
Web Brutalism? https://medium.com/envato/brutalism-the-ugly-web-design-trend-taking-over-the-internet-2dbc8e822e37 https://medium.com/envato/brutalism-the-ugly-web-design-tren...
__jal 8y ago
I don't hate icons, per se. I just find them hard to use. For whatever reason, I have to think about icons a lot more than words, even after I'm very familiar with them. Watching others, most folks don't seem to have this problem - words and icons seem about equally fluid for them. And I'm fine if they don't move - I remember them by location. But I'm very slow to 'read' icons. The most common situation that highlights this is tab-application-switching. Those are never in the same order twice, and I have to stare at them until I can pick out the icon of the app I'm thinking of. I've looked for hacks that would replace the icons with words, but haven't seen one, at least on MacOS.
- alexbecker 8y ago
  I absolutely have the same problem. I think other people do to, but now I'm not sure if I've observed this or I'm just assuming other people have the same problems as me.
gowld 8y ago
Text is very difficult for UI layouts, especially on small screens, and especially for lower-vision users, since (a) words take up more space than icons, (b) different languages have different length words.

manigandham 8y ago

First thing I do is switch to text labels. Icons are proven to be harder to recognize. Images are great for conveying complex information but icons are much smaller and harder to recognize, especially in gmails soft bubbly grayscale icons that refuse to use any colors or even borders.

jokoon 8y ago

Oh yeah! I remember I was looking for a "mark as unread" in the android gmail app, never finding it for a long time until I tried that icon, wondering what it was. It was the mail icon button.

LoSboccacc 8y ago
can we also spend a second complaining how the mark as read is not contextual in the web version of gmail? I hate that.

jmkim 8y ago

REALLY HARD

alexggordon 8y ago

I think this article misses a couple important points when it comes to UI AND UX. I'd argue that an important element of UI is discoverability. Yes, a "A box with downward arrow" is not in and of itself enlightening about what it does. By looking at that icon I am not sure what it does. However, I can discover what it does in very few actions. Clicking on it results in selecting all the emails on the page, and the box changes to checked. Clicking the down icon results in a selection menu with "All", "None", "Read", "Unread" and "Starred"[0]. Clicking on one of those items selects only those items. Given that interaction, can anyone here say they still don't understand what it does? My one criticism is that selecting something like "stared" doesn't filter down to only those items too, so you can now select things that aren't on the page of items you're currently seeing. Apple's original iOS did not convey a sense of "immediate understanding" that this article demands, but rather focused on discoverability. That is the same mentality that went into make this UI/UX. My point is you can't judge one without the other. Removing all animations from the original iOS would have come close to ruining it. Showing a picture of a Google UI, and criticizing it without allowing it the benefit of discoverability is tantamount to the same lack of context as removing those animations. Also, following this posts advice: > Luckily, this menu can be switched to text labels in Settings. And changing to text button labels[1] doesn't even change that first icon[2], so I'm not sure that post is really for any other purpose than creating material for some echo chamber. [0] https://i.imgur.com/D8CogSS.png https://i.imgur.com/D8CogSS.png [1] https://i.imgur.com/jOaTKDs.png https://i.imgur.com/jOaTKDs.png [2] https://i.imgur.com/tkhSoom.png https://i.imgur.com/tkhSoom.png

Ajedi32 8y ago
Another thing is that once you _do_ discover what an icon means, it only takes a few repetitions before you start to remember. I don't even use Gmail anymore (I've completely switched over to Inbox) but when I opened that article the first thing I did was "read" all the icons on the page. The only ones I had trouble with were "Mark as Read" and "Move to Folder", but even those only took a couple seconds of thought for me to comprehend.
- hawski 8y ago
  I would probably mostly remember the relative position of the button. So next time when they would add something in-between I would click the third from the left and would be surprised that something else happened. I have it the same even with labels, truth to be told. I hate that nowadays Google seems to shuffle All, Images, Videos, News around, because I learned that Images are always the second one and then it opens Videos on full moon and News on Wednesday. Now I have to always parse before I tap/click.

AdamTReineke 8y ago

Yesterday, I learned that my sixty-year old mother uses a screen reader on her tablet. Her vision is fine but she never knows what icons mean so the screen reader is able to read out the describing text and decipher them for her.

notimetorelax 8y ago
This is a perfect example of why accessibility features are not only for visually impaired! Accessibility done right can bring value for a wider audience.
- dingo_bat 8y ago
  Only if your icons are bad. Otherwise this problem wouldn't exist.
  - gowld 8y ago
    Do you know what the universally comprehensible icons are for every software function? If so, you could make great money (or other forms of wealth) by licensing them to software developers.
  - sevensor 8y ago
    I think the problem is that icons are categorically bad for people who are unable to interpret their visual language. I switched my preference to text as soon as the icons were rolled out, and forgot about them. I resented that the designers were imposing a new metaphorical scheme and expecting us all to adapt to it, to suit their own needs. It's the pinnacle of arrogance.
    - bigiain 8y ago
      Google imposes a version of "a new metaphorical scheme" on every website owner and expects them all to adapt to it - it's hardly surprising they also expect human brains to adapt to suit them... I mean it's not like anyone ever met an arrogant Googler, right?

emgee_1 8y ago

So you read HN. Hacker news. You set up iSync (mbsync) and all Your Gmail via IMAP. Since you are a hacker, you use emacs (or if you are less fortunate :-) vim) Now configure mu4e, notmuch or gnus. All Your actions are now a simple keystroke away: C compose R reply F forward And never bother with Gmail interface :-)

themodelplumber 8y ago
I like it. Any downsides to know about? Thanks.
- emgee_1 8y ago
  No downsides. All your mail is downloaded locally and off line available. Fast Search with mu. Really if there is one thing you should do this year is take some time and discover emacs. Just for orgmode alone. You will Thank me later :-) In a nutshell: Emacs is a machine. A lisp machine. It will work for you instead that you work for your computer. It will do anything you want ( and more) Now is the time to discover this shining gem in all of softwares.
  - themodelplumber 8y ago
    Ok, you got me. I'm going to give it a shot. :-)
Pxtl 8y ago
There's delicious irony in how many jargon-y terms are in here that would be, to non-geeks, just as opaque as those icons. - HN - mbsync - IMAP - emacs/vim - mu4e/notmuch/gnus
- emgee_1 8y ago
  Yes you are right. However, this is not the New York times nor the economist nor the guardian. This IS hacker news. :-)
phlo 8y ago

alejohausner 8y ago

If you want to say something and be understood, use words in a commonly-used language: English. Using icons is, effectively inventing new words. Nobody has seen those words before: they are the designer's private language.

gowld 8y ago
That's a provincial point of view. Despite Anglo hegemony, billions of people prefer non-English. Anyway, English invents new words or new meanings all the time. What does a "cloud" have to do with webservers?
- cabaalis 8y ago
  > What does a "cloud" have to do with webservers? I've always assumed it had to do with the common use of a cloud to refer to the internet or other network on diagrams. With a cloud being used because it conveyed a sense of "the unknown" or "uncontrollable." Which is an interesting meaning progression to the current version of "cloud."
  - gowld 8y ago
    > common use of a cloud to refer to the internet or other network on diagrams. You know that because you are a network software developer. In summary, though, "Cloud icon represents the cloud, and we use the word "cloud" because ... we use a cloud icon to represent it."
- alejohausner 8y ago
  Sorry about that. I didn't mean that English is best. I meant that existing languages can say things better than icons invented by programmers, who are people with skills that have been honed on communicating with computers, not communicating with other humans.

jgtrosh 8y ago

I agree with the spirit. More precisely I especially agree that static icons cannot easily convey actions; instead they look like things which are supposed to be associated with a purpose, symbols which are usually clumsy, or combined shapes which rarely convey the intent immediately. On the other hand I find the article slightly dishonest on a couple of points. Not because I believe the icons are particularly obvious, but because the descriptions seem to miss the point. Here goes: > - Ok, clock now. This is universally undestood sign that could mean literally _anything_. What time is it? The clock is associated with time. In the context of received mail, it seems quite natural that a time-related action would be setting a reminder. > - Right-pointing rectangle? This looks most like road sign pointing to some place, but actually means TAG. Huh? To me this obviously looks like sticky notes you can add in books or on files to categorize content, a.k.a. quite literally tags.

tbabb 8y ago
Very much disagree that those things are clear. - Obviously the clock is time related, but there is no clue how. After reading this, I still don't know what it does. Is it a "remind me later" icon? - The right pointing rectangle is too abstract. I agree with the article that it looks like a road sign, or like gmail's own "importance" markers. IMO, if they rotated it 45 degrees and put a hole in the point, it would be much more clear.
gnode 8y ago
> it seems quite natural that a time-related action would be setting a reminder. I think this highlights that everyone potentially has a different understanding. That wasn't obvious to me, or the article's author. Personally I would expect a reminder button to have a bell icon.
- kbenson 8y ago
  > Personally I would expect a reminder button to have a bell icon. Likely because you've associated a bell with "alarm", and you're associated "alarm" with "reminder", but that's likely a learned association because of these systems because alarm really means danger. An "alarm clock" is probably the origination of that association, but I think the terminology could have just as easily gone with "notification clock" or "wake-up clock" originally, and we woulnd't be using "alarm" as we do much of the time now. I think what this actually points to is that while some icons have become normalized over time, (settings is usually indicated by bars, or the "hamburger" icon, power has a well accepted icon now), there exist people that still don't know them well because they either haven't used modern devices enough, or used older devices without a standard enough that it takes longer to recognize the convergence. I imagine any proposed icon standard probably has about a decade before it's widely understood by most people, because of the lag in usage in popular applications, which lags exposure to people, and the large number of people that use technology where it would be present sparingly enough that it takes a long time to become obvious and accepted. In the end though, I think that's what's needed, as skeuomorphic and conceptual based icons have problems as noted here.

_sdegutis 8y ago

I have a hard time designing the UI on https://editfight.com https://editfight.com because it’s supposed to be easy and simple and obvious on both desktop and mobile, but there’s almost no space on mobile. So I resorted to icons at first and then moved half the icons to a pop out menu and turned them back into words. The only icons left are ones that are either obvious or easily learnable and memorizable. And I had to change a few and even draw a few myself (SVG) because they were too similar to each other. There’s still one I’m not super happy with but it’s a very strange feature that only makes sense when you finally need it. Icon design and UI design in general is very hard to get 100% right for everyone.

nneonneo 8y ago
Odd, for a site calling itself “editfight” you sure are quick to ban people. Maybe you need some kind of interstitial or landing page if you want to explain what your idea is (it’s clearly not just for people to randomly doodle).
- _sdegutis 8y ago
  The name editfight.com is kind of a historic name and every time I've suggested changing it, all the regulars incite in an uprising and demand I leave it alone. Sorry for the confusion though. I just updated the site to shows the rules and a brief explanation of what it is when visiting it for the first time. Thanks for your feedback :)

gnode 8y ago

In the past hover text helped to fill in the knowledge gaps when met with unfamiliar or ambiguous icons. On mobile and other touch devices, where there is no mouse, this breaks down. We could do with some kind of replacement for hover text on touch UIs, maybe a return of the "What's this?" question mark button Windows used to have.

gowld 8y ago
In a well-built mobile app, long-press is "Hover"
- cpburns2009 8y ago
  This is why "discoverability" sucks. I've used Android for 9 years, and I'm aware of long-pressing but I didn't know it was a substitute for mouse-hovering. Is this standard? I thought it was a substitute for right click.
  - tomcatfish 8y ago
    It's fairly standard, or used to be at least, with right click only happening in text areas.
  - gowld 8y ago
    You're right that you can't differentiate "Hover" from "context-click" on mobile. But there's not need to have two separate actions for "show info tooltip" and "context menu", since they don't interfere. Poking at something to see what it does is something most people do since toddlerhood. The only challenge is getting over your fear that irreversible operations are triggered on touchdown not touchup.

math0ne 8y ago

I think in most applications this is important but in my email, I value density above all else.

ape4 8y ago

Actions that have arrow-like things in mail: forwarding, replying, moving mail to a mailbox. We need better ways of saying these things.

maaaats 8y ago

At least in the browser I can hover and see some help text. On mobile it's a shot in the dark.

deleted 8y ago

[deleted]

ken 8y ago

It's not advertised, but Gmail still supports a "basic HTML" mode, which uses real text and real buttons/menus/links for everything. I think it's nicer than the new all-gray, all-icon, all-JS version (except for a couple annoying bugs which will probably never get fixed). They've removed any way to enable it from Gmail itself. You have to search Gmail Help ("See Gmail in standard or basic HTML version"), which has a magic link you can visit to enable it.

reaperducer 8y ago
Also, if you have a crap connection, Google will try to detect your speed and sometimes offer to switch you to the basic mode.

Pxtl 8y ago

I've said it over and over again: I speak english, not pictogram. The only platform I've ever seen that got icons right was Windows Phone, because it had a hard-coded "..." button that always did the same thing: 1) Show all the labels, and 2) Show all the additional text-labeled (non-icon) actions that were hidden by default. So the first thing you did when faced with an unfamiliar set of icons was touch the "..." button which showed you the full list of things you could do.

ScoutOrgo 8y ago
It really is frustrating using new software for work that has only icons with ~3 second hover delay of showing the action label.
- Pxtl 8y ago
  Worse on mobile where you can't hover.
  - vcpnt51 8y ago
    On Android you can long press the button and you get a tooltip. It works as long as the app isn't using custom UI elements.
Mithorium 8y ago
I was interested to see what that looked like and found Opening down: http://www.mobiletechworld.com/wordpress/wp-content/uploads/2011/01/Appbarstitch.jpg http://www.mobiletechworld.com/wordpress/wp-content/uploads/... Opening up: http://i.stack.imgur.com/gZdjo.png http://i.stack.imgur.com/gZdjo.png I like it
- vcpnt51 8y ago
  First is WP 8, second is Windows 10. They have nothing to do with each other.
- Pxtl 8y ago

bluesofuse 8y ago

Icons are tough in general. But I think if you're able to use an icon that is even remotely related, people's brains will click and they will think, "Ok, that makes sense."

pishpash 8y ago

Three stripes or three downward arrows are the dumbest invention. Three horizontal dots already existed, and literally means ellipsis from other contexts.

vitaflo 8y ago

Reminds me a bit of this toolbar in Google Sheets. The last option is not underline (it's text color). Always trips me up. https://imgur.com/a/7w1NwvO https://imgur.com/a/7w1NwvO

lerie82 8y ago

idk, it took only one time using gmail to understand what the icons meant, stop complaining please, how the hell did this even make hn?!

bdcravens 8y ago

I've noticed an increasing trend of designs that constrain themselves to the FontAwesome set, and it's not uncommon that the same icon on different sites triggers entirely different actions.

jvagner 8y ago
Yes, this. I don't mind it for cosmetic purposes, but it's getting used for interfaces in confounding ways. I hit a personal wall of "will & interest" this weekend trying to re-learn an app I've used for a long time that updated with some interface changes. I think it's actually possible to reach a "too many interfaces" limit. Or at least I'm getting there.

vortico 8y ago

I've been using basic HTML Gmail since the new one came out. https://support.google.com/mail/answer/15049?hl=en https://support.google.com/mail/answer/15049?hl=en Works great with vim-like browsers and has no icons, just text.

deleted 8y ago

[deleted]

sjs382 8y ago

Wow, I have the opposite experience, but I'm pretty accustomed to GMail and it's icons. Up until this moment I'd been annoyed that my action bar in GMail was text-only after the update to the new interface. I was even wondering why the author was writing about the old GMail and went searching through the comments looking for others who were just as confused and checking GMail settings (it was there—I just missed it). The icons are much easier (for me) to decipher upon quick glance, once I know their meanings. The text requires me to actually read the buttons before clicking, which is slower if I'm not doing it repetitively (like tagging/archiving a weeks worth of emails on a Friday). That said, I'll always prefer a combination of icons and labels.

golfer 8y ago

Why does the bottom of the page say "All fights retarded" ? wtf?? Totally unnecessary.

booleandilemma 8y ago

Seems to me like this person is making a mountain out of a molehill. The functionality of the icons can be learned quickly and they look aesthetically better than text. You can’t make an icon that is naturally unambiguous to everyone, everywhere.

_eric 8y ago

This website reminded of littlebigdetails[0] when it comes to analysing user interfaces. The difference is that the latter points out what's good about them. [0] http://littlebigdetails.com/ http://littlebigdetails.com/

adregan 8y ago

I'm a developer in his 30s and my time has finally come to be "that guy": We've already gone through this. It's called mystery meat navigation, and it was so prevalent and discouraged that it even has a wikipedia entry[0]. Hopefully it'll go out of fashion again. 0: https://en.wikipedia.org/wiki/Mystery_meat_navigation https://en.wikipedia.org/wiki/Mystery_meat_navigation

overcast 8y ago
...and now we have that horrible hamburger menu.
- notriddle 8y ago
  At least the standard "hamburger menu" opens a list of textually labeled options. That's better than icon-only toolbars.
  - oneeyedpigeon 8y ago
    And by the same argument, a traditional menu would be even better.
- ryanwaggoner 8y ago
  I kind of love that Reddit has gone all in and just made it an actual hamburger icon in their redesign: https://www.evernote.com/l/AALYMDHabuxLvLSKPlM6fMyCozTZysM2aNQ https://www.evernote.com/l/AALYMDHabuxLvLSKPlM6fMyCozTZysM2a...
  - TeMPOraL 8y ago
    In 5 years someone will write an article that "explains" how the three vertical dots/bars icons really symbolize a hamburger. This article will get popular. In 10 years, this will be a common misconception taught in professional books.
gitonup 8y ago
As another developer in his 30s, I don't think it's quite the same. Mystery meat navigation is purely opaque, whereas icons like GMail's are at least trying to convey meaning via their imagery. The Wikipedia page for Mystery Meat Navigation actually has an example that is completely opaque as well, as does this example video by the coiner of the term: https://www.youtube.com/watch?feature=player_detailpage&v=zZ_aaCYCxVQ https://www.youtube.com/watch?feature=player_detailpage&v=zZ... I don't think it's quite fair to call bad iconography "Mystery Meat" because it's not executed well. The difference is that users can (and do) learn what the icons mean and then can find them visually, whereas in true MMN, you'd absolutely have to move your mouse over what you were trying to find. GMail has the challenge of trying to not make their UI busy while at the same time trying to come up with iconography for "Archive", which is not as prevalent in the zeitgeist as "Bold" in a word processor.

cbhl 8y ago

I feel sorry for the designers that had to work on the redesign that introduced these icons in the first place. They had to add a bunch of padding around the buttons in the toolbar based on a top-down redesign mandate. Buttons needed to be big enough to be used with fingers/touchscreens, with one glorious responsive UI for desktop and mobile. They discovered that labels didn't fit inside the "safe area" for certain languages, like German (and monitors had lower resolutions then). The icons were a compromise. And then desktop web stagnated under a "mobile-first" mandate from the top. (Since then, the mandate-du-jour has changed.) One of the great things about the newest GMail redesign is that there are settings around this -- you can make the padding narrower and you can change the UI to use text labels again.

brazzy 8y ago

The only intuitive user interface is the nipple, everything else is learned.

edejong 8y ago

Most of these icons would be much clearer if a dabble of colour and depth was added. All these flat design aficionados have only aesthetics in mind, not usability.

askvictor 8y ago

To everyone wanting text buttons, consider that a surprisingly large amount of the population has literacy problems (perhaps an email client isn't the best example for this, since you're using it to read and write words, but consider the general case). Icons are going to make their life easier (assuming there isn't room for icons+text all the time). This is an counter-point/trade-off to vision-impaired accessibility where you need words everywhere. Icons are hard (to get right) in general. Do you stick with skeuomorphisms when half your user base know them well, but the other half have no idea what they mean (e.g. floppy disk to save)?

bo1024 8y ago
But if literate people don't get what the icons mean, why would less-literate people?
- askvictor 8y ago
  Maybe some people are more wordy, and some more visual? You'd be surprised at how people adapt to not being able to read - there is literature of children who 'fake' reading - they essentially memorise the shape of a thousand or so words (over the course of their school) so it appears they can read to some degree, but have no idea when they come across a word they haven't memorised.

jonathankoren 8y ago

I always hit Gmail’s in app “back” button when I want to reply. I honestly had to ask someone how to reply to an email in gmail.

cheapsteak 8y ago

People often make the mistake of thinking text and icons are two ways of doing the same thing Labels are good at telling you what things are, but finding specific frequently performed actions in a list of text that all look similar will yield frustration Icons (and especially icons with colour, or icons plus colour) are good at allowing you to quickly find something you're already looking for, but expecting icons to perform the job of labels to provide initial information will yield confusion

testplzignore 8y ago

> This means move, but even since Windows 95 days it was clear nobody is going to come up with a good metaphor for move. Nobody did. Why not a cow? Everyone knows cows go mooooooo-ve :)

rbrcurtis 8y ago
Change approved.
dingaling 8y ago
Comment est-ce que je peux déplacer cet e-mail ci? Il faut appuyer la vâche? Pourquoi? I realise you were only joking but it does illustrate why i8n icons are difficult.

sgustard 8y ago

What's the implication of this article? Is it that Google did not do user testing? Or they did user testing and found the icons work fine? Or they know labels work better, but intentionally chose to use icons anyway? "I don't like X and it's obvious that Y would be better" is a fun topic, but I'm not so sure why people are so quick to accept an anecdote as gospel.

pkamb 8y ago

The icon that gets me is the "paperclip" for Attach vs. the "chain link" icon for Hyperlink. Two icons in the toolbar, both small rounded metal loops. I have to hover for the tooltip every time.

craftyguy 8y ago

I don't have this problem in mutt

V-2 8y ago

Gmail isn't the only service guilty of that. Here's an icon from the Outlook web mail app: https://ibb.co/ic66Qd https://ibb.co/ic66Qd What does it mean?

kup0 8y ago

Once I learned that I could switch to text labels in Gmail, I can never go back. Even though I've learned the icons, I am still more productive with text labels instead. Even knowing the icons' meanings, my brain has to pause a second to think about what they do.