Design & UX
By Simon Pascal Klein

Top 5 Peeves of Bad Web Design

By Simon Pascal Klein

I guess the longer alternate title for this article is: “or why I’ll most likely leave your website in the first few seconds of the page having rendered… and how to avoid this behavior in your users.”

I’ve covered getting type on the web, legibility & readability, and more niche topics like quotation styling exhaustively so it’s time for something a little lighter before I continue next week in jumping back into the thick of things.

Most seasoned web users have a number of pet peeves that will likely ensure we leave whatever site we’ve stumbled on. While we spend more time dealing with a poor website (and swearing under our breath) the more vital and hard-to-find that information is elsewhere, everyone has a threshold where we throw our hands into the air and give up.

If you’re a veteran of the web you probably know how to avoid or on-the-fly improve the quality of the web page you’re on, but most users — including those who rarely use the web or even a computer in general and may have a higher tolerance for egregious design and usability — will give up, or importantly, go elsewhere.

These peeves can loosely be delineated into two broad categories:

  1. Disempowerment of the user
  2. Inhibiting atrocious design and typography

Let’s get straight into them:

1. Music from the Get-go

(AKA: If I find out where you live…)

I think is probably the worst of the lot, and overly exacerbated when using a tabbed browser.

A screenshot of two Google Chrome browser windows under Mac OS X with lots of tabs open a tab highlighted as an offending music-playing page.

You’re browsing, opening a number of new tabs and suddenly one of the new pages you haven’t even gotten to yet starts emitting sounds. Immediately you scramble in great annoyance trying to locate the offending tab. Of course thanks to the poor design the player controls are either incredibly difficult to locate or just omitted entirely, forcing you to close en masse the recently opened tabs because you can’t figure out which one is the culprit.

I almost always listen to music while working online so this one is right up there as number one for me.

Unless you want people to burn you in effigy, don’t auto-play anything.

2. Interfering With Browser Behavior

Again most annoying when using a tabbed browser, you open a new tab and suddenly your window jolts and everything is resized. Worst of all is when a website or web application does this again and again each time you load a new page within the site after having sized the window back to the dimensions you liked.

A related grievance that still retains popularity is vulgar use of target="_blank" in the automatic opening of a link in a new page. As Jakob Nielsen notes:

“Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user’s machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don’t notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.”

(Emphasis mine.)

Anything that disempowers the user from their own environment should be reconsidered with great skepticism; is this really necessary? Will we get a batch of hate mail asking us to not do this? Could this potentially disrupt or confuse users? I’d wager the likely answer is yes, and if it is, don’t do it.

3. A “Launch” Homepage

No. Just no. This is when a website first loads up an entry page with some kind of graphic (often animated) and a number of obscure “continue” or “enter” links which require visual location and pressing to continue to any actual content.

Any website that does this just created an extra step and thus an extra hurdle and barrier for all of its users to get through who enter via the homepage.

Flash websites are absolutely notorious for this, and for the most part I just won’t bother; good-bye; Ctrl + W.

4. Poor Legibility & Readability

Not quite as annoying as the preceding two, but passively frustrating because we can’t read anything — at least not comfortably and at length. Common examples:

  • Too small: probably the most utmost common of all typographic errors — here the text is just too small to read without causing strain. The trend in setting text at stupidly small sizes is thankfully been largely binned, and was worsened back in the earlier days of Internet Explorer as it could not resize the text size of a page if it was set in pixels (which was and is still the prevalent method of sizing on the web).
  • Little or no leading whatsoever: lines seem to melt into another because of meager if not a complete lack of vertical spacing — incredibly difficult to read.
  • Too long or too short measures: either the measure is too long and the eye can’t find the next line or it’s rapidly zig-zagging down the column after just a few words. To overcome this the user has to resize the browser window or up the font size, and that might not do it either depending on how things have been sized.
  • Poor contrast: this is rampant on sites where a designer has decided that light gray text on a stark-white background looks sleek or “modern”; even “better” if at 10 pixels apparently. This is ridiculously troublesome to many users because it isn’t easily remedied by mashing Ctrl and + to up the font-size — changing the font color of a rendered page requires the use of web development plugins.

There is a reason services like Readability exist: there are just simply too many websites whose designers have given little to no consideration to the legibility and readability of their text. As much as I like good services like Readability, in an ideal world the legibility and readability functionality it provides should be made redundant (the quick saving and storing of to-read pieces is of course very nice). Let’s strive to make the text we put online equally as enticing and comfortable to read as the best periodicals and page-turner novels.

But What About Fonts?

You’ll note I’ve omitted mentioning font selection entirely. A site can feature a great range of fonts, each with good and bad aesthetic properties and it can still retain legibility and readability. The above are concerns are far more prevalent and in need of addressing first — as Jeff Croft states: “typography is more than picking a ‘cool’ font.”

5. Poor or Lacking Visible Hierarchy

Continuing with typography—books have title pages, indexes, chapter headings, headings, sub headings, tables and diagrams with labels, emphasis, footers and footnotes, glossaries and so on. This is an information hierarchy supported by good typography and a solid grid, and is very much applicable to web design yet oft forgotten.

An example of relatively plain text to a stytlized typographic hierarchy.

The colors might be on the mark, the text might be legible and the CSS and markup might be valid but the content can still seem dumped with little or no delineation between the various content types on the page; a blockquote looks like its neighboring referencing paragraphs, headings just look like a bolded or italicised single line, and so on.

Good content needs a solid, consistent, — and for extra merit — pleasing visual hierarchy to aid in “scannability”. Most of us aren’t reading complete pages online; we skim and browse, searching for that single section, or paragraph or even line of information that we want (think phone numbers, dates, email addresses, and so on).


There are of course many more annoyances (breaking content up over multiple “pages”, not loading textual content at all unless JavaScript is permitted, a complete lack of whitespace, blatant violation of basic design conventions, Flash-only websites, no context “click here” links, senseless setting of Comic Sans, …), but upon quick reflection the above would probably be my top five.

What are your top five peeves in web design?

Addendum on JavaScript

Years of browsing the web with these annoying design choices haunting me (in addition to security provided) have led me to defacto block all JavaScript (even first-party scripts from the root domain I am visiting).

I do this using a Firefox plugin called NoScript. It allows me to set up whitelists on the go while browsing offering me a simple yet fine-tuned and more secure browsing environment on the web (JavaScript is of course the number one avenue malicious websites use to track and exploit the browser into running malicious code).

If you’re interested in plugins and such, I’ve written on how I browse the web.

  • I agree with most of this. I even agree the the disabling of the back button is a bad move. However, I HATE IT when a site DOESN’T open a new window to a link. What if I want to browse around the new site for a bit, then go back. I have to click the back button a ton of times if I want to see the original site. I’d rather it open in a new window or tab. I think this one is personal preference mainly.

    • BPM

      VIGOR – Then get into the habit of right-clicking any link and choosing the behavior YOU want. You can elect to open the link in a new tab or new window, regardless of the links target.

    • Anonymous

      The point is that if you want to open a new window/tab, you can choose to do this on any link, and it’s precious little effort to do that.

      But if the link is set to open a new window/tab, most people are stuck with it. Yes, Opera users can force it to open in the current window/tab, and there is a Firefox plug-in that gives that functionality as well, but for most people, it just isn’t an option.

      When authors set links to open in a new window/tab, they’re taking the choice away from surfers. When they don’t set links to open in a new window/tab, surfers have the choice to do what they want.

  • BPM

    PET PEEVE – Hard coded page widths, just like THIS site. Here I am trying to look at this site side by side with my email and a chat client. Horizontal scroll bar.

    I get a horizontal scroll at anything less that 1111px. Design festival, read a bit about Responsive Design.

    • BPM – use Command + to set the size of the browser contents via %’s

      • Bite

        Zooming/scaling the page is not responsive. All I get is the same content, now unreasonably giant. You might as well say that smart phone users should just look at your regular site at 20%.

    • JRT

      Hard coded page widths definitely take control away from the user, and in my opinion just illustrate the laziness of the builder. Why should I have to set my browser width to 1200 px? Why not design pages with max and min widths, which still allow design flexibility while also allowing the user to maintain at least some control over their session?  Heck, if you use this feature intelligently, your design can work for mobile devices right from the get-go.

  • Anonymous

    What do I hate? Scrolling this website. The scroll is Jerky on my 4-year old MacBook. I expect it is the markup, and not my hardware. Any ideas?

    • dloewen

      It could be because of the box-shadow around the page. Causes performance problems if its applied to any big area.

      • Anonymous

        Bingo! You are correct. Thanks!

        The box-shadow causes a *serious* performance hit on this site…. Smooth as glass without the shadow.

      • Lebisol

        Maybe they should paginate comments LOL.

  • Can we do something about the gray-on-gray text/backgrounds? Two shades of difference between the two don’t make for great legibility. Dark-on-darker, light-on-lighter, whatever, it all sucks.

    Good job, Pascal.

    • @twitter-59679798:disqus This article has many of my own personal peeves. The biggest one of me is full flash sites, that take ages to load and ten play what I can only describe as muzak!

      In a previous life I was an Optician, who not only had patients who suffered from visual problems, but from various cognitive issues, I myself am Dyslexic. I guess my personal peeves are:

      1. Coloured Text on Coloured backgrounds that are barely visible, the number of times I have to explain to a client that if they use x-colour with y-colour if you are colour blind it won’t work.

      2. No Site map in an easy to find position on all my sites, it is the first link and in first position on all my pages.

      3. Images used as navigation with out either titles or some form of textural back up if the styling is turned off, I have an older wap phone that automatically changes everything to text -Duh! I’ve got no navigation.

      3. Flash sites in general – it’s just not the done thing any more people want speed and if you take too long to load you’ve just lost me as a customer.

      4. Javascript based objects that don’t work if it’s turned off, please at least make it work without the javascript so I can use your site.

      5. Looped music with no off button, I really do not want to listen to what you think is cool, it often doesn’t suit the sites content.

      6. Any site that has a mixture of flash, animated gifs and text that self types , firstly as a dyslexic user it muddles my brain, secondly it gives me a headache and thirdly what the hell is it for???

      This site has to be one of the worst designed sites I’ve ever come across which has most of my peeves:-

      You need to allow it to sit there for about 2 minutes you’ll see what I mean!

  • IMHO

    While right-clicking any link and opening the window in a new tab will allow the user to choose the destination for the link, many visitors don’t know how to do this and just click on any link. You can’t assume that all your visitors have the same skill set. Not opening an external link in a new window is a poor choice for the website; you never want the user to leave your site to go elsewhere, as they might not come back. Bye bye visitor.

  • Pascal, I agree that messing around with browser behavior can be quite annoying, but I think when used properly it can actually be beneficial to the user, like when viewing ‘aside’ content like videos or a referring articles. Opening a video in facebook for example, I can pop over and watch the video but still know where I was in facebook. But yes, some sites just blanket every link in a new window and that is truly annoying.

  • SL

    Totally agree with everything here.
    1.) Javascript is for progressive enhancement only, or, if it’s a requirement you must clearly communicate that to the user. I typically do something like the following:
    Jacascript is used to enhance the features of this page but it seems you have it disabled. If you need help enabling Javascript click this link or…
    2. The only time i use target=”_blank” and feel it is valid is when a user has filled out a form and potentially not submitted/saved yet. As an example if you have a form with links to help content (I provide some basic help content on the page with a link to more information) then I think it’s a good idea to open in a new window to save the form inputs.

    Thanks for sharing your pet peeves and let’s put an end to them.

  • All the points you make are valid. I particularly hate music on websites too. I’d also include those incredibly irritating ‘Virtual Assistants’ that pop-up and start talking to you.

    They’re really good when it’s late at night and the volume has been left turned up to max after your 15 year old son was watching YouTube videos. Then you try and disable the thing but can’t find the pause button, so you try to close the tab instead and get ‘are you sure you want to navigate away from this page?’ In the meantime everyone in the house has woken up. The baby’s crying, the wife thinks there’s a stranger in the house. Absolute disaster…

  • It is absolutely terrifying that you have to write this article in 2011. Except for a couple of minor disagreements, most of these have been pet peeves of mine for over 10 years. And yet you still have to address them.

  • While I agree with a lot of this, I disagree with the part about opening a page in a new window automatically. I’m far more often annoyed while browsing if I expect a link to open in a new window and it doesn’t. If I’m browsing a website and I can tell that a link is going to take me off of that domain, I want that link to open a new window. When a link takes me off of the domain I was on without opening a new window, I feel like the developer has assumed that I’m done on that site without my permission.

    With the ease of tabs now and faster computers, I don’t mind having a new tab opened for each time my browsing forks. When a website links to another website, I want that fork to diverge from my current browsing for later. I think of a new page online as being a little bit like a new topic in a conversation. When the conversation with another person takes on a new topic, I want to know that and move on to the new topic instead of being forced off of a topic I was still talking about.

    • Arkh

      You can use your mouse middle button (pushing on the mousewheel) to open the links you chose to open in another tab. You can not do the opposite, opening a targeted link into the same tab.

    • Alex

      I have to agree with Brannon and Vigor etc here. I detest having to figure out if the link is going to open in a new tab or not and then right click and “open in new tab”. It’s too many clicks and arsing about.

      Arkh – NICE little shortcut I didn’t know about so will definitely be using this from now on.

      However, the majority of people wouldn’t know about clicking the mouse wheel so I’m still sticking with my support for opening in a new tab/window.
      As IMHO says though, it will always be a personal preference with no clear winner as perfectly demonstrated by the mix of comments here :-)

  • Anonymous

    Okay. I agree with everything here, *except* for your addendum. In 1999 and heck in 2006, Javascript was suitable for progressive enhancements only. It’s 2011 now, people, going on 2012. If you’re still blocking sites that require Javascript, you don’t *deserve* access to the site. People are building software applications on the World Wide Web now and it’s reasonable to expect a web site to be more functional than just a collection of text, images, and hyperlinks. If you’re worried about security, identify the real security hole, file a defect ticket with WebKit or whoever maintains the browser you’re running; these security holes really no longer exist for the most part.

    • Again, please read my earlier comment — blocking JavaScript is a personal preference not a thing that people should be doing. My list of peeves looks at choices made at the level of the website designer/owner and how they can and do affect users.

      Also, as far as security goes, browsers are far from being bullet proof; see Pwn2Own:

      • Anonymous

        (Digging this comment thread up 7 months later ..)
        You ask us to re-read your comment, but did you read mine? I’ll state again: if a user is blocking Javascript, that user doesn’t *deserve* access to my site. I make no apology for blocking users that disable Javascript. If you call that bad design I call you stuck in the 90s. The World Wide Web is not just content anymore; it’s content + functionality, and that functionality is all part of good design.

    • I couldn’t agree more.  You can’t block javascript.  It is like intentionally turning off stylesheets.  You could, but why?  I am sure sites still abuse it, but modern sites need it for a variety of reasons.  I feel like today, 2011, you need at a very minimum a modern browser, css and javascript.  That means forcing IE6 to Chrome.  I am done throwing away 50% of my development time for js-off and IE6.  I would check out:

  • Anonymous

    My biggest pet peeve, and I even dropped membership at for it, is when a web site allows an advertiser to a) open up a new window, b) yell “CONGRATULATIONS, YOU WON!” at you audibly, and c) force you to answer “OK” / “Cancel” with an annoying Javascript confirmation dialog when you attempt to close the window. You covered the first two with music and opening new windows, but you didn’t mention confirmation dialog boxes upon exiting a site. Then again, I don’t know who ever does this besides advertisers.

    A side pet peeve is more technological and can be difficult to resolve. But you mention complaint of not being able to click Back to get back to where you started. While I agree with the others, that going back should really mean closing a tab, I won’t get into that, what annoys the snot out of me is the heavy use of forms without redirection. In my Android mobile browser or any browser that doesn’t let me select Back history, I can’t go back to before a page that I POST’d a form to without re-POSTing. The only thing I can do is open a new window and close the old one, losing all my browsing history.

  • Arkh

    Kuddos for using Noscript. But it raises the question of why you did not list Flash based website? Or even worse Flash based menus which are disabled by noscript and prevent any normal use of links for the user.

  • Chris Bower

    I think this is….no, I know it is, the BEST web design article I’ve read in the past couple of years. It displays a trait all too rare in the industry: Common Sense.

  • Lwarren

    Definitely music when opening a page. Sends me over the edge. Also, following a compelling benefit to click and not finding it on the page I’ve clicked on! Hierarchy is big. Less is more–often I’m bombarded when I go to a site. If a page overwhelms me with too much–I leave.

  • “Too small: probably the most utmost common of all typographic errors — here the text is just too small to read without causing strain. The trend in setting text at stupidly small sizes is thankfully been largely binned, and was worsened back in the earlier days of Internet Explorer as it could not resize the text size of a page if it was set in pixels (which was and is still the prevalent method of sizing on the web).”

    Indeed… I have to zoom in four or five levels to get the text on this site up to a readable size.

    I agree with you on almost every point. Not so vehemently when it comes to the first one, since I don’t remember the last time I came across a site with sound playing right from the start (maybe I disabled it way back when or it’s blocked by NoScript or… eh, I don’t know).

  • Excellent read. While I found some of this opinion based, most of these issues I would think could annoy just about anyone. I mainly disagree with blocking JavaScript and opening new tabs/windows. I think this is paranoia and personal preference compared to the other issues. I think the opening a new window is more a case sensitive issue than anything else. Of course if it’s an internal link or part of a process it should all remain in the same window. If you want to send someone to look over something while you’re discussing it on a page, you should probably open a new window. With bigger screens and more people using multiple screens these day, running multiple browser windows are at the least multiple tabs has become common.

    Media, landing pages, readability, and font choices are all issues every designer needs to consider when starting a new project though.

  • I agree with everything except for the blocking JavaScript part. That’s similar to saying, “I’ll buy and use a stove, but not the burners, or the oven.” It has structure (HTML), and style (CSS), but lacks function (JavaScript). If you’re worried about security, use Google Chrome, or another browser that sandboxes, versus blocking one of the core web languages. Overall, decent article, it just has an ugly ending.

  • Excellent post, it is easy to look at a site and say that it is good, but there are the little things that separate a sight from being good, to a sight that is great.

  • Anna @ Copybreak

    We must have been coming across some bad sites lately, as my latest blog post was also on 5 fatal web content flaws which focussed exclusively on content flaws.

    I also detest music (or video) that starts as soon as you open the page… although that said, I did come across a site yesterday with a super cool jazz riff which I couldn’t help but enjoy (just goes to show there’s still exceptions to most rules).

    Still – some great comments. Found myself nodding in agreement to them all.

  • Thanks for all the comments everyone. A few quick notes from me… I want to note I don’t advocate anyone else follow my browsing habits (and I didn’t say you should). :)

    Javascript—I block JS by default unless the site is a trusted site on the whitelist (major service providers, websites I visit and use frequently, …) primarily for security reasons. I often use the ‘Temporarily allow …’ feature to selectively allow certain scripts as I please and need if I want to not add them to the whitelist.

    (Btw, many of the problems I listed (e.g. music playing, silly widgets, annoying JS behaviour, …) are part of the past for me; as much as #1 bugs me I thankfully don’t ever have to put up with it thanks to NoScript.)

    target=”_blank”—again, do what you like with your browser and how you like to open links, but never force a user to do something in a specific way unless there is good reason.

    Taking away user control—this is of course a double edged sword and what could be classed as annoying and insidiously robbing of user control in (most) instances could actually beneficial to the user interface and experience. Just be cautious and think it through before taking control from the user.


  • Jamo

    Blocking Javascript? Clearly your the one of the painful (5-10%) of web users that are making things difficult for the javascript front end developer.. Everything else you said is great but like stimpy77 said, “If you’re still blocking sites that require Javascript, you don’t *deserve* access to the site.”

    • Please re-read what I wrote and then my comment below — blocking JavaScript via a whitelist (again not all-out blocking) is a personal security preference; it doesn’t have to be yours too. I mentioned this practice of mine because it overcomes some of the peeves I listed.

  • Had to smile at your peeves. Been there – thought that. One I disagree with is the open new browser. You may not like it, but technically speaking it does not break the back button. There’s a script that can be placed in a site to actually break the back button. However, with all the new browsers and their improvements, that script may not work these days. I never used it and never respected a designer who did.

  • I can’t agree more, especially the first one – music from the get go! I almost laughed when i read this, I too often have to hunt for the offending tabbed page to stop the annoyance. “I almost always listen to music while working online so this one is right up there as number one for me.” Yep!
    Now, I do want to add one exception though, when you visit a music artist website, that is ok because we know it’s coming. The annoying ones are generally the ones have no reasons to have music as background.

  • You are right in giving views for a bad website……………….i also irritated when i listen background voices or video appears on the webpage,opening of pages in new tab and some of the website opens new window to open the selected page.

  • Not using target=”_blank” when opening a PDF.

    • Lebisol

      Thank you,
      target=”_blank” has its place and SHOULD be used…

      People have attention span of puppies these days and 3-4 clicks later they will forget where they came from while a new window is a clear and visible action that they can close. We all have been exposed to ‘pop-up’ windows from back in a day so we are ‘trained’ to hit “x” without fear…clicking on a link..not is much. I still open most of my links with ‘right-click > new tab’ just in case.

  • My auto mechanic – a CAR REPAIRMAN – asked me to check out his new site for objective critique. Soon as I clicked, blight jazz started playing in an endless loop. Good grief. I was sorry I gave him $8k+ of work on my cars over the years and he didn’t even come to me for a quote. Music is far and away the most annoying thing I come across. Popups are abysmal too but FF is good at blocking them with the right add ons.

  • Anonymous

    I have to say I agree with everything here. These are certainly on my own list of pet peeves when it come to web design, except for maybe the _blank issue. I actually launch links this way myself more often than not so it doesn’t bother me.

    One thing that annoys me is print designers who understand nothing of web standards and insist that their “cool font” means something to people. A web audience has different expectations and priorities than someone viewing something in print, you have to design for the medium and in 2011 many still haven’t embraced this concept as doctrine.

    When using javascript or flash, designers should also plan their site for the event that these options won’t be available to everyone and shouldn’t completely destroy a site’s ability to function.

  • Jules

    i had to zoom out this page twice to be able to read normally.. too big text is even more annoying than too small if it’s used for main text ;)

  • Steve

    My pet peeve is poor grammar, such as yours: you don’t know the difference between “it’s” and “its”.

    • Harsh, but thanks for pointing it out. (:

    • tdp

      I’m with you, Steve. If I see a business’ website with grammar and spelling errors, I’m out of there. If you can’t be bothered to get someone to proof your site, it’s not worth my time.
      Having said that, I’m more tolerant of errors in blogs or personal sites than in a business site. This article, for example, has a lot of good content beside the “its”….

      • True. There’s some room for error in personal blogs, but for business sites, grammar and spelling are a must. Its and it’s, their and they’re – these are common mistakes that can be spotted easily by an interested reader. It does not look professional, so how can a customer expect high quality service and content from the business?

  • Completely agree with this post! I especially hate any websites that use Flash. It’s 2011! Who isn’t accessing websites from their mobile phones and/or tablets these days?

  • Lynnmoon

    Nice article with some very good points that hopefully more people in the world will heed!  What’s tough is to be on the dev. team for a group that insists on something horrible (like the music).

    But I gotta jump on the bandwagon of folks who still see the relevance in target=”_blank”.  I tend to manage sites targeted to older and/or less tech savvy users.  Personally, I couldn’t care less because I know how to open a link without loosing my place.  BUT….the percentage of my average users that know this little nugget is lower than those that are annoyed of their lost “control” of their browser in that way.

    So, I still prefer to open off site links for them so that when they get to a page somewhere that breaks their back button…and they close the window in frustration, our site is still there.

  • Sritullimilli

    this is very good

Get the latest in Design, once a week, for free.