Is it a good idea to add new rows on top of existing ones?

Question

Consider my fiddle implementation of a table.

At the beginning, my table was more conventional, featuring the + button below the table and adding new rows below old ones.

Now, I've decided to make the table more compact and thus moved the + button to the header, where it is aligned with the - button of each row.

Since the + button has been moved to the header, I thought it would be more natural if new rows were added above old ones; but is that really the case?

Is it possible that - since new rows are highlighted in blue for 1 second after creation - it doesn't really matter if rows are added above or below?

---

PS: You are free to use my code as you wish.

Answer 1

It would be better if the existing rows were moved/animated downward over a period of about 300 milliseconds, to make room for the new row. Movement is very effective at grabbing one's attention - noticing movement is an instinctual response and it's noticeable out of the corner of your eye.

The direction of the movement provides useful information, up or down the movement begs for attention and provides information, but:

The existing rows must move down in order for something to be inserted at the top, but for something to be inserted at the bottom the existing rows needn't move up. This suggests it's easier to provide the useful movement feedback by inserting rows at the top.

Answer 2

The highlight is really helpful to attract the attention of the user, you should make it longer or change it into a fading effect, but the idea is to call the attention to the row for more time, maximizing the chances of noticing the change on the table.

If the design of the table is as the one on the fiddle, I find a problem, I'm assuming that A, B and C will be some kind of heading for the columns. There should also be a heading for the remove row column and it would be better if there is some change in colour for that one since it's not data but an action, which means that is a different category of information/interaction.

Finally, about your question, adding the new row on top, or as the first one, makes sense, no just because of the position of the button, but because it's going to be close to the headings and where the user attention is most probably going to be. Although, if the table may be long enough, or if the user is going to be checking data along the table, the adding control is going to be too far, so when still a good one, you may consider adding a new control, for instance a floating one, with it's explanation, of course. You may also consider repeating the headers section which improves usability and gives you a place to have the plus button.

If you repeat headings, and then have more addition buttons, whenever the user clicks on it and adds a new row, it should be inserted right below the control, like in your actual example.

If sorting is important, then after an insertion happens, you should also provide input to the user and a button to press and resort the data.