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.

enter image description here

3 Answers 3


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?


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.

  • Thanks. Yes I am getting feedback (mostly through observation) that people don't know for sure what the row is for.
    – richard
    Mar 30, 2011 at 23:35
  • "Be careful relying on colour - as has been said many times before you have to cater for colour blind users" I'm going to be pedantic here - the colour-use issue is often stated in this way, but it's not as robust a statement as it should be. UIs relying on colour can create a challenge for any user - not just colour-blind users.
    – gef05
    Mar 31, 2011 at 13:52
  • @Gary - OK - I'll rework that statement.
    – ChrisF
    Mar 31, 2011 at 13:56

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.

  • Thanks. I don't have a button though. It's just a row where you enter text and hit enter and it adds it below. See the image in my question for what it looks like.
    – richard
    Mar 30, 2011 at 23:35

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.


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.

  • See the image in my question for what it looks like. There is no add button. You just enter text and hit the enter key.
    – richard
    Mar 30, 2011 at 23:36
  • @Richard Oh, my mistake, for some reason I thought you were talking about a web app. See my edit. Mar 31, 2011 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.