Anatomy of Bad User Experience

July 29th, 2010 by Mike Wilcox

It’s amazing that in this day of age, with all information, history, and expertise we have in building websites, that any company could churn out something so patently unusable. The following rant is a true story, experienced while reading one of my favorite bloggers on a major website…

I’m staring at a blank page for 30 seconds. It turns out the ad server this site uses is down and the ad is written with a blocking-script which prevents the entire page from loading until the server times out. Then it still takes several seconds to load — a quick peek at Firebug reveals that the page is 1.6 megabytes. The images are huge, not well compressed, and overly large for their scaled-down size. Only a section of the story is displayed, but for some reason, the news story is completely downloaded and partially hidden with Ajax. Going to the next page reloads the entire page and story again, and leaves me staring at the beginning of the story for a few seconds until the controlling JavaScript loads and displays the appropriate section. When I click the back button, I get my favorite, most annoying warning message: The page you are trying to view contains POSTDATA.

Comments From the Peanut Gallery

Reading the user comments is an effort in futility: there are only five at a time displayed, and the “next” button leads me to a 404 page. Some user comments are truncated to something ridiculously short, and to view the remaining text I have to go click on a Read More Link that doesn’t just unhide some text with a JQuery thingy; it takes me to a new page, often to find all that was truncated was the last word. If I’m reading user comments it’s because I want to… read the user comments!

I’d like to leave a comment myself, and type a few words and click submit. This opens an Ajax dialog where I create a user account. I fill in my information, but can’t click submit because the button is below the edge of my browser window, and I can’t scroll to it. I think this explains why a blogger who previously would have hundreds of comments now only has a few. I manage to hack the page so I can submit, and the page is reloaded and the comment that I had written is lost. I don’t remember what I originally wrote and instead write a new one complaining about the horrible experience.

Under the Hood

Being very critical of the site I examine it more closely. The logo is a whopping 500kb. I will say that at least it’s not a JPEG — it’s my personal pet peeve when websites use lossy JPEG compression on their logos and have macroblock artifacts. Logos are usually flat colors and thin lines, which is better suited for the GIF or PNG format. While this logo is a PNG, it’s a 24 bit PNG, so it’s virtually uncompressed… and necessary. I opened the logo in Photoshop and exported it as an 8 bit PNG… it looked great. And was only 60kb. Overall, the design of the site is not ugly, but it’s not inviting. This is especially disappointing since the print version has always kept up with modern design and illustration over it’s 40+ years.

Poking around in other sections of the site reveals that the pages get as big as 2.5 megs. I switch over to the Firebug Net CSS tab and I’m shocked to see 22 style sheets being downloaded — most of which are less than 3kb! This is another pet peeve of mine. A round trip to the server to request a resource is expensive (especially in mobile phones).  Fetching too many resources breaks the number one rule for a high performance web sites. My personal rule of thumb is you should never have more than two style sheets; one for main styles, and perhaps a page-specific sheet. Another personal rule is to never fetch an item from the server that is less than 3kb. It’s just not worth it. Heck — the cookies that it’s sending are almost as heavy as the payload.

Conclusion

I could go on, but it’s obvious that in spite of the fact that this site is near the Alexa top 1000, it’s no where near high performance. A nice start for them would be to read my post on why they need a front end developer.

So what is the name of this site? I’m leaving that for you to guess! Please leave comments on what site you think this is, or better, tell us about your least favorite sites, or most favorite bad sites. I’d rather hear your stories, because I left enough clues that if you are sleuthy enough, you can figure out what site I’m complaining about.

Tags: , , , , , , ,

5 Responses to “Anatomy of Bad User Experience”

  1. sven says:

    “Another personal rule is to never fetch an item from the server that is less than 3kb”

    That’s the reason why your site doesn’t feature a favicon ;-)

  2. david says:

    Clearly Rollingstone.com… And not just because I followed the link to get here. Their redesign has been awful in every way. Their website is an embarrassment. Great job breaking down why.

  3. Mike Wilcox says:

    Kudos David! Fellow Taibbi fan too :)

  4. chamblee54 says:

    I tried to leave a comment at Mr. Taibbi’s post last week, and had a similar experience.
    Back in it’s pulp heyday, Rolling Stone was the best publication around. Now it is a terrible web site.
    Leaving this comment is as simple as 1-click on the field 2 click on the answer. There are three fields, then I leave the comment. The entire process takes less than a minute. Rolling Stone should be this easy.

  5. david says:

    Yeah there’s no reason why Rolling Stone can’t have a great website. The comment section is ridiculous, the website is absurdly slow (try loading the “Best of” lists), and the navigation is confusing at best. I didn’t have to do a thing to comment here, and I bet this story will get more comments than Taibbi’s blog. As a media professional who helps manage a website, it’s funny to see the big dogs get something so horribly, inextricably wrong.