5 ms·
More fuckin' user interface design
- nathias 6y agogoogle 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
- King-Aaron 6y agoMate, its very obvious. 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. So obvious!
- whitepoplar 6y agoOne of the best things I've done was to change icon buttons to text buttons in Gmail. No icon hell for me!
- yongjik 6y agoI was about to make this exact comment almost verbatim. Change to text, lose weird icons, and gain peace of mind.
- foolfoolz 6y agoicons 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 i’m not saying it’s better. i prefer text
- IvyMike 6y agoVery nice! Thank you. 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.
- Zecc 6y agoOh, FFS. Would it be that hard for them to have an option of displaying both icons and text? In fact, I think that's how it worked before.
- porker 6y agoI had to do this because for my (non-US) brain the "Spam" and "Delete" icons were too similar and I would click the wrong one. As GMail learns from what you mark as spam, that had bad consequences for future emails.
- justinator 6y agoWhen 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.
- deleted 6y ago[deleted]
- Scene_Cast2 6y agoUnfortunately, 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.
- systemvoltage 6y agoI 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.
- notorandit 6y agoEntering the inbox: downward arrow atop the box. Exiting the inbox: downward arrow below the box.
- AYBABTME 6y agoERR_TIMED_OUT needs some CDN in front of that blog.
- Toutouxc 6y agoSo where do I go as a dev that sucks at frontend and doesn't want to make unnecessary mistakes like that?
- knrz 6y agoI think there’s also this attitude of thinking through every piece of the UX/UI thoughtfully and asking questions like... “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.
- savolai 6y agoAt fundamentals, two classic approaches: 1. The heuristics by Nielsen https://duckduckgo.com/?q=heuristics+using+Nielsen&t=iphone&ia=web 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.
- jbm 6y agoIf I can drop in another, "The Humane Interface" by Raskin (https://en.wikipedia.org/wiki/The_Humane_Interface https://en.wikipedia.org/wiki/The_Humane_Interface) gave me a lot of confidence to offer feedback about all sorts of interfaces.
- jfengel 6y agoOne 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.
- deleted 6y ago[deleted]
- infinityplus1 6y agoGoogle Cache link: https://webcache.googleusercontent.com/search?client=firefox-b-d&q=cache%3Ahttps%3A%2F%2Fblog.plover.com%2Ftech%2Fui-2.html https://webcache.googleusercontent.com/search?client=firefox...
- grenoire 6y agoI had an icon design for this that I created last month: Archive (a box with a label tag on it, https://www.storagegiant.co.uk/wp-content/uploads/a3-archive-box.jpg 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.
- alpaca128 6y agoI 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. It's a convoluted, insane mess.
- chillfox 6y agoI really liked the Windows Phone UI. It just felt right.
- _Microft 6y agoThat, updates and the lack of mobile provider branding.
- mrweasel 6y agoIt's really a shame, I would claim that the Windows Phone UI in may ways where better than anything on Android and iOS. 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.
- rconti 6y agoIt'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?
- SCAQTony 6y agoIMO, 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-did-they-come-from-and-are-they-even-useful-anymore.html https://slate.com/human-interest/2015/02/page-numbers-where-...
- dwohnitmok 6y agoI 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/ https://ciechanow.ski/gears/).
- abraxas 6y agoIcons 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.
- Svip 6y agoMy 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).
- PostThisTooFast 6y agoGoogle's UI sucks almost as much as its branding. 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.
- kirillzubovsky 6y agoTwo things: (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).
- tracyhenry 6y agoI'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.
- xelfer 6y agoMirror: https://i.imgur.com/Nvc70k1.png https://i.imgur.com/Nvc70k1.png gmail2.png still wont load but he's circled it at least in the 2nd image.
- moron4hire 6y agoThis reminded me of a thing I had written 7 years ago about Gmail being a usability nightmare. https://sean-mcbeth.tumblr.com/post/77384411853/gmail-is-a-usability-nightmare 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.
- hibbelig 6y agoI love those modifier-less keyboard shortcuts! But maybe you're right that in a web browser, it can easily go wrong.
- mdoms 6y agoI'd rather have a difficult ui than one that won't load at all.
- dang 6y agoCurrent thread on the predecessor post: https://news.ycombinator.com/item?id=26381768 https://news.ycombinator.com/item?id=26381768
- CyanDeparture 6y agoI feel like the archive one is easy to fix. This is MS Outlook's and MacOS's archive button - https://i.imgur.com/Csjpgth.png 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.
- peterbraden 6y agohow many people nowadays will recognize a paper filing box?
- KirillPanov 6y ago> I will be happy to whack your other designers on their heads with a rolled-up newspaper That's some very non-inclusive workplace behavior there. The wokemob should be by shortly to cancel this gentleman.
- JBiserkov 6y agoFrom the help: 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.
- karmakaze 6y agoHey give them a break, the UX'ers are only doing thiDr job realizing resending cues. /s
- thomaspark 6y agoIf you think Gmail's bad, check out Google Analytics icons: https://twitter.com/thomashpark/status/1005090263499530240 https://twitter.com/thomashpark/status/1005090263499530240
- riho 6y agoAs a designer, an actual likely answer: These are standard material design icons. Most likely someone needed to add a new button/feature and just picked whatever icon best fit the purpose, or someone designed a new icon that would fit the purpose of whatever feature/button was being added. With huge apps like Gmail, there's likely just so many different things happening that there's no time allocated to check every small change in a broader context, and these kinds of things slip in and pile up. Over time, more and more "small" things pile up, and eventually a redesign is necessary because the palette has been polluted with too many things and the software becomes too clunky. Another option is that no designer even gave this a look, or they saw it too late. This happens often too, designers might be busy working on a big new design and an engineer needs to just put in a button and doesn't think twice about just using one of the icons from the icon library. Incompetence can explain stuff sometimes, but just like engineering, design is also often a collection of compromises and sometimes a lot of compromises can collude together to form a bigger disaster. The call icon is a good example of this. It's constrained by a lot of things, like overall language rules of material design, and any prior interface design choices made about button styles, toggles, etc. If the designer came up with a totally new style of button, they'd also be scolded by their peers for not maintaining consistency. All of that said, I'm not making excuses, I'm providing an explanation. I think overall, with any kind of iconography based interactions, when in doubt, add a label. It just works. Icons are abstractions of language and actions, when it's no longer clear what they are abstracting, it's time to use language. It really is that simple.
- stunt 6y agoI urge you to try Amazon Chime client after this.