What is a good user interface to allow people to enter in column headings?

Question

I have a website where you can enter in some inputs and a report comes out. You can then save any report and load it up in the future with all your settings. I have one example where you can create tables dynamically by inputting 2 fields:

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

Given these inputs, I create an empty table.

There is now a request to have the user enter in the column headings and that get saved with the inputs as well.

I am trying to think of a good user interface for the user to enter the column headings. Here are a few thoughts but looking for some suggestions

In this example, depending on the Number of Columns textbox, a set of textboxes show up to the right where the use can enter in the columns headings

^{download bmml source}

or remove the Number of Cols all together and just create a list of names with an "Add Col" button like this:

^{download bmml source}

Any other suggestions on what would be obvious / intuitive?

Answer 1

Allow direct editing of the columns headings. Allow direct editing as much as possible.

Make the initial table creation as quick and easy as possible but understand this initial creation will likely be modified many times. So to create a table requires 2 numbers, number of rows and number of columns. Then show the table and let the user work on a "live" table.

Allow the user to click on a column heading to edit it. Have buttons or menu items to add (or remove) rows and columns.

The important thing is to get people into editing a widget they can see as quickly as possible. Enable as much direct manipulation as possible, things like being able to drag the dividing lines between cells to adjust the width of columns.

So I'd say ask for the number of rows and columns first, create the table, and then have a table they manipulate as directly as you can allow. Alternatively, just initially present a 4x4 table and let them work on that - enable them to easily add and remove rows and columns, edit column headers and adjust column widths.

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

Answer 2

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

Here is another approach that is common enough for you to consider implementing as well.

1. Start with a empty table that has an input box to edit the column heading (perhaps with some text to indicate that you can enter and edit the content.
2. Once you have entered in a value and changed focus, a new blank column is added.

This way you can dynamically generate columns and allow editing of the column name too. If you want to want the actions explicit you can add buttons or allow right click with a context sensitive menu (if not implementing in mobile).