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:
- Use drag-n-drop (+ maybe multi selection) to drag the columns out from the left pane and drop them in the right pane.
- 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?