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.
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"
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).
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.
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!).
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.
On some repositories I visit[0], it defaults to being shrunk. I didn't even recognize that the column of icons was supposed to be a menu. It took me over a half hour to figure out how to submit a pull request when I wanted to make a contribution. (I don't mean the time to figure out their code or build system. I mean the time spent clicking through the site after I had a branch ready.)
To be fair, some of the graph icons make at least some sense, if you see the nodes as Git commits (three node graph - diverging commits - new branch, two node digraph - combining commits - merging - pull request).
This reminds me of a t-shirt I got at some Atlassian event a few years ago. It says "You </> me" and I haven't the slightest clue what that means, but it looks cool.
Dropbox is a nightmare of icons. And they also "politicize" the icons by putting the Paper icon first. I'm sure their A/B testing is showing that everyone loves paper and uses more than any other feature. I've clicked on dozens of times in error and never found a use for it since I rarely interact with dropbox through the website.
It's gone now, but remember the rainbow icon? That's how you got to recent file changes (not notifications). Even worse they removed that icon and the functionality entirely (seeing recent file changes across your entire dropbox in one place). I used it daily when I would accidentally move a dropbox folder or fat finger something else I needed to quickly revert.
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.
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.
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.
> 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.
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.
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.
Gmail, arguably, has the largest share of email users. When companies as large as Google do redesign, other people tend to blindly copy their design decisions. And the design choices such companies make are often bad/wrong/suboptimal etc.
It actually makes perfect sense to criticise Google's design because 1) they are a multibillion dollar company who apparently can't even invest in a product designer, and 2) they are highly visible and other projects (especially open source ones) will gladly adopt the same approaches. Just look at the incomprehensible mess that is Material design.
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.)
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.
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.
This isn't a mock-up or hypothetical, it's an officially supported setting in Gmail. They have text labels in all the languages they support, you just have to turn them on.
Also, challenges like this might be a good way to surface existing projects which are trying to attack some broken system or problem, but don't (yet) have a lot of attention or traction.
Sometimes what we need is to not invent an entirely new solution, but to iterate on or fork an existing one.
I sorta feel like you could even remove "More" button here without losing too much. Reply box would be at the bottom of a message, just like it is currently. More buttons could be added for users who actually use this functionality (for instance, if you have categories defined, a button to move would appear).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
All the ambiguity of body language with none of the advantages of context. I'm not the first and surely not the last person to confuse crying-tears-of-mirth with crying-tears-of-sadness. And what am I to make of an aubergine or a bicycle?
"The street finds its own uses for things." -- William Gibson, Burning Chrome, 1982
I'd be curious to know if she worked this "trick" out on her own, or if there's hidden shared knowledge out there where she learned this from her peers?
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.
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."
> 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."
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.
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.
- 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.
> 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.
> 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.
But it still falls into skeuomorphism. How many people are familiar with the traditional alarm clock with a bell? My daughter is, but only because I took her phone away as a punishment, and the cheap alarm clock she picked out to wake up in the morning happened to be the traditional design.
Sure, but it doesn’t have anything to do with bell-equipped clocks being called “alarm clocks”, “notification clocks” or “wake-up clocks”.
Edit: The association is ringing bell <=> notification/wakeup, not about alarms/danger. I think a siren light icon would be used for that. Which is also an interesting case study on shift of meaning as sirens were originally about sound (and songs) and not a warning signal but a danger themselves.
We're getting into territory that is far enough in the past that I'm unsure of the origination or prior common uses. That is sort of the point though, many of these icons are linked to things conceptually and visually which themselves came about from visual or conceptual links, but are at this point mostly obsoleted. That, along with the spread of those concepts into neighboring concepts, leads to a lot of baggage and ambiguity when using images that link to these concepts visually.
I think, given the choice of using an icon of an alarm clock or bell or even just a round faced clock[1], or creating some new image that we can try to standardize on, we'll be better off eventually if we choose the latter.
1: This one might be particularly troublesome in the future. Rounds faced clocks aren't exactly rare, but they are getting less common every year. In the future using it might be akin to using a representation of an abacus to represent a calculator. If people think that's ridiculous, consider that my parents used an abacus in high school, so it's not that far removed...
Read: All the icons that I'm familiar with make sense to me.
I don't mean this in jest. I feel the same way about some of the icons, and I can figure out what the rest are via tooltips, but they are sure as hell confusing if it's your first time using GMail.
I don’t use GMail. Clock is time-related, so I guessed this icon is for “save for later”. Right-pointing rectangle? I would guess it is for moving mails between folders.
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.
They're supposed to be the old-school paper tags with a hole in the narrow end [0].
These tags, like floppy's and manila folders, will live on in our iconography even as someone born this decade is unlikely ever encounter the real thing. I was recently amused to explain to my kid what the dialer icon on the iPhone is: "well, a long, long time ago (it's getting close to 20 years now since the Nokia 3310 sold over a 100 million units and we got rid of our landline) we used to have stationary phones in our homes and you would talk into a wired handset that looked like this icon".
> someone born this decade is unlikely ever encounter the real thing
UX design used to reach further back than current decade. Even in the ancient days of early Windows, not many people had had first-hand experience using an hourglass anymore ;)
>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.
To me a clock in this context means I can schedule an e-mail message to be sent later. If I want a reminder, I'll use a reminders or to do app, not an e-mail client.
> 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.
Others have already pointed out that this is not the origin of the tag association. I'd also add that pointy-ended "recto-triangles" aren't really the archetype of a sticky note (a yellow Post-it is), and for a lot of people, there's a good chance they never ever seen a fancy one like that, unless they spend way too much time exploring office supplies stores.
I have a hard time designing the UI on 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.
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).
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 :)
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.
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.
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.
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.
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.
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.
"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."
Well, Inbox shares quite a few of these obscure icons (like the "stop sign with exclamation mark" icon for spam), only they captioned them.
So as an Inbox user you've basically seen the cheat sheet quite a few times. This sort of invalidates your test imho.
I'm afraid to click buttons in mobile apps and web pages now. At one point, there was a standardized method, known as "Undo", to assure the user that the changes they're making can be reverted, but at some point along the way we ditched that concept. It's especially worse on mobile where tooltips don't exist, and I have to just have to tap randomly on an icon that looks vaguely like what I want, and pray that I'm doing the right thing.
If I'm lucky, there will be a limited-time Undo button after doing the action (GMail has this on some actions but not others!), but if I hesitate too long or accidentally click on anything but it, it goes away permanently. I'm sure I've lost some important email to the depth of time because of a few fatfinger mistaps.
The other thing missing in mobile is the hover event which would bring up a tooltip. Maybe future advanced screens will recognize a literal hover over the button as a trigger for a tooltip, or we'll get an annotate mode for the icons.
I feel like 3D touch is all the hardware you need... it just isn't used that way.
A 'peek' already provides a preview of an item -- it just isn't used for action buttons. 'Peeking' into the name and description of an icon would be a fairly straightforward extension of the idea.
How common was undo really? I don't remember undo functionality being anywhere except in content editor applications like word processors, and that's still the case today.
What isn't a content editor application? Word has it. Paint has it. Outlook has it. Windows Explorer (the file manager) has it. It's universal across Windows and Mac OSes and as universal as anything can be on linux.
Well, anything that isn't a text/content editor (or a file system manager, which I had forgotten to mention), so basically the vast majority of computer usage. Settings in applications, navigation state of applications, state of the OS/window manager itself (I'm not aware of a desktop environment where moving or closing a window or application supports an undo feature), etc. Web browsers and most file managers do support back and forward navigation, if you want to count that as "undo."
The comment I was initially replying to talked about being afraid to press buttons in modern UIs because of the lack of undo. My claim is that, except for buttons that change formatting in text/content editors or buttons that make changes in some file system managers, undo functionality has really never existed to my knowledge.
> Web browsers (...) do support back and forward navigation, if you want to count that as "undo."
Not in practice, as this feature is universally broken by modern web developers, making it totally unreliable.
You have a good point about undo - it was universally a feature for reverting operations on edited data, not on application state itself. But then again, it was compensated by buttons having reliable tooltips, and most options available in textual menus.
Except undoing "Archive" is a feature that gmail has had for as long as I remember, and it is exposed to you by an immediate notification after you have archived it.
What I am less confident of is what happens when that notification goes away.
>I'd argue that an important element of UI is discoverability
The whole point of icons is that you don't need to "discover" what they do. They're supposed to be intuitive.
To me an arrow pointing down means "download," not "select all."
If you can't convey your meaning inside a 16x16px monochrome block, then perhaps that's not the best choice for the task at hand.
Time to innovate.
Also, Google's choice to deviate from every other mobile menu icon on the planet (the hamburger menu) is a sign of hubris, not an effort to help the customer.
I still remember once upon a time ome could long press icons/buttons and the hover text would appear. But oh well, it seems we are too far ahead in the future now.
> No icon anywhere is intuitive. They're all learned.
Absolutely not true.
The word "icon" originated with religious artwork and was used to tell stories to the people at a time when 99% of the population was illiterate.
Governments spend millions of dollars on research to design important icons that will be completely intuitive for hundreds or thousands of years. Things like the radioactive trefoil, or the biohazard sign. (Google it, there's lots of articles about this.)
Nobody wants to tell some future human, "Oh, sorry you sank into a 4,000-year-old pool of radioactive sludge and died. You should have "learned" it was dangerous ahead of time. At least you "discovered" what it means, now that you're dead."
Eh, I’d say most Christian icons are not at all understandable without learning. After all, they’re mostly just portraits of people (Jesus, Mary, saints, etc.) looking at the camera, rather than depicting any particular event in their lives, let alone trying to provide a broader explanation of why they’re important or worth venerating. Apparently there was an elaborate system of symbolism, especially in the Eastern Orthodox tradition, with everything from specific colors of clothing to hand gestures having various meanings – but you have to already know those meanings in order to understand the symbols.
Then you certainly know more about religious iconography than I do. Nevertheless, if you're going to make a claim as extreme as saying that iconography doesn't (in the majority of cases, to a large extent) require prior understanding, you'd do better to make some sort of argument or cite some sort of evidence rather than merely asserting authority.
However, it may just be a misunderstanding. The quote that you said was "absolutely not true" had two statements:
> No icon anywhere is intuitive. They're all learned.
I'm not saying that symbols, found in religious icons or elsewhere, can't be "intuitive", in the sense that there's some underlying logic or they're otherwise easier to understand than a set of symbols picked at random. (That said, many of them, like the aforementioned Eastern Orthodox clothing colors, do seem fully arbitrary.) I'm just saying that they're also "learned", i.e. you can't (fully) make sense of them without prior understanding.
By the way, your mention of radioactivity reminds me of the US government's attempt to design markers for nuclear waste sites which can be understood many thousands of years into the future, without a common language – e.g. as described in this article:
This is an interesting problem precisely because it is hard to unambiguously convey abstract concepts using iconography without context – even a concept as simple as "this place is dangerous". Thus, the proposals end up being rather complex.
The icons are used as elements to tell stories, because people already learned what the icons mean. No one intuitively knows that Jesus Christ is our Lord and Savior.
> millions of dollars on research to design important icons that will be completely intuitive for hundreds or thousands of years.
> Nobody wants to tell some future human, "Oh, sorry you sank into a 4,000-year-old pool of radioactive sludge and died. You should have "learned" it was dangerous ahead of time. At least you "discovered" what it means, now that you're dead."
Of course not. They tell some future human: "I'm glad you stayed out of that pool. It's great that you learned what the skull+crossbones
icon meant during your childhoold."
Here's Charles Baldwin [involved in developing the biohazard symbol] telling you the goals of the project:
> We wanted something that was memorable but meaningless, so we could educate people as to what it means.
And all the research into the latter problem? There'd be a whole lot less of it if the biohazard icon were intuitive.
Instead, in the context of the US Waste Isolation Pilot Plant, we have ideas like a scary looking 'Landscape of thorns' being shut down because interesting looking places could become tourist attractions, the idea of starting a religious tradition around the area being seriously considered, and the conclusion that, ultimately, there's no good solution.
I would argue they most of those are only intuitive from long use, and were no more obvious than three bars when introduced (though they were easy to learn and quicker to recognize than text, just like the menu convention.)
In a few years, three bars will be just as intuitive to most users, and probably be the intuitive icon we use as a reference when complaining that the icon to switch on ranged machine-brain interaction instead of touch interface isn't as intuitive as established iconography.
Cut is a really terrible example though, because the entire naming of the 'cut' operation isn't intuitive. "Cut" is really "relocate-object-action-first-half" and "paste" is really "relocate-object-action-second-half". We don't have good words for that. The entire relocation object involves program state and that adds some extra complexity.
Cut has a whole heap of connotations that don't relate to the editing "cut" operation. Google suggests incision, wound, to separate into parts, "remove (something) from something larger by using a sharp implement". Editing cut doesn't do any of this.
There is a very specific link in that relocating text /could be/ thought of as snipping it off a page and pasting it somewhere else, except no-one would ever do that when writing seriously. They erase and rewrite.
So the scissors icon links to the word cut, but cut itself is actually a mystery-meat operation where figuring it out is hard for users that aren't already savvy with interfaces. By extension, the scissors icon has no link to the actual operation that the button performs.
Cut and Paste is really the same as cutting out a shape in construction paper and pasting it elsewhere. Its gone from its original location and can be put in a new one. The only place the metaphor fails is that you can paste multiple times.
In image programs there is literally a white gap where to object was. Word processors would redo line breaks and hide the original location.
The first Windows I used, 3.11, had a built-in tutorial explaining all the weird stuff, including helping you become comfortable with using your mouse.
I miss the days when software people cared about built-in user guides.
Those are all icons that seem intuitive because they're consistently used for that for about as long as you're alive. They're all metaphors for what office workers in 60s-80s did. If you worked in a corporate office then, you might have had a shot at guessing the meaning correctly. Otherwise, they're just as arbitrary as hamburger menus.
> Copyboard for paste.
I don't even know what on Earth is a "copyboard". Is this some arcane tool from early XX-century newspaper office?
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 :-)
For those too lazy to fetch everything to local (like me), the same shortcuts are available in the web interface as well. Pressing '?' pops up a full list of options.
231 comments
[ 3.5 ms ] story [ 216 ms ] threadIf there was a functional advantage of the icons that would be great. But I'm guessing it was chosen just to "look prettier".
https://support.google.com/mail/answer/2473038?hl=en&authuse...
> Two envelopes in a stack means 'mark as read'
from this article. I had no idea what it did before.
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!).
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
Here it is shrunk (not default): https://i.imgur.com/liRIiHG.png (left) https://i.imgur.com/zTOooiS.png (right)
Expanded: https://i.imgur.com/zj9P8d4.png (left) https://i.imgur.com/Fv2irRH.png (right)
I don't think I've ever shrunk that panel since I didn't even know how to do that, so I would think that the shrunk version is the default.
Happy to have helped in some way :laughing:
[0] https://hub.spigotmc.org/stash/projects/SPIGOT/repos/craftbu.... I think they might be using their own hosted / reconfigured version of BitBucket, so maybe this isn't 100% on BitBucket?
I'll wear it loud and proud at the cafe that's always got Atlassian devs in it round the block from here...
It's gone now, but remember the rainbow icon? That's how you got to recent file changes (not notifications). Even worse they removed that icon and the functionality entirely (seeing recent file changes across your entire dropbox in one place). I used it daily when I would accidentally move a dropbox folder or fat finger something else I needed to quickly revert.
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.
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.
Graphic designers and information architects aren't using vim. In fact, vim suffers from the same lack of transparency/discoverability as these icons do.
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.
[1]not fun
It actually makes perfect sense to criticise Google's design because 1) they are a multibillion dollar company who apparently can't even invest in a product designer, and 2) they are highly visible and other projects (especially open source ones) will gladly adopt the same approaches. Just look at the incomprehensible mess that is Material design.
Companies spend too much on designers.
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.)
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.
Challenge HN: Improve Gmail Icons
https://en.wikipedia.org/wiki/Gmail#Language_support
Also, challenges like this might be a good way to surface existing projects which are trying to attack some broken system or problem, but don't (yet) have a lot of attention or traction.
Sometimes what we need is to not invent an entirely new solution, but to iterate on or fork an existing one.
Text buttons. Done.
I sorta feel like you could even remove "More" button here without losing too much. Reply box would be at the bottom of a message, just like it is currently. More buttons could be added for users who actually use this functionality (for instance, if you have categories defined, a button to move would appear).
select Button Labels: Text
Life is too short.
https://medium.com/envato/brutalism-the-ugly-web-design-tren...
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.
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.
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.
I mean it's not like anyone ever met an arrogant Googler, right?
I'd be curious to know if she worked this "trick" out on her own, or if there's hidden shared knowledge out there where she learned this from her peers?
Anyway, English invents new words or new meanings all the time. 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."
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."
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.
- 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.
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.
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.
In that case we would still use bell icons. Because the bell would be still associated with the "notification clock" or the "wake-up clock".
Edit: The association is ringing bell <=> notification/wakeup, not about alarms/danger. I think a siren light icon would be used for that. Which is also an interesting case study on shift of meaning as sirens were originally about sound (and songs) and not a warning signal but a danger themselves.
I think, given the choice of using an icon of an alarm clock or bell or even just a round faced clock[1], or creating some new image that we can try to standardize on, we'll be better off eventually if we choose the latter.
1: This one might be particularly troublesome in the future. Rounds faced clocks aren't exactly rare, but they are getting less common every year. In the future using it might be akin to using a representation of an abacus to represent a calculator. If people think that's ridiculous, consider that my parents used an abacus in high school, so it's not that far removed...
I have lots of bells -- on my door and in my phone, for example. I have no idea what they look like, though.
isn't the liberty bell in philly?
I don't mean this in jest. I feel the same way about some of the icons, and I can figure out what the rest are via tooltips, but they are sure as hell confusing if it's your first time using GMail.
They're supposed to be the old-school paper tags with a hole in the narrow end [0].
These tags, like floppy's and manila folders, will live on in our iconography even as someone born this decade is unlikely ever encounter the real thing. I was recently amused to explain to my kid what the dialer icon on the iPhone is: "well, a long, long time ago (it's getting close to 20 years now since the Nokia 3310 sold over a 100 million units and we got rid of our landline) we used to have stationary phones in our homes and you would talk into a wired handset that looked like this icon".
[0] https://www.amazon.com/Martha-Stewart-Crafts-Kraft-Tags/dp/B...
UX design used to reach further back than current decade. Even in the ancient days of early Windows, not many people had had first-hand experience using an hourglass anymore ;)
To me a clock in this context means I can schedule an e-mail message to be sent later. If I want a reminder, I'll use a reminders or to do app, not an e-mail client.
Others have already pointed out that this is not the origin of the tag association. I'd also add that pointy-ended "recto-triangles" aren't really the archetype of a sticky note (a yellow Post-it is), and for a lot of people, there's a good chance they never ever seen a fancy one like that, unless they spend way too much time exploring office supplies stores.
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.
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
[1] https://i.imgur.com/jOaTKDs.png
[2] https://i.imgur.com/tkhSoom.png
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.
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.
Well, Inbox shares quite a few of these obscure icons (like the "stop sign with exclamation mark" icon for spam), only they captioned them.
So as an Inbox user you've basically seen the cheat sheet quite a few times. This sort of invalidates your test imho.
If I'm lucky, there will be a limited-time Undo button after doing the action (GMail has this on some actions but not others!), but if I hesitate too long or accidentally click on anything but it, it goes away permanently. I'm sure I've lost some important email to the depth of time because of a few fatfinger mistaps.
A 'peek' already provides a preview of an item -- it just isn't used for action buttons. 'Peeking' into the name and description of an icon would be a fairly straightforward extension of the idea.
It just... isn't used that way.
iPhone implemented shake to undo back with iPhone 3.0
https://en.wikipedia.org/wiki/Undo
http://osxdaily.com/2009/08/21/undo-button-iphone-shaking-mo...
Well, anything that isn't a text/content editor (or a file system manager, which I had forgotten to mention), so basically the vast majority of computer usage. Settings in applications, navigation state of applications, state of the OS/window manager itself (I'm not aware of a desktop environment where moving or closing a window or application supports an undo feature), etc. Web browsers and most file managers do support back and forward navigation, if you want to count that as "undo."
The comment I was initially replying to talked about being afraid to press buttons in modern UIs because of the lack of undo. My claim is that, except for buttons that change formatting in text/content editors or buttons that make changes in some file system managers, undo functionality has really never existed to my knowledge.
Not in practice, as this feature is universally broken by modern web developers, making it totally unreliable.
You have a good point about undo - it was universally a feature for reverting operations on edited data, not on application state itself. But then again, it was compensated by buttons having reliable tooltips, and most options available in textual menus.
Firefox's tab history seems quite deep, I can CTRL-SHIFT-T many times.
Of course you can Undo something like Archiving a message. That's the Mac way, since 1984.
But after a decade of using gmail, it's not even something I would think to do.
What I am less confident of is what happens when that notification goes away.
In the real world we shakes things to mix them up, not to revert to a previous state i.e. shaking increases entropy.
I wonder who at Apple decided otherwise and why. Perhaps someone with a doctorate in cosmology who is fighting against heat-death.
The whole point of icons is that you don't need to "discover" what they do. They're supposed to be intuitive.
To me an arrow pointing down means "download," not "select all."
If you can't convey your meaning inside a 16x16px monochrome block, then perhaps that's not the best choice for the task at hand.
Time to innovate.
Also, Google's choice to deviate from every other mobile menu icon on the planet (the hamburger menu) is a sign of hubris, not an effort to help the customer.
Once you've hovered over the icon and learned its meaning then you can recognize it by the picture.
Absolutely not true.
The word "icon" originated with religious artwork and was used to tell stories to the people at a time when 99% of the population was illiterate.
Governments spend millions of dollars on research to design important icons that will be completely intuitive for hundreds or thousands of years. Things like the radioactive trefoil, or the biohazard sign. (Google it, there's lots of articles about this.)
Nobody wants to tell some future human, "Oh, sorry you sank into a 4,000-year-old pool of radioactive sludge and died. You should have "learned" it was dangerous ahead of time. At least you "discovered" what it means, now that you're dead."
...and you'd be wrong. Both my college art and history classes touched on this.
Take it as a learning opportunity.
However, it may just be a misunderstanding. The quote that you said was "absolutely not true" had two statements:
> No icon anywhere is intuitive. They're all learned.
I'm not saying that symbols, found in religious icons or elsewhere, can't be "intuitive", in the sense that there's some underlying logic or they're otherwise easier to understand than a set of symbols picked at random. (That said, many of them, like the aforementioned Eastern Orthodox clothing colors, do seem fully arbitrary.) I'm just saying that they're also "learned", i.e. you can't (fully) make sense of them without prior understanding.
By the way, your mention of radioactivity reminds me of the US government's attempt to design markers for nuclear waste sites which can be understood many thousands of years into the future, without a common language – e.g. as described in this article:
https://www.ft.com/content/db87c16c-4947-11e6-b387-64ab0a670...
This is an interesting problem precisely because it is hard to unambiguously convey abstract concepts using iconography without context – even a concept as simple as "this place is dangerous". Thus, the proposals end up being rather complex.
> millions of dollars on research to design important icons that will be completely intuitive for hundreds or thousands of years.
And the results of that research is that conclusion that such icons are impossible to create. https://99percentinvisible.org/episode/ten-thousand-years/
> Nobody wants to tell some future human, "Oh, sorry you sank into a 4,000-year-old pool of radioactive sludge and died. You should have "learned" it was dangerous ahead of time. At least you "discovered" what it means, now that you're dead."
Of course not. They tell some future human: "I'm glad you stayed out of that pool. It's great that you learned what the skull+crossbones icon meant during your childhoold."
Here's Charles Baldwin [involved in developing the biohazard symbol] telling you the goals of the project:
> We wanted something that was memorable but meaningless, so we could educate people as to what it means.
And all the research into the latter problem? There'd be a whole lot less of it if the biohazard icon were intuitive.
Instead, in the context of the US Waste Isolation Pilot Plant, we have ideas like a scary looking 'Landscape of thorns' being shut down because interesting looking places could become tourist attractions, the idea of starting a religious tradition around the area being seriously considered, and the conclusion that, ultimately, there's no good solution.
Underline anywhere.
Paragraph justification.
Copyboard for paste.
Fill bucket for fill.
These are intuitive for most people for whom they were targeted.
Three bars for a menu is not intuitive.
In a few years, three bars will be just as intuitive to most users, and probably be the intuitive icon we use as a reference when complaining that the icon to switch on ranged machine-brain interaction instead of touch interface isn't as intuitive as established iconography.
Cut has a whole heap of connotations that don't relate to the editing "cut" operation. Google suggests incision, wound, to separate into parts, "remove (something) from something larger by using a sharp implement". Editing cut doesn't do any of this.
There is a very specific link in that relocating text /could be/ thought of as snipping it off a page and pasting it somewhere else, except no-one would ever do that when writing seriously. They erase and rewrite.
So the scissors icon links to the word cut, but cut itself is actually a mystery-meat operation where figuring it out is hard for users that aren't already savvy with interfaces. By extension, the scissors icon has no link to the actual operation that the button performs.
In image programs there is literally a white gap where to object was. Word processors would redo line breaks and hide the original location.
I miss the days when software people cared about built-in user guides.
> Copyboard for paste.
I don't even know what on Earth is a "copyboard". Is this some arcane tool from early XX-century newspaper office?
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.
- HN
- mbsync
- IMAP
- emacs/vim
- mu4e/notmuch/gnus