The Huffington Post: Making Reading Painful

I wish I could still enjoy reading the Huffington Post, I really do, but my peepers won’t allow it. When the site pops open in my browser I expect circus music to start playing and confetti to drop from the ceiling. Within seconds I am  stricken with a small but painful eye seizure (picture cartoon eyeballs doing 360s in opposite directions) due to the insanely jam-packed and gaudy images-and-icons-a-poppin’ presentation that attacks every bit of design sensibility I have left in this old body. Everything on the page demands attention… except for the actual article I want to read.

The layout is  so breathless and so claustrophobic, I feel like my browser might explode at any second, covering me in a vomity, pixelated mess of Madge, Cramer and Palin.

Let’s break down a page from this this traveling carnival of a website, shall we?  (Click the image above to enlarge).

Scroll Scroll Scroll – For starters, there’s certainly a lot going on up top. The excessive navigation, photos,  ads,  social media buttons, expanding Flash-based ads and other nonsense  STOMP push the  main story content way way down the page, below the fold on most monitors. I have a 21-inch monitor (not bragging) and I barely get the top two lines of the story. Boo.

Menu Mania! The Logo/Header/Banner Ad area is sandwiched in between two layers of navigation on top and below. The top “BIG NEWS” navigation bar is  a bit odd, is this news about “CNN, ABC and Newspapers” or news from these sources? Either way, I’ll skip it, too broad. The two-tier main menu navigation is fine, even if the Twitter, Email, and Homepage links break convention. Based on HP’s usual lack of restraint, I would have expected a much bigger Twitter presence, like a 250×300 button atop the sidebar. The third section of top-level navigation is the popular “photo links”  to the latest stories. These sure are pretty, no big words, look there’s Suri again! So cute!

Love This NOW! The glaring problem with the placement of the “Like It/Don’t Like It,” “Buzz Up” and “Digg It, Stumble It, Stroke It, Fellate It” buttons is simple:  They come before the actual article. As much as I would love to share your wonderful article with others based solely on the super duper headline, I really need to read a bit of it before I can tell my peeps about the insightful reporting on the Ashton vs. CNN Twitter fight.

TAGS! TAGS! The same goes for the  “tags” placement above the story:

Read More: Cnbc, CNBC Obama Jim Cramer, Jeff Zucker, New York-New York, Rick Santelli, Media News.

Whoa… slow down! I might want to read more on the topics discussed, but not just yet Huffy. Too many tags are just silly and make your post seem very spammy to search engines. Here’s one example of how HP went bonkers with tags, making sure the reader wouldn’t miss a related tea-bagging incident:

Look, I have web-based ADD just like everyone else and I can easily leave a story I clicked on without reading it  because of something shiny and pretty in the sidebar calling out to me (Is that Gwyneth blogging about the financial crisis? I’m so there!). I don’t need  help being distracted, but HP doesn’t care. They love the sensory overload. In fact, they don’t cares if you read the stupid article at all, they just want you to click on something else on their site (Page Views!) or promote it elsewhere.

Sorry Photo, We Have Interactivity to Promote: The photo used to be the star of a newspaper article, where your eye was immediately drawn, creating a nice balance with the headline to give the reader a pleasant,  illustrative glimpse into the story. Not on the HP.

The photo is an afterthought crammed in between  6 calls to action. Oh well, at least there’s another “Share” option here. Thank goodness. I already shared this Pulitzer Prize-winning piece using the 20-odd social media links above, but I was still in the mood to impart this goodness to others. I will also print it, take it to the bathroom, wipe with it and snail mail it to a friend.

Slutty Sidebar: Love the subliminal “BJs” ad above the porny nude Padma pic. Classy.

Comments: So you finally get to the article and now you want to read the all-important comments (let’s see who calls who stupid, grossly misinformed or gay). On a good website comments are placed directly under the article. It makes sense for many reasons. HP, in keeping with its “promotion first, usability ninth” mentality place the comments section about two feet under a bunch of other odd bits of beguilement.

Look, more grey-faced bloggers! Some are even celebrities! With opinions! Love it!

Comments soon, we promise, but first: Don’t you dare forget to Digg one of the “surging” stories you haven’t read before you go any further. We want to knock that video of the Chipmunk going “nom nom nom nom” off the top of the Digg charts, so help us out!

Okay, finally made it to the comments. I’d love to offer mine, but I’m a bit tired. Maybe later, I want to check out that dubious Ad by Google above. It  seems like a good place for financial advice.

Look kids, I know there are worse sites that look and function just like the HP — the busy tabloid look with lots of photos and interaction — I get it, it sells and people are used to the frenetic “lots of news coming at ya!” presentation. But newspapers will be the thing of the past very soon, and I just want a calmer and more efficient way to read the news. Here’s a start:

• Move the content up a bit and decrease the header area.
• Get rid of of the excess interactivity.
• Relocate the “calls to action” to an area below the story.
• Banish all ads I need to manually close.
• Use better photos and less of them. 40 photos on the homepage is a bit much, even if 23 of them are that cute Obama puppy.
• Inject a little breathing room between all the stuff you got going on.
• Add circus music and a Rip Taylor photo or two.

Scott, you write for these guys, make this happen.

TAGS: usability • user experience • Web Design