Avoidable Design Flaws That Can Hurt Your Site

Categories Articles

The web was supposed to get better,  that was the promise.  And you’d think it would have, with all the increased awareness of accessibility and usability considerations.  But strangely enough, we’re more than 25 years in, and things are actually getting worse in general.  How could this be so?

It can’t be blamed on education.  Every course in Internet Design and Development worth its salt covers the fundamentals of good design principles, usability, and accessibility.  It can’t be blamed on the engineering standards, because the W3C guidelines are stricter and more clearly defined than ever before.  Nor can it be blamed on technology, because the technology is more supportive of developing high quality sites, not less.

No, the answer to this paradox is actually quite simple.  It’s because designers have had their power stripped away by the demands of marketers and their clients.  So the designer knows there should be good contrast between the text and the background, but he or she can’t implement that good design principle because somebody in marketing thinks it will look more cool to have “dark silver” text instead of black, and of course we must have “that washed out blue font that Twitter uses” for the headings, so “all the young people can better identify with our site.”

The concern about “looking good” and also copying what everyone else is doing is taking precedence over practical considerations like high speed, low bandwidth, and good usability.  If you’re one of the clients who needs to make decisions about what your site should look like, then this article is for you.  It’s also for those designers who have the courage to negotiate with clients to get websites more in line with how they’re supposed to be, instead of being just like every other similar site out there.  It’s time for the future to arrive already.

1. Poor contrast

This has lately become fashionable.  It’s amazing that it could be so, given the repeated message driven home to us repeatedly over the past 25 years that we must avoid poor contrast.  The precursor to this fashion seems to be Twitter and Bootstrap, but they in turn could have been inspired by someone else.  Let’s take a look at an example:

The above is a fragment from one of Twitter’s help pages.  The philosophy behind the design seems to be that the more important a piece of information is held to be, the darker it appears on the page.  Thus the H1 heading for the page is in black text, because that seems to be considered to be very important.

Although it’s not clear in the screenshot, the main body of text is actually a dark gray color (not full black) because that appears to be important, but not as important as the heading.

Links aren’t in the standard shade of blue, they’re in “Twitter Blue”, which is a very pale shade that doesn’t contrast well with white backgrounds.

The H2 heading further down the page is a more pale shade of gray than the main body text, which some people will find confusing.  Headings shouldn’t be more difficult to see than the rest of the text, unless they’d be a major distraction (in which case you probably should be questioning whether they need to be headings at all).

The left panel navigatgion options are also in pale gray and pale blue shades, and again the idea seems to be to have these items fade into insignificance so they won’t distract you from the main content area.

Finally the most pale area of all is the feedback zone, which is clearly the least important part of all.  But even Twitter is doing a better job of things than this site:

The only logical conclusion that can be derived from this example is that they don’t want you to know the answer to the question.  It is, if you’ll forgive the expression, beyond the pale.

2. Bad encoding

This is simply a symptom of extreme laziness and not even bothering to check how your page renders.  It would seem impossible to make this blunder in this day and age, but still somehow people are managing to do it.  They’re even managing to do it for the wrong reasons, as shown in this example:

Looks like just an ordinary case of somebody forgetting to set the encoding to UTF-8, right?  Except it’s not, because the encoding for this page is set to UTF-8.  The site designer did everything correctly, even going to the extreme length of escaping all the apostrophes in the meta-data to entity character 39, even though that may not even be necessary.  The problem occurred with the insertion of the content into the design, because what has obviously happened here is wrongly encoded text containing MS Word smart quotes has been pasted into the content section, thus ensuring it will render incorrectly in every browser, because the encoding of the page is set to UTF-8 and the content isn’t encoded in UTF-8.

While most people will be willing to overlook the small matter of smart apostrophes being rendered as , it is very annoying, and it’s even worse when the mistake occurs in the headline. The bottom line is that you must check your content is displaying correctly when you release it onto the web, and you should always ensure you’ve used proper encoding (which for most purposes will be UTF-8 or UTF-16).  Remember that websites are mainly about first impressions, and it’s really not good if the first impression somebody is getting of your business is “sloppy” or “lazy”.

3. Using Flash

There is simply no reason to do this any more.  Flash had it’s day, but that day is over.  Still many sites, and particularly gambling sites (where it is the least appropriate) are still using Flash.  Plus some of the biggest and most successful sites on the Web make extensive use of Flash in many different contexts.  So if it’s good enough for them, why wouldn’t it be good enough for you?

Well for one thing, Flash is a massive resource hog.  It’s also riddled with vulnerabilities, has been targeted by malicious hackers as a trojan delivery mechanism, and is inherently a privacy risk as well due to the incorporation of persistent Flash cookies, otherwise known as Local Shared Objects.  These cookies bypass the browser’s security settings, and may contain way more information than a regular cookie.  Worse still, LSOs share data between different browsers, making it even more difficult for ordinary users to maintain privacy.

At best, users who know enough about Flash to be concerned, will view your use of Flash as being lazy or out-dated, but there’s also the possibility that users could perceive your business as lacking security consciousness, disregarding privacy concerns, or worse still that you are untrustworthy.

Everything that can be done in Flash can be done in regular HTML 5, so if you’re still using Flash that indicates to users that you either don’t know how to replicate the functionality in HTML 5, that you’re too cheap to do so, or that you’re intentionally exploiting the dark side of Flash.  If you’re thinking of using Flash and you don’t have dishonest intentions, it’s simply not worth the trouble.

4. AutoPlay video

If there’s one thing users universally can’t stand, it’s the obnoxious assumption that if your site provides video content, they’ll want to play it.  News websites are especially guilty of this sin, and many of them even go as far as to shamelessly append a never-ending playlist to the video that they’re autoplaying.  YouTube also has auto playlisting turned on by default, but at least they don’t autoplay your first video.  Of course users should have to opt-in to autoplay, they should not have to opt-out.

Users on limited bandwidth plans, and especially mobile users (which is most of them), will not appreciate that your site has been loading and playing videos in their browser without their awareness of it.  The only time it can be considered appropriate to autoplay a video is when the video is very small (in terms of bytes), self-contained, and adds value to the user experience.

If so many users are describing this behavior as annoying and actually asking how to disable it, it must really be annoying.  And yes, we know it’s actually quite simple for users of Firefox, Chrome, and Chromium to disable autoplay completely, but how many users are really comfortable digging around in about:config or installing a plug-in to block behavior that shouldn’t be exploited in the first place?

Notice that we talked about exploitation there?  It’s because the creators of HTML 5 did nothing wrong by including the possibility of AutoPlay.  It’s just that they didn’t anticipate people using it incorrectly like this.

5. Infinite scroll

This is another once novel and interesting concept that has been totally hijacked by marketers, making it now a source of frustration rather than entertainment as it should be.  Marketers figured out that if they use endless scroll on a web page, they can keep people on the page for more time.

But once again, search results tell a story.  See this example:

As you can see, the general tone is that infinite scrolling is annoying.  It’s not enhancing the user experience, it causes massive usability problems, and it can lead to memory and performance problems as pages grow and generate more content.  This is especially so when users open multiple tabs, and when providers are delivering media-rich content on infinite scrolling sites in multiple tabs, it’s definitely going to lead to problems.

6. Generating pop-under or pop-over windows when they’re not needed

Anything that doesn’t add to the user experience detracts from it.  Detracting from the user experience builds resentment, and users will avoid your site if there’s a viable alternative.  That’s why sites that are in very secure positions like TripAdvisor fling pop-under windows around as casually as US soldiers lob propaganda teddy bears to starving Afghan children. But where the bears at least bring joy, the pop-ups only result in annoyance.

The worst thing about this behavior from TripAdvisor is that there really isn’t any point to what they’re doing because the user is already on their site.  The only imaginable reasons for TripAdvisor to duplicate the same window the user is already on as a pop-under would be:

  • to fool Google’s bounce rate analytics
  • to try to make you have second thoughts if you do bounce

Neither of these seems like a particularly good idea.  Of course there could be other reasons for doing this, but if they exist, they’re not obvious.

7. Annoying overlays

It’s not “International Bash TripAdvisor Day” (yet), but since they’re so generously providing examples of obnoxious web page behavior, it would truly be looking a gift horse in the mouth to ignore this.  So here’s what TripAdvisor just showed a moment ago when I was setting up that pop-under screenshot:

You can probably guess already what’s so stupid about this.  It’s that I’m already on their site.  I’m already considering shopping on their site.  So this pop-over is achieving nothing except getting in the way of me doing that.  At least it’s not one of those similar overlays begging me to subscribe to a newsletter or download a “free” e-book.

You absolutely should never use these things except when it’s to provide some very important information to the user.  An example of that might be instructions on how to play a game they’ve requested in the browser, or a security or privacy warning message.

It’s mostly a matter of common sense (which is probably why marketers fail at it)

The really obvious thing is that when you do something on the Web which only has benefit to yourself, provides no benefit to the user, and in some way inconveniences them, invades their privacy, or actually costs them money (as in the case of autoplay video and infinite scrolling websites), users are going to resent it.  Maybe not all users, but enough of a vocally active majority to influence quite a few more.

If your website has any of these design flaws, you should take action immediately to correct these flaws.  They have the potential to harm your public image and to drive users away from your site.

header image courtesy of 

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.
  • Thank you Catalin, let’s spread the word! Autoplay videos in particular make my skin crawl and should be banned forever :D Great list!

  • Thanks Catalin. Glad to see you feature the annoying Tripadvisor. Can’t go on their website without annoying popups. I would avoid it totally if it were not for my clients.

  • Slick post Catalin. For anyone new to webdesign and wanting a quick and easy way to create a modern website, try out Panther

    Best Joe

  • Hello Admin!
    Such a great and informative post indeed on avoidable design flaws, I really appreciate it!
    Keep updating stuffs like this.

    Manager:
    http://www.training-n-development.com

  • We of https://bynco.com have our first webshop for used cars and it is fully responsive and designed on regular customer feedback.

  • Much appreciated Catalin. Happy to see you highlight the irritating Tripadvisor. Can’t go on their site without irritating popups. I would maintain a strategic distance from it absolutely on the off chance that it were not for my customers.

  • Mia Karen
  • Thanks Admin. Very Use Full Blog. Thanks For post because this post is useful me.
    Android Training Great Job Offer