I have a form where users need to be able to insert new rows at any position in a table. Currently this is done by:
1) Click the row to insert a new row above or below
2) Select from a pulldown whether to insert above or below (defaulted to above)
3) Click a button to add the row
An example of this interface can be found at this fiddle: https://jsfiddle.net/fp686ptn/
My question is whether there is a simpler way to achieve this type of action that is still clear and intuitive to the user?
What about placing the "Add row" icons not aligned with the rows themselves, but actually with the spaces between the rows?
This way the user unambiguously sees, where they are about to add the row. See the mockup below (perhaps the shape of the "Add" icon can be improved to point into the void between the rows).
download bmml source – Wireframes created with Balsamiq Mockups
I think your suggested approach (as shown in your JSFiddle) works well, and just needs some minor adjustments as follows:
1. Don't display the 'Add Row' option when the user hasn't selected any row yet. This has the added benefit of avoiding the pop-up error message that currently appears, 'Please select a row'.
2. Instead of having 'Add Row' as a button, make it a label. When the user makes a choice of 'Above Selected Row' or 'Below Selected Row', have the row automatically appear.
This avoid the current slightly confusing interaction, whereby the user has to first select the dropdown, then selecting the button to the left.
3. Once the row is added, rinse and repeat :)
It's clear enough for the user. Or you can try this one.
In order to add row/column, you need to highlight the cell and then click on add column/row dropdown. In that, you will have an option of left/right in case column & above/below i.e in case of row. Let me know if you have any doubts.
Instead of having a separate button you can have a column with a sign like '+' which creates a new row in place of the selected row and pushes that row downwards. Something like :-
This way the user does not have to scroll up and down to add a new row.Also there is no need to give above and below options.If you want the ability to add a row to the end of the table, the give a button at the end of the table saying Add new row, which only adds a new row to the end of the table.
It's better to have a simple workflow and reduce the number of clicks, or scrolling a user has to do.
Simple way... I can propose you how user can do it in just one step, but I don't think it is suitable to current mental model.
I think that lines between columns or rows can be used to add a columns and rows. Click twice on the line between rows to add a row. The advantage there is that user already is pointing where the row supposed to be, so it is all done in one action. Sadly there is no place for a signifier to notice user that this can be done that way. You can only notify it by some note or tutorial. This also mean you still need implement also a button for adding rows and columns.
You can wider lines on hover, to notify user that there is some action possible, but you can't put clear signifier that is saying what action. Also I'm afraid how users will react to this. I'm imaging that it can be irritating, when all this lines are reacting to hovering. Another possible solution is to change pointer into '+' when it is hovering lines.
Clearly, this solution need a research.
