When entering the name of a custom column to be added to a table, should the edit box be inside a column header?

Question

When users are allowed to add columns to a table in a web app, where's a good place to put the edit box where the user can type in the new column header name and/or choose from an auto-complete list of 100's existing options?

Choices I've tried so far include:

1. In response to the user clicking "add column", append a new column and put the edit box inside the column header itself, with a "save" button to commit the changes.
2. Have a small "add a column" form above or below the table with an edit box for the column name and an "add" button that will append the new column to the end of the table.

What are pros and cons of either approach, and are there other approaches that may work better than either of these?

Obviously user testing will also help me gather this info, but tabular data is a very well-trodden path in usability research so I'm hoping to gain insights from the wisdom of others before wasting time on options that are known to have problems.

Users are non-technical business users. This is a B2B web app.

Answer 1

You can add a new column on to the end of this:

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

... wherever the end of those columns are. The user can then try to click that save button squished inside the column header.

Or add a column on to this:

^{download bmml source}

Answer 2

You want the user to make 1 task (to add a column) so I woulnd't "disperse" too much the actions needed to finish that task.

I'd take the same approach as KanbanFlow:

1) "Add Column" button.

2) Modal with Column name Input + Position to be inserted.

This way the user doesn't have to look for the column to change it's value + they know exactly where the column was inserted.

Answer 3

From the two option i like option 1

Will this help to enhance option 1. How about you drop the "Save" button and just keep the edit box and let the user key in the column name and on (focus) change the save happens. If the user wants to edit the column again he or she can click on the edit box again.

You can use simple CSS tricks for micro interactions like mouse over it gets border on click it gets darker etc. This helps the user know

(I dont know the technology of your app, responsiveness and speed issues. There will be trade offs in this. My guess)

Secondly, I would like to know some scenarios both related to adding multiple column :

Will the user plan the no of new columns at once. (I wanna make 5 columns at once and start my work) or Will the user make one column do the required work and then go to ahead.

Broadly, speaking go with something that supports your users productivity and work flow around the table you are designing. And then you can test it.

Answer 4

I would make it fully in-line, both before and during the edit. Pros:

1. Speaks for itself.
2. Saves space.
3. User do not loose context (like with modal dialog)

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