So obvious in fact, that they removed the text labels.
So insanely obvious that it made sense to reduce the size of the icons to like 20px x 20px.
So inexplicably obvious that they chose two basically identical icons to convey the message.
icons replaced text about 8-10 years ago for reasons:
- ui consistency across languages and devices
- some languages are longer than others. you can’t just translate the text, this might break the layout. more common at smaller companies without testing resources to cover all the languages available
- mobile has less screen space. going icon only might be necessary. this also goes back to the first point: icon only is easier if it’s icon only everywhere
When you tell a company that your design is too obfuscated and you're also a Perl hacker is like: the biggest burn I could possibly think of. Chapeau mjd.
Unfortunately, it's quite hard to use common sense at large companies. The incentives aren't there, and for every one person who "gets it" there are nine that don't - and they will be your review committee / peer reviewers / project partners.
I think it is incompetence of product managers. They ought to know how to use their own products, have a keen eye for design and functionality.
You can’t A/B test your way through UX/UI in a product like GMail. Sure, it works for a e-commerce front end but just because of UI problems, people aren’t going to ditch the entire GSuite like they would if it was a shopping website. They’d just close it and A/B tests would produce a strong signal.
At Apple, when Steve was around, he had such a keen eye to details. He cared. So if PMs are getting fat checks and not getting scrutinized by their management, I blame the entire ladder upto Pichai for growing such a culture. Engineering at Google is top notch and lots of great things come out of there. Obviously, very smart people for there. I don’t think there are 9 people who don’t get it.
You need a strong dictator at top. Google is becoming a snowflake like organization where it would be impossible to criticize products in favor of not offending anyone - at least that’s what it appears to me. And management doesn’t give a shit about their own products - you're right that the incentives just aren't there.
I’m truly convinced that in order to produce top notch products, you need a military type dictatorship and harsh rejection of bad design - personalities such as Steve Jobs or Elon to make better products. Whether we want to work in such environments is orthogonal and up for debate.
One of the most germane aspects of The Humane Interface is that everything should be undoable.
That mitigates some of the damage done by unclear icons. You push the button... oops, that didn't do what I thought it did. Well, now I know, and the Undo button fixed it, so we're all good.
That's not perfect, but it does let regular users and power users coexist without separate modes. The former become the latter smoothly, without having to decide one day "OK, I don't need the screen real estate for labels, so turn them off".
In this case the Undo mode is also very imperfect: GMail has it inconsistently, and it's modal. It exists only in a toast, and not as a general Undo button in one consistent place. It's not a full stack, another thing that Raskin strongly encouraged. That indicates a significant re-think is necessary, not just tweaking the labels.
Anyway... really good book. It's not just UI tips and tricks, but a new way to think about what a UI is.
You know why it works? Because the button also has the text on it that says 'Archive' or 'Retrieve' and the interface actions change accordingly on whether the resource is archived or not.
It's not about iconography, it's about ever increasing loss of context through simplification. It's the curse of the modern UI/UX designer.
I still don't get why Windows Phone's UI concept for this didn't catch on, it was great for touchscreen based apps. All relevant actions were on a grey bar on the bottom of the screen, in every app. And you could drag the bar up to reveal labels for each button as well as a list of options(the equivalent of the burger menu everywhere else).
But instead Android has most of these buttons on the top of the screen, which is the hardest to reach place on the whole damn thing. And every other app out there uses a completely different set and style of icons and that one curved arrow symbol in the mail app does something completely different from the same button in the note-taking app and the calendar.
Windows Phone UI just looks way too lifeless. There are good reasons why iOS' UI appeals to way more people. For example hard edges and 90° angles are something we associate with man-made "things" while rounded corners feel more natural if done right. Just watch how apple reasons about their UI, compared to this the Windows UI seems way more "random" and less thought through.
I disagree. The sharp corners might not be the style everyone favors, but it's still the best phone UI I've every used. It elegantly solved the tooltip problem, is the only mobile OS that feels 100% usable for left-handed people like myself and everything is consistent throughout the whole system including third-party apps.
And neither Android nor iOS can compete at text input/editing. It feels like Microsoft put more thought into that component alone than Google does for an entire major Android update.
Yes, it also had a fair share of weird quirks and weaknesses. But in my opinion the Windows Phone 8 UX was easily the best thing Microsoft made since Windows 7, and it keeps being years ahead of Android because Google seemingly rejects any idea that would fix existing issues or reduce confusion.
google has so poor standards, but what is worse those standards become general and other companies are copying them because its the great google doing it
It's ironic that I can't even see what the author is complaining about. At first, the site wouldn't load at all, but now I merely can't load the images.
Perhaps it's a kind of performance art, and I'm missing the point: that things are harder than we might naively assume at first glance?
IMO, The best UX ever made is the book. It invented bookmarks first over 1500 years ago. The cover contains the topic, the author. The first page tells you when and where it was published and who inspired it. The contents page tells you the all contents. The index states the topics. The page numbers illustrates where one is and how far they have to go before it's over. Finally, it's UX is so good it hasn't that many updates since Pliny the Elder. https://slate.com/human-interest/2015/02/page-numbers-where-...
I think that's overstating it. For long-form, linear reading of text books are great, but there's a lot of places where I much prefer hypertext or other media. Anything with copious footnotes, references, and appendices is just so much easier to immediately click to the highlighted reference link, quickly scan the reference, and then jump back. Flipping through pages to find the right reference and then flipping back is a rather large context switch in comparison.
A bookmark still isn't quite robust enough because I still need to scan to find the exact reference when jumping out from the text.
This is why e.g. I read modern hyperlinked PDFs and Wikipedia articles faster and absorb more than their dead-tree equivalents (although I find I read dead-tree equivalents faster for longer linear reads).
And that's just non-interactive, text-based media. Video tutorials for quick how-tos are way way more effective for me than the equivalent book. I haven't had quite as much luck with interactive articles, but there have been a few gems that simply wouldn't be possible with a book (e.g. https://ciechanow.ski/gears/).
Icons are a bad idea. Words for short commands work better. In the olden days some UIs let you hide icon images and display the alt text instead. Those were very good UIs.
My knee-jerk instinct was to respond with 'but what about UIs in other languages?' But then I checked Fastmail's solution of the same problem as Gmail's, which I have in Danish. Not because I am not comfortable with English, but I have come to appreciate when people actually bother to translate their UI to my language.
And their solution is straight forward; keep a few buttons for the most common actions with an icon along with text indicating what the button does. For further commands, a dropdown is available where all the commands are merely text.
Because usually the problem would have been to design a UI with interface constrains around the size of the text in English, but then »indlæs« (load) turns out to be just a little wider than your box had allocated. But keeping the flexible is the solution (and thus minimise its number).
Then there's the fact that they managed to create an OS in the late 2000s that lacks a proper hardware-abstraction layer and driver model... living millions of devices orphaned year after year.
And they're admitted jagoffs, from their interviewing practices to their workplace.
Google should just abolish human employees and settle into being a search engine.
(1) Designing icons that work for a product that's used by billions is really hard. you have to deal not just with how it looks, but how people will see it across different languages, disciplines, experience, and so on. It's practically impossible to do it "right" and to satisfy everyone.
(2) I bet you given #1, the idea here isn't to design an icon that works, but to create a placeholder for a position in the UI, and then train you to click in that general direction. That's why two icons are on the opposite ends of the navigation bar. They know those two are confusing, but they just want you to remember (<- go this way to do X, and go -> that way to do Y).
I've seen at least two different sets of icons in Gmail in the past month. It was very confusing. Why do they keep change? The ones in the OP look different from the ones in my gmail.
The TL;DR is: Gmail has a number of modifier-less keyboard shortcuts that can hide messages and dismiss the notification the message has been hidden faster then you can notice if you are typing fast and accidentally lose GUI focus on the message editor area.
Email clients are not video games. The keyboard commands should require modifiers.
This is MS Outlook's and MacOS's archive button - https://i.imgur.com/Csjpgth.png - if you can't see that, it's a filing cardboard box with it's oversized lid fit on top.
I use MS Outlook web UI and exchange on MacOS with an Apple mail client.
Also then by 'fixing' the archive one to this better one, you sort of also fix the 'Move to Inbox' icon because it's not so similar. The 'Move to Inbox' isn't to bad if it's by itself, what makes it bad as the author says is it's context. I'm not sure what a better 'Move to Inbox' icon would be, I'm not a skilled icon designer.
49 comments
[ 0.26 ms ] story [ 91.0 ms ] threadSo obvious in fact, that they removed the text labels. So insanely obvious that it made sense to reduce the size of the icons to like 20px x 20px. So inexplicably obvious that they chose two basically identical icons to convey the message.
So obvious!
Change to text, lose weird icons, and gain peace of mind.
- ui consistency across languages and devices
- some languages are longer than others. you can’t just translate the text, this might break the layout. more common at smaller companies without testing resources to cover all the languages available
- mobile has less screen space. going icon only might be necessary. this also goes back to the first point: icon only is easier if it’s icon only everywhere
i’m not saying it’s better. i prefer text
For those who also want to try it in the web interface: Gear->See All Settings->General->Button Labels
Don't forget to scroll all the way to the bottom and save.
In fact, I think that's how it worked before.
As GMail learns from what you mark as spam, that had bad consequences for future emails.
You can’t A/B test your way through UX/UI in a product like GMail. Sure, it works for a e-commerce front end but just because of UI problems, people aren’t going to ditch the entire GSuite like they would if it was a shopping website. They’d just close it and A/B tests would produce a strong signal.
At Apple, when Steve was around, he had such a keen eye to details. He cared. So if PMs are getting fat checks and not getting scrutinized by their management, I blame the entire ladder upto Pichai for growing such a culture. Engineering at Google is top notch and lots of great things come out of there. Obviously, very smart people for there. I don’t think there are 9 people who don’t get it.
You need a strong dictator at top. Google is becoming a snowflake like organization where it would be impossible to criticize products in favor of not offending anyone - at least that’s what it appears to me. And management doesn’t give a shit about their own products - you're right that the incentives just aren't there.
I’m truly convinced that in order to produce top notch products, you need a military type dictatorship and harsh rejection of bad design - personalities such as Steve Jobs or Elon to make better products. Whether we want to work in such environments is orthogonal and up for debate.
1. The heuristics by Nielsen https://duckduckgo.com/?q=heuristics+using+Nielsen&t=iphone&...
2. Learn to do usability testing. Fundamentally it's the only way to know what's comprehensible for your target group in a given usage context.
Then there are the HIG human interface guidelines for platforms. There seemed to be a lot to learn from the one of Apple's the last time I checked.
That mitigates some of the damage done by unclear icons. You push the button... oops, that didn't do what I thought it did. Well, now I know, and the Undo button fixed it, so we're all good.
That's not perfect, but it does let regular users and power users coexist without separate modes. The former become the latter smoothly, without having to decide one day "OK, I don't need the screen real estate for labels, so turn them off".
In this case the Undo mode is also very imperfect: GMail has it inconsistently, and it's modal. It exists only in a toast, and not as a general Undo button in one consistent place. It's not a full stack, another thing that Raskin strongly encouraged. That indicates a significant re-think is necessary, not just tweaking the labels.
Anyway... really good book. It's not just UI tips and tricks, but a new way to think about what a UI is.
“What do I want the user to notice? Where am I trying to direct their attention? If I didn’t know what this button does, how do I find out?”
It’s like checking out what you know at the door.
Archive (a box with a label tag on it, https://www.storagegiant.co.uk/wp-content/uploads/a3-archive... from the frontside) Unarchive (same box, but the lid is slightly tilted open)
You know why it works? Because the button also has the text on it that says 'Archive' or 'Retrieve' and the interface actions change accordingly on whether the resource is archived or not.
It's not about iconography, it's about ever increasing loss of context through simplification. It's the curse of the modern UI/UX designer.
But instead Android has most of these buttons on the top of the screen, which is the hardest to reach place on the whole damn thing. And every other app out there uses a completely different set and style of icons and that one curved arrow symbol in the mail app does something completely different from the same button in the note-taking app and the calendar.
It's a convoluted, insane mess.
Even if Microsoft created a Android launcher or fork, it wouldn't really help, because the apps are still free to do whatever they want.
And neither Android nor iOS can compete at text input/editing. It feels like Microsoft put more thought into that component alone than Google does for an entire major Android update.
Yes, it also had a fair share of weird quirks and weaknesses. But in my opinion the Windows Phone 8 UX was easily the best thing Microsoft made since Windows 7, and it keeps being years ahead of Android because Google seemingly rejects any idea that would fix existing issues or reduce confusion.
Perhaps it's a kind of performance art, and I'm missing the point: that things are harder than we might naively assume at first glance?
A bookmark still isn't quite robust enough because I still need to scan to find the exact reference when jumping out from the text.
This is why e.g. I read modern hyperlinked PDFs and Wikipedia articles faster and absorb more than their dead-tree equivalents (although I find I read dead-tree equivalents faster for longer linear reads).
And that's just non-interactive, text-based media. Video tutorials for quick how-tos are way way more effective for me than the equivalent book. I haven't had quite as much luck with interactive articles, but there have been a few gems that simply wouldn't be possible with a book (e.g. https://ciechanow.ski/gears/).
And their solution is straight forward; keep a few buttons for the most common actions with an icon along with text indicating what the button does. For further commands, a dropdown is available where all the commands are merely text.
Because usually the problem would have been to design a UI with interface constrains around the size of the text in English, but then »indlæs« (load) turns out to be just a little wider than your box had allocated. But keeping the flexible is the solution (and thus minimise its number).
Then there's the fact that they managed to create an OS in the late 2000s that lacks a proper hardware-abstraction layer and driver model... living millions of devices orphaned year after year.
And they're admitted jagoffs, from their interviewing practices to their workplace.
Google should just abolish human employees and settle into being a search engine.
(1) Designing icons that work for a product that's used by billions is really hard. you have to deal not just with how it looks, but how people will see it across different languages, disciplines, experience, and so on. It's practically impossible to do it "right" and to satisfy everyone.
(2) I bet you given #1, the idea here isn't to design an icon that works, but to create a placeholder for a position in the UI, and then train you to click in that general direction. That's why two icons are on the opposite ends of the navigation bar. They know those two are confusing, but they just want you to remember (<- go this way to do X, and go -> that way to do Y).
gmail2.png still wont load but he's circled it at least in the 2nd image.
https://sean-mcbeth.tumblr.com/post/77384411853/gmail-is-a-u...
The TL;DR is: Gmail has a number of modifier-less keyboard shortcuts that can hide messages and dismiss the notification the message has been hidden faster then you can notice if you are typing fast and accidentally lose GUI focus on the message editor area.
Email clients are not video games. The keyboard commands should require modifiers.
This is MS Outlook's and MacOS's archive button - https://i.imgur.com/Csjpgth.png - if you can't see that, it's a filing cardboard box with it's oversized lid fit on top.
I use MS Outlook web UI and exchange on MacOS with an Apple mail client.
Also then by 'fixing' the archive one to this better one, you sort of also fix the 'Move to Inbox' icon because it's not so similar. The 'Move to Inbox' isn't to bad if it's by itself, what makes it bad as the author says is it's context. I'm not sure what a better 'Move to Inbox' icon would be, I'm not a skilled icon designer.
That's some very non-inclusive workplace behavior there. The wokemob should be by shortly to cancel this gentleman.
1. Open Gmail.
2. In the top right, click Settings and then See all settings.
3. Scroll down to the "Button labels" section.
4. Select Text.
5. At the bottom of the page, click Save changes.
The text also has the benefit of making the buttons much bigger / easier to click.