Last week we pushed an update to the Basecamp help section. The goal was two fold: 1) Make it easier and faster for people to find answers to questions they had and 2) Make it easier on us by reducing the need for people to contact us directly for help.

The old help section looked like this. A list of common general FAQs at the top, a few other help links below those, and then a long list of common FAQs for each section below.

Based on the type of support requests we were getting it became obvious people weren’t looking below that initial list. We had to do something better.

The new help section looks like this. A pulldown lets you jump to a section and the FAQs for that section load up right below. If you want to see help for file sharing, just select “File sharing” from the pulldown. We also added quick tutorial videos for key sections and increased the font size for the FAQs themselves.

We also replaced the “Help” link in the upper right corner with a graphical button. Customers were telling us they didn’t even know a help section existed in Basecamp. The link was too small and obscure. When people need help they are already frustrated — making the help section hard to find just piles on the frustration. The button solved that problem.

But what I wanted to focus on for this particular post was a smaller part of the new help section. A little detail. A design decision.

When you select a section from the pulldown, the name of the section appears below with the relevant FAQs. The change is instant. Watch this movie to see how it works.

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.

When I was originally designing this the section headers looked like this:

The problem was that when we started using it we realized that the headline change wasn’t enough of a visual cue to let you know something changed. Just changing some black text on a white background didn’t cut it.

So I tried this instead:

Now we’re talking. Now when you make the switch the shape of the header also changes (watch the movie again). 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.

We really enjoy these details. We hope you do too.