Sound that plays without warning is the thing people find most annoying on a website. When I asked 32 people to pick the one website problem that annoys them most, 10 of them chose it. That is almost a third, and more than any other answer.

I ran the survey in 2019 on social media. The question was: "What design annoys you the most about websites?" Each person picked one answer from a list of eight.

Most of the answers point to things a site owner added on purpose. Autoplay video, sliders, pop-ups and animations all end up on websites because someone thought they would help. For each complaint, here are the features that cause it and whether I would remove them.

Two of the answers describe the same problem. "Too messy" and "hard to find the information" both mean the page gets in the way of what the visitor came for. Together they got 10 votes, the same as sound.

This was a small survey. The people who answered saw a post on my social media and chose to take part, so they don't stand for everyone. Read the results as what these 32 people told me. Where larger studies found the same thing, I link to them.

1. Sound playing unexpectedly (31.3%)

Remove anything that makes a noise before a visitor asks it to.

People browse at work, on the bus and late at night. A sound they didn't choose makes them close the tab or hunt for the volume. It also talks over screen readers, which read the page aloud to blind and partially sighted visitors.

Autoplay video and audio with sound: cut. The Web Content Accessibility Guidelines (WCAG) say that audio which plays by itself for more than three seconds needs a way to pause or stop it (WCAG 1.4.2). Browsers already push back too. Since April 2018, Chrome has usually blocked autoplay with sound until the visitor clicks or taps something on the site (Chrome's autoplay policy). So a video set to play with sound annoys some visitors and plays silently for the rest.

Muted background video: it depends. A silent video behind a heading doesn't cause this complaint, but it adds weight to the page (see slow loading, below). Keep it only if it shows something a photo and a sentence can't. If it plays for more than five seconds, give it a pause button (WCAG 2.2.2).

Check your site: open your homepage in a private browser window with the volume up, then do the same on your phone. If anything makes a sound before you touch the page, switch its autoplay off.

2. Too messy, cluttered or unclear, and hard to find information (31.3% together)

Remove anything that competes with the reason a visitor came to the page.

Clutter rarely arrives all at once. A slider goes in to fit more on the homepage, then a stock photo to fill a gap, then social icons, then a few animations to make it feel lively. Each addition seemed sensible on its own.

Auto-rotating sliders: cut the rotation. In one usability test by Nielsen Norman Group, a visitor tried to find out whether Siemens had any deals on washing machines. The homepage showed a £100-off offer in a slider that changed every five seconds. She never read it, gave up and decided there were no deals (Nielsen Norman Group). People also tend to treat moving panels as adverts and skip them. A gallery that visitors move through themselves, such as product photos or a portfolio, is fine. I cover this in more detail in Why Your Website Doesn't Need a Slider.

Stock photos of people: cut most. In Nielsen Norman Group's eye-tracking studies, people looked closely at photos of real staff and real products, and ignored generic stock photos of people (Nielsen Norman Group). Keep an image if it tells the visitor something: your team, your premises, your product, a diagram. If it only fills space, remove it and let the words move up the page.

Social media icons in the header: move them to the footer. This verdict comes from my own experience of building sites. Icons at the top of the page invite visitors to leave before they have read anything. People who want to follow you look for them at the bottom.

Entrance animations: cut most. These are the effects that fade or slide sections in as you scroll. In Divi, the theme I build most sites with, each animation has a starting opacity. A section set to fade in can stay faint or invisible until its animation runs. Someone who scrolls quickly meets blank space and has to wait. One subtle animation on a page is fine. A dozen make the page feel slow, even when it loads quickly.

Check your site: open your homepage and give yourself five seconds. Could a stranger say what you do and where to click next? Then list everything above the first heading that isn't your logo, menu, heading or main button, and ask what each item is for.

3. Slow loading time (12.5%)

Remove heavy features before you try to speed up what is left.

Caching and image compression help, and I use both. But the quickest page weight to lose is a feature you didn't need in the first place. Three features from the list above also add a lot of weight.

Background video: it depends. A video is usually the heaviest file on the page, and a visitor on a phone downloads it before they have read a word. If you keep one, keep it short and compressed, and show a still image on mobile.

Slider images: cut the slider. A slider loads several large images to show one at a time. Most visitors only ever see the first. A single image does the same job at a fraction of the weight.

Animation and effects code: cut what you don't use. Each animation, parallax effect and add-on brings its own code for the browser to download and run. Removing the effect is quicker than optimising it.

Check your site: run your homepage through PageSpeed Insights and look at the mobile result. Google counts the main content appearing within 2.5 seconds as good (web.dev). If yours is slower, the report lists the largest files. If you run WordPress with Divi on a LiteSpeed server, my LiteSpeed Cache settings for Divi cover the next step.

4. Advertisements (9.4%)

Remove pop-ups that cover the page as soon as someone arrives.

Most small business sites don't run adverts, but many run pop-ups that behave like them: a newsletter sign-up, a discount code or a "before you go" offer. When I first published these results, a reader called Joe added his own answer in the comments: "Aggressive privacy notices".

Pop-ups that cover the page on arrival: cut. Google advises against covering the whole page with a pop-up, and says it can make a page harder for search engines to understand (Google Search Central). A visitor from a search result wants the answer they clicked for. A box in the way sends many of them straight back.

Small banners: keep. Google suggests a banner that takes up a small part of the screen as the alternative. It does the same job without blocking the page.

Notices the law requires: keep them, but make them small. Google exempts notices you need for legal reasons, such as an age check, from this advice. It still recommends showing them over the content and never sending visitors to a separate page first. A cookie notice can sit along the bottom of the screen instead of filling it.

Check your site: search for your business on your phone and tap through to your site. If anything covers the page before you have scrolled, make it smaller or remove it.

5. Not formatted for mobile (9.4%)

Remove PDFs that people need to read on screen.

Most sites built in the last few years resize to fit a phone. The problems come from things that don't resize, and PDFs are the most common.

PDFs for reading on screen: cut. A PDF keeps its printed page layout, so on a phone the reader has to zoom in and scroll sideways to read each line. The UK Government Digital Service publishes in HTML by default for this reason (Government Digital Service). Turn your price list, menu or guide into a web page.

PDFs people print or fill in by hand: keep. If someone needs a printed form, a PDF is fine. Put the same information on a web page as well.

Pop-ups on phones: cut. A pop-up that fits a laptop screen can fill a phone screen completely, often with the close button out of reach. Everything in the section above matters even more on a phone.

Check your site: open your three most visited pages on your phone. Note anything you have to pinch, zoom or scroll sideways to read, and anything that opens a PDF.

6. Broken links and things not working (6.3% together)

Only two people chose these, but they happen to every site sooner or later, mine included.

While checking my own blog for this post, I found an article showing a line of code where five screenshots should have been. A Divi add-on it relied on had stopped working [placeholder: confirm the cause]. No error message warned me. Visitors had been seeing a broken page, and I hadn't.

Nothing here needs removing. These problems need someone to look for them regularly.

Check your site: after every theme or plugin update, open your five most visited pages and click their main buttons. Once a month, open the Pages report in Google Search Console and look for pages listed as "Not found (404)".

You may also like…

Author: Aidan Ashby

Aidan is a web and branding designer living in Bristol, UK. He's a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

2 Comments

  1. Joe

    Aggressive Privacy notices

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.