13 ways the Internet is broken - #9 will shock you!
Tags: webdev, antipatterns, ads
Published: 2019-12-21 12:27:56

---
title: 13 ways the Internet is broken - #9 will shock you!
published: true
description: The web antipatterns killing the web
tags: web development, antipatterns, ads
canonical_url: https://www.errietta.me/blog/web-antipatterns/
cover_image: https://www.errietta.me/blog/wp-content/uploads/2019/12/image-6-1536x871.png
---

<p>The web has been changing the past few years, not necessarily always for the better. There has been an emergence of anti-patterns, which are patterns that stand to try to make a profit without caring about the user experience, or often by hindering it.</p><p>These patterns are problematic, not only because they frustrate users, but also because by worsening user experience, one cannot expect people to keep using the website. I have seen so many things that have made me close a website and never come back, and I don't understand how this can be a profitable business model for any business. Yet people keep doing it, so it must be increasing their profits somehow.</p><p>I hope to look into some of these patterns in this post, and explain why I don't like them.</p><p><em>Notice</em>: The following sections will contain screenshots of websites, mostly news websites as they are high-volume, popular websites and often exhibit one or more of the anti-patterns. While we may all have our own opinions on some of the articles displayed, that is not the point of this blog post. Therefore, I will not be approving any comments about the articles. If you want to know where I stand on those issues, hit me up at @errietta on twitter.</p><h2>1 - Ads or videos taking up half the screen height on mobile.</h2><div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/Screenshot_20191219-193817-512x1024.png" alt="A screenshot from the independent website on mobile. An article is displayed. There are two paragraphs of text at the bottom, above which there is a Twitter widget relevant to the article , and above that there is an advertisement taking up almost half the screen." width="244" height="487"/></figure></div><p>Seriously. I'm trying to read the article here. If I wanted to watch a video, I would be on youtube!</p><h2>2 - Ads that load late and make content "jump"</h2><p>It was difficult to take a screenshot here, but what I mean is that some websites don't load ads in correctly-sized containers (or containers at all). This means that when the ads load, it'll push the content down, as there is now a larger element taking up space above the text.</p><figure class="wp-block-image size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/Untitled-drawing-1-1.png" alt="An illustration showing two pages. On the first page, you can see 4 paragraphs of text, an image, then another paragraph of text and a comments box.
On the second page, the ad has loaded above the image, pushing the comment box below the fold." class="wp-image-906" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/Untitled-drawing-1-1.png 573w, https://www.errietta.me/blog/wp-content/uploads/2019/12/Untitled-drawing-1-1-300x230.png 300w" sizes="(max-width: 573px) 100vw, 573px" /><figcaption>Before and after advertisements load: The ads push the comments box below the fold.</figcaption></figure><h2>3 - Recaptcha</h2><p>Now, I know that recaptcha is very useful in telling bots apart from real users. And most of the time, if you've solved the puzzle before, you can just tick a box. The issue comes if, for whatever reason (such as private browsing), you have to do the challenge again. To be fair, these challenges are usually easy, but sometimes you will be unlucky and make a mistake, such as not seeing something in a tiny part of the image, or because the image is low quality, then have to start over. So frustrating.</p><div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/image.png" alt="A recaptcha prompt asking the user to select all images with cars.
" class="wp-image-907" width="328" height="482" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/image.png 391w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-204x300.png 204w" sizes="(max-width: 328px) 100vw, 328px" /><figcaption>Surely, Google isn't using recaptcha to train a self-driving car...</figcaption></figure></div><h2> 4 - Autoplaying videos</h2><p>Bonus points if the video has sound.</p><p>Picture this: You're on the early morning train, scrolling through your facebook feed, then some ad blasts music and annoys all the other commuters. Why.</p><p>Yes, you can turn it off in some apps. But it's still on by default. Plus some websites will not have an option to turn it off themselves, requiring you to mess with your browser.</p><h2>5 - Websites asking to deliver push notifications</h2><p>Unless you're my email or Slack app, I do not want your notifications. STOP asking me! What is worse, on mobile, this prompt will block the rest of the content until you block or allow.</p><div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/Screenshot_20191219-194647-512x1024.png" alt="A screenshot of a website, with a prompt asking to allow or block notifications in front of the content." class="wp-image-919" width="276" height="551" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/Screenshot_20191219-194647-512x1024.png 512w, https://www.errietta.me/blog/wp-content/uploads/2019/12/Screenshot_20191219-194647-150x300.png 150w" sizes="(max-width: 276px) 100vw, 276px" /><figcaption>"Absolutely not. Now let me read up on the latest horrible news!"</figcaption></figure></div><h2>6 - Sites that ask for your location</h2><p>I understand that it's convenient in a lot of cases, in which case, I don't really mind. But it would be better if they asked when you did something location-specific, not right away.</p><p>It seems that every single website nowadays wants the right to spy on your every move.</p><div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-2.png" alt="A popup saying &quot;www.google.com wants to know your location&quot;" class="wp-image-910" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-2.png 326w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-2-300x120.png 300w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-2-324x130.png 324w" sizes="(max-width: 326px) 100vw, 326px" /><figcaption>Google knows everything about me as well as where I am at all times. Hooray.</figcaption></figure></div><h2>7 - "Subscribe to our newsletter!"</h2><p>Don't you hate it when every website in existence seems to ask for you to subscribe to their newsletter? I very rarely take them up on their offer. It's good to be reminded about new blog posts in Interesting websites (although, no, this site does not have a newsletter), but other than that, I don't need that junk mail.</p><figure class="wp-block-image size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-1.png" alt="A prompt to sign up to a newsletter." class="wp-image-909" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-1.png 706w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-1-300x171.png 300w" sizes="(max-width: 706px) 100vw, 706px" /><figcaption>No, go away! I'm trying to give you money!</figcaption></figure><h2>8 - Blocking ad blockers</h2><figure class="wp-block-image size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-3.png" alt="A page blocking the content because I was using an ad blocker." class="wp-image-911" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-3.png 657w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-3-300x243.png 300w" sizes="(max-width: 657px) 100vw, 657px" /><figcaption>*sigh* Alright, I'll whitelist it.</figcaption></figure><p>I understand websites need ads to make money, but the reason why I chose to use an ad blocker is that many websites have so many ads with moving pictures or videos that it's a) incredibly distracting and b) really makes my PC struggle.</p><figure class="wp-block-image size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-4-1024x215.png" alt="An ad taking up a big part of the website footer, which also has a video on top of it." class="wp-image-912" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-4-1024x215.png 1024w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-4-300x63.png 300w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-4-768x161.png 768w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-4-1536x323.png 1536w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-4.png 1927w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>*argh*</figcaption></figure><p>I have my ad blocker set to allow acceptable ads anyway. By "acceptable" they mean not ads that get in the way of UX. It is possible to have the ads not be a terrible use of RAM!</p><h2>9 - Clickbait</h2><p>But first, a short word from our sponsor-- haha, just kidding! So, what's the issue with writing catchy headlines to get views? Well, buzzfeed-like headlines such as "X ways Y happens! #2 will shock you" can be harmless for the most part.</p><p>But sometimes, clickbait is used to attract attention to false information. People will sometimes read the title without reading the article (hey I'm guilty of it myself!). If  your headline is making things look way more serious than they actually are, then that helps the spread of fake news. Plus, many of those clickbaity articles are basically ads disguised as articles anyway.</p><p>Why did I use a clickbait title for this post? Parody, obviously.</p><h2>10 - Bad privacy prompts</h2><p>Since the European laws about Cookies and GDPR came into effect, privacy prompts have been getting more and more intrusive. We get it, you want to track us, and you <strong>have</strong> to get our consent early in the journey, so the best thing seems to be to show a popup (it's not).</p><p>Not all of those prompts are terrible, but sometimes opting out is more difficult than it should be, either because you have to manually opt out, or because it's extremely slow. Why is this such a broken journey? Do you hate your users? Or are you just hoping they passively click "ok" at everything, because I sure just click OK.</p><figure class="wp-block-image size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/Capture2.png" alt="A screen with various toggles to allow or disallow cookies. Some cookies require opt out
" class="wp-image-914" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/Capture2.png 647w, https://www.errietta.me/blog/wp-content/uploads/2019/12/Capture2-285x300.png 285w" sizes="(max-width: 647px) 100vw, 647px" /><figcaption>What do you mean "requires opt-out"? Why are there that many third-party vendors setting cookies on your site? WHAT IS GOING ON</figcaption></figure><h2>11 - Blocking EU visits because you cannot deal with GDPR</h2><p>This is a pretty bad new strategy by some websites based outside Europe: Instead of trying to follow GDPR, they just ignore it, and in order to not get sued, just refuse to serve any EU IP addresses. I guess losing part of your user base is better than getting a GDPR lawsuit, but it would be even better to try to comply!</p><p>On a related note, what are they doing with our personal data that's against the GDPR? Do I even want to know?</p><figure class="wp-block-image size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-5-1024x726.png" alt="" class="wp-image-915" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-5-1024x726.png 1024w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-5-300x213.png 300w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-5-768x544.png 768w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-5.png 1026w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>This website example was provided by Sigute Kateivaite, who just wanted to buy some darn clothes.</figcaption></figure><h2>12 - Expiring sessions too early</h2><p>Unless you're a bank, or a similar kind of business that holds very private information about your users, your sessions can be longer than 30 minutes long.</p><p>I will never forget the time I lost a whole job application due to being kicked out of the site when trying to submit. ARGH, THE PAIN.</p><h2>13 - Doing everything at once</h2><figure class="wp-block-image size-large"><img src="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-6-1024x581.png" alt="A site with notification prompt, newsletter prompt, privacy prompt." class="wp-image-920" srcset="https://www.errietta.me/blog/wp-content/uploads/2019/12/image-6-1024x581.png 1024w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-6-300x170.png 300w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-6-768x436.png 768w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-6-1536x871.png 1536w, https://www.errietta.me/blog/wp-content/uploads/2019/12/image-6.png 1920w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>WHAT IS THIS I LITERALLY JUST WANT TO READ THE **** ARTICLE</figcaption></figure><p>Do I even need to expand on this one? No? Good. Alright, happy new year, mortals.</p><hr class="wp-block-separator"/><p>I'd like to thank the people in my slack groups who gave me inspiration. If you didn't see your suggestion here, it's because I had <strong>way, way</strong> more suggestions than I expected. I thought I'd struggle to fill this list, but it was very easy. For the avoidance of doubt, that's <strong>not </strong>a good thing, since it proves how broken the Web has got.</p></div>