What color should an add row template be?

Question

I have a large grid. At the top is an add row template for adding another record. I want to differentiate it with making it stand out too much and drawing the eye constantly towards it. The rest of the grid rows are alternating colors, white and light blue.

I already have a "physical" separation between the add row template and the rest of the grid (about 20 pixels of "space" between the add row and the grid), as well as text in the add row template instructing them to enter text there and hit the "enter" key to add the new record to the grid below.

Should the add row be a different color? If so, should it really stand out? What color should it be? What indicates an add row template?

Here is what it looks like.

Answer 1

Be careful relying on colour - it can cause problems for users, not just those that are colour blind (not forgetting that there are many types of colour "blindness").

The physical space and instructions might be enough (though a screen shot would help). You could also look at using bold text or perhaps a border to help differentiate this row from the others.

Are you getting feedback that people don't know what to do?

UPDATE

Based on the screen shot other things that spring to mind are:

• Increase the size of that row
• Use brighter colours (rather than just different colours)
• Use of tooltips perhaps.

You might find you have to do a combination of these things rather than there being one change that makes the difference.

Answer 2

Anytime I have an important task button or link I use an icon with text. In this case, in the row you call the "add row" I would use a green plus sign the same height as your text height and the words "add a new row". Then if you like, you can color the background of the row a light green.

Like ChrisF says, though a small portion of your total users, you can't forget the color blind.

Answer 3

How did you handle the title row? Is it duplicated for the add row and the grid itself (i.e. two title rows?) or is it just above the add row, so there's a large break between the title+add rows and the grid itself?

And how does the "add" button fit in? Is it to the right of the entire grid, or below the add row and within the rectangle described by the top rows and the grid?

In any case, it seems to me that it would benefit from a darker background than the colors used in the table.

EDIT

Well, since it's a desktop app (apparently), things are a bit different. Does the user just fill in the first column and hit Enter without filling the others? Or are they supposed to fill in the first column, and then navigate through the grid using arrows/tab, and hit Enter only when they're done editing everything?

In case of the first, I would just make it look like an editable text field - white, indented, with a clear border. The hint can go inside.

In case it's the second model, I think you'll find that many users press Enter just to finish editing the first field, and they don't expect it to be added to the grid immediately, before they've had the chance to fill in the other fields. But in this case too, I'd use a stronger contrast in this row - maybe white with stronger borders.