Thursday, November 30th, 2006

Black Background Technique

Category: Usability

Jason Fried of 37 Signals talked about a Basecamp design decision that had to do with their help section.

An Ajax callback on an input selection was occuring too fast:

Speed is good, but speed can also be deceiving. Sometimes things can happen too fast. Sometimes it doesn’t look like anything changed. That was the original impetus for the yellow-fade technique introduced in Basecamp.

But the yellow fade just didn’t seem to make as much sense in this case. We wanted to be a bit more subtle. Flashing a huge 500 sq/px section yellow was too much.

A subtle difference was found between changing the headline, and making it white on black. With a black background, you saw it change length, and users could process that change:

Now when you make the switch the shape of the header also changes. The black bar changes length. That’s a lot more obvious than just black text on a white background.

This plays off Tufte’s “smallest effective difference” theory which basically says you should make all visual distinctions as subtle as possible, but still clear and effective.

Changing black text was too subtle and not clear enough. But changing the background to black allowed the section change to be clear and effective yet subtle enough not to startle you like a huge yellow fade might have done.

black div background

Posted by Dion Almaer at 8:05 am

3.3 rating from 28 votes


Comments feed TrackBack URI

Interesting, the same trick is used in MS Visual Studio to let you see the code block you just commented out using /* .. */

Comment by Philippe — November 30, 2006

Presumably they are careful to make sure all their help sections have titles of different lengths. 8-)

Comment by Richie Hindle — November 30, 2006

I thought it’s somewhat dynamic (black box sliding away and stuff) but it’s just changing the content of the box and the content always needs to be of a different size than the current one. Honestly, that’s not worth reading ;-)

Comment by Stephan — November 30, 2006

[…] Read more: here […]

Pingback by Black Background Technique :: Newstack — December 7, 2006

Leave a comment

You must be logged in to post a comment.