Web Pages That Suck - learn good web design by looking at bad web design

The Drive By Truckers (DBT) are one of my favorite bands. I bought tickets for their last concert in Seattle, but I got violently ill and couldn’t make it. Back in 2010 DBT were playing in my birthplace on my birthday and I thought about flying out for the concert. It would have been cosmic to hear them play their great song, “Birthday Boy” on my birthday in the town where I was born. Trifecta Perfecta. They’re coming back to Seattle and so I checked out the venue, Showbox, to see prices, etc. I noticed that…well, I’ll let the video do the talking.

Vincent Flanders’ comments: Since Sunday is the 10th anniversary of 9/11, I want to present three different 9/11-themed web mistakes. One is accidental; one is interpretational; and the last one is an example of horrific bad taste.

1. The Accidental Mistake.

One of TheStreet.com’s many different home pages from 9-11 needed a sharper editorial eye.

2. The Interpretational Mistake.

Massport left up graphics showing an airplane in the crosshairs of who knows what. Since Massport runs Logan Airport, where two of the three passenger jets were hijacked, they should have removed the graphics immediately.

3. The Horrific Bad Taste Mistake

Some days after 9/11 a company said, “You know, I think we can use 9/11 to sell online wills.”

Here is a video of the world’s worst banner ad and it still leaves me gasping for air.

Submitter’s comments: My husband is into mountain biking and bike-packing and has been shopping for bike bags lately. He loves the products made by Carousel Design Works…or he probably would if he could order them. I present you the product site that won’t let you buy products.

This is a great example of sucking. At first glance it seems like this is a really nice site…but I dare you to try and buy something…seriously, you can’t do it. What’s the point of showing off your awesome products if no one can order them? All they have is a Flickr page with photos of the great things that you can’t have. My husband finally found a PDF download of their “order form” and most of the items m are sold out and there’s no info on how to actually place an order.

What a strange company website. Maybe one day we’ll get to own one of their fantastic bags, if we can just find a dang “Buy Now” button somewhere on the site…even a phone number or other directions for ordering would be good, but you’re not going to find that here.

Oh, and just to make it better the blog has one post that’s been there since the site’s inception. Way to go Carousel Design Works, you did a good job creating a whole bunch of nothing. I guess we’ll buy our bags somewhere else.

Thanks for listening to my rant

Vincent Flanders’ comments: It’s not a rant if you’re right. I tried to figure out how to buy something. I found how much items cost, but no link to buy. I spent about five minutes in my search—which is 4 minutes 40 seconds too long.

I don’t understand what’s going on. Maybe it’s a northern California wine country thing.

Carousel Design Works

Vincent Flanders’ comments: I went to Staples and searched for “stickers” and this is what I got.

My wife: You know that link you sent me? They want me to register.”

Vincent Flanders’ comments: That isn’t helpful. “That link you sent me” tells me nothing. Fortunately, I went and asked her, “What link?” Turns out the link was for a new food site called Gojee.

Basically, you have to register before you can use the website. Yes, I know there are links, but they’re not terribly informative. The “About Us” link tells you it’s a food site that has a lot of writers, pretty pictures and if you tell them what food and food-related items you have in your cupboard, they’ll come up with a recipe suggestion.

I thought the “register before you can get content” concept was dead. I even thought about removing it from Does Your Web Site Suck? Checklist #1. Good thing I didn’t.

BTW, they’ve got some talented back-end people who are performing all sorts of web-page loading magic to keep this site so snappy. Gojee is also using Kissmetrics to help “Identify, understand, and improve the metrics that drive your online business.” Good idea.

In case you they change the site (and with Kissmetrics they might do that if their tests tell them to change), so here’s a screenshot of the Gojee home page. It’s very tasty.

Gojee

Vincent Flanders’ comments: I click a link that goes to SeoMoz’s MozCon SEO seminar. Here’s what I see along with some notes about how I felt. Granted, I could have scrolled down and found the information. As Steve Krug brilliantly pointed out, “Don’t Make Me Think.” Or as I like to say, “Don’t Make Me Freaking Think.” James Robert Johnson has better examples—not to mention a better explanation of the problem—in his article “Please print the day of the week along with the date.”

BTW, don’t put any kind of dates on your articles. Jakob Nielsen’s brilliant article F-Shaped Pattern For Reading Web Content loses a lot of its luster—incorrectly—when you see it was written on April 17, 2006 (it was a Monday but it serves no purpose putting that in the article). Still, you automatically think, “This is old research and I’ll discount it.”

Submitter’s comments: Netflix released a new design of their site. You need to be a subscriber to see the monstrosity that they have unleashed but I think you might have a candidate for next year’s awards. The overall usability has fallen off the charts.

But don’t take my word for it – read some of the 1400+ comments on the blog that have been posted since yesterday morning about this thing.

Vincent Flanders’ comments: Wow. I was thinking about joining. My son-in-law has it so I’ll have to check it out.

Netflix explains their new navigation. When you have to explain your navigation, your navigation sucks. I’ve never seen an example to disprove this theory. Sounds like they’ve added Mystery Meat Navigation.

Here’s the Netflix blog discussing the redesign along with 1,500+ comments

If you have clients, you need to watch the FYPM video. Historical note: the phrase comes from Goodfellas.

It’s a great video that most of us can identify with. A friend of mine has the distinction of having many of the excuses clients use to not pay thrown at him in one afternoon.

Email from Cool Graphic Artist to Vincent Flanders

Thanks for sending the Fuck You! Pay Me! video. Love it. It got me so fired up that I used it on a recalcitrant customer. Here’s the email exchange that took place today.

Email from Cool Graphic Artist to Connie Conniving-Customer

Could you please get a check going for this invoice? (See attachment). It seems to have slipped through the cracks.

Email from Connie Conniving-Customer to Cool Graphic Artist

The production of the flyer was not approved by the Association prior to John Doe giving you the approval and as such, the Association is not responsible for payment of the invoice.

Email from Cool Graphic Artist to Connie Conniving-Customer

John Doe has acted as a representative for this organization from the beginning. Hell, he commissioned the logo, which was paid for by the organization. So the issue of payment for my services is between you and him. And I suggest that you take it up with John Doe and pay me. The amount of ill will generated by not paying me is not worth $165.

Email from Connie Conniving-Customer to Cool Graphic Artist

I have spoken with John Doe about this matter previously.  By the way, I need our logo as I have never received it from you. As the President of the Association, I need to be provided with a camera ready copy of the logo.  Please forward it to me immediately.

John Doe may act as a representative but he does not have unlimited authority to spend the Association’s money without prior approval.  It may have been in your best interest to verify approval.  The Association has officers in place and there have been many changes in the Association since the time the logo was purchased from you.

As I previously advised you, the Association did not approve the project for the golf tournament and we are not in a position to pay for an invoice that was not approved.

Email from Cool Graphic Artist to Connie Conniving-Customer

Nah. I’m not sending the logo until you pay me my $165. Or you can get John Doe to pay me. I don’t care.

Email from Connie Conniving-Customer to Cool Graphic Artist

I’ll tell you what, you send me the logo, I will send you the $165 and we will take our business elsewhere.  I am NOT sending the check until I have the logo in my possession.

It escalates:

Email from Cool Graphic Artist to Connie Conniving-Customer

Nope. It doesn’t work that way. I’ve been doing graphic design 30 years. I’ve always been fair. Send me a check. I’ll send you the vector art, JPGs for in-house use, color and black & white versions. I’ll also send you PDFs of all of the ads for the directory that still hasn’t been produced. You’re welcome to take your business elsewhere.

I’m not trying to be obstinate, but I was hired to do your Association’s business. If you want to be mad at someone and go after your money,  talk to John. I don’t think I should be put in the middle of some internal politics. I was requested to crank a flyer out in a hurry. It was presented as an Association fund raiser. No one called me and said- “John Doe is working on his own. He doesn’t represent the Association.

I do all of the advertising and collateral for your (name deleted) Non-Profit Organization. Every time someone from marketing or elsewhere in your Non-Profit Organization requests some work, I’m not going to call the VP of Marketing to get an OK because the precedent has been set. If someone were to step outside of their authority and order something, the Non-Profit Organization would pay it and deal with the person that made the request. That’s how it works from an ethical standpoint—and legal one as well. It’s not much money, but in this day and age I’ve got to go after what’s owed me.

Hope you can understand where I’m coming from.

Email from Connie Conniving-Customer to Cool Graphic Artist

Well, okay I will have the logo reproduced elsewhere.  Please return the camera-ready ads to the people who paid you for their work as those items do not belong to Association.  I will work with them directly. I do need to make it clear that you were NOT hired by the Association, you were hired by John Doe. Neither the Association nor myself are going to be forced into paying something that was not authorized.

Email from Cool Graphic Artist to Connie Conniving-Customer

Well, if that’s the way you want to play it. Just so you know, you don’t own the copyright to the logo. I own the copyright. This article explains it very well.

If you decide to have a logo done, it better not look like mine or you will be in violation of copyright law. Oh, yeah. Good luck getting someone to do a logo for $165.

Email from Cool Graphic Artist to Vincent Flanders

Vincent: This is where things stand Friday afternoon. I should have just said “Fuck you pay me.”

Submitter’s comments: Although my background is more in graphic arts than UI design, I’m a big fan of your work.

My most recent encounter with crazy web layout/navigation comes courtesy of my health insurance plan.

After about my fourth login, I finally realized that the main navigation structure is composed of three columns (colors: puke green, blue, red) on the right side. The real beauty of this design is that the navigation columns leap from the right side of the screen to the left when clicked. And then they leap back when another column is clicked. I’ve never seen anything like this before. All the sliding columns are causing eye/mouse strain!

I believe this is one of the biggest health insurance companies in the country. How can the navigation of its web site be so convoluted?! Thanks again for promoting good web design. Your site has helped me a lot.

Vincent Flanders’ comments: Anthem Health is making me very sick. In addition to the bronchitis I’ve had for the last month, this site’s navigation is making me puke my guts out. If Christopher Columbus used navigation this bad, we’d still be living in Europe. This company isn’t like yesterday’s sucker, Unexplained Research, this is a big, supposedly serious company.

This site typifies a new plague on web design which I’m calling, for the moment, jQrap. jQrap is the crappy misuse of the jQuery Javascript library’s effects just for the sake of using the effects. Just like Flash gets misused by Flashturbators, jQuery is starting to be misused by clowns like me who aren’t programmers. Oh, yeah, there are a lot ob bad programmers writing a lot of jQrappy plugins.

There are also a whole host of contrast issues, but they pale to the navigation.

Initially, I’m calling this phenomenon “jQrap.” I might change it to jQueryCrap or jCrap or whatever great name you come up with in the comments or email.

Anthem Health

Submitter’s comments: I’m on the other side of the Atlantic Ocean from you and I can hear you
ranting about this website even at this distance.

Vincent Flanders’ comments: That’s why I love my readers. They’re smart, clever, funny and right about 99% of the time.

Concerning P&M — WTF? The whole site is Flash, which is so 2001. Complete Flash websites are dead, dead, dead. FlashSplash pages are even more dead. WTF (Who The Heck) signed off on this monstrosity? What do the symbols mean? Why hasn’t this site been laughed out of existence?

P&M Computers

As profiled in TechCrunch, Songkick “provides people with a centralized way of keeping track of live performances by their favorite bands and artists.” Pick a band to follow and you’ll get suggestions of other artists to follow. That’s fine except when they suggest artists who have been dead for nearly 20 years. C’mon guys.

Songkick

If you’ve been to WPTS and read the articles, you’ll know that lack of contrast between the text and the background color upsets me for one simple reason:

I NEED TO BE ABLE TO READ WHAT’S ON THE F**KING PAGE.

You would think any designer whose IQ is higher than an ice cube understands this concept. Nope. Today’s Daily Sucker, adlucent, is unclear on the concept.

On the other hand, there are actually times when it’s permissible—even mandatory—for text to be unreadable. Scroll down and take a look at the footer of Wachovia Bank’s home page. The text color is #8B8B8B on a background of #FFFFFF, which fails the Web Content Accessibility Guidelines 1.0. This is just one line of text from their footer that’s hard to read.

Important new FDIC insurance rules in effect from December 31, 2010 through
December 31, 2012. Learn More

Why would they want their customers to read and understand the new rules?

My current privacy page fails big time. My original privacy page is very readable.

Privacy pages, footers and important information that’s considered “the fine print” can be made hard to read. If you don’t want people reading your text, make the text small and lower the contrast.

Vincent Flanders’ comments: I click on this Twitter link that sounds interesting. It’s about protecting your iPhone’s information and since I’m thinking of getting one, I go to the site. The site’s well done and it doesn’t bother me that I have to scroll down the page for what seems like forever because it’s telling a clever story.

The problem is quite simple. THE FREAKING PRODUCT ISN’T OUT YET!!! YOU’RE WASTING MY TIME!

This isn’t high school. Don’t product-tease me. I really don’t like it. I’m willing to bet that this site gets a lot of positive press because of its cleverness. I love clever—but only when there’s a punch line. There’s no reward here.

Added this before posting: There’s a button on the site that says it’s been “Liked” 6K times and bit.ly says it’s shortened the URL 22,538 times. Well, we know there are at least 6,000 usability idiots out there.

Ben the Bodyguard

The section “Standards, Standards, Standards” in Christina Warren’s article Why Designers and Developers Should Care About Internet Explorer 9 is so full of crap that no enema bottle can unplug it.

The web site HTML5Test provides “an indication of how well your browser supports the upcoming HTML5 standard and related specifications. It does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect.” It gives each browser a score and here are the scores I got on my machines (highest possible score is 300):

217 Google Chrome 6.0.472.59 beta (plus 10 bonus points) – Windows 7 and Vista
207 Safari 5.0.2 (7533.18.5) (plus 7 bonus points) – Windows 7
207 Safari 5.0 (7533.16) (plus 7 bonus points) – Vista
204 Firefox 4.0b5 (and 9 bonus points) – Vista
159 Opera 10.60 (plus 7 bonus points) – Vista
159 Opera 10.62 (plus 7 bonus points – Vista
139 Firefox 3.6.9 (plus 4 bonus points) – Windows 7
139 Firefox 3.68 (plus 4 bonus points) – Vista
106 IE 9 Beta (9.0.7930.16406) (plus 3 bonus points) – Windows 7
037 IE 8 (8.0.6001.18943) (and no bonus points) – Vista
022 IE 7 (7.0.5730.13) and no bonus points – XP

Yes, IE 9 is almost 3X more compliant than IE 8 and almost 5 times more compliant than IE 7, but its score is one-half of Google’s.

Why is everybody sucking up to Microsoft’s not-quite-as-crappy-as-it-used-to-be browser? The Browser War is not the Special Olympics.

I like FastCompany magazine, but their recent article, The Worst, Most Exploitive 9/11-Themed Ads, didn’t present the WORST ad. When it comes to what’s sucky and what’s worst, I’m the King. Here’s the worst ad:

Worst 9/11 ad

A person wrote in saying they couldn’t buy this software because when they clicked the shopping cart button, it didn’t put the product in the cart. I tried it out periodically for several hours and then made a video. Not long after posting the video, the page miraculously worked.

I’m not asking much, but when I click to put something in my cart I WANT TO SEE IT IN MY CART!

Diabetes Pilot video on YouTube
The SmugMug video version

The page in question at Diabetes Pilot

Website similarities seems to be a popular topic this week. First, we had Jakob Nielsen weigh in with Should You Copy a Famous Site’s Design? and then I discovered Copycat Design.

Here are three examples I’ve been using for a long time.

1. A big screenshot of some sites with a similar look.
2. A video I made on the topic.
3. A screen capture of similar legal statements. Yes, these examples are old but, if I remember correctly, these legal statements were used until fairly recently.

Submitter’s comments: It’s been a while since I’ve seen Mystery Meat Navigation used on a website, so I thought I’d send you this site. Honestly, I don’t see this much any more — see if you can find the navigation on this page (hint: it is next to the little graphic that says “Navigate” and has an arrow pointing to it. Even then, it takes a moment to realize what the heck is going on).

I was floored that I couldn’t just click what appeared to be the “Lunch” or “Dinner” graphics at the top. The music which plays when the page loads is also one of my biggest pet peeves.

Vincent Flanders’ comments: Whenever someone says to you,”There’s nothing wrong with using Mystery Meat Navigation,” send them to this site. I hereby revoke my Mystery Meat exemption to band, art, personal, music, et al. sites until such a time as site owners and designers become responsible citizens. If people see something stupid, they want it. This has got to stop.

Zinc Bistro

The HTML 5 Test is a really cool site that tells you how much HTML 5 support is built into your browser. With Apple screaming “We have the best HTML 5 support” I thought it would be logical to visit The HTML 5 Test and see who’s the real winner.

I went on Monday, June 7, the day Safari 5 was released. I went back on Tuesday and discovered that the test had been revised. The original test had 160 possible points, while the current test (released on Wednesday) has 300. I’ve broken the tests down by New (300 point scale) and Old (160 point scale). The score does not include bonus points

Google can claim they beat Apple and offer better HTML 5 support, but that’s if you’re using the 6.0 developer version, which most of you shouldn’t be using.

Apple can claim they beat Google and offer better HTML 5 support with the current stable releases, which is probably a more accurate claim.

The truth is support is still pretty crappy. Speaking of crap, Microsoft’s IE 7 and 8 are POS when it comes to HTML 5. Yeah, yeah, yeah, I know IE 9 is so much better, but nobody in their right mind would test it on their production machine. That’s assuming their production machine isn’t running XP because IE 9 won’t work on XP.

I’m too curious. I installed the IE 9 Platform Preview on my Vista laptop. IE 9 isn’t really a browser, but more of an HTML viewer. For one thing, you can install it alongside another version of IE. That’s really, really difficult to do in the real world.

As you see in the scores above, IE 9′s HTML 5 support is less than IE 8, but greater than IE 7. I’m not impressed. Here’s a screenshot showing the new, still limited support.

Vincent Flanders’ comments: When you’re young, you talk about the drugs you take. When you’re old, you talk about the medicine you’re taking. Once of the problems with taking medicine when you’re older is that you forget whether you’ve taken your pills or not — especially when you take several different medicines.

King 5 TV ran a news story about a new type of medicine cap that tells you how long it’s been since you’ve opened that particular medicine. They mentioned that local drug store chain (Bartell Drugs) would have the product available and that it was available from the manufacturer.

I looked at a lot of pages at Bartell’s site , but couldn’t find a search engine. Using the Google Toolbar, I searched the site, but only found one link and the link wasn’t helpful.

When I went to RX Timer Cap’s web site (the manufacturer of the product) and clicked the Buy button, I was greeted with the message “Page Under Development.”

Holy Mother of God. Do these morons realize how frustrating this is? I want your product but you won’t let me order it.

Obviously, there will come the day when they solve this problem (I hope). Here’s a video to memorialize the fact they’re Unclear on the Concept.

RX Timer Cap

I’ve got pneumonia. ‘Nuff said.

Xerox

Submitter’s comments: There are too many web sites I can’t really read because the text isn’t dark enough. I’m older (63) with some eye problems, but I spend large sums of money on products for my company that I research on the web. I’d at least like to be able to read about what I’m buying. I find Xerox’s home page difficult to read. If you mouse over the “Document Outsourcing” link at the top, you get black text on a dark purple background.

Vincent Flanders’ comments: The harder it is to read a web page the easier it becomes for your visitors to hit the BACK button and go to a site they can read. In order to read a web page, you need enough contrast between the text color and the background color. This isn’t rocket science. I’ll even  give you a simple guide that shows which shades of black to use for text on a white background.

Why do designers do that voodoo that they do so well? In an article entitled, Has Your Web Designer Ever Heard of Contrast? a plausible explanation is given:

The reason is… gray text looks better and more coherentwhen seen from a distance or as an element of the overall design, but, and this is a big but, it is not meant to be read in these cases…

…Unfortunately, some visual designers sacrifice readability for a slight increase in visual appeal because they do not really read the text on screen; they treat it as a large block of horizontal lines, and the darker those lines are the uglier they look. So, decreasing the contrast a little makes the overall design look nicer but less readable. Poor readability is not the designer’s problem. After all, he will probably never try to use the site he designed.

I noted that a recent Daily Sucker, TechSoup, was using #666 for some of their text, which made it difficult to read. I noticed that today’s sucker, Xerox, also uses #666 for sections of their text. As the submitter mentioned, mousing over the “Document Outsourcing” link is not pleasant. It gets worse. The Xerox for Small and Medium Businesses page adds hard-to-read link colors.

It seemed to me like important web sites were all conspiring at the same time. Perhaps I felt this way because A&E and the History Channel have been running shows about the end of the world with predictions from Nostradamus, the Aztecs, and everybody and his brother and watched too many of them (I’m not watching anything political.)

Then it hit me. The number 666 is the Number of the Beast. This is all coming to me as a revelation on…9-9-9, which is “666″ inverted. Yes, Nostraflanders has uncovered a plot on this special day to ruin web sites. #666 is Satan’s CSS! If you don’t believe me, look at the photo above. This is proof!

In the movie The Usual Suspects, the character Verbal Kint says, “The greatest trick the Devil ever pulled was convincing the world he didn’t exist.”

At Web Pages That Suck, Nostraflanders says, “The second greatest trick the Devil ever pulled was convincing web designers the people could read text colored #666.”

Update: Xerox changed their site. I’ll try to post a video soon (vf 10-17-11)

Xerox

Sonic

Submitter’s comments: Avid reader here. I was hungry and looking for something to eat for lunch. I wandered on over to sonicdrivein.com and was amazed at how crappy the web site was.

First off, it takes a long time to load. Let’s face it, if I’m looking up food on the internet, chances are I’m hungry and don’t want to sit there and waste precious time waiting for a page to load.

The site has a lot of Flash stuff and those two annoying guys on the commercials pop up and basically nag you to death while you are deciding what to do. I hate sites that talk to you.

The background on the site is a large picture, which makes it hard to distinguish other page elements. If you click on the “explore menu” a big menu comes up and you move it around with your cursor. I tried it for a few seconds and got a headache. There is an option for the “quick view” menu, if you can find the tab at the top of the page. The contrast of the text against the red headers is terrible.

There is just way too many cutesy, gimmicky things on this site for my taste. I think restaurants should be pretty straight-forward in their web presentations. This is who we are, this is what we have for you to eat, and this is when we are open. That’s pretty much all I want to see.

Thanks for giving me something to read and laugh at everyday.

Vincent Flanders’ comments: The site is even worse if you have a large portrait monitor. Flash, of course, fills up the window. In general, that’s a good idea and one of the reasons people use Flash, but on my monitor the home page sucks. Oh, and this particular screen (they rotate) scared the bejesus out of me.

With its horizontal scrolling, the Flash menu page is out of control. The site also has Mystery Meat Navigation, and Mystery Meat is the last thing you want to see at a restaurant. Well, I suspect the last thing you want to see is a Health Inspector shaking his head in disgust. Speaking of Health Inspectors, here’s a report on my favorite eating spot in Bellevue, Washington — Ruth’s Chris Steak House. Oops.

Sonic

I’m actually a really nice person, but I’m getting really, really upset that some web sites can’t handle simple typos. I went to Pollstar to find out if the Drive By Truckers were playing anywhere near me. In the search box I quickly typed “Drive By Truckersd” and hit the ENTER key before I realized my fingers had accidentally hit the “d” key. Here’s the screenshot of what resulted.

C’mon, geniuses. I got every letter right except the last one. How hard is it to figure out what I wanted. What about people who type “Drive Bye Truhkers?” Yes, I’m stupid for making a mistake, but you didn’t keep my original search term in the search box. If you did, I could just go up and hit backspace to erase the “d” and then hit enter and get my results.

Amazon knows how to handle my mistake. The clowns at Pollstar don’t.