4 ms·

I watched my husband trying to do something important on AmericanExpress.com and he got totally stuck and extremely frustrated because he thought all the radio

by astura 5y ago

I watched my husband trying to do something important on AmericanExpress.com and he got totally stuck and extremely frustrated because he thought all the radio buttons were disabled and he couldn't answer the questions he was being asked. Some shitty UI designer thought grey radio buttons "looked good" ignoring that grey controls have a functional meaning (disabled). Sure the grey was a slightly different shade than the "disabled grey", but my husband doesn't know what the exact shade of grey disabled is because he doesn't use a computer all day. He just knows when controls are grey he can't use them, and that's totally reasonable. Companies make no sense, they tell you to use their website so you don't have to call their call center but then they don't prioritize usability and accessibility on their shitty SPA.

philwelch 5y ago
I'm going to take this as further evidence for my crackpot theory that it should have never been possible for websites to define their own styling. Websites should serve semantic content and the browser should enable the user to apply their own preferred styling.
- bspammer 5y ago
  I think it would be a shame for every website to look the same. Not all information is textual - we’re visual creatures and a lot of meaning can be conveyed through color, layout, font choices etc.
  - philwelch 5y ago
    That's what PDF is for ;) But yes, that's an obvious objection and if I had good responses to all the obvious objections, I would have something more than a crackpot theory. At the same time, I think the web as it is now is the worst possible state of affairs. There's no clear distinction between content and UI. You can theoretically use predefined UI elements, but nobody ever does and if they do, they can (and almost always do) completely change their behavior.
david422 5y ago
I put some placeholder text on an input field and that shows up as grey text (in Chrome). I had a user contact me because they thought it was disabled. So yea ... definitely confusing for people.
- thesuitonym 5y ago
  Placeholder text is a tough one... The example is usually a good idea, but it can be confusing to users, especially if the example text happens to be what they would have entered anyway, they may think it's safe to skip, then get frustrated when your validation tells them it's empty. I don't know what the solution is, I'm not a UX engineer, I just know it can be a problem.
  - onychomys 5y ago
    If there's room, I always make the placeholder read something like "Example: 12345", which makes it clear that they need to change it and also maybe that it's a number or whatever. Can't always do that on really short input fields, but it helps.
    - int_19h 5y ago
      Using italic font for placeholder text would help to quickly distinguish it from actual typed input - some apps do that. But, is it something that can be controlled on a webpage?
734129837261 5y ago
I'm a seasoned front-end engineer (20+ years of experience, working closely with UI and UX designers, worked for the big names, etc.) and I recently had to enter an invoice into a system and I couldn't figure out how it worked. The "SAVE" button was greyed out, and it didn't have a visible :hover state, and the text was light grey on a slightly-darker grey background. The mouse cursor was the normal pointer, not even a hand. So I never assumed it was a button I could actually press. Imagine if someone like me gets confused by stuff like that. Less-seasoned people wouldn't even manage to understand a UI like that at all. Worst finding I noticed was that because the UI looked so amateurish and outdated, I also didn't dare to click on things out of fear of breaking the system, which would cost or delay me a month of freelance payment if I messed things up. Bad UX and bad UI are absolutely killing. And unfortunately, many of these companies (the one in my example included) don't give a damn. This company pretty much has a local monopoly on this kind of software. Their backend integrates with numerous (outdated) payment systems and nobody else does it like that. They can get away with it because people don't have alternative options; so why would they even consider spending tens of thousands on improving the UX and UI? I'm seriously considering setting up my own product to replace theirs. The frontend looks simple enough. It's just the backend that worries me.
- handrous 5y ago
  I just, minutes ago, walked my dad through sending several existing photos in a text on his Android phone. He knew how to open the text app and find the person he wanted, so he'd gotten it that far. 1) Tap the camera + photos icon. It's pretty small, and between that and combining two icons for quite different actions into one made it so he'd never have guessed that on his own. 2) Bottom third or so of the screen becomes what I think was a live camera view on the left side, with what I'm guessing was a scrolling gallery on the right, but that was gonna be unusably tiny to scroll through, so I had him hit (IIRC) one of the photos that either had an icon on it or said the word "gallery". That's three separate things (Camera, gallery, quick-select photo view) all blended together such that it took me a second to figure out what I was looking at. He had no chance. Tapped gallery. 3) All context is lost as the gallery view takes over the whole screen. 4) You have a scrollable grid of your photos. It's multi-select, but there's not really any way to know that except to guess that it is, and that the select action will be a single tap (it could just as well be that one tap adds that single photo and takes you back to the message screen, and you have to long-tap or swipe or god knows what to add more) 5) Once any are selected, a small(!) "Add" text(!) appears in the top right(!) corner. It's really easy to miss. It ought to be a full button with some color to make it stand out. I kinda know what I'm doing with computers and it took me a little while to find it. I suppose it's top-right rather than at the bottom (which is better for one-handed usability) because elements near the bottom risk accidental taps on Android's "please ruin what I'm currently doing" persistent button row at the bottom of the screen, which blatant UI mistake they just can't seem to bring themselves to fix even after all these years. 6) If I hadn't been there and he'd somehow figured all that out, he'd have assumed they were sent after that. But no, back on the messaging screen you still have to tap the tiny play arrow with some kind of stuff on it (was it the tiny letters "MMS"? I don't recall for sure) to actually send them, they're just queued to send. [EDIT: To be clear, though, Apple's interface for the same is barely better] But this is nothing compared to whatever terrible phone + contacts "app" that phone has (I think it's the default for whatever version of Android he has?). The time he had me fix that for him it took me most of a minute to figure out that it had tabs, because they're just represented by thin text rather than anything that looks like tabs or even buttons, and that the problem was that he'd gotten on to the wrong one. The view he had it on, it looked like someone's half-finished UI mockup. When I got it on the correct one, it still looked like that, but with some content filled in. [edit: oh, and the tab header elements were ~1/3 of the way down the screen, not at the very top or very bottom, making it even less clear what they were] Google: flat-out incompetent at UI for at least 15 years. I still remember the time like 7 years ago that my grandma couldn't figure out how to add contacts in Gmail and it was because they had two buttons the same color and visual weight on the contact form, both of which with copy that a reasonable person would take to mean "add this contact whose information I've just written in the form", but one of them meant "give me a new contact form (and throw away all the stuff I just filled in)" and the only way to have a decent chance at figuring out which was which was to have some clue about HTML layout hierarchy.

by astura 5y ago

philwelch 5y ago

I'm going to take this as further evidence for my crackpot theory that it should have never been possible for websites to define their own styling. Websites should serve semantic content and the browser should enable the user to apply their own preferred styling.

bspammer 5y ago
I think it would be a shame for every website to look the same. Not all information is textual - we’re visual creatures and a lot of meaning can be conveyed through color, layout, font choices etc.
- philwelch 5y ago
  That's what PDF is for ;) But yes, that's an obvious objection and if I had good responses to all the obvious objections, I would have something more than a crackpot theory. At the same time, I think the web as it is now is the worst possible state of affairs. There's no clear distinction between content and UI. You can theoretically use predefined UI elements, but nobody ever does and if they do, they can (and almost always do) completely change their behavior.

david422 5y ago

I put some placeholder text on an input field and that shows up as grey text (in Chrome). I had a user contact me because they thought it was disabled. So yea ... definitely confusing for people.

thesuitonym 5y ago
Placeholder text is a tough one... The example is usually a good idea, but it can be confusing to users, especially if the example text happens to be what they would have entered anyway, they may think it's safe to skip, then get frustrated when your validation tells them it's empty. I don't know what the solution is, I'm not a UX engineer, I just know it can be a problem.
- onychomys 5y ago
  If there's room, I always make the placeholder read something like "Example: 12345", which makes it clear that they need to change it and also maybe that it's a number or whatever. Can't always do that on really short input fields, but it helps.
  - int_19h 5y ago
    Using italic font for placeholder text would help to quickly distinguish it from actual typed input - some apps do that. But, is it something that can be controlled on a webpage?

734129837261 5y ago

I'm a seasoned front-end engineer (20+ years of experience, working closely with UI and UX designers, worked for the big names, etc.) and I recently had to enter an invoice into a system and I couldn't figure out how it worked. The "SAVE" button was greyed out, and it didn't have a visible :hover state, and the text was light grey on a slightly-darker grey background. The mouse cursor was the normal pointer, not even a hand. So I never assumed it was a button I could actually press. Imagine if someone like me gets confused by stuff like that. Less-seasoned people wouldn't even manage to understand a UI like that at all. Worst finding I noticed was that because the UI looked so amateurish and outdated, I also didn't dare to click on things out of fear of breaking the system, which would cost or delay me a month of freelance payment if I messed things up. Bad UX and bad UI are absolutely killing. And unfortunately, many of these companies (the one in my example included) don't give a damn. This company pretty much has a local monopoly on this kind of software. Their backend integrates with numerous (outdated) payment systems and nobody else does it like that. They can get away with it because people don't have alternative options; so why would they even consider spending tens of thousands on improving the UX and UI? I'm seriously considering setting up my own product to replace theirs. The frontend looks simple enough. It's just the backend that worries me.

handrous 5y ago
I just, minutes ago, walked my dad through sending several existing photos in a text on his Android phone. He knew how to open the text app and find the person he wanted, so he'd gotten it that far. 1) Tap the camera + photos icon. It's pretty small, and between that and combining two icons for quite different actions into one made it so he'd never have guessed that on his own. 2) Bottom third or so of the screen becomes what I think was a live camera view on the left side, with what I'm guessing was a scrolling gallery on the right, but that was gonna be unusably tiny to scroll through, so I had him hit (IIRC) one of the photos that either had an icon on it or said the word "gallery". That's three separate things (Camera, gallery, quick-select photo view) all blended together such that it took me a second to figure out what I was looking at. He had no chance. Tapped gallery. 3) All context is lost as the gallery view takes over the whole screen. 4) You have a scrollable grid of your photos. It's multi-select, but there's not really any way to know that except to guess that it is, and that the select action will be a single tap (it could just as well be that one tap adds that single photo and takes you back to the message screen, and you have to long-tap or swipe or god knows what to add more) 5) Once any are selected, a small(!) "Add" text(!) appears in the top right(!) corner. It's really easy to miss. It ought to be a full button with some color to make it stand out. I kinda know what I'm doing with computers and it took me a little while to find it. I suppose it's top-right rather than at the bottom (which is better for one-handed usability) because elements near the bottom risk accidental taps on Android's "please ruin what I'm currently doing" persistent button row at the bottom of the screen, which blatant UI mistake they just can't seem to bring themselves to fix even after all these years. 6) If I hadn't been there and he'd somehow figured all that out, he'd have assumed they were sent after that. But no, back on the messaging screen you still have to tap the tiny play arrow with some kind of stuff on it (was it the tiny letters "MMS"? I don't recall for sure) to actually send them, they're just queued to send. [EDIT: To be clear, though, Apple's interface for the same is barely better] But this is nothing compared to whatever terrible phone + contacts "app" that phone has (I think it's the default for whatever version of Android he has?). The time he had me fix that for him it took me most of a minute to figure out that it had tabs, because they're just represented by thin text rather than anything that looks like tabs or even buttons, and that the problem was that he'd gotten on to the wrong one. The view he had it on, it looked like someone's half-finished UI mockup. When I got it on the correct one, it still looked like that, but with some content filled in. [edit: oh, and the tab header elements were ~1/3 of the way down the screen, not at the very top or very bottom, making it even less clear what they were] Google: flat-out incompetent at UI for at least 15 years. I still remember the time like 7 years ago that my grandma couldn't figure out how to add contacts in Gmail and it was because they had two buttons the same color and visual weight on the contact form, both of which with copy that a reasonable person would take to mean "add this contact whose information I've just written in the form", but one of them meant "give me a new contact form (and throw away all the stuff I just filled in)" and the only way to have a decent chance at figuring out which was which was to have some clue about HTML layout hierarchy.