149 Mortal Sins That Will Send Your Site to Web Design Hell
“Does my web site suck?”
Of all the e-mail questions I receive, this one amazes me the most. Perhaps my amazement is because I’m a left-brain kind of guy. When I look in the mirror I see a balding, overweight, post-middle-age, white guy. I don’t look in the mirror and see Tom Cruise — I’m a lot taller.
If I weren’t logical, there’s a simple way for me to figure out if there’s a resemblance. I could ask people. After embarrassing myself, I might figure out that I don’t look like Tom.
It would hurt my ego far less to sit in the privacy of my home and go through a checklist of Tom’s attributes and see if I matched them.
- Do I have a full head of dark hair?
- Am I thin and fit?
- Do I have a killer smile?
- Do women come up to me and go, “Oooh. Tom”?
- When excited, do I jump up on sofas?
A one out of five score does not qualify me as Tom Cruise. (I said “Yes” to #5).
It’s the same with critiquing web sites. It’s far easier and less painful to sit down in the privacy of your office and go through and fill out two checklists.
My two web design checklists make critiques simple.
Checklist #1 is so simple, a brain-dead senior-level executive can use it to figure out 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 a 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 completely fill out the checklist.
The mistakes in Checklist #1 are fatal. I’m not sure how many of the mistakes in Checklist #2 you can make before you kill your web site.
Note:
Yes, WebPagesThatSuck.com fails to pass the checklist. The site’s design has always sucked.
Checklist 1:
First Impression / Big Picture
We’ve designed our site to meet our organization’s needs (more sales/contributions) rather than meeting the needs of our visitors.
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.
Our site doesn’t make us look like credible professionals.
Our site doesn’t make visitors feel they can trust us.
Our home page — or any page — takes more than four seconds to load.
Quickly scanning the page doesn’t tell our visitors much about its purpose.
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.
Our site breaks because of back-end coding errors.
We say “Welcome to…” on our home page.
Our site is Flash-based (and this is what our site looks like to people without Flash.)
Our site’s navigation is Flash-based.
Our site uses a splash page (unless it’s a liquor, porn, gambling, adult, tobacco, or a multi-lingual / multinational site).
Our site makes visitors register before they can enter.
Our site uses two or more splash pages.
Our site’s TITLE tag is something like “New Document”, “Index” and not the name of your company or other search-engine friendly terms.
Our site has a sound file automatically play in the background when a web page loads, but we’re not a record label or musician
I don’t know if our site looks the same in the major browsers.
Our site doesn’t look the same in different browsers.
The important content does not fit in the first screen.
Our pages have too much/too little white space.
Our site uses pop-up windows.
Our site forces visitors to install weird plugins.
Our site has “Download 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.
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.
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.
We don’t analyze our log files.
We never conduct user testing.
Text and Links
Our site mixes and matches text sizes on the page.
Our site mixes text colors on the page.
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.
Our SITE USES LOTS OF WORDS IN ALL-CAPS.
Our site uses scrolling, blinking, fading, or moving text.
The color contrast analyzer says there isn’t enough contrast between text/links and the background.
AccessColor says there isn’t enough contrast between our stylesheet and our page.
Our site uses centered text on more than just headlines.
We use justified text.
We use browser-specific tags like <MARQUEE>.
We use font faces that are not appropriate for our audience — like Comic Sans on a senior citizen site.
Our site has text in the status bar — moving Javascript text.
We have too much/too little text on a page.
Our site uses underlined text. (Only links should be underlined.)
Our site has sideways text.
Visited links don’t change color.
Our links are not clearly labeled.
Our site has too many links in one area.
Our site has too many links.
Our site has lots of dead links.
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 links are not informative.
Graphics, Video, Audio
Our logo does not look like it was professionally made.
Our logo is a bad scan of a business card.
Logo is not above the fold. (Yes, this does happen.)
Logo is not on the top of every page and clicking it doesn’t lead 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 they’ll ignore your graphics.
Our site uses cheap clip art instead of high-quality web graphics.
Our site uses divider bars.
Our site uses large (file-size) graphics.
Our site uses graphics that detract from the page.
Our site automatically loads movies instead of using YouTube’s method of only showing movies when people click.
Our site uses a trailing cursor.
Our site uses IE page transitions.
Our site uses “Under Construction” graphics.
Our site doesn’t physically reduce graphics using Photoshop (or other program). Instead, we take a 1200 x 800 pixel photo and manually changing the width and height attributes of the IMG tag to a smaller size.
Our site uses graphics for text.
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.
Our site uses animations gratuitously.
Our site uses animated GIFs.
Our site uses 3-D graphics.
Our site uses gradient images.
Our site uses beveled images.
Our site uses images with shadows.
Our site has flashing graphics that might cause seizures.
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 uses moving graphics — falling snowflakes, flying birds — stupidly rendered by DHTML.
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.
We understand how our site’s navigation works so everybody else probably understands how it works.
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.
Our site uses Flash navigation.
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 and it doesn’t degrade naturally for visitors who come with JavaScript turned off.
Our site uses 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.
Instead of being predictable, our site’s navigation is inconsistent.
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.
We keep people from signing up for expensive conferences.
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.
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.
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.
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.
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 sections that are under construction and the public can access them.
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.
Checklist 2
“How long can you French kiss before it’s a mortal sin?” or “How many web design mistakes can I make before our site sucks?”
82 Potential Mortal Sins
You have to be born into the Roman Catholic church to truly appreciate the first question — pre-Vatican II Catholics will understand it best. Back in eighth grade one of my male classmates at St. Andrew’s School asked, in all seriousness, the above question. The question has stayed with me for forty years. The answer escapes me.
Non-Catholics will still appreciate the question. Basically, it’s the same question they ask Google’s Matt Cutts (except they don’t phrase it as honestly): “How many stupid tricks can I pull trying to get my site to the top of Google’s rankings before you punish my site?”
The mistakes in Checklist 1 are fatal. I’m not sure how many of the mistakes in Checklist 2 you can make before you kill your web site.
Special Note: Search Engine Optimization
One of the areas I skipped is Search Engine Optimization and web design — mostly because many factors aren’t design related. One of the best sites for all things search related is WebmasterWorld and a good friend of mind informed me they recently had an incredibly fascinating discussion entitled “25 Signals of Crap.”
While many items mentioned are found on my two checklists, they frame them in the context of Google and advertising. You really need to read this forum discussion.
Checklist 2:
Our site isn’t accessible to visitors with physical disabilities.
Our site doesn’t use white or off-white color for background.
Our site doesn’t use black text.
Our site uses Frames.
Our site uses the wrong doctype.
Our site doesn’t use CSS.
Our site uses CSS, but it’s inline CSS.
Our sites logo is not at top left corner.
Our site has no search engine.
Our search engine is not at top-right of page.
Our site’s search engine box isn’t long enough for visitors to see what they’re typing.
Our site has a search engine, but not on every page.
Underlined text is not link text.
Our site uses invalid HTML attributes (marginwidth, etc.).
Our site uses graphics as links.
We haven’t validated our site’s HTML code.
We haven’t validated our site’s CSS.
We haven’t checked to see if our site’s links are broken.
Our site uses deprecated markup (like the CENTER tag).
Our site doesn’t use a style switcher.
We haven’t checked to see how our site looks in grayscale.
We haven’t checked our site using the Firefox plugin “Web Developer”.
We haven’t checked our site using the “The Web Page Analyzer”.
Our site uses the CSS hover attribute on text.
We don’t optimize our site’s CSS or HTML files.
Our site’s accounting figures don’t line up on the decimal point.
Our site’s logo is disproportionate for top screen.
Corporate logo is not at top left of screen.
Logo links to home page on sub-pages.
There are links to the home page on every page — but the home page.
Putting dates on material that’s not updated regularly.
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.
Not declaring a background color.
Our site uses unencoded ampersands.
Our site is <span> and/or <div> happy.
Hit counters.
Contact information is not available.
Our site doesn’t provide multiple methods to be contacted. (Contact Us form, phone number, address, e-mail, etc.)
We use dates and times on a site that’s not about dates and times.
Our site has pictures of boring white executives.
Our site has pictures of boring white executives — and if you click the picture, you get to see them up close and personal.
Some of our pictures are not recent — we have a 20 year-old photo of some employees.
Our site uses JPG when it should use GIF images and vice-versa.
We use SVG file format because we can.
We over-optimize our images.
Our site has graphics that look like a link, but aren’t.
We don’t check to see if scanned images are scanned on dirty scanners.
Check on an outside machine if all your sites’ graphics actually load.
There’s no reason for a globe image. We get that you’re global.
Our site uses an ugly background image.
We use Dynamic HTML navigation.
We don’t have a site map.
We have a site map, but it’s graphics based.
Our site uses liquid design.
Our site uses fixed-width design. (You can’t win. Liquid is wrong on wide-screen monitors because you have line lengths that are hard to read — and vice versa.)
We use table borders on content other than accounting-type data.
OUR HEADINGS ARE CAPITALIZED.
Our text is full of superlatives like “This product will solve every problem you have.”
Our paragraphs have too much text. (We’re a web of scanners.)
Our site bolds a lot of text.
Our site italicizes a lot of text.
Our site’s font sizes are fixed and can’t be resized.
Our site uses three or more font faces on a page.
We don’t have a CSS file for printing pages.
We don’t use logical file names for documents or graphics.
Our site uses graphics that don’t enhance the page.
Our graphics and text don’t match up.
Some of our documents run across multiple pages, but we don’t give the option to see it all on one page.
Back button doesn’t go back because we’ve disabled it.
Our site doesn’t provide a feedback mechanism.
Our forms mix up checkboxes and radio buttons.
Our site has pull-down (drop list) menus.
We don’t use bullets to organize information.
We don’t manually spell check TITLE, ALT tags, etc. (spell checkers don’t check these).
Our content is not timely.
Our content is not updated frequently.
Our site doesn’t separate style from content.
OK, My Web Site Sucks. What Do I Do Now?
The answer to this question is the same one as the joke about the guy who goes to the doctor’s office and says “It hurts when I raise my arm.” The doctor replies, “Don’t raise your arm.”
When I’m training or giving a speech, I tell the audience, “The most important thing you can do to improve your web site is eliminate unnecessary design items.”
Everything you’ve checked isn’t necessary. Eliminate these mistakes and you’re on your way to an improved web site.
Elimnation isn’t the whole solution. If you eliminated the mistakes on certain web sites, there wouldn’t be much left.
If you didn’t check your sites against the online programs in the introduction, here they are again. Use them as a start to fix your site.
After You Complete the Checklists
While validating/checking your site against the following tools won’t guarantee your site isn’t ineffective, you won’t have to answer certain questions with a check mark.
Check your page’s HTML at http://validator.w3.org. Fix your mistakes — or as many as you can.
Check your page’s/site’s CSS at http://jigsaw.w3.org/css-validator/. Fix your mistakes — or as many as you can.
Check your links at http://validator.w3.org/checklink. Fix your mistakes.
Check your images for accessibility issues at http://juicystudio.com/services/image.php. Fix your mistakes.
Check your content for readability at http://juicystudio.com/services/readability.php. Make sure your content is not too “smart” for your audience.
Check to see if your text and background colors have sufficient contrast at http://juicystudio.com/services/colourcontrast.php. Fix your colors.
Check to see if your CSS’s text and background colors have sufficient contrast at http://www.accesskeys.org/tools/color-contrast.html. Fix your colors.
Check to see how your page looks to the colorblind at http://www.q42.nl/demos/colorblindnesssimulator/colors.html
Check your site on http://www.instantposition.com for the first 5 keywords you use to describe your site.
Check your page’s content accessibility using Cynthia Says at http://www.cynthiasays.com/
Check your page’s performance and web page speed at http://www.websiteoptimization.com/services/analyze/
Check that your page/site looks the same in over 80 different browser combinations at BrowserCam
Addendum: The Problem With Checklists
There are a lot of checklists about good and bad web design and the problem with them is simple — they’re vague. Two examples from a checklist touting a $10,000 seminar on improving your web site were:
Is essential content available where needed?
Is the text legible?
Your natural reaction is going to be either “Yes” or “No” because they’re vaguely phrased. If I asked you “Is your site’s text right justified and if it is, then your site sucks,” you could definitively answer the question and know where you stand. I’ve also just saved you $10,000.
I hope these two checklists will the be-all and end-all of web design checklists.
Hey! You May Not Have to Fill Out The Checklist!
If your site is for:
- a movie
- a movie company
- a musical band
- a record label
- an art site
- an experimental site
- a game company
- an individual game
- a personal web site
…then you can skip these checklists because your site isn’t real. By “real” I mean your site conveys information or is selling products. You have a site where people are held accountable.
What Wasn’t Covered
Planning your web site, determining your target audience, the composition of your target audience, your goals for having a web site, budgeting the money, hiring the people to create/run the site, etc.I’m not covering any of the pre-planning that should occur before you start your site or start a makeover.
Note 1
There are very few e-commerce and search engine optimization entries. I feel these subjects deserve their own checklist. Obviously, almost anything you do to straighten out your site’s design will help with optimization. I’m also fairly light on forms, probably because I’ve created so few.
No comments:
Post a Comment