Top 5 Peeves of Bad Web Design

Posted by admin | Pet Peeves | Monday 2 July 2012 7:32 pm

Or -Why I’ll most likely leave your website in the first few seconds …

and how to avoid this behavior in your users.


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 likely they will look 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  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 — will give up, or importantly, go elsewhere.


These peeves can loosely be defined into two broad categories:

1. Disempowerment of the user
2. Inhibiting 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 this is probably the worst of the lot,

and overly exacerbated when using a tabbed browser.

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

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

all the recently opened tabs because you can’t figure out which one is the culprit.

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 original page

will be confused by a grayed out Back button.”

Anything that disempowers the user from their own

environment should be considered 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  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 banned,

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.


5. Poor or Lacking Visible Hierarchy

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 it’s 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?

QR Code - Take this post Mobile!
Use this unique QR (Quick Response) code with your smart device. The code will save the url of this webpage to the device for mobile sharing and storage.
Share and Enjoy

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment