Gmail Icons are Hard

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

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

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.

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).<p>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&#x27;t take that much screen real estate.<p>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&#x27;t use. Next icon is a globe which is for opening the web ui. All I want to do is revert a file!).

I think this article misses a couple important points when it comes to UI AND UX.<p>I&#x27;d argue that an important element of UI is discoverability. Yes, a &quot;A box with downward arrow&quot; 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 &quot;All&quot;, &quot;None&quot;, &quot;Read&quot;, &quot;Unread&quot; and &quot;Starred&quot;[0]. Clicking on one of those items selects only those items. Given that interaction, can anyone here say they still don&#x27;t understand what it does? My one criticism is that selecting something like &quot;stared&quot; doesn&#x27;t filter down to only those items too, so you can now select things that aren&#x27;t on the page of items you&#x27;re currently seeing.<p>Apple&#x27;s original iOS did not convey a sense of &quot;immediate understanding&quot; that this article demands, but rather focused on discoverability. That is the same mentality that went into make this UI&#x2F;UX. My point is you can&#x27;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.<p>Also, following this posts advice:<p>&gt; Luckily, this menu can be switched to text labels in Settings.<p>And changing to text button labels[1] doesn&#x27;t even change that first icon[2], so I&#x27;m not sure that post is really for any other purpose than creating material for some echo chamber.<p>[0] <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;D8CogSS.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;D8CogSS.png</a><p>[1] <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;jOaTKDs.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;jOaTKDs.png</a><p>[2] <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;tkhSoom.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;tkhSoom.png</a>

There should be a Hacker News &quot;Challenge HN:&quot; post, where you complain (point out) about some broken system and you challenge other people&#x2F;developers&#x2F;designers to do better.<p>Challenge HN: Improve Gmail Icons

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.<p>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:<p>&gt; - Ok, clock now. This is universally undestood sign that could mean literally _anything_. What time is it?<p>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.<p>&gt; - Right-pointing rectangle? This looks most like road sign pointing to some place, but actually means TAG. Huh?<p>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.

I feel sorry for the designers that had to work on the redesign that introduced these icons in the first place.<p>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&#x2F;touchscreens, with one glorious responsive UI for desktop and mobile. They discovered that labels didn&#x27;t fit inside the &quot;safe area&quot; for certain languages, like German (and monitors had lower resolutions then). The icons were a compromise.<p>And then desktop web stagnated under a &quot;mobile-first&quot; mandate from the top. (Since then, the mandate-du-jour has changed.)<p>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.

The problem is not that icons are not self-describing (diskette save icon does not describe &quot;save&quot; operation either), but that these icons look like indistinguishable grey circles until you start to focus attention to them.<p>The same applies to iOS and Android application icons, despite they have vibrant colors. I always can&#x27;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.

I have a severe distaste for icons. Look at HN, there&#x27;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&#x27;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.

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

First thing I do is switch to text labels. Icons are proven to be harder to recognize.<p>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.

Maybe I&#x27;m crazy, but I think those icons do a pretty good job...

Under Settings -&gt; General<p>select Button Labels: Text<p>Life is too short.

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&#x27;s private language.

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

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

I&#x27;ve been using basic HTML Gmail since the new one came out. <a href="https:&#x2F;&#x2F;support.google.com&#x2F;mail&#x2F;answer&#x2F;15049?hl=en" rel="nofollow">https:&#x2F;&#x2F;support.google.com&#x2F;mail&#x2F;answer&#x2F;15049?hl=en</a> Works great with vim-like browsers and has no icons, just text.

I have a hard time designing the UI on <a href="https:&#x2F;&#x2F;editfight.com" rel="nofollow">https:&#x2F;&#x2F;editfight.com</a> 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.

Reminds me a bit of this toolbar in Google Sheets. The last option is not underline (it&#x27;s text color). Always trips me up.<p><a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;7w1NwvO" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;7w1NwvO</a>

Oh yeah!<p>I remember I was looking for a &quot;mark as unread&quot; 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.

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

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 &quot;What&#x27;s this?&quot; question mark button Windows used to have.

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

Wow, I have the opposite experience, but I&#x27;m pretty accustomed to GMail and it&#x27;s icons.<p>Up until this moment I&#x27;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 <i>old</i> 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).<p>The icons are much easier (for me) to decipher <i>upon quick glance</i>, once I know their meanings. The text requires me to actually read the buttons before clicking, which is slower if I&#x27;m not doing it repetitively (like tagging&#x2F;archiving a weeks worth of emails on a Friday).<p>That said, I&#x27;ll <i>always</i> prefer a combination of icons and labels.

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

To everyone wanting text buttons, consider that a surprisingly large amount of the population has literacy problems (perhaps an email client isn&#x27;t the best example for this, since you&#x27;re using it to read and write words, but consider the general case). Icons are going to make their life easier (assuming there isn&#x27;t room for icons+text all the time). This is an counter-point&#x2F;trade-off to vision-impaired accessibility where you need words everywhere.<p>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)?

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.<p>You can’t make an icon that is naturally unambiguous to everyone, everywhere.

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

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

People often make the mistake of thinking text and icons are two ways of doing the same thing<p>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<p>Icons (and especially icons with colour, or icons plus colour) are good at allowing you to quickly find something you&#x27;re already looking for, but expecting icons to perform the job of labels to provide initial information will yield confusion

&gt; 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.<p>Why not a cow? Everyone knows cows go mooooooo-ve :)

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.

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

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

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

This website reminded of littlebigdetails[0] when it comes to analysing user interfaces. The difference is that the latter points out what&#x27;s good about them.<p>[0] <a href="http:&#x2F;&#x2F;littlebigdetails.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;littlebigdetails.com&#x2F;</a>

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

Gmail isn&#x27;t the only service guilty of that.<p>Here&#x27;s an icon from the Outlook web mail app: <a href="https:&#x2F;&#x2F;ibb.co&#x2F;ic66Qd" rel="nofollow">https:&#x2F;&#x2F;ibb.co&#x2F;ic66Qd</a><p>What does it mean?

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

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

I don&#x27;t have this problem in mutt

REALLY HARD

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

Why does the bottom of the page say &quot;All fights retarded&quot; ?<p>wtf?? Totally unnecessary.

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?

Their product managers and designers spent too much of their &quot;clutter budget&quot; 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.