Is it better to have a modal or an inline entry for a table?

Question

I have a styled table containing first and last names in each column and nothing else. As part of the usage of my app, people will be entering names.

Should I:

• Have the "add" button launch a modal(using jquery) window and have the user enter the information and save. As soon as the modal closes, the table updates.

OR

• Have the "add" button create a new row at the bottom of the table. The new row will contain textboxes in the position of their respective content(column wise) and have a save button to the right of the row when the s

Answer 1

I'd say the second is more difficult to implement, but infinitely preferable for the user, for the following reasons:

• The user won't have to shift her gaze.
• The rest of the table isn't blocked and can be used as reference when filling in the values.
• The fields are automatically mapped to their respective columns. With the model dialog you need a host of labels that the user needs to mentally map back to the table.

There are, however, more UI pitfalls lurking with this option:

• Your UI has two modes: editing and viewing. Things like column sorting and live filters shouldn't be accessible or update when you're in editing mode and this should be communicated to the user.
• When leaving editing mode, the sorting shouldn't be updated immediately as this will be unexpected for the user. Let the user inspect the result of her work and explicitly re-sort the table