Web Design Checklist 1:
179 Mortal Sins That Will Send Your Site to Web Design Hell
Checklist 1 | Checklist 2 | What do I do now? | The Top 30 Web Design Mistakes
Why can't we see that our web pages suck?
I've never figured out the answer to this question. The closest I've come is an article "Why can we predict other people's behavior more accurately than our own?" To paraphrase, "when we view other people's behavior we consider the context. With our own behavior, we don't."
In the world of web design, we can see other people's mistakes, but not our own, because we're too close and too familiar with our own pages. We can use our critical eye on another site, but our critical eye goes blind on our own site.
My two web design checklists make web design much simpler.
Checklist #1 is so simple that a brain-dead senior-level executive can use it to see if their web site sucks. How is this possible? I'm going to give you the answer to every question.
The answer sheet: If you check the box for any of the questions, your web site sucks. Period.
There is one problem, though. It takes a good deal of knowledge to fill out the checklist. You have to know how your site is constructed and you have to have a good understanding of web design. If you don't know what a MARQUEE tag does or that your site's content came from a Microsoft Word document and was converted to HTML, it will be difficult to complete the checklist.
The mistakes in Checklist #1 are fatal. I'm not sure how many mistakes in Checklist #2 you can make before you kill your web site.
First Impression / Big Picture
Our site tries to tell you how wonderful we are as a company, but not how we're going to solve your problems.
It takes longer than four seconds for the man from Mars to understand what our site is about.
The man from Mars cannot quickly find the focal point of the home page.
The man from Mars cannot quickly find the focal point of the current page. Where in the heck is the focal point at this site? (AmazingThings.org)
Our site doesn't make us look like credible professionals. People will not do business with you if you look like you're not professional. Remember: Professional Website = Trust.
Our site doesn't make visitors feel they can trust us.
Our home page — or any page — takes more than four seconds to load.
The home page is too long.
The home page asks you to refresh your page to see new content. (Example)
Quickly scanning the page doesn't tell our visitors much about its purpose.
Our site isn't accessible to visitors with physical disabilities.
We don't put design elements where our visitors expect them.
We have not eliminated unnecessary design items.
We don't know which design items are not necessary.
Our site breaks when visited with the Javascript turned off. (People turn Javascript off for security reasons.)
Our site breaks because of back-end coding errors. (Video).
Here's a screenshot of another example of coding errors.
We say "Welcome to..." on our home page. The only exception to this is if you have a really cool graphic—something like the graphic below—then it's OK to use a "Welcome to" statement.
Our site is Flash-based. (This is what Flash sites look like to people without Flash or who are looking at Flash on an iPhone or iPad.) Flash on a website is dead, dead, dead. Steve Jobs twisted the knife into its festering corpse—except for high-end games and video.
Restaurants are notoriously bad about using Flash on their websites. The world is going mobile, especially for browsing. When I'm out looking for a restaurant, I don't want to have to go look for a computer with the Flash plugin installed to find out what the restaurant serves and how much the food costs. Provide an HTML alternative and I can read the menu from my phone.
There's a more subtle issue as someone mentioned in an email: "I do not have flash installed on my work computer."
Our site's navigation is Flash-based. (Here's the actual site:)
Our site uses a splash page (unless it's a liquor, porn, gambling, adult, tobacco, or a multi-lingual / multinational site). (Video)
Our site makes visitors register before they can enter. No, this isn't a site from 1999. It's a site from July 2011. Here's a screenshot in case they change things.
Our site uses two or more Splash Pages. For example, here's Splash Page #1, here's Splash Page #2 and here at last is the home page.
Our site uses the wrong doctype.
Our site's TITLE tag is something like "New Document", "Index" and not the name of your company or other search-engine friendly terms. It could also be something meaningless like "Home."
Our site has a sound file automatically play in the background when a web page loads (Video), but we're not a record label or musician.
I don't know if our site looks the same in the major browsers.
Our home page is asymmetrical and is not set up using a grid system. If the home page isn't set up using a grid, odds are the rest of the site isn't either.
Our site doesn't look the same in different browsers.
Site doesn't work/work well on an iPad (or an iPhone). Here's what the State of Utah says their site looks like on an iPad and here's what I get on my iPad. Notice the cut-off text at the bottom. It gets worse. When I clicked “in Utah,” this is my screen. Support for the iPad is important because it accounts for an increasing % of PC sales—11% last quarter.
Our site requires you to use a specific browser. In this example, it required Internet Explorer. It didn’t work in Google Chrome, but it also didn’t work in IE8. Gee.
Poorly implemented frames. It's a rare site where frames don't suck; however, it's pretty easy to make a bad thing worse. This site provides a wonderful example of something horrible.
The important content does not fit in the first screen. (This is somewhat controversial.)
Our pages have too much / too little white space. Another example of too much white space.
Our site uses pop-up windows.
Our site forces visitors to install weird plugins.
Our site has "Download the latest browser" text or buttons.
Our site prominently displays what hardware and software was used to create the site.
Our site's design was "borrowed" from another site. Here is a video on the topic.
Our site doesn't provide clear instructions on how to perform tasks like ordering, filling out forms, etc.
Our site disables a visitors right-click mouse button because we're crazy enough to think we have content worth stealing and that our visitors are too stupid to figure out how to bypass our code.
Here's a site that disables the right-click function. (As of 05/25/11)
If you want to be an a**hole, here's Javascript code that disables right-click, selecting text, dragging content, closing the window, etc.
Our site is based on a template that's bloated with ugly code, is difficult to maintain, and is, quite frankly, broken.
We don't identify PDF files with an icon. (Video)
We don't analyze our log files.
We've never conducted user testing. We've never asked anyone outside the organization to look at our site and give us a critique.
Text and Links
Our site mixes and matches text sizes on the page. (Video)
Our site mixes text colors on the page. (Also see the video above.)
Our site's text requires people to have special (unusual) fonts on their computers to correctly view our text.
Visitors can't read our text because it's too small or it's difficult to read and comprehend because it's too large.
Leading (spacing) is too big / too small.
There is not enough leading between paragraphs, menu links, and/or lists.
Our SITE USES LOTS OF WORDS IN ALL-CAPS.
Our site uses scrolling, blinking, fading, or moving text.
We use multiple text styles on the same page for no logical reason. We mix and match (choose your combination) flush left, center, flush right and/or justified text.
The color contrast analyzer (here's a video showing the color contrast analyzer in action) says there isn't enough contrast between text/links and background. Here's a video that discusses contrast.
There isn't enough contrast between our page's text and background.
Our site uses centered text on more than just headlines.
We use justified text. Why it's bad #1 and why it's bad #2.
We use browser-specific text tags like <MARQUEE>.
We use font faces that are not appropriate for our audience — like Comic Sans on a senior citizen site. OK, like Comic Sans.
Our site has text in the status bar — moving Javascript text.
We have too much / too little text on a page.
We haven't checked to see if Google Translate (somewhat) accurately translates our text to other languages.
Our site uses underlined text. (Only links should be underlined.)
Our site has sideways text/links.
Our site's content is full of jargon.
Our site's content is full of acronyms.
Our site's use of abbreviations is inconsistent.
We don't use a consistent tone throughout. We switch back and forth from colloquial to clinical etc.
Our font sizes are fixed and can't be resized.
We put more than one idea in a paragraph.
Visited links don't change color.
Our links are not clearly labeled. "Click here" is not enough (NSFW, perhaps)
Our site has too many links in one area.
Our site has too many links. (Video)
Our site has lots of dead links.
Our site has lots of dead links because we haven't checked to see if our site's links are broken.
Our site has lots of dead links and/or no 404 pages.
Our site has lots of complex URLs.
Our site has links consisting of 10-20 words.
Our link text isn't informative.
Graphics, Video, Audio
Our logo does not look like it was professionally made. Another example. Your logo is extremely important. If you put a Dell logo on an IBM page, it seems believable. Your logo is what identifies your organization.
Our logo looks like a bad scan of a business card.
Logo is not above the fold. (Yes, this does happen.)
Logo is not on the top-left of every page. (Now, Yahoo
Logo is not on all the subpages.
Our site's logo is disproportionately large for the top screen.
There are links to the home page on every page -- including the home page.
Clicking the logo on a subpage doesn't take you to the home page.
If your site has banner ads (especially near the top of the page), keep graphics away from them. People tend to ignore ads and this will cause them to ignore your graphics.
Our site uses cheap clip art instead of high-quality web graphics. Here's a website that does this. In case the site changes, here's a screenshot.
Our site uses divider bars.
Our site uses large (file-size) graphics.
Our site uses graphics whose background doesn't match the background of the page or the area where they appear. The "New" symbol to the left is a perfect example. Here's a screenshot of a website showing the same mistake.
Site uses background image that looks like it came from 1995-1999.
Our site uses an ugly background image or an image that looks like it came from 1995-1999. This site uses one of the archetype bad background images. This screenshot shows several bad backgrounds.
Our site uses graphics that detract from the page. (Video)
Our site automatically loads movies instead of using YouTube's method of only showing movies when people click.
Our site uses a trailing cursor. (Video)
Our site uses IE page transitions.
Our site uses "Under Construction" graphics. Here's a screenshot from 7-20-11.
Our site doesn't physically reduce graphics using Photoshop (or other program). Instead, we take a 1200 x 800 pixel photo and manually change the width and height attributes of the IMG tag to a smaller size.
Page Speed calls this "Serve Scaled Images."
Use a computer, that wasn't the production machine for your site, to check that your sites' graphics actually load. The graphics may be referenced on your hard disk and not on the web server. For example, your graphic is referenced as:
"file:///C|/cdn-webpagesthatsuck/crappy-websites.jpg"
It should be refererenced as follows:
"http://cdn-webpagesthatsuck/crappy-websites.jpg"
Here's a site that forgot to check and here's what happened. There are other reasons why your web graphics don't show up. Here are some other explanations.
Our site uses graphics for text. (Here's a screenshot in case the page is fixed.)
Here's another example where the whole home page is just a series of graphics.
Our site uses graphics as links.
Don't put flags on your website unless you're a government agency. Wait a minute. Scratch that. Even the U.S. Senate knows better than to have a flag on their website. Hell, even Michele Bachman doesn't use one. (OK. At the top of her home page there's a hardly noticeable grayscale top of the American flag.) Nobody is going to buy your products because you have a flag on your website. Animated flags condemn you to the lower reaches of bad web design hell.
Our site has an ugly color scheme (red and green, for example).
Our sites' symbols are not logical. Our shopping cart symbol doesn't look like a shopping cart.
Instead of calling it a shopping cart, we call it a basket or other silly term (unless you're in a country - like England - where the term actually is "basket.").
Our site uses animated GIFs. (Site)
Our site uses animations gratuitously. Using animations as the page background is the worst offense of all. (Site example — DPGraph)
Our site uses 3-D graphics. (Video)
Our site uses gradient images (Video).
Our site uses beveled images. Water on Wheels - or check out this screen capture.
Our site uses images with shadows. (Video) Here's a screenshot of shadows used incorrectly.
Our site has flashing graphics that might cause seizures. WARNING: Might cause seizures. The site is for a band/musician — not sure because I can't stand the flickering, which is why the site appears here (among a dozen other reasons).
Our site uses a background graphic that repeats itself on large-screen monitors.
Our background graphic doesn't contrast well against the text, making it hard to read.
Our graphics don't have ALT= attribute text filled in and doesn't use "" for graphics that are empty.
Our site's graphics are confusing — they look like ads.
Our site has pictures of boring white executives.
Some of our pictures are not recent -- we have a 20 year-old photo of some employees.
Our site doesn't use color to convey meaning — red text signifies "this is important."
No one has spent the time figuring out if our color scheme alienates our international users.
Our site has multiple colored areas on the page.
Our site has blocks of ugly colors next to each other (red next to green).
Each page on our site is one big imagemap.
Our site has graphics that suffer from the "halo effect" — dithering that leaves an ugly halo around the image.
Navigation
We created our site's navigational system to meet our needs, not our visitors' needs (video).
Navigation isn't initially obvious.
We understand how our site's navigation works so everybody else probably understands how it works.
The site's search box is their navigation.
We have a page or a popup explains how our navigation works.
A site's navigation should tell you where you are, where you're going to go, and how to get back to the home page. Our site's navigation doesn't.
Our site uses Mystery Meat Navigation. Example one (Video). Example two (Video).
You can't read the navigation. (I know what you're thinking: "How is this possible?" Trust me and click the link. (Screenshot is displayed at original size.)
A man from Mars could not quickly understand our site's navigation.
Although people don't want to learn a new navigational system, we've created our own anyway.
Our site uses JavaScript for navigation. The JavaScript doesn't degrade naturally for visitors who come with JavaScript turned off.
Our site uses sideways navigation (video). Here's a screen capture of another site with sideways navigation.
We use stupid terms like "stuff" for our navigational links or "Beginning" for "Home."
Our site doesn't have shortcuts on the main page to the popular content.
Our site's navigation is not in the top screen. (Here's the full page so you can see where the navigation begins.)
Instead of being predictable, our site's navigation is inconsistent (video).
Instead of being predictable, our site's navigational placement is inconsistent from page to page.
Our site's content is not divided into logical categories and subcategories.
The names of the categories and subcategories are not clear and mutually exclusive on our site.
Our links aren't clearly labeled and don't tell you where you'll end up.
Our links aren't clearly labeled, don't tell you where you'll end up, and say "Click Here." (May not be suitable for work NSFW.)
Some/all of our pages require visitors to scroll horizontally.
Our site uses Java navigation.
Navigation graphics are not the same size and/or color.
On our site, you may have to click four or more times to get to the information you want.
Content
We don't know what content is popular.
Our content is not organized to meet our visitors' needs.
Our content is not broken down into logical categories.
The content is not understandable by humans and is full of marketing-speak, or jargon, or unexplained acronyms.
Unfortunately, the company is out of business (probably because nobody could understand what they were doing. Here's some of their crazy language:
[Company Name} is a multi-platform vertical portal matrix to add value to the consumer Internet experience by simplifying the convergence of brands and services. The company is currently developing the interest of strategic partners and is raising capital for expansion."
The content is not engaging, or relevant, or accurate, or fair and impartial.
I don't know if our content is appropriate for our audience.
The content really isn't appropriate for our audience.
We don't identify non-HTML documents like PowerPoint or Excel.
Our site's content is not written for the web, but for print media (or other media) and we just transferred it to the web.
Our site's content is written at a higher or lower readability level than our visitors' knowledge level.
Our pages are too long. We forget that people skim. Here's a radio station. Here's a cycling company,
Our site doesn't have Heroin Content.
Some of our site's content — graphics and/or text — is considered offensive.
Some of our content — graphics and/or text is considered racially or politically incorrect.
Some of our content — graphics and/or text — is considered offensive to international audiences. Here's an example from my first book.
We didn't hire editor to proofread spelling, grammar, capitalization and content.
We haven't checked to see we've eliminated all "Lorem ipsum" text or other placeholder text and graphics from site — especially from document titles.
Our site uses content that our visitors don't need to know. (NOTE: May be too intense for the squeamish.)
Our site may contain sensitive information the public and/or competitors shouldn't see.
Our site has a mission statement or a link to a mission statement on the front page (non-profit's are exempt).
Our site has different looks on different pages or sections.
Our site doesn't have a privacy or legal statement page.
Our site's content came from Microsoft Word, PowerPoint, etc., documents and then converted to HTML.
Our site has outdated calendar information.
Our site has too many words on a line, making it hard to read.
Our site has too few words on a line, making it frustrating to read.
E-Commerce
I'm finally going to tackle the massive issue of E-commerce. Let me know what you think are Mortal Sins (serious mistakes) and Venial Sins (not-quite-as-serious mistakes).
After going through hoops to enter my name, address, credit card info, etc., your $@$&*(% shopping cart blows up when I click on the submit button. (This mistake will send you to the depths of design hell.)
Checklist 1 | Checklist 2 | What do I do now?
