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?

  • To me, the fiddle seems quite clear. I also think that the default: "insert above", matches with excel, which is a quite used tool for tables. – Dimitra Miha Nov 15 '17 at 14:55
  • I would have tried to implement it as close to google sheets as possible. I'm sure google made a lot of research, and a lot of users will probably be familiar with google's style interface – Hagai Nov 15 '17 at 15:11

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Suggested improvements to 'Add Row'

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. enter image description here

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 :-

enter image description here

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. enter image description here

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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