Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
Thanks. Yes I am getting feedback (mostly through observation) that people don't know for sure what the row is for. –  Richard DesLonde Mar 30 '11 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 '11 at 13:52
    
@Gary - OK - I'll rework that statement. –  ChrisF Mar 31 '11 at 13:56
add comment

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.

share|improve this answer
    
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 DesLonde Mar 30 '11 at 23:35
add comment

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.

share|improve this answer
    
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 DesLonde Mar 30 '11 at 23:36
    
@Richard Oh, my mistake, for some reason I thought you were talking about a web app. See my edit. –  Vitaly Mijiritsky Mar 31 '11 at 6:27
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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