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

Submitter’s comments: The Products page at Trader Joe’s tells us to “Please select your location and we’ll show you all the new goodies available.” When you look at the page, you can’t tell what you need to do to display the products.

Spoiler alert!!!!!!

You may want to see if you can figure out how to display the products before reading below.

It is quite counterintuitive as to what to do next because:

1) The page has a cutesy graphic that doesn’t really tell you where to go.
2) Where you need to go is two frames up.
3) “Location” for a retail establishment is usually the one closest to you and not the state you happen to live in.

Vincent Flanders’ comments: For those of you who learn best by seeing pictures, here’s the Trader Joe’s page in question, along with an explanation of the problem.

I can’t understand how Trader Joe’s could make such an amazingly bad mistake. This navigation is so illogical. I’m not going to look at arrows to try to figure out where to go. Put the navigation where it belongs.

Trader Joe’s Product Page

Submitter’s comments: Oh, my eyes! Great community arts organization, but If you can tolerate the complete visual mayhem long enough to look closely, you will see that this is an events calendar.  In roughly chronological order, with no particular pattern for arranging the days of the week.

Vincent Flanders’ comments: What’s interesting to me is that the small, multicolored text is actually readable. Probably because it is on a black background.

We have issues with “Where’s the focus?” I’d reorganize the groupings by category, rather than date. Then, I would put only this month’s listings in the category with a link to the full listings on another page.

There are fatal color inconsistencies. Orange text can be a link or a header. It seems that every listing has “Amazing Things Arts Center.” Why?

Amazing Things Arts Center

Submitter’s comments: Not a spinning Earth, just a spinning moon with a rising sun.

A reminder of how that term “Flashturbation” got its start. At least they knew they needed to enable us to skip that nonsense.

Vincent Flanders’ comments: Well, actually they have a Skip Intro button, but it’s at the bottom of my laptop screen and doesn’t show up. There are a lot of serious mistakes made here that were documented in Biggest Mistakes in Web Design 1995-2015.

1. Believing people care about you and your website. Some of the worst writing on the web is on this website.

Breakout Results, LLC is a highly qualified, proven, game-changing leadership team with an unrelenting passion for leading its client companies to a brighter future with higher standards of excellence, robust top-line growth–and superior bottom line performance.

This is crappy, cliche-filled writing and everybody except the authors of this site know it. Visitors to your site want their problems solved. This text is made for the company–not its customers. People don’t give a left-handed flying farkle about you, your business, or your mother. They want their problems solved now.

This mission statement crap can be summarized as, “All babies must eat.”

2. A man from Mars can’t figure out what your website is about in less than four seconds. I read a lot of the first page. I don’t have a clue what these people do and how they can solve my problems.

4. Using design elements that get in the way the sale. Flash fits the bill.

9. Site lacks Heroin Content. There is nothing on this website that will make me want to come a second time.

13. Misusing Flash. You should read the article, but the bottom line is there’s nothing here that couldn’t be done better with HTML and CSS.

Breakout Results

Vincent Flanders’ comments: My personal experience with one of the RightNow services was extremely positive. They offer clients a chat feature where you can ask questions and I needed to get a form from a medical company faxed to me. The system worked like a champ. Out of curiosity, I went to RightNow’s home page and an insanely glaring error was right there on the front page…

…the text on the bottom third of the page couldn’t be read because IT WAS TOO SMALL. My first reaction was, “When they signed off on this project, did anybody look at the home page? Didn’t they see they couldn’t see and read the text?

There are times when it’s acceptable to use small text and there are times when a lack of contrast is acceptable—on the botttom of the page where you have legal statements like on the Wachovia bank site. The WebPagesThatSuck legal and privacy statement also uses little contrast and small text, which you can see when you look at the original version.

I keep screaming about the idiots who make the text hard/impossible to read because of the lack of contrast. At least they can make the bogus claim, “It’s artistic.” Small text is small text and artistic expression doesn’t apply.

RightNow

Submitter’s comments: One look at this website says it all.

Vincent Flanders’ comments: One look at this website says “1996.” The music may be inspirational to some, but the website isn’t. I’m pretty amused by one element—the site is full of big clicks.

KMTL 760 AM

While I love my friends, I hate how @#$!ing stupid they can be. Two of them wanted my input on their website and I had given them—I don’t know—20 or 30 different tips—which overwhelmed them. One of them then asked me to give them just one tip to help their website rank higher in Google’s search results (yeah). I refrained from saying “Nuke your site” and said, “Have your designer rename your image files to something logical and make your ALT attributes descriptive. Why? They were using Adobe GoLive (which is now Adobe GoneDead) and it messes up image tags.

Take a look at the recent wonderful 1:44 a.m. photo of me showing off one of the few T-shirts my wife thinks is funny.

Below is the code Adobe GoLive would have “produced.” I modeled the code after code found on their website.( I didn’t want to use one of their examples because I don’t want to embarrass them.)

<img src=”http://cdn-webpagesthatsuck.com/Images/WPTS_vf_12.jpg” height=”389″ width=”300″ alt=”" name=”WPTS_vf_12″ border=”0″>

WTF?

Here are the problems:

1. If you’re going to use a subdirectory for images, call it “images” not “Images” (minor issue).
2. The name= attribute is replaced in HTML5 (very minor issue, these guys are so far from HTML5—wait, so are most of us).
3. The border=”0″ attribute is not necessary (OK, should not be necessary and this is a minor issue).
4. The alt= attribute is blank. For many images, this is OK. For an image like the one above, no. If you look at #5 below, I just know that if the program filled in the attribute it would put something unintelligible. In fact, on many of their images the code reads [alt name="WPTS_vf_12"] As we all know, the alt attribute may help Google when it indexes your site—there’s a lot of discussion on the web about this. The alt= attribute could be something like alt=”Vincent Flanders is a very funny guy” or anything that would be meaningful to your visitors and Google. (Major issue).
5. BIGGEST MISTAKE: GoLive (and there are other programs like it) automatically creates file names for images that are meaningless. In this case, the above picture is called WPTS_vf_12. That’s not going to help Google index your site. It needs to be called something like Vincent-Flanders-self-portrait or, more accurately, Vincent-Flanders-defies-the-laws-of-physics-or-he-rotated-the-image-so-you-could-read-the-text.

It’s been months and they haven’t changed it (or anything else as far as I can tell). Maybe now that this issue was mentioned in my interview in Chicago Business my friends might take it a little more seriously.

A very nice series of articles for all you small business owners. It’s an easy, smooth read — which is how good writing should be.

Featuring:

Q&A with design guru Vincent Flanders For 15 years, Vincent Flanders has turned the spotlight on poorly designed websites at his own website: webpagesthatsuck.com.

If your small-business website isn’t designed to sell, what good is it doing you? Since opening in 2008 in River North, Marbles: The Brain Store has grown into a $3-million business selling toys and puzzles to improve memory and critical thinking, primarily through its stores. Prior to a major overhaul last year, sales from the company’s website (MarblesTheBrainStore.com) accounted for less than 1% of revenue.

You don’t need to completely overhaul your website to boost your sales — tweaks can do the trick It’s not enough simply to build and launch a website. It must be updated and maintained. But you don’t need a complete overhaul to get results. Often small tweaks can help drive traffic or

Tips for turning web browsers into buyers Consumers have grown increasingly comfortable shopping on the web. Yet it’s estimated that less than 5% of website visitors turn into buyers.

Smart sellers embrace smartphones: Customers expect mobile access to your website now Today, millions of people access websites and download mobile applications from their smartphones and tablet computers, and the number is expected to grow.

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: The page renders slowly and recklessly. there’s horrible use of space. terrible layout. and it’s impossible to navigate—if there is navigation.

Vincent Flanders’ comments: It’s a better looking example of an Over-The-Top website. The definition of an “Over the Top” website is just like the definition of pornography — you know it when you see it. Over the Top sites generally deal with philosophy, religion, politics, end times, etc., but they’re generally not mainstream. The design is always “interesting.”

I have a fairly wide screen 1200 pixels, but not all the information fits in the screen—you have to scroll horizontally.

Unexplained Research

Submitter’s comments: This is the home page of a company that sells mostly esoteric chemicals to the research community. Personally, I think the Flash animation is an 8/10 on the Suckometer.

Vincent Flanders’ comments: That’s why I love my readers. I’d also give it an 8 on the Suckometer. If you just let the FlashSplash page finish, you’ll get a mission-statement sounding pile of platitudes: “Bringing You Products For Innovative Research.” The Flash animation of a chemical ring is also a waste of bandwidth and the color combinations are ugly. The text on the “About Us” page is obscured by a picture of some buildings or something.

To paraphrase the great American philosopher Carlos Irwin Estévez: “Duh. Losing.”

Toronto Research Chemicals