I found a link to 10 tricks to reboot your brain on MSNBC’s site via Fark. I thought, “hey, my brain needs some rebooting, why not?” and I followed the link with the full expectation that it would be broken up into 10 pages. That’s a little trick sites use to inflate page views and ad impressions but the side-effect is annoying some (more likely most) users and dropping your overall ad clickthrough rate. But I didn’t expect it to look as bad as it did.

First off, it’s repurposed content from Prevention magazine. While the original might have looked fine in the magazine’s digest format, a lot has been lost in translation. Since I was expecting a slideshow type of display, I was looking for a “Next” or page numbers at the bottom of the article but could not find any. It wasn’t immediately apparent that the only navigation for the article was in the table of contents links to the left of the content and it also wasn’t apparent that both the headers and bulleted items were links to different portions of the source article. Instead of parceling out the article two sentences at a time, a better design would have been to display an entire section (“At Home”, “In the Car”, etc) and use the bulleted links as anchors to those specific paragraphs. That would result in less page views, though.

However, it’s easy to understand how this type of thing can happen. It’s usually just a script reading a feed, downloading the article content and publishing it into a template. There might be someone watching a queue of articles and approving them by hand, or it could be completely automated. It could be the case that the article was parsed incorrectly – take a look at how this article looks instead.

In general, I think the MSNBC website verges on being too busy. It’s a traditional C-clamp design with navigation across the top, bottom and the left-hand side. The left-hand links pop up hierarchical menus of the latest headlines for that topic, with the bolded topics also having a second popup menu for the subsections. That is, if you are able to navigate all the way to that side of the popup without it disappearing. Often, the latest headlines appear in the popup before the background loads, so you have text floating in a transparent box superimposed over the text and images below for a moment – a background image is nice, but you should also have a background color displayed while the image is loading. There are other display quirks (misalignments, missing line breaks) that appear to be the result of insufficient testing with non-Internet Explorer browsers. You do not have to hunt down every application that can display HTML, but you should be testing it in recent releases of Firefox and Safari at least (and probably now Chrome, too), and with and without ad blocking and popup blocking software. It’s next to impossible to make them all exactly match, but you should check that a complete page renders in all of them.