Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

This is something that's bugged me for years: I'll be reading a story on ESPN and notice that the first paragraph is dark gray, and the second paragraph is often black. I've even taken a screenshot and used a color dropper to confirm, and indeed, the former is #333333 and the latter is #000000. Here's an example

Why is this? Is this deliberate? Or is it a weird styling oversight related to any text adjacent to a floating box? And as a sub-question, is there any known user experience benefit to using dark gray text over black text?

share|improve this question
1  
With Ad based sites, nothing is accidental. It is deliberate and may have something to do with usability testing results of eye strain or a method to bring more attention to their ads. –  Todd Moses Sep 22 '11 at 18:03

2 Answers 2

up vote 8 down vote accepted

Looking at their markup, the main paragraph styling of articles is #333, which is common as many feel that pure black on white is too much contrast and hard on the eyes.

The second paragraph on that sample page is actually a div outside of the proper p markup. My guess is that this is malformed markup created by a less-than-perfect CMS and/or less-than-knowledgable content editor and/or an ugly hack to get around a crappy CMS (which is sadly a common issue).

In other words, it's a bug from what I see.

share|improve this answer
    
+1 that - when there is an inline ad, the next paragraph is knocked out of the p tags and it defaults to the body instead of the article color –  Roger Attrill Sep 22 '11 at 18:06
    
I think this very page on ux.se is also using 333333 for text as well - and 222222 for the title. Comments here and text on the questions page uses 444444 –  Roger Attrill Sep 22 '11 at 18:10
    
Almost certainly a CMS that is not working right, and so not formatting the page properly when there are adverts. And I suspect no-one noticed. –  Schroedingers Cat Sep 22 '11 at 18:29
    
I think I agree, though it's kind of stunning that such a large site would make this error. Or, rather, not that it would make the error, but that it would go unnoticed for what I'm fairly certain is literally years. I first noticed this quite a long time ago. –  Chris Bowyer Sep 22 '11 at 18:42
    
Stunning, but completely believable. Large organizations often have a) extremely bad CMS technology and b) miles upon miles of red tape and processes for getting content updated. It's truly absurd. –  DA01 Sep 22 '11 at 19:17

It's a method of drawing attention to important text; URL bars in Chrome, Firefox and IE do it now to draw focus on the top level domain, arguably the most important part of the URL,especially when trust and security are issues.

However ESPN's method seems to be a case of extreme over application. Rather than optimizing the content for scanning they have harmed it, as only one paragraph out of ~10 (in that article) is highlighted, and the rest is grayed out. This has multiple negative effects in this context.

Contrast is reduced for the majority of the content: This is okay in a URL bar as (presumably) the user cares less about the non-highlighted text, and more importantly there's not much of it. You don't sit down and read a single URL for 5 minutes. When you reduce the contrast of a whole news post you're just hurting my eyes (and OCD! Come on!)

Context is eliminated: My eyes are drawn right from the headline "Cowboys' Tony Romo does not practice" to the sentence "The puncture has been described as "small". That doesn't make any sense. I assume that this puncture happened to Tony Romo, maybe even with some extra thinking I can assume it's related to his lack of practice, but I have no idea what this puncture is. Focus should be drawn to the major points in context. Out of context, the fact that "the puncture" was "small" is meaningless.

Regarding whether it was deliberately I'm not entirely sure, but I don't believe it was done competently. Looking in the CSS that paragraph is simply missing the <p> tag. The fact that it is must be deliberate to a degree, but I can't imagine why they would be doing so, since they're trying to apply style to the whole article.

share|improve this answer
4  
I wrote that all out and then I notice it's probably a bug in the CMS... –  Ben Brocka Sep 22 '11 at 18:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.