Black Background Technique > Archives

Black Background Technique

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.