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.
This might be out of scope but: Cookie banners. Please just give me one single button to disagree to all unnecessary cookies like intended by law. And stop this “legitimate interest” bullshit where I have to disagree AGAIN but this time MANUALLY for each of your 873 “partners” to actually disagree?? If you give me an option to disagree to all but then there’s also 800+ secret checkboxes to REALLY disagree, that just feels like you’re making fun of me.
Like a lemonade stand that also offers urine and when you don’t want urine in your lemonade, they instead just directly piss in your mouth. Not a great user experience…
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.
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
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
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!
Hamburger menus with the button in the top left corner. Bro, my thumb is down here in the bottom right corner. I already try to buy smaller phones and it’s still almost impossible to use these menus. Would it be so hard to at least put them on the right side?
I personally find fading-in of web elements in scroll to be annoying. Cookies should also have an immediate one-click reject-all button directly visible without having to enter any menu.
Oh, also, any links that are inaccessible by Vimium are annoying.
I was intrigued by the existence of a Vim based application for browsing, but not surprised.
How would I come about ensuring compatibility for websites with multiple interactive elements for viewing in Vimium? Do I install and test the website on Vimium during development too?
Cookies should also have an immediate one-click reject-all button
I’m actually fairly certain that to be GDPR compliant they are supposed to have that. At the very least it isn’t supposed to default to “accept all” either.
Many do, but a fair number also tucks it into a separate menu; you have to click somewhere at least once or twice to uncover or show said reject-all button which you can then click.
Requiring my phone number for “safety”
When a page is so bloated with crap, certain elements load much after certain others, leading me to believe the page has loaded, and to click on something jus as somthing else loads and pushes it down/to the side.
The YouTube Android app does that, and it’s fucking annoying.
“Cumulative Layout Shift”
It’s so annoying.
And 100% of the time the thing you end up clicking is an ad. It’s definitely intentional.
“Intentional” is the perfect word
This. So many times this. It drives me bananas.
Not providing any indication that clicking/touching a UI element will trigger an action. Especially on a touch screen.
I have to assume that everything is a button that will do something stupid on every website now.
Basically the entire UI and content feels built around / optimized to serve ads. Which means everything sucks
Really appreciate these responses as an a11y and UX focused frontend SWE
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.
- websites that fuck with scrolling in any way
- autoplaying videos
- sticky videos
- developer focused websites without darkmode
- popups when you move your cursor out of the window of the website
- unprompted popups
- links that break middle mouse button clicks for opening in a new tab
- burger menus on an otherwise rather empty website, or pure content site on desktop
- gigantic text, where 2 rows take up my entire screen, especially bad on larger monitors
- that relatively new
sign in with googlepopup on the top right on some websites - low defaults for
amount per pageselectors in product lists or similar, the default should depend on how many products fit on my screen, not some arbitrary value - slow loading content, or other requests that take more than ~100ms. With a modern internet connection this shouldn’t happen
- (not cookie banners in general, but) overly large cookie banners, also the
legitimate interesttoggle which, most of the time, is enabled by default (you might have interest in my data, but its definitely not legitimate); or cookie banners which block you from reading the site before clicking anything, (I know this is related to legal stuff it is not legally necessary to make invasive cookie banners)
Other people have already mentioned some of these as well
I hate having to toggle off legitimate interests off vendors too. The very premise of this option has been anti-consumer from the beginning.
I hate when a website allows me to deselect corporate partners who have access to my data, but rather than deselecting all of them it offers me the chance to manually select 600 or 800 one at a time.
Light font colors on light backgrounds are a terrible trend. The idea of text is to READ it.
Websites that deliberately disregard browser settings and find ways to forcibly autoplay videos.
That includes sites which use animated gifs in order to simulate playing a silent video, to trick you into clicking on it.
Just give me a damn still image if I don’t want video. I will only get angry if you shove video down my throat.
Apart from Youtube, I haven’t encountered any website force autoplaying videos. Maybe that’s because of the filter list set in my adblock.
That includes sites which use animated gifs in order to simulate playing a silent video, to trick you into clicking on it.
Now that’s just dirty play.
Making the page have empty margins by squeezing all the content into the middle of the page. When I started learning how to make website back in the 90’s, this was considered a major no-no. It’s really only done these days, because they focus entirely on how it looks on a phone held vertically than on an actual computer. But there’s no reason to not have it use the space on devices that can see it.
Mobile-first is supposed to be a specific way of implementing responsive design, but I think a lot of people say “job done” after the first step and never get around to the whole responsive thing. I think it’s easier to use a mobile layout on desktop than it is to use a desktop layout on mobile, so in that way I think mobile-first is a good principle to follow. But I agree, making a desktop layout that looks good is ignored far too much these days.
I agree with this to some extent. For even wider lines of text occupying the entire desktop screen, it actually becomes hard for me to discern which line I am currently reading, causing me to start reading the entire line all over again.
Which is dumb because CSS allows you to change the design based off screen size, so it’s 100% developer laziness.
