Gmail Icons are Hard(grumpy.website)
grumpy.website
Gmail Icons are Hard
https://grumpy.website/post/0Px1O7Ukl
231 comments
I do speak pictogram, but only the ones with previously established meanings. Bathroom sign? No problem. Box with a down arrow, no. But I do know Apple's "bankers box" icon for archive. Having seen actual boxes like that for archiving old papers, combined with having used Mail for years, it makes sense to me.
That first part though, where I know what a bankers box is used for, really helps make the icon connect. I think this is important, but at the same time, it's difficult because it's not universal. The "floppy disk" save icon has already turned into an arbitrary symbol for younger generations, and I expect the bankers box is well on its way (if not there already). Maybe FBI evidence rooms in TV shows will help it hold out.
Floppy disk has an advantage because at least it's consistent across a ton of software. If you make up an icon and use it in one interface and then redesign that interface again in 4 years, you have a much harder time getting people to attach meaning to it consistently.
It's the visual equivalent of a text button with "Mloroab" on it. Yeah I speak English, but I don't know what that does.
That first part though, where I know what a bankers box is used for, really helps make the icon connect. I think this is important, but at the same time, it's difficult because it's not universal. The "floppy disk" save icon has already turned into an arbitrary symbol for younger generations, and I expect the bankers box is well on its way (if not there already). Maybe FBI evidence rooms in TV shows will help it hold out.
Floppy disk has an advantage because at least it's consistent across a ton of software. If you make up an icon and use it in one interface and then redesign that interface again in 4 years, you have a much harder time getting people to attach meaning to it consistently.
It's the visual equivalent of a text button with "Mloroab" on it. Yeah I speak English, but I don't know what that does.
Except they haven't used it in one product and a redesign. That is the standard archive icon on Android where it is used by a multitude of apps and millions of people daily.
Ah I haven't been on Android for a couple of years so I wasn't familiar with it. Having said that, I still think Apple's version is a clearer design.
I feel like there are a lot of really solid, user-focused features that windows phone nailed, that now seem basically lost
Yep, like all the actions at the bottom of the screen where you could most easily reach them, unlike iOS which places the back button (gesture notwithstanding) at the top left!
One of the Windows Phone's designers had a really insightful article [1] about how they designed windows phone fundamentally for a technology native who doesn't need shitty metaphorical leather textures on his glass screen calendar. It is where the famous movement against skeumorphism started (and thank god for that!). WP was doing flat design before it was cool.
On an old MSDN post (maybe?) I remember reading that the inspiration for the Live Tiles was a user whose central interest was to use the phone as liitle as possible to do his task as quickly as he could before he rapidly replaced the phone back into his pocket to get on with real life. I remember creating a new calendar entry in WP7 took three taps from start to finish, not counting typing out the title. There weren't many other fields to fill besides the Title of the entry and the time/date, and it set a default reminder time of 15 minutes before start time. Perfection. Before facebook and the rest dragged the carpet out from under them, you could get your twitter and facebook feed within the contacts app so you could get it all in one place.
Edited to add: I'm on a bit of a love fest venting session so here's more. WP designers recognized that OLEDs were amazing, so they made the phone White Text on Black from the get go! Thus, great battery life. Further, all the icons were also uniformly coloured, making the whole experience so cohesive. All the apps also looked like all the others, so the learning curve was nonexistent. They recognized how little juice engineers of android could suck out of their bloated multi core processors, so they made their phones work phenomenally well on even shitty, single core processors.
I fucking loved windows phone's early verions. It's a shame they've gone away. But an even bigger shame that they had no confidence in their original designers, and ended up adapting the hideous, appalling, atrocious, fucking retarded hamburger menu before they went away.
[1] http://kruzeniski.com/how-print-design-is-the-future-of-inte...
One of the Windows Phone's designers had a really insightful article [1] about how they designed windows phone fundamentally for a technology native who doesn't need shitty metaphorical leather textures on his glass screen calendar. It is where the famous movement against skeumorphism started (and thank god for that!). WP was doing flat design before it was cool.
On an old MSDN post (maybe?) I remember reading that the inspiration for the Live Tiles was a user whose central interest was to use the phone as liitle as possible to do his task as quickly as he could before he rapidly replaced the phone back into his pocket to get on with real life. I remember creating a new calendar entry in WP7 took three taps from start to finish, not counting typing out the title. There weren't many other fields to fill besides the Title of the entry and the time/date, and it set a default reminder time of 15 minutes before start time. Perfection. Before facebook and the rest dragged the carpet out from under them, you could get your twitter and facebook feed within the contacts app so you could get it all in one place.
Edited to add: I'm on a bit of a love fest venting session so here's more. WP designers recognized that OLEDs were amazing, so they made the phone White Text on Black from the get go! Thus, great battery life. Further, all the icons were also uniformly coloured, making the whole experience so cohesive. All the apps also looked like all the others, so the learning curve was nonexistent. They recognized how little juice engineers of android could suck out of their bloated multi core processors, so they made their phones work phenomenally well on even shitty, single core processors.
I fucking loved windows phone's early verions. It's a shame they've gone away. But an even bigger shame that they had no confidence in their original designers, and ended up adapting the hideous, appalling, atrocious, fucking retarded hamburger menu before they went away.
[1] http://kruzeniski.com/how-print-design-is-the-future-of-inte...
I loved how WP took the "keys" to design away from the apps. They created a very simple, restrictive design language and locked apps into it. You want color? It's a button. You want to put color on a non-button? Piss off. Colored rectangle = button.
So much flat design fails the "which things are a button" test, WP did it right.
That said, the OS had some flaws on a design level at the start:
Wasted column on the home screen just for the swipe arrow. No notification tray - only live tiles.
Over-restrictive icons made it often hard to tell icons apart. Yes, I get your great design, but pure monochrome silhouettes is a bit too restrictive for app-specific icons.
I loved the idea that a person has a home-screen - that's something that every OS should steal. If I open up a person, I should see every social share they've made, every interaction I've had with them, and every interaction I can start with them. Then I don't care how many messaging apps Google launches, because I don't need to have any messaging apps on my home screen, only my Contacts.
So much flat design fails the "which things are a button" test, WP did it right.
That said, the OS had some flaws on a design level at the start:
Wasted column on the home screen just for the swipe arrow. No notification tray - only live tiles.
Over-restrictive icons made it often hard to tell icons apart. Yes, I get your great design, but pure monochrome silhouettes is a bit too restrictive for app-specific icons.
I loved the idea that a person has a home-screen - that's something that every OS should steal. If I open up a person, I should see every social share they've made, every interaction I've had with them, and every interaction I can start with them. Then I don't care how many messaging apps Google launches, because I don't need to have any messaging apps on my home screen, only my Contacts.
> Yep, like all the actions at the bottom of the screen where you could most easily reach them, unlike iOS which places the back button (gesture notwithstanding) at the top left!
On early iPhones this was within the reach of the thumb. On later iPhones they introduced the swipe to solve the issue posed by larger screens.
On early iPhones this was within the reach of the thumb. On later iPhones they introduced the swipe to solve the issue posed by larger screens.
I also was a big fan of Windows Phone. It was a good OS and the live-tile interface was brilliant. Also agree the introduction of the hamburger menu was confusing and pointless in replacing something that worked.
I don't think MS had any confidence in anything they were doing over that time because they never seemed to properly commit to anything. Win Phone could have been bigger and competitive if they'd focused effort on it (marketing - and no not MS's standard marketing 'quality,' app dev funding, etc)
I don't think MS had any confidence in anything they were doing over that time because they never seemed to properly commit to anything. Win Phone could have been bigger and competitive if they'd focused effort on it (marketing - and no not MS's standard marketing 'quality,' app dev funding, etc)
Seriously. They should be launched like a gaming portable with the phone OS. An xbox branded Nokia answer to the Xperia play.
> WP was doing flat design before it was cool.
it was somewhat annoying to watch the community go religious on flat design when "Apple invented it"
it was somewhat annoying to watch the community go religious on flat design when "Apple invented it"
Hey, I thought Google invented flat! /s
Seriously though, Windows phones sucked for many reasons (including lack of exposed features in the OS, especially in first versions, and of course lack of apps in general), but UX wasn't one of them. I guess they failed in releasing too much of an MVP, and then not following through properly. I continue to claim that Microsoft had a great UX vision for mobile, and that they're the only one with an OS that can turn tablets from consumption devices into productive tools.
Seriously though, Windows phones sucked for many reasons (including lack of exposed features in the OS, especially in first versions, and of course lack of apps in general), but UX wasn't one of them. I guess they failed in releasing too much of an MVP, and then not following through properly. I continue to claim that Microsoft had a great UX vision for mobile, and that they're the only one with an OS that can turn tablets from consumption devices into productive tools.
Hah, it's funny - when iOS 8 came out I noticed that a lot of the screenshots were nearly indistinguishable from WP with the background switched to white.
I had an early Windows phone and loved it. It had crazy good battery life. It made common action super efficient. It got out of my way. It organized all my social media so, so well. Its autocomplete when typing was better than anything I've used to date (though, I hear it actually worsened over time). I miss that phone.
Seconding the keyboard: perfect spacing, pleasing fonts, fast animations and responsive feeling and hands down the best text prediction I’ve ever used: best suggestions, best balance between aggression and accuracy. You could write a word and have it return any matching emoji’s literally years before Android or iOS.
Cut copy paste was best on win phone.
I was interested to see what that looked like and found
Opening down: http://www.mobiletechworld.com/wordpress/wp-content/uploads/...
Opening up: http://i.stack.imgur.com/gZdjo.png
I like it
Opening down: http://www.mobiletechworld.com/wordpress/wp-content/uploads/...
Opening up: http://i.stack.imgur.com/gZdjo.png
I like it
BitBucket also hides labels by default: https://i.imgur.com/2OQxliT.png
One sorry soul at my work hadn't realised you can expand the sidebar to reveal the labels. Watching him trying to find everything was quite amusing
One sorry soul at my work hadn't realised you can expand the sidebar to reveal the labels. Watching him trying to find everything was quite amusing
Atlassian is the king of indecipherable symbols. My JIRA navigation strategies are:
- Hover over each symbol one-by-one until tooltip shows itself (sometimes takes multiple tries); or
- Google "how to find X in JIRA"
- Hover over each symbol one-by-one until tooltip shows itself (sometimes takes multiple tries); or
- Google "how to find X in JIRA"
I manage to come away feeling like an idiot every time I open JIRA. I just typed out a typical internal monologue while using it, and deleted it because I'm embarrassed by it.
My brain cannot tell the difference between the Jira and confluence favicons. I am forever clicking on the wrong browser tab.
Remember when they redesigned them to look more like each other? That was great.
It was really tremendous. Truly a Day among days.
I think the symbol that looks like a nut with the threaded hole off centre is the "Google how to find X in JIRA" icon.
(No, not the "Tests" icon, its got the hole slightly off centre to the left. Or the "Calendar" icon, its fo the hole slightly off centre to the upper left.)
(No, not the "Tests" icon, its got the hole slightly off centre to the left. Or the "Calendar" icon, its fo the hole slightly off centre to the upper left.)
Exactly. Human language invented by speakers actually communicating over critical issues (trade, war, sex) over thousands of years.
Don't trust a single set of new glyphs, cobbled together by designers, basically unilaterally compared to a huge marketplace of speakers, whose purpose is not necessarily to communicate, but sometimes, "to look good" or "match aesthetic" of the context.
Something developed without the same selective pressure cannot be trusted the same to be as effective.
Don't trust a single set of new glyphs, cobbled together by designers, basically unilaterally compared to a huge marketplace of speakers, whose purpose is not necessarily to communicate, but sometimes, "to look good" or "match aesthetic" of the context.
Something developed without the same selective pressure cannot be trusted the same to be as effective.
It really is frustrating using new software for work that has only icons with ~3 second hover delay of showing the action label.
Androids physical menu button let you get to all the options regardless of the app you were using. I really miss that.
You can implement something like this on web using Office UI Fabric[1].
[1]: https://developer.microsoft.com/en-us/fabric#/components/com...
[1]: https://developer.microsoft.com/en-us/fabric#/components/com...
But "..." is English (and multiple other languages), not an icon.
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
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
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...
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.
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...
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.
Holy shit that video is like the final form of the final boss of Mystery Meat Navigation.
...and now we have that horrible hamburger menu.
At least the standard "hamburger menu" opens a list of textually labeled options. That's better than icon-only toolbars.
And by the same argument, a traditional menu would be even better.
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/AALYMDHabuxLvLSKPlM6fMyCozTZysM2a...
https://www.evernote.com/l/AALYMDHabuxLvLSKPlM6fMyCozTZysM2a...
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.
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.
Only if your icons are bad. Otherwise this problem wouldn't exist.
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?
I mean it's not like anyone ever met an arrogant Googler, right?
Just curious, what do you think of emojis?
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?
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.
"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?
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?
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!).
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!).
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
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
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.
[deleted]
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).
Are there, at least, tooltips?
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 (left) https://i.imgur.com/zTOooiS.png (right)
Expanded: https://i.imgur.com/zj9P8d4.png (left) https://i.imgur.com/Fv2irRH.png (right)
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)
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.)
[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?
[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?
Holy crap, you just fixed bitbucket for me.
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.
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.
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.
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.
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.
There is an option to toggle it to text. I have been using it since the change.
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
[1] https://i.imgur.com/jOaTKDs.png
[2] https://i.imgur.com/tkhSoom.png
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'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.
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.
Sometimes you get lucky and the tooltip works on Android (tap and hold), but in my experience not terribly many apps support this.
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.
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.
It just... isn't used that way.
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.
> What isn't a content editor application?
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.
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.
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.
Most web browsers also have 'reopen previously closed tab' which is a canonical form of reversion.
Firefox's tab history seems quite deep, I can CTRL-SHIFT-T many times.
Firefox's tab history seems quite deep, I can CTRL-SHIFT-T many times.
I can't speak for Windows, but almost every app on Mac has undo. Undo and redo had widespread adoption by the 1990s.
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...
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...
It kind of amazes me now when I use Undo in a native non-text-editing, non-photo-editing Mac app like Mail.
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.
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.
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.
What I am less confident of is what happens when that notification goes away.
On iOS you can shake your phone to "undo" on most apps. It's kinda neat, but most people only discover this by coincidence.
That's interesting but counter-intuitive.
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.
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.
>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.
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.
No icon anywhere is intuitive. They're all learned.
Once you've hovered over the icon and learned its meaning then you can recognize it by the picture.
Once you've hovered over the icon and learned its meaning then you can recognize it by the picture.
Scissors for cut.
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.
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.
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 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.
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 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.
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.
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?
> 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?
They're intuitive for me, now. I remember when I got my first Windows computer, and those icons baffled me.
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.
I miss the days when software people cared about built-in user guides.
> 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."
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."
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.
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."
> 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."
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.
reaperducer(2)
You might want to google that yourself.
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.
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.
"A box with a downward arrow" refers to the icon immediately before the "stop sign with an exclamation point", not to the one you're talking about.
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 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 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.
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.
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
Challenge HN: Improve Gmail Icons
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
huge improvement
For open source projects, it makes sense. Otherwise, why should HN spend its time solving a for profit company's product flaws?
Mainly for the joy of (possibly, but perhaps unlikely) having your artwork/improvement(s) rolled into a very public product.
Because we're hackers.
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?
Ask custom CSS authors.
I really like this idea.
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.
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.
> Challenge HN: Improve Gmail Icons
Text buttons. Done.
Text buttons. Done.
My attempt: https://i.xfix.pw/minigmail.png
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).
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).
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.
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.
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.
- 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.
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".
[0] https://www.amazon.com/Martha-Stewart-Crafts-Kraft-Tags/dp/B...
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...
> 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 ;)
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 ;)
Moreover, things like tags and manila envelopes are very Western or even American. A lot of the world doesn't have these tags or manila envelopes.
> 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.
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.
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.
> the terminology could have just as easily gone with "notification clock" or "wake-up clock" originally
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".
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".
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.
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...
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...
What doe a "bell" look like?
I can't remember the last time I saw a bell.
Where do you live that you don't have bells?
>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 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.
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 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.
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.
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 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.
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.
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.
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.
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.
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.
It's not really that difficult, if you're aiming for usefulness, and not creating a work of art.
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 :-)
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
- HN
- mbsync
- IMAP
- emacs/vim
- mu4e/notmuch/gnus
Yes you are right.
However, this is not the New York times nor the economist nor the guardian. This IS hacker news. :-)
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.
I like it. Any downsides to know about? Thanks.
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.
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.
Ok, you got me. I'm going to give it a shot. :-)
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.
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'm crazy, but I think those icons do a pretty good job...
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.
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.
> Two envelopes in a stack means 'mark as read'
from this article. I had no idea what it did before.
You’re crazy.
Under Settings -> General
select Button Labels: Text
Life is too short.
select Button Labels: Text
Life is too short.
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.
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.
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?
Anyway, English invents new words or new meanings all the time. What does a "cloud" have to do with webservers?
> 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."
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."
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 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 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.
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 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.
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.
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
[1]not fun
> 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.
Graphic designers and information architects aren't using vim. In fact, vim suffers from the same lack of transparency/discoverability as these icons do.
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.
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.
I've been using basic HTML Gmail since the new one came out. https://support.google.com/mail/answer/15049?hl=en
Works great with vim-like browsers and has no icons, just text.
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 :)
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
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.
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.
can we also spend a second complaining how the mark as read is not contextual in the web version of gmail? I hate that.
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.
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.
Also, if you have a crap connection, Google will try to detect your speed and sometimes offer to switch you to the basic mode.
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.
In a well-built mobile app, long-press is "Hover"
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.
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.
It's fairly standard, or used to be at least, with right click only happening in text areas.
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.
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.
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.
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.
At least in the browser I can hover and see some help text. On mobile it'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'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)?
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)?
But if literate people don't get what the icons mean, why would less-literate people?
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.
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.
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 "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.
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
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
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
> 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 :)
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'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.
Even knowing the icons' 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's good about them.
[0] http://littlebigdetails.com/
[0] http://littlebigdetails.com/
[deleted]
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.
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.
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.
Gmail isn't the only service guilty of that.
Here's an icon from the Outlook web mail app: https://ibb.co/ic66Qd
What does it mean?
Here's an icon from the Outlook web mail app: https://ibb.co/ic66Qd
What does it mean?
[deleted]
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.
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't have this problem in mutt
REALLY HARD
Design for the sake of design...
Companies spend too much on designers.
Companies spend too much on designers.
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.)
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.
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.
Why does the bottom of the page say "All fights retarded" ?
wtf?? Totally unnecessary.
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?
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".
If there was a functional advantage of the icons that would be great. But I'm guessing it was chosen just to "look prettier".
Icons take up less space on the screen, which is useful if you are using a smaller browser window (or a phone screen).
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).
What about keyboard or touch users that don't exactly have a "hover" equivalent?
You can switch to text labels:
https://support.google.com/mail/answer/2473038?hl=en&authuse...
https://support.google.com/mail/answer/2473038?hl=en&authuse...
Fortunately
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 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.