Here’s a page that shows what’s wrong with news on the Internet. This story is from an NBC affiliate in Nashville. I clicked through to this story, and….
I couldn’t find the story. I was assaulted by this page. I had search before I could visually frame where the main content of the page began and ended.
I did a little math on it:
- Total screen area: 805,409 pixels
- Total area devoted to the main content: 79,146 pixels
- Percentage of space on the page devoted to the main content of the page: just 10%
Just to make sure I wasn’t throwing stones a glass house, I did some math on an average Gadgetopia story. And I set up a couple rules (and re-did the one above based on these rules):
I screencapped the initial screen my browser captured. Whatever was above the fold.
I resized the browser to eliminate gutters on the outside of the site design. I basically reduced the screen width until I got a horizontal scroll.
I drew a box around the main content. I didn’t discount internal whitespace inside the main content, although I did remove elements that had nothing to do with the main content (still, it’s grossly unscientific, because what you do you about, say, headlines separated from the story by lots of whitespace or other design elements — see the CNN story below).
Anyway, here’s a post from Gadgetopia:
- Total screen area: 721,984 pixels
- Total area devoted to the main content: 278,848 pixels
- Percentage of space on the page devoted to the main content of the page: 37%
Here are some other sites (reduced to just the percentage):
- CNN’s story about Jett Travolta: 29% (it’s 40% if you include all the whitespace under the headline)
- NY Times story about hotel lobbies: 33%
- USAToday story about the action in Gaza: 39%
What seemed like a great idea for analysis in the beginning runs into problems because you have questions about what is related to the story and what isn’t. But, in general, the numbers hold true from an eyeball perspective as well as a mathematics perspective.
Jakob Nielsen has always been a proponet of doing screen area measurements. He divides the screen up into three areas:
He has recommended percentages for each, through I can’t remember what they are.
Look back over the screencap that caused me frustration in the first place, I learned an important design principle. Nothing should compete with the headline.
The fact that I couldn’t find where the story started certainly was affected by the small space the story occupied on the screen, but it was also affected by the fact that so many other things on the page competed with the headline. The ads to the top and right of the headline make it tough to pick it out amidst all the clutter. If that was easier, the lack of space devoted to the main content wouldn’t have been as much of a factor — I would have at least known where to start.