1

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:

mockup

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

mockup

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:

mockup

download bmml source

Any other suggestions on what would be obvious / intuitive?

2
  • Plz correct me if i am wrong, What i understand here, you are trying to creating a mapping interface ?
    – Andy
    Mar 17, 2015 at 5:51
  • 1
    Why do you create an empty table? to be the basis of the report you are generating? what does user save exactly? Report name, columns, sorting, query... etc? or the shape of the table with rows and columns?
    – Ayyash
    Mar 29, 2015 at 4:47

2 Answers 2

6
+100

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
  • +1. Trying to create the table headings before creating the table is abstract and confusing to the user, and it adds one more hurdle to table creation. It's much better to use the time - honored WYSIWYG approach here.
    – tohster
    Mar 27, 2015 at 15:55
0

mockup

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.