I've gathered what I think are the biggest web design mistakes = committed=20 during the period 1995 to 2015. Yes it is a little facetious to say = these=20 mistakes will be made in the year 2015, but it's human nature to repeat = your=20 mistakes over and over. But it's human nature to repeat your mistakes = over and=20 over.

3D"building

I've rewritten parts of the article and put in some videos of sites = that have=20 changed. I have the proof of how bad they used to be.

Some mistakes I=92ll discuss aren=92t actually design mistakes in the = classical=20 sense =97 ugly graphics, bad navigation, etc. =97 but serious big = picture=20 problems.

1. Believing people care about you and your web site.

=20

These ladies are laughing at you. Why? You designed your web site for = your needs, not their needs. It gets worse. After they = stop=20 laughing, they=92re going to one of your competitors=92 sites and buy = something.

Here=92s an e-mail I received about the topic:

Powerhouse is a UK electrical goods retail store. We knew they had = a nice=20 bread maker at an even nicer price, so went to their website to see if = we=20 could buy it.

Because we use Firefox, we weren=92t allowed = in. (Note: The=20 site has disappeared. Did a Firefox-free environment cause this to = happen? I=20 don't know, but I'm sure you don't want to find out what happens if = you keep=20 potential customers out of your site. =97 vf)

Comet=92s = website worked a=20 treat and they have our money now!

Write these two sentences where you can see them as you=92re = working:

The only reason my web site exists is to solve my customers=92 = problems.=20
What problems does the page I=92m looking at = solve?

Nobody cares about you or your site.

Really. What visitors care about is solving their problems. Now. Most = people=20 visit a web site to solve one or more of these four problems:

They want/need information=20
They want/need to make a purchase / donation.=20
They want/need to be entertained.=20
They want/need to be part of a community.

Too many organizations believe that a web site is about opening a new = marketing channel or getting donations or to promote a brand or to = increase=20 company sales by 15%. No. It=92s about solving your customers=92 = problems. Have I=20 said that phrase enough?

If there ever was a site that was not about meeting their = customers'=20 needs, it had to be the Association of International Glaucoma Societies. = They've "fixed" the=20 site, but here is a high quality video catching them in the act. The = YouTube=20 version is below.

2. A man from Mars can=92t figure out what your web site is about in = less than=20 four seconds.

=20

You should be able to look at the home page of any site and figure = out what=20 the site is about within four seconds. If you can=92t, the site is a = failure.

People who make Mistake #1 often end up making Mistake #2. A perfect = example=20 of a site that fails the Four-Second Test is amp.

If your browser window isn=92t 1024 x 768, you get = "nothing."=20 You don=92t even see what this company thinks passes for content.

As the BrowserCam web tool demonstrates, the=20 home page doesn=92t get much better when the window is 1024 x = 768.

What is this site about? Who knows? Who is going to care enough to = stay=20 around and find out?

A final feature of sites that make Mistake #2 is that you can=92t = really figure=20 out what the site is about from their company name and their tagline, = "Amp",=20 tells you nothing, but implies something to do with electricity. Their = tagline,=20 "Experienced Passion", only makes sense if it=92s a dating service for=20 seniors.

Non-profit organizations are the worst offenders when it comes to = names and=20 taglines (and most everything else). Here=92s a typical non-profit = organization=92s=20 name and tagline:

Big Hands of=20 Hope
=96 It=92s all about=20 compassion

No. It=92s all about solving your visitors=92 = problems. Nothing=20 in the name or tagline tells you this organization helps African = children

Here=92s an over-the-top example of a name and tagline that=92s = better:

Save the African=20 Children
=96 We keep them from = dying a=20 horrible death

Yes, you must tone down the tagline, but at least you understand the = mission=20 of the organization.

3. Using design elements that get in the way = of your=20 visitors.

3D"choking Would you do this?

You=92re a fundraiser getting ready to make the ask for = a large sum=20 of money. You=92re the best fundraiser on the planet because you have a = pitch that=20 can move the heavens.

You walk into the donor=92s office, introduce yourself, = and place an=20 information packet in front of the donor.

As you start to make your big pitch, the donor reaches = into the=20 packet, extracts the pledge form you hope he=92ll sign, and grabs a = pen.

As the donor starts to sign the lucrative, long-term = pledge, you=20 reach over across the table, grab the donor by the throat, and yell = =93Not so=20 fast, jerkface! I haven=92t finished my pitch!!!=94

You wouldn=92t do that, would you? Then why are you using design = techniques=20 that keep the visitor from getting to the sale? These design techniques = are the=20 web equivalent of grabbing someone by the throat because they violate = the golden=20 rule of doing business on the Web =97 "Don=92t do anything that gets in = the way of=20 the sale."

Here's an archetype example of getting in the way of the sale =97 = literally =97=20 as performed by Jakob Nielsen. Well, somebody at the Nielsen Norman = Group. As=20 the person who sent this mistake in to me stated:

So I get this link on a newsletter that informs me that Dr. Nielsen = will be=20 holding usability conferences around the globe - one in a city only a = few=20 hours drive from where I live. Clicking on the link 2/3rds the way = down the=20 newsletter, I find myself on a nice, concise and easy to navigate page = that=20 provided me with all the information I need.

Sold on the idea of attending, I see and click on one of the links = on the=20 left column menu under each conference city entitled "Registration" = for the=20 locale of my desire - only to find that I can't register.

Meaning, when you click on them, you get the ubiquitous basic=20 authentication username and password dialog with no instructions on = how to=20 enter said page - meaning, it would appear why they want you to = register for=20 their conference, they've thrown down a frustrating step into the = process that=20 forces a user to come back some other day.

I suspect this occurred by not testing all the links on a machine = that=20 wasn't already authenticated. Even if this encumbrance occurs for some = other=20 reason, not the best way to show one's expertise in the area of=20 usability.

Some of the many, many other techniques that get in the way: splash pages,=20 FlashSplash=20 pages, animations, lack of focal point on the page, too much text, = too=20 little text, too many pictures, etc. See any of my books or any article = on this=20 site for more examples.

When people arrive at your site it=92s because they=92ve made a = commitment.=20 They=92ve clicked a link or an ad and now they are at your site so you = don't have=20 to try to seduce them. Let them in your site.

On the other hand, seduction is necessary when you buy ads = on other=20 sites and search engines. This is when you have to seduce people to go = to your=20 site.

4. Thinking your web site is your marketing=20 strategy.

Unless you=92re an online shop selling t-shirts, cameras =97 you get = the picture=20 =97 your web site is not your marketing strategy. Your web site = is=20 part of your marketing strategy.

If you take orders over the phone, don=92t get rid of your phone = banks. If=20 you=92re successfully using direct mail, don=92t stop. Heck, if the = Yellow Pages are=20 working for you, continue to use them. The trick, and the hard part, is = to find=20 where your web site fits in your marketing strategy.

Here=92s a perfect example from an e-mail I received from a dear = friend who was=20 consulting for an organization that was going to put all of its eggs = into one=20 web basket:

I have to tell you that I attended a board meeting today for = the=20 organization whose web site you checked out for me.

The board consists of really high end people who had flown in from = all over=20 the country! When push came to shove, they asked me what I thought = about their=20 ability to raise money by driving people to the web site.

I shared your response with them. Silence in the room. And then a = couple of=20 other board members acknowledged that it needed work, affirming that = they had=20 had the same impression but didn=92t have the expertise to say = anything about=20 it.

You can=92t put all your eggs in one electronic basket.

5. Have you ever seen another web site? = Really? Doesn't=20 look like it.

I usually don't let bad design affect me, but there's one mistake = that really=20 gets under my skin. I don't understand how it's possible to create web = sites=20 that look like car wrecks on the information highway.

Sites like Accept Jesus, Forever Forgiven puzzle me. Hasn't = anyone at this=20 organization seen another web site? Have you been to Amazon.com or the = ASPCA or=20 even to Catholic.net (which sucks, but is infintely better = than AJFF).=20

6. Navigational failure

All web navigation must answer these questions:
3D"vincent

Where am I?
Where have I been?
Where can I go = next?
Where=92s the Home=20 Page?
Where=92s the Home Home Page?

Navigation must be simple and consistent.

Common mistakes include different types of navigation on the same = site, a=20 link to the current page on the current page (home page link on home = page),=20 poorly worded links so the visitor doesn=92t know where he=92ll go if he = clicks, no=20 links back to the home page, and confusing links to the home page.

A problem that isn't discussed much is the order of the navigational = items.=20 Many sites set the link order based on their needs. In this = example, the=20 links make sense to this organization (Home, About Us) and they believe = the=20 graphics give a down-home feel. If the links were based on their users = needs, the=20 links would have a different order and the pictures would be replaced = with=20 something more helpful.

There are probably 10 million ways to screw up navigation. This video = of the=20 Tampax web site shows you one unusual way to screw up navigation.

7. Using Mystery Meat Navigation.

3D"High While there are 10 million ways to screw up your navigation, = the best=20 way to screw it up is to use Mystery Meat Navigation (MMN). Here=92s my=20 definition:

Mystery Meat Navigation occurs when, in order to find specific pages = in a=20 site, the user must mouse over unmarked navigational "buttons" =97 = graphics that=20 are usually blank or don=92t describe their function. JavaScript code = then reveals=20 what the real purpose of the button is and where it leads.

Here's Wikipedia's definition.

There are certain sites that are allowed to use MMN: music, band, = movie, art,=20 experimental, fashion =97 sites where making an impression or being cool = is=20 mandatory. It=92s OK because nobody really cares about these sites and = their=20 purpose isn=92t really about making money.

Another exception is what I would call "cult sites" =97 sites that = are so=20 popular with a specific group that their audience automatically commits = the=20 icons to memory. Slashdot=20 immediately comes to mind.

The problem with MMN is it influences designers and companies who = aren=92t=20 smart enough to realize they=92re not in the music, art, movie, or = fashion=20 business. When a manufacturing company starts using MMN, you know the = apocalypse=20 can=92t be too far behind. The University of Calgary university used MMN = for evil=20 purposes. Of course, they changed their site =97 improving it in the = process, but they=20 can't hide their crimes. The video below shows you what the U of C = looked like=20 when it used MMN.

It's not just small companies and universities that suddenly become = brain=20 damaged. Big corporations also act like lemmings. The example below is = from an=20 old version of Qualcomm:

8. Site lacks=20 Heroin Content.

3D"bad In = his classic=20 book which I read when I was 15, Naked Lunch, William Burroughs = described heroin as the ultimate product. Why? Because people would = crawl=20 through the sewers and beg to buy it. In the non-drug world, there are = very few=20 products that can be classified as having heroin=92s appeal.

How many web sites have heroin content?

Heroin Content=92s characteristics vary by type of site =97 but = you=92ll know it=20 when you see it! One global characteristic, though, is frequently = updated=20 content. The best way to get people to come back to your site again and = again is=20 by having content they need, and then updating this content on a regular = basis.

How do you create Heroin Content? The answer is, it depends on the = likes and=20 dislikes of your audience. Remember, it=92s what your audience wants = that counts.=20 What I consider Heroin Content is somebody else=92s Quinine Content.

Here are some thoughts about web content.

Does your content solve your customers=92 problems or does it = create=20 problems?=20
Does your content match your audience=92s expectations?=20
Have you determined the purpose of your site?=20
Do you know your target audience?=20
Ask yourself: "What content do I have that would cause anybody in = their=20 right mind to visit my site a second, third, or fourth time?" This is=20 extremely important. You might con (seduce) someone to visit your site = once,=20 but why would they want to come back a second, third, or fourth time? = If you=20 can=92t answer this question, you really shouldn=92t have a web site.=20
Is the content technically correct?=20
Does your customer need to know the content you=92re presenting?=20
Is the content current and updated frequently?=20
Can people find the content they=92re looking for?=20
Does my site have Heroin Content?

I just got through reading that Bill Gates wants to start a blog. Why = would=20 anyone in their right mind want to read it? Do you think it will contain = Heroin=20 Content? As Seth Godin points out, blogs only = work when=20 they meet four of the following five conditions:

Candor=20
Urgency=20
Timeliness=20
Pithiness=20
Controversy

Content Trumps Design. PostSecret is poorly designed. You = have purple=20 links on a black background, small text that doesn=92t contrast well = with the=20 background, lime green headers, a page that goes on and on, content that = only=20 changes once a week, and a poorly designed logo. The postcards are often = hard-to-read, especially on a small monitor.

The content, however, is extraordinary and ever since I discovered = the site,=20 I=92ve visited it every week. Well, every week but the week I had brain = surgery=20 <painful grin>. This site is proof that content is much more = important=20 than design. Yes, my comments about the design are accurate, but = meaningless=20 because the site has Heroin Content.

Before you start saying, "My site also has Heroin Content so I don't = have to=20 worry about the design," let me point out a small fact. Your site = doesn't have=20 Heroin Content. Digg.com has it, YouTube borrows a lot of it, and Google is another = site that has=20 Heroin Content.

Forget about Search Engine Optimization tricks. The guy who runs = today's=20 sucker hasn't spent a dime on optimization and his home page has a = PageRank of=20 8, which is God-like. It's content, content, content that gets you = ranked highly=20 and gets you to the top of the search engines (along with other elements = such as=20 inbound links).

9. Forgetting the purpose of text.

3D"Do After ten years, you=92d think web designers would = understand how to use=20 text, but they don=92t. Here are some helpful hints.

Text is Text. Don=92t use graphics or Flash for text. The first = reason is it=20 increases the size of the page; the second reason is it isn=92t search = engine=20 friendly; the third reason is the graphics are often of poor quality and = are=20 aliased (jaggy); and fourth, mistakes=20 are hard to correct as this example demonstrates (it was originally = created=20 in Flash).

Gimme contrast. Web designers have fallen in love with creating text = that=20 doesn=92t contrast with the background.

One of the strangest set of text contrasts I=92ve ever seen was at = the University=20 of Idaho Children=92s Center (it's been fixed), with blue and black = text on a=20 green background. It certainly hurt the eyes. They also alternated the = color of=20 their links =97 now that=92s a bad design technique you=92ve probably = never seen=20 before.

As I said, they fixed their page, but the video below shows you the = bad=20 version.

If you=92re not sure about the contrast between the text and = background at your=20 site, check out your text contrast at = JuicyStudio.

Don=92t use small text. Designers are also fond of using small text = (especially=20 on Flash sites). Hey, we=92re all getting older and as I often say, "If = people=20 can=92t see it, they will flee it." Here=92s an architectural firm that uses = small graphics=20 as text along with some of the worst Mystery Meat Navigation on the = web.

Keep text simple. The next video explains this concept better than I = can.

10. Too much material on one page.

3D"You Yes, it=92s called a web page, but that doesn=92t mean you = have to cram=20 all your material on one page.

It=92s very easy to keep adding material to your home page until it = gets out of=20 control.

With so much content vying for attention it=92s difficult for the = eyes to find=20 the focal point. People get confused and they leave. A long web page = means you=20 have failed to organize your site properly =97 probably a combination of = not=20 planning your site and poor navigation. An example of too much material = on one=20 page is Arngren.net.

Oh. Yes, this page is too long. You're learning good web design by = looking at=20 bad web design.

11. Confusing web design with a magic trick.

3D"People In=20 Mistake #4 I said, "Don=92t confuse web design with sex." In Mistake #11 = I=92m going=20 to tell you, "Don=92t confuse web design with a magic trick."

Web design is the reverse of a magic trick. In a magic trick, you = show the=20 audience your right hand and perform the trick with your left. In Web = design,=20 you tell them where you=92re going first=97and then go there. People = have=20 expectations about web sites and they don=92t like surprises. It will = certainly=20 confuse them and it could make them want to leave and find a site that's = less=20 confusing.

If you=92re a dentist, your visitors expect your web site to look = like it=20 belongs to a dentist =97 not to someone who is going to the opera.

Here are web site photos of two dentists. Only one looks = like what=20 you expect a dentist to look like.

Speaking of magic tricks, links should be clearly labeled so your = visitors=20 won=92t be surprised when they click. I made a mistake of not labeling a = link on=20 one of my pages and I received the following e-mail:

Because I use your site for design considerations, I access your = site at=20 work. You probably know where I=92m going with this, but =85it might = not be a bad=20 idea to warn folks when the content is going to be "racy."

Don=92t get me wrong, Sports Illustrated=92s swimsuit = issue is tame=20 (and in my view, the models are gorgeous), but some of us work in an=20 environment of hyper-sensitivity! It would be nice to know when my PC = is going=20 to be non-PC so I can at least glance over my shoulder. (I know I = could look=20 at the address on the status bar to get a clue, = but=85)

Here=92s a link to what he thought was racy.

If you use a vague link description or just say "Click=20 Here" and don=92t tell people where they=92ll end up, they could be = horribly=20 surprised (and/or shocked and/or disgusted) when they click the link

12. Misusing Flash.

3D"There Just as a raincoat is a tool that can be used for good or = evil=20 purposes, Adobe Flash is also just a tool that can be used for good or = evil. It=20 all comes down to how it=92s used and who is using it.

Unfortunately, there=92s a tendency to misuse Flash and because of = space I=20 can=92t go into every detail. Nevertheless, here=92s a perfect example = of=20 FlashGoneBad courtesy of one of the contestants from the TV show "The=20 Apprentice."

You have to watch a boring, soundless, twenty second flash intro with = no=20 option to skip it. If you=92re still around when the content loads, the = pain=20 doesn=92t stop. There is a lovely 8 or 10 second delay between when you = click one=20 of the navigation options and when the content actually arrives. Omarosa

Annoying Flash Techniques I Have Witnessed

I=92ve noticed some interesting Flash mistakes that are worthy of = comment.

Forgetting to put a =93Skip Intro=94 button, forcing visitors to = see your=20 stupid FlashSplash page every time they visit. The problem could be = =93solved=94=20 by setting a cookie so visitors only see the animation once unless = they click=20 a button to =93play it again, Sam.=94
Putting a =93Skip Intro=94 button on the page. Of course, we all = realize that=20 a =93Skip Intro=94 button signifies that the content on the page is = worthless.=20 Good Web designers only put content that must be viewed on a page. By = giving=20 them the option to skip this material, you=92re saying it=92s not = worth seeing. If=20 it isn=92t worth seeing, why do you have it on your site in the first = place?=20
No, I=92m not trying to have it both ways. An introductory Flash = animation is=20 a Splash page. Splash pages, as we learned long, long ago, are not=20 necessary.

If you must have a =93Skip Intro=94 button, make it big enough so = people can=20 see it and have it available as soon as the animation starts. Don=92t = wait 10=20 seconds to load the button.
Making people listen to music. If you have (original) music in = your Flash=20 animation, give people the option to turn off the music.=20
And if people turn the off the music on one page, it means they = don=92t want=20 to hear it on any other page. There are dozens of sites where the = programmer=20 hasn=92t figured out how to make the music stop on all pages. They = have a =93Stop=20 the Music=94 button on each page. Arrgh!!! A good example that may not be work = appropriate=20 (see, I warned you) is a fashion site where if you turn off the music = on the=20 FlashSplash page and click "Enter", the music automatically comes back = on. The=20 designer should be whipped (unless s/he likes to be whipped).
Creating a =93non-Flash=94 version of a site that still includes = some Flash=20 animation. If you have an HTML version of your Flash site, make sure = there=92s=20 no Flash. There are few things stupider than using Flash in a = non-Flash Web=20 site.

I=92d like to mention that you often find Flash with Mystery Meat = Navigation =97=20 taking one bad technique and making it four times worse.

Then again, the New York Times brilliantly used Flash and MMN on = their=20 feature "A Look at 1000 Who Died" (registration is free, but = required).

You can view the casualty list by last name, branch, date of death, = home=20 town, home state, gender, age, type of death, and "other." On the = "Other" page,=20 they could use some contrast. Black type on brown background is hard to=20 read.

When Flash works the results are powerful.

13. Misunderstanding the use of graphics

3D"people Graphic mistakes make the list because they keep showing up = again and=20 again.

Like Flash, there are so many ways to misuse graphics. I=92m = amazed by the number=20 of sites with ugly graphics and the number that still use animated = GIFs.

Some of the mistakes include using GIF for JPG, large graphics, ugly=20 background images, lack of contrast (text isn=92t the only place you can = mess up),=20 ALT=3D attribute not set, inappropriate graphics, and dozens of = others.

14. Mystical belief in the power of web = standards,=20 usability, and tableless CSS.

3D"the There is nothing wrong with Web Standards, usability, and = tableless=20 CSS except they=92re being touted by=85guess who?=85people who offer web = design=20 services specializing in=85guess what?=85Web Standards, usability, and = tableless=20 CSS.

These are simply tools. Remember, nobody gets excited about the tools = used to=20 build a house ("Please tell me what brand of hammers you used!"). People = get=20 excited about how the house looks and performs.

Yes, Web Standards can make your site search engine friendlier, = reduce=20 bandwidth, etc.

The article 9 Ways to Misunderstand Web Standards = provides=20 interesting insights into the problem. Speaking of problems, the text = doesn't=20 show up in IE6 (could also occur because of ad-blocking software I'm = using).=20 Works fine in Firefox. Hmm.

I realize this topic is controversial, but I think the last word (for = the=20 moment) goes to Google's Matt Cutts. In this video, his commentary on "cleanliness of code" = starts at=20 around 2:40, but you should watch the whole video.

15. Javascript

This is the most controversial of my selections because Javascript is = more=20 often used for good than evil.

The Number One problem with JS is security. Many of the browser = exploits=97=20 especially with Internet Explorer=97 can be traced to JavaScript. = Microsoft's=20 solution to many security holes is to "turn off scripting" = (Javascript).

The second problem is JS bloats up your page. My home page goes from = 31,803=20 bytes to 71,488 because of the Javascript I've added to track visitors = to my=20 page and what they do. Then, there's the issue of all those ads on this = site.=20 They're run by JS. No ads, no money. The benefits make Javascript so = wonderful,=20 but there's a cost. I know, I know. I'm getting a lot of benefit out of = JS,=20 which brings me to the last problem.

The third problem comes from JS conflict. So many JS programs say = they want=20 to be the last item before the BODY tag. Who wins? Does it make a = difference?=20 Then there's the problem of other JS programs in the HEAD of the page. = Most of=20 us don't write JS so we cut and paste elements from scripting sites. I = have had=20 conflicts and it takes forever to find the problem when you're not the=20 programmer.

Copyright =A9 1996-2009 Flanders Enterprises
Design = copyright =A9=20 2006 Salt & Pepper. Designed by Free CSS=20 Templates