Table builder - Drag-n-drop vs. clicking through dialogs?

Question

I am working on a design of a module for a web application. The web app is to be used on desktops and tablets - in the newer browsers (IE9, CHrome, Safari, etc.).

One of the tasks that users have to do in the module is to build a table (grid). I have divided the screen into two panes

• left hand pane contains the "repository" of fields (columns) which can be used to build a table
• right hand pane is a canvas where the actual table is created.

I am considering two options:

1. Use drag-n-drop (+ maybe multi selection) to drag the columns out from the left pane and drop them in the right pane.
2. Use more traditional dialogs where users select the columns they want by clicking.

To be honest I like the drag-n-drop method better - to me is very natural and users immediately see how their table will look like when they exit the "design mode". I realize that they may run into problems when they reach the right edge of the screen, but I think the benefits on drag-n-drop in this particular scenario outweigh the drawbacks.

Which option is better from the UX perspective?

Answer 1

The best option from a UX perspective is to support both methods as some user prefer Drag and Drop, others Menu item selecting and yet others prefer keyboard shortcuts. Implement all three and your users will love the way you give them the choice of how to work the app.

Answer 2

Each task should be designed as simple as possible. If the user wants to create a new table and he knows, how many rows and columns he needs, then a dialog where he can enter the number of rows and columns is the shortest way.

It is more complicated to build the entire table with multiple drag and drop actions (and multiple selection can be for some users very complicated - either they do not notice this feature or they do not know how to perform it).

In order to change an existing table (adding and removing rows and columns) drag and drop can be the quicker solution. For example, you could allow the user to drag a new row at the end of the table. Or the user could simply drag a new row anywhere between the existing rows. It would be more complicated to do this with a dialog. With drag and drop the user can use his own criteria (e.g. insert a new row after the row with "Thomas") and doesn't need to specify details in order to complete the insertion (e.g. the number of the row).