What are some aspects of UI/UX seen in modern websites that really grind your gears?

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.
- "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.
- The YouTube Android app does that, and it's fucking annoying.
- This. So many times this. It drives me bananas.
- YouTube is there absolute worst at this

I don’t understand the logic of presenting just-arrived users with a popup to sign up for a newsletter or anything. I have just arrived and will need time to see the content before I can make that kind of decision.
likewise, I do not understand moving a video to floating at the bottom corner of a page after I have scrolled past the original location of the video. If I wanted to watch the video, why would I have scrolled past it? Very often reading is superior so moving the video to the corner only adds distraction to my attempt to consume your content.
Please do not overwrite established keyboard shortcuts for browser functions. Even if you have a desktop version of your web-app you should accept that your users are using a browser to access the web-app version of your product and retain all established browser keyboard shortcuts.
Lazy loading of data is counter productive most times. When a set of data is presented by a web page, pagination is fine. This provides a clear indicator that the set of data on the current page is complete, and a CTRL-F can be performed. The process of lazy loading of additional data after scrolling to a certain point provides the end user not visual cue where the current set of results lives within the full set. In the best of cases this means having to continually scroll to the bottom of a page until nothing new loads before doing a search through the results. In the worst of cases lazy-loading will remove earlier entries and make it completely impossible to do a search through presented results.
Is your site or product intended to be end-user data to sell to data brokers? If not, then you should not be engaging in any practices that will result in any data being sold to anyone. If you are selling a physical product or service that is unrelated to end-user data and you still find yourself tempted to sell end-user data, please consider increasing your product’s price instead. This practice makes it seem that your product or service is not of high enough quality for you to make the money you need from it, and instead have to rely on the questionable practice of selling user data to close that gap.
Nagging customers to disable ad blockers is objectively pathetic. Unfortunately these are NECESSARY because the vast majority of sites pushing advertising are doing so through 3rd party services that are NOT moderating the content of the advertisements to remove malware or outright scams. Either accept that this is a security necessity, or insert your advertisements yourself. The vast majority of ad blocking software do so based off of the established codes used by 3rd party ad vendors and manually inserted advertisements will not suffer. Your ad network made this a requirement and you should be punishing them, not your users.
if you have pagination on your site’s content, either allow the next set of results to actually load a new page, or ensure that clicking “Next” also includes moving to the top of the list when the next page is loaded. After clicking “Next” I shouldn’t have to manually scroll up to the top of the new results.
- omg point 2 makes me want to leave the site.
  So many sites do this with "trending" or "new" content. Like youtube used to repeat your shorts every 3 or 4 rows of video to try and convince you to watch shorts. Drove me crazy at the time because I have no interest in them.
- All of your points are valid, in fact I've personally had the same opinions for points 2, 3, 5 and 6 for a while. I wish I could upvote for each of your points
- And just like that, all the vague annoyances I've had just became tangible. Thanks.
- "Overly verbose text and introductions" - starting to suspect that a lot of these articles weren't written by a human, which makes you wonder if any of the information is accurate.

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.

One thing i hate most is when websites act like an app without url changes. So when you click "back" in your browser, nothing fucking changes and you are still on the exact same page.
Same thing happens when you change for example a filter on a website showing a list of items. So when you set up the filters and then click on an item, then click "back", everything fully resets because non of it was set in the url.
You can't share the url with anyone because it just opens the website in its default state.
As an example, imagine a website showing all games. You set the filter to show playstation only or sort it by popular. Then if you click on a game, then go back to the list, everything has reset. Its no longer sorted by popularity. Its no longer playstation only games etc.
It fucking infuriates me.
Or when browsing images or videos, and when you click on one and go back, it goes all the way back to the top. Because the genius that made it wants shit to load as you scroll. And then not store that scroll position in the url. So you are right back to where you started.
- Single page applications and their consequesnces.
  
  Yeah, particularly bad SPAs. All these things can be solved correctly, but implementing an SPA means you suddenly have to solve these problems, which just don't exist with traditional document-like webpages.
- I can relate to this too. I try to fight the site out of spite by furiously clicking on the back button of the browser to get me to the home page, and it does show the page for a split second before undoing the redirects and pulling me back to the page I was originally in. In the end I have to succumb to using the website's own navigation buttons to incrementally head back to the starting page.

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.
- If on iOS, wipr 2 is the best thing I have found to block autoplaying videos. And other stuff. I just hate videos so much.

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.
- I was indeed getting the vibes of reading this article. Setting aside the topic of the website, I enjoy reading articles explaining stuff with this type of humour. Sadly I wouldn't be able to ask ChatGPT to write me one that would leave me with the same satisfaction as this one.

pages that move after the initial load without user input should be illegal.
- Does getting ready to click on something count at user input?
- Yeah, but we wanted to load an ad, just at the place you thought was a link you wanted to click on... /infuriating

Hidden scroll bar. We don’t need that extra half centimeter of content, we need a visible scroll bar I can conveniently grab. Why do I have to try to maneuver the cursor to the right spot to make the scroll bar appear, then find the current position, move the mouse to it hoping the scroll bar doesn’t disappear again, and finally get to scroll.
Both infinite scrolling and excessive paging interfere with me being able to navigate to a spot.
If you need to do infinite scrolling do it the right way and just display it all on one page. It’s not like the content is ever a significant part of the bandwidth needed. Now you can simplify your buggy JavaScript monstrosity by not implementing paging and I can use
<CTRL-F>
to more easily find what I need
and seriously stop with the excessive paging - we all have computers that can manage more than 12 lines of stuff. I’m not even talking about the slideshow websites, at least they have the logical motivation of maximizing ads. For example if I’m reading some dreck ranking the us state on some metric, it’s ok to display all fifty on one page. If I’m reading something with a list of thousands why am I paging through 10-20 at a time with no way to jump to what I’m looking for?

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.
- Which is dumb because CSS allows you to change the design based off screen size, so it's 100% developer laziness.
- 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.
- 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 hate this so much - it usually ends up looking like shit on my phone while leaving huge empty margins on my monitor. Browser autoscaling usually just works - why do ui designers think they need to reinvent it … poorly?

The one thing that really grinds my gears above everything else is how on some news sites, there's an autoplaying video at the top of the article that follows you when you try to scroll past it. An autoplaying video is bad enough, but that's just infuriating.
I find news sites tend to make the most aggressively bad UX decisions, most of them are a nightmare to visit even with an adblocker installed.
- RSS Feed was a godsend for me, because it finally relieved me of the chore of visiting a webpage of news site to look for latest news.
  Agree on the hostile UX of news sites. The experience is worsened extensively when viewing on mobile.

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.
- 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.
- 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?
  
  Yeah, install Vimium in your browser and try to access every link on any given website mouselessly.

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.

Pictures that don't change size when you pinch zoom the page.

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 google popup on the top right on some websites
low defaults for amount per page selectors 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 interest toggle 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.

Requiring my phone number for "safety"

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

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?
  
  Looks like autocarrot to me.
  
  Because fewer and a faulty auto correct.

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.

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.

I have to mention consent popovers anyway, because many of them don't even comply to law. They should be better. None should ask for sharing data to over 50 or over 100 "partners".
I hate what I would label marketing or design websites with huge banners and non-telling marketing-speak text. I want information, and in a reasonable form and density. A huge banner [of happy people] with no relation to the product is wasted space. I want concise information, not evasive and positive-only speak.
Article webpage where the next article follows. Even worse when there is no clear visual content separation to indicate it's something different now.
Auto-playing videos. Despite browser blocking them, evading that, or popover videos when scrolling, or videos embedded that have nothing to do with the article. They are atrocious.
Overly verbose text. Overly verbose intro text and context descriptions. Not getting to the point. Not linking sources.
Too small text. I have a web-browser setting for default font size. Don't make it 40% of that for no reason.
No dark mode. In the evenings, flashing me is always irritating, and I have to manually enable a dark mode hack.
Wasted space for layout spacing. Looking pretty over usability or dense information.
Zoom can be implemented good or bad - depending on what you increase in terms of font size, spacing, component spacing, etc.
Contact - support or otherwise - only via shitty chatbot or web forms with too much required details. Give me a simple email address.
Newsletter or subscribe requests. I'll do it if I want to, never upon request. Worst when they show up before you consumed their content; could not even assess quality or interest.
Shit DOM design, lack of selectors. Programmatically interfacing with a website through DOM can be very helpful. For CSS hacks, or content extraction. Like tracking Terms of Service or Privacy Policy, or customizing or fixing layouts. Lack of speaking DOM element classes or ids breaks those interfaces.
- Hey that’s a great idea for the euros with actual consumer protection - as a next step to the consent popups, you should limit how many things you can consent to at once. For example, if users had yet another pop up for the next ten “necessary partners” they would quickly abandon sites that made them do that
  
  Arguably, that's already covered. Informed consent is required.
  If the consent popover leads you to accept all in an unbalanced way, the consent to share to 150 partners is neither informed nor given (no knowledge of it).
  A conforming popup would ask: Can we share your personal data with 150 partners? [Yes] [No]. I don't think many people would press [Yes].
- Shit DOM design, lack of selectors. Programmatically interfacing with a website through DOM can be very helpful. For CSS hacks, or content extraction. Like tracking Terms of Service or Privacy Policy, or customizing or fixing layouts. Lack of speaking DOM element classes or ids breaks those interfaces.
  Sounds like a feature.

Hijacking ctrl+f or forward slash. I use those to tell my browser to search the text of the current page. When websites steal that from me and make it do a search within the website, I get extremely upset.
The arrogance, the fucking gall it takes to do shit like that. It's insane.
Another one is unloading content after you've scrolled past it, meaning I can no longer get search hits where search hits should definitely be happening.

Browser incompatibilities.
I use Firefox, Firefox is not a niche/unused browser. There is ZERO excuse for your web forms or pages to not work correctly because I'm using it. At the very least, all sites should be compatible with the latest form of Edge (gross), Chrome, Firefox and Safari. Those are considered Mainstream browsers. If your site fails to work on them properly, that's one of the easiest ways to make me disappear off the site.
Another big UI thing is infinite load pages. I don't care about the next article in line, give the user a sidebar or bottom container that contains related content, then I as a user can decide to click it or not.
And one last thing that many don't take into consideration. Have a functional print layout of the page. So many sites don't bother making a print layout but, as a user if I see something that I like, I might save it to a PDF, or print it out to show the family. When I do that I don't need the headers(except maybe the title box?), banners, footers, splash screen, ad boxes, comments etc. I only really need the main body content. The print layout will show the URL if enabled, so I can always find my way back to the page without it. A lot of times if I am doing this, it's because it's significantly easier to show my family then having to somehow get them to visit the page.
- The part about having proper print layout of the site is actually interesting to me. I just learned about it recently and was curious about how there was explicit CSS support for this. This introduces an entirely new perspective on how a website should be designed to offer reliable print support that I am willing to learn.
  
  Yea, not many sites bother but, the action makes it so much better, especially if the main content was supposed to be something that the user is supposed to digest such as a recipe or wiki site.
  The @media print css at-rule makes it super easy as well. just hide everything but what you want to show, and adjust the margins how you like it.

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

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.

Grey on grey. (Grey background with the font in an off grey.)
Or
Having what appears to be a greyed out option but it's still an actual choice (greyed out means this is NOT an actual choice)
- I've witnessed it is part of dark patterns in most websites. Often the more consumer friendly option in a consent dialog box is greyed out as if the option itself is unavailable. Even I would've been fooled by it if not for my habit of clicking on the button regardless.

I just noticed this on Newegg but when you load the page, it puts a search suggestion of something popular people are searching (today its MH Wilds) in the search bar. I guess the idea is that you can click on it to instantly search for that thing. The problem is, that it takes a beat to load in so by the time you click on the search bar to enter what you wanted, you've accidentally clicked the search suggestion and then are taken to those results, instead of being able to enter the thing you wanted to search for int he first place.
It takes over the right side of the search bar, but depending on the size of the browser window, that could end up taking the majority of the search bar's free space to click on.

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.

Wizards / steppers
They suck and I'm tired of pretending they're in any way a good design.

Any website that hijacks my scroll wheel or forces smooth scrolling. It makes me unreasonably mad

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...

Large empty margins, especially when the content in the middle doesn't fit due to a lack of space

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.

Light font colors on light backgrounds are a terrible trend. The idea of text is to READ it.

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?

Forced dark mode.
White font on a black background absolutely kills my eyes and I'll enable light mode wherever possible, but some sites force dark mode for the UI with no option to switch to light mode. I can read a paragraph and I'll still see that same paragraph in my vision for several minutes, even if I'm looking away from my monitor.

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

Mouse-over menus that don't stay open to be able to navigate to the other end of that menu.

Not using HTML that's rendered server-side for everything.

Popups demanding I join newsletters, engage in chats, review your site, etc. Make that stuff available on the menu and I'll have no problem with it. Shove it in my face as I'm loading your site and I'll likely just close it straight away. Some pages are just one popup after another with absolutely no thought given to the UX. The users want your content, not your popups. And what if after using your site for a bit I actually do decide to join the newsletter when the only reference to it is the popup that I already dismissed?
Divs sliding into position as I scroll through the page annoy me intensely. When I see a page doing that I'll autorepeat PageDown to the end, then go back to the top. What is even more irritating and page-close-worthy is when those divs still insist on sliding into position after they've already done that.
Sound effects. Just NO NO NO NO NO. Sound effects are not the answer. Sound effects are the question. The answer is NO. I can see the point of sound effects in a chat, IF AND ONLY IF YOUR PAGE DOESN'T CURRENTLY HAVE FOCUS. But please don't bleep ping bing and bong every time someone presses Return. And test your sfx on decent speaker systems, not all of use have tinny 1" speakers; I have a decent hifi woofer and some of those bass drops really shake my room and I can only imagine that they were tested on crappy little speakers.
Spamming my screen with ads, obviously. You can have a single static ad that doesn't bounce around the screen, demand I punch some stupid monkey, vibrate, flash etc. And of course that ad has to be legit. There are still far too many ads that lead to scams and other malware. Stack Exchange is one of the few pages that get on my whitelist because of their advertising policy.
Give new fads time to settle down before you spam your site with the latest whizz bang animation. Yeah sorry that means you aren't going to be able to play with all the new toys. But your users will thank you. If you must use the latest CSS tricks then use it judiciously on one or two gadgets instead of applying it to "*".
And of course as you've already alluded make sure you use standard user interface gadgets correctly. Checkboxes are checkboxes and radiobuttons are radiobuttons. They are not the same as each other. They are also on/off. If you need tristate or more then you need something else.