CNET’s Popular Story Box: Usable?

by Paul Sherman on April 10, 2007 · Comments

in Web


CNET’s What’s Hot Grid

I honestly don’t know, and I’d like your opinions. (All 30 of you – I checked my Google Analytics yesterday…that’s how many visitors I’m averaging over the past week…)

Is this useful? If yes, is it usable?

Here’s a little more about this tool, quoting CNET:

What’s Hot gives a visual snapshot of which stories are most important on CNET News.com right now. What’s Hot is updated every time a story is published, or at least once an hour…

The bigger the block, the hotter the story. The brighter the block, the newer the story. Bright yellow means the story was just published.

I definitely appreciate their attempt to innovate in this space. And I’m not trying to damn it with faint praise. I really do think it’s kinda neat. But I’m wondering about a few things as I look at it…

  • Scan: From the gestalt p.o.v., is the image as a whole conducive to quick scanning and accurate parsing?
  • Use of font, position on grid, and color for encoding importance: I’m all about multi-encoding to impart information, but are these encoders working together, or interfering with one another? Maybe they’re not doing either. There’s just something that’s not hanging together for me, and I can’t put my finger on it.
  • Color: Warning, snarky tone approaching…this thing’s color scheme is what my wife always accuses me of doing when I dress myself: thinking that putting on nearly-identical colors is a good thing. When I go to work with a medium-blue shirt and jeans, she tells me I look like a plumber. CNET’s What’s Hot looks like, well, a Burger King employee. Plus, the palette as a whole is way too saturated.

There’s a lot more I could say about this, but I encourage you to check it out and provide your feedback. It has a couple of other neat features that you may want to play with.

You can check it out in context by following this link. Look on the right side, about halfway down the page.

  • Hi Paul,


    I have to disagree with the previous commenter. I find the display confusing. The fact that they have to explicitly label the hottest story signals the failure of the visual cues.


    In my mental model "hotness" is something that is signified using colour. Those oranges and yellows can't help but conjure images of burning fires. But then I find from the key that colour dictates newness. Now it's just confusing because I can't escape from that colour-fire-hot thinking that my experience has taught me. And that means I'm having to really think about decoding the image. And the payoff for that extra processing? That older stories tend to be hotter.


    Better to display a list and be done with the chartjunk.


    Just discovered your blog via UXmatters. Definitely one for the feed reader.


    Cheers,


    Nick.

  • Thanks for the note Nick! Agree about chartjunk. That's one of my favorite Tufte-isms.
  • Jim D.
    I find that the box is too big for my default browser window, about 3/4 of a 17" screen. It sits halfway off, limit the usefulness and thus the odds of being used.

    I found it easy to find the "hot" and "older" stories.

    The color scheme could be problematic for some color-blind individuals, but it's probably more useful to keep the differentiation just by the intensity of the color that varying over an entire spectrum. It's probably easier to map story "heat" on a red to yellow line than on red to green to lavender. (And sometimes the only thing worse than variations on a single color is using the entire crayon box.)

    The box and font size is no worse that tag cloud representations which behave similarly.

    Ultimately, though, is it worth it? For me, no. I don't care about what's "hot" in terms of what others are reading. I prefer to have What's New be in a predictable place (which it typically is, here, I think). And I prefer headlines in a list where I can scan from the same place on each line, and where I get more than three words of the headline per line.
blog comments powered by Disqus

Previous post:

Next post: