I wish to understand what elements or aspects of the design of modern websites the end users are annoyed from. Though you are free to express your personal opinions, it would be even more insightful if you could provide objective criticism and suggestions for alternative implementations so that I may incorporate the same in my current and future projects to make them as user friendly as possible.
Some criticisms I have encountered a while back include:
- Switches being basically checkboxes with more ambiguous active state
- Scrolling animations that prohibit user from linearly scrolling through the page
Make sure that the opinion is not
- Related to business/legal matters e.g. Cookie consent notices, ad banners etc.
- Too vague e.g. Poor website layout
- Highlighting objectively bad practices e.g. Lack of accessibility features
I recognise I could have followed a design system for this question, but I want to understand the situation from the perspective of the end users to see if they have a differing view on what a convenient user experience should be like.
One terrible combo is infinite scroll plus links in the footer (Bing does this, if you needed another reason not to use that site). I think pagination is generally a better pattern, since you can link to a specific page.
Also lack of back button functionality and having your state reset on refresh are also pet peeves.
Related, pagination can still get broken if you try hard enough. Some sites have pagination, but bump up the id of old posts every time there’s a new post, so it’s still useless because the links will change content
bump up the id of old posts every time there’s a new post
That’s probably the worst thing I’ve read today, it’s such a bad thing to do on so many levels wtf
Sometimes it becomes a race between me and the site implementing infinite scroll to see if I can reach the footer before the site can load more content; the only time I curse my internet connection for being good
Bing does this
I’m pretty sure you can disable it in options, because it has defined pages for me.
Switches and checkboxes that are unclear if they are on or off and which option does what.
I see it a lot in games where it is extremely unclear from the wording and the swith/checkbox if it needs to be on/checked or off to make the thing do as you want.
And when the swith has a light green and slightly grayer light green or similar as ita colours it doesn’t help, because not only doesn’t you know what way the swith need to go to get the outcome you want. You doesn’t know what way the swith is going anyway.
How did you manage to type “swith” so many times?
Because fewer and a faulty auto correct.
Looks like autocarrot to me.
Fucking with scroll in any way. My browser and OS scroll in a familiar, reliable way and the chances of any change to that a website could possibly make improving my experience are infinitesimal. https://dontfuckwithscroll.com/
What would be your opinion on making a website that has no scroll because it’s just a single, small page, and the hijacking scroll to do some useless visual thing because scrolling wouldn’t do anything anyways?
That sounds like a novelty page to show off CSS/JS tricks. I think that’s out of scope for the original question, which I took to be about sites with a functional or informational purpose.
A big plus one to ambiguous switches. Two things I didn’t see already mentioned:
First: if you have content that requires horizontal scrolling, like a big table or report, that horizontal scroll bar needs to be on the screen, not at the bottom of the report. I shouldn’t have to scroll hundreds of rows vertically in order to be able to scroll horizontally. While we’re at it, column headers need to stay on screen when you scroll vertically past them.
Second: if there are two choices, identifying which is active needs to be more than just changing the color. Outline that shit or add a halo, throb, or something. Sometimes a user depends on tabbing and not using a pointing device or touch screen, especially when using assistive technology. This is especially heinous when the content is consumed on a tv using a remote control, such as a streaming service or DVD menu.
Put a damn selection area around your switches/check boxes so I don’t have to click precisely on the teeny tiny little box with my giant fingers. You know what I want to do, There are no other elements near it. Just put a damn div area around the object that has an onclick so I can toggle the thing without zooming it to the size of my screen to press right on the tiny little button to toggle my setting
Basically the entire UI and content feels built around / optimized to serve ads. Which means everything sucks
Pictures that don’t change size when you pinch zoom the page.
A morbillion javascript frontends, data hoarding middle ends, and another morbillion tracker tags all so you can display 5 sentences of text and a default picture which causes the website to take 5000 years to completely render as you watch Wappalyzer light up like a christmas tree on fire. Use static HTML and CSS ffs, it’s there for a reason.
Modern HTTP is such a horrendous steaming pile of crap that I could honestly spend an entire day talking about the horrible ways we accomplish WWW, with about a solid 70% of it being directly attributed to pos Google.
Mouse-over menus that don’t stay open to be able to navigate to the other end of that menu.
There’s actually a proposal for various new HTML elements, including a switch:
https://open-ui.org/components/switch.explainer/
It’s a little bit harder than you think, because people will definitely do things like this, and they have to account for that sort of behavior:
It is nice to see that they’re working on it, where “they” means part of the W3C (so not just random nobodies):
The purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in web UI components and controls, such as <select> dropdowns, checkboxes, radio buttons, and date/color pickers.
To do that, we’ll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility requirements, and provide test suites to ensure compatibility. We’ll also implement polyfills for our extensible web UI controls.
Today, component frameworks and design systems reinvent common web UI controls to give designers full control over their appearance and behavior. We hope to make it unnecessary to reinvent built-in UI controls, but for those who choose to do so, we expect that these design systems will benefit from Open UI’s specifications and test suites.
Long term, we hope that Open UI will establish a standard process for developing high-quality UI controls suitable for addition to the web platform.
Unfortunately I am unable to grasp what the attached image is trying to insinuate. Could you provide some context?
The linked site has a bit more about it, but usually you see toggle switches like that with relatively “balanced” options. “On” / “Off” are about the same width when rendered as text. It’s easy then to just make the switch big enough for the bigger option and everything’s good. What happens if you have “On” and “Some really long text option that should probably be shorter”? The image shows what it looks like toggled to “On”, and then goes over two solutions, neither of which are great options:
- Use the smallest size and cut off the larger text. Not really a viable option
- Use the longest size, but when the shorter option is toggled to, you’re left with a bunch of blank space
Now it makes sense. The transparent nature of the image obscured the outline of the switch in my screen from which I was initially unable to identify that it represented the different cases of viewport width of the switch.
Thanks for the clarification!
Wizards / steppers
They suck and I’m tired of pretending they’re in any way a good design.
Large empty margins, especially when the content in the middle doesn’t fit due to a lack of space
Auto playing video if I clicked a link that was not indicated beyond any reasonable doubt that it was a video.
Making any sound at all unless instructed to.
Requiring a phone number before allowing a user to use app-based TOTP.
You don’t need to know my phone number to make the secret key on my app work.
Giant tiles or moving pictures instead of small buttons to click to navigate.
I’m not saying I want every website to look like Wikipedia but if I had to choose between mostly text with obviously clickable links vs abstract art with bullshit hit boxes I’ll take the “boring” text every single time.
Too many UI devs forget that they need to make it functional and easy to navigate first and THEN you can add flair. Never add pizazz if it inhibits functionality or visibility.
