adding items to a list

Question

When adding items to a list, is it better to let the user...

select the options first, then click 'add' to insert

or

click 'add' to insert blank item, then user selects options?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

As a layout I agree that the above (edgarator) is more clear than your current options. From a UI/UX crossover point of view I have worked with addition field layed out like this quite a few times and have found that it is better to design the field in a way which makes the user feel like they're adding in a new record directly to the HTML table rather than in a firm connected to the table.

Allow me to demonstrate: (excuse the table data I'm a little pushed for time)

The italic lightened text as a UI hint to being editable is understood by most, especially when combined with a cursor change as expected with a text field, it looks tidier and users feel more like their records will add straight in to the table (what we know as AJAX) rather than take them to another page once submitted.

Answer 2

Jay is right that this question will help you arrive at an answer. To address the specifics of your question, however, I would want to see more about what you think the user's goals are. Is this UI part of the application's core function or is it a more transient activity? Will the user need to enter many items or just one or two? And what are your requirements for the data? Do you require every field (e.g. Months) to be filled out immediately, or ever?

Under the assumption the user may want to enter many records at once, the easiest and least frustrating system would allow the user to keep their hands on the keyboard, Tabbing from one field to the next, and whenever the user Tabs out of the last field on a row, a new row gets created automatically. The user can skip a field if they don't want to fill it out immediately. If the user accidentally creates a new row (say, when they tab out of the last row they intended to add), let them easily remove it with a trash or X button.

If some fields the user skipped were required, I would allow them to move on from those records but have the user interface flag those records with a warning icon once they lose focus. Then, when the user tries to save, you can either ask them to fill out the missing data or save the records as incomplete, whichever your system can handle.

Answer 3

I'd do something like this. Using the "Delete" column to allow the user to "add" looks a bit weird, and might clutter the interface a bit. So I'd use the approach on the right.

Another way of presenting the information is having an additional row always present, with controls ready to use, and a button that suggests addition.

Group all Edit/Delete/Add buttons under the same column.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You can also add a checkbox to the left of the table for each row, that allow multiple actions on multiple rows to be performed.