One change, immediate results

Last week’s redesign of Wired News included significant visual changes to the interface. The push toward XHMTL and CSS is certainly a big deal. But as a designer, I also love delving into visual details, especially as they impact the user experience. In addition to the usability testing we conducted on WN prototypes a month or two ago, there’s another excellent mechanism for measuring and determining the experience our users have with the site. It’s called user feedback, and we get a ton of it for free via a multi-use Contact Form on the site.

As I referenced the other day, we’ve been getting a lots of feedback about the redesign, some negative, some positive. My address is included in several of the feedback alias lists, and I try to read the majority of feedback, despite that it’s often buried among 400-500 messages per day of spam.

Many of the negative messages are polluted with poorly written subjective messages filled with angry words, or claims that immediately reveal their own misinformation. (One user actually reported that our site looked like s*** in his browser, and looked worse when he upgraded to Netscape 5. ?!) However, nested among those messages, I started to see recurring themes and similarities with specific “dislikes” or features which supposedly made our site unusable.

One of those themes centered around my choice of a certain gray color for text appearing on black backgrounds. I started seeing quite a few comments (all phrased colorfully) about the text being way too dark to be legible. When designing and choosing colors for the Web, one of the first lessons a designer learns is that color can change drastically from one monitor to another. Look at a site on a designer’s 18-inch Sony flatscreen, then walk over and look at the same site on a Unix admin’s Viewsonic, and you’ll usually see a big difference in hue, value, and contrast, even if they’re both set at the same resolution and color depth.

After realizing I may have assumed wrongly that the gray I chose would be legible enough on all monitors, I decided to adjust the text color to a lighter value of gray or even white. This screen shot [.gif, 37 KB] shows the original on the left, the new on the right. What did this require? I made five tiny changes to the WN stylesheets, which took approximately 60 seconds. When the site content flushed (updated) at 2am a couple nights ago, my text color changes were immediately propagated to hundreds of pages that used a black background. The developers didn’t have to lift a finger.

Is that my point? Well, not entirely. It’s incredibly cool. And it’s immediately understandable if you’ve been working with — our understand the value of — using CSS for styling and designing Web pages. This was a tiny change with very little noticeable impact on the interface. But the point of this whole post boils down to one immediately effective result: Not one message has been written in the last two days that even hints at problems with the gray text color issue.