Adding new item in a table list: At the end of the list or open a new page?

Question

Which among the 2 ways of adding new data to table list is better and if so, in what context?

END OF THE LIST (similar to adding new data in spreadsheet documents):

OPEN A NEW PAGE FORM:

Answer 1

Short answer: Make use of an external Form to fill the information.

---

There are two situations. I will give reasons for both Create new and Edit:

---

1 . If the data displays differently in the view and edit modes:

The relation between the data input and the data view might not necessarily be the same.

The "new page form" (Option 2) gives the possibility to alter the information and add extra one that can be represented in the actual table in different ways such as alt text, images, links, etc.

For example one might paste a link that will not be strictly represented (http://...) in a field but rather as the url of some other field.

If the way the output displays is relevant, you can use a preview window (similar to the one here in Stack Exchange).

What happens if there are columns which are hidden in the original table? Where would the user put that information in the first option?

---

2 . If the data displays in the view mode exactly as entered in the edit mode:

• Create a new row or Edit the whole row at once:

You should only use one Save/Accept button. It is a good idea to use an external (to the table) UI to clearly indicate where the user is supposed to interact. As a row has several fields it is better to present them in the same box, which is your Option 2.

• Edit a field individually:

In this case you could modify the field in the same table. But the way to interact should be made using a different UI (as explained before). Check this two ways Material design guide indicates:

Answer 2

The first design:

• Gives the user hints/confirmations for expected values, in case the user is in doubt about the field.
• It gives a feeling of integrity, the way you see it the way it goes.

The second design:

• Allows the user to better preview their input, since the content size can be big, and not very friendly to input.
• Some would call it "Distraction Free", which explains itself.

---

The idea of adding a new page for the form is debatable, I've seen people who refer to it as an advantage, as "it enriches the platform".

Others think of it "as long as it is not needed, avoid it", where additional pages require more navigational space, which reflects on the user.

Answer 3

If you have an application that requires complex validation use second option

We have a complex application with lots of tables and dependencies between them. Therefore, we need to do a validation every time we add/edit records to check if the data is Ok.

We use the second option because we can do the validation in the new screen and if there are dependent fields we can include them too. Depending on the value of a certain field we may need to display additional input fields. With direct table input we we cannot visualize dependent fields. This is why we are using the second option.

However, if you have simple interface where there are no dependencies between input fields and no complex validation is required you can use the first approach safely.