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.
As someone approaching a similar amount of UX/UI and FE dev experience, I find that sometimes that experience actually hinders my ability to use websites that use anti-patterns like that. Because I KNOW the "grey button" is disabled (and then find out it actually isn't). From CC sites, to food ordering sites to just run-of-the-mill generic site X - no one seems to be prioritizing UX or user testing anymore.
And, not mentioned, but the absolute lack of error states is also just atrocious - many times I've had to open up the console to see what's going on. The average person doesn't even know that exists, much less be able to interpret what it is saying to know what to do to continue on in spite of the issue (if in case it's actually possible to continue).
> 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.
Part of the problem (their problem, not yours) was that you assumed a lot of reasonable things based on your experience. Someone who is less experienced also has less things to assume and can in turn try more things (a greyed out button isn’t obviously disabled, to them).
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.
Yeah, I edited in that Apple's is "barely better", and that's most of the "barely". I also found the "add" element, though similarly non-buttonish, a little easier to spot, in part because the area in question was smaller, but also because the color stood out a bit better.
The thing about Apple's that's way worse is the photo gallery icon. Pinwheel = photos. So you just have to have memorized the icon to have any hope of figuring that out, especially since there are like 9-10 icons in that part of the screen (plus you can scroll sideways for more).
I also just noticed that, on my view (I assume the icon presence or ordering changes for some people) I have a grey "camera" icon and a grey "App Store" (but seemingly at the top of some kind of "stack"?) icon to the left of the message input field, then directly under the grey App Store icon, on the app list, is a blue "App Store" icon. Naturally, these do completely different things: the blue one opens something to do with the App Store, while the grey one... presents me autocomplete options? WTF?
Ah, that explains it. I rarely use iMessage for anything but quick texts to people who aren't in one of my other messaging apps, so I hadn't looked too closely at it until I checked it out to compare the iOS flow to the shit-show of an Android one I'd just dealt with.
Checking it again, I see now that the grey app-store-stack icon is toggling the horizontal app list, so it's not that it was bringing up the suggestion list before, but that it was turning off the app list, revealing the suggestion list. Of course it doesn't in any way visually represent a toggle, as its appearance remains the same whether it's "on" or "off", and it's not visually tied to the app list, so the connection is rather metaphysical. Sigh. But, at least now I know how it works.
I generally like Apple design well enough but IMO they derailed way off the usability/discoverability tracks back in iOS7 and have yet to fully recover—it's just that almost everything else is even worse.
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.