0

We have an application that lets users modify information in a table that has a fixed number of rows. (That is, the display table has a fixed number of rows.)

They can append / insert new rows, modify existing rows, and delete rows. Once they are completed with the edits, they can commit the changes. We indicate that information is uncommitted by coloring the text in blue.

Example: Here is the initial state of a table that has 7 fixed rows:

enter image description here

After some editing:

enter image description here

After deleting the second row:

enter image description here

What are some ways (in the third figure) to indicate that one of the uncommitted changes made to the table is that a row has been deleted?

4
  • Does the user have to hit a button to save or is this autosaved? Nov 10, 2016 at 0:30
  • The user has to commit the changes.
    – Jay Elston
    Nov 10, 2016 at 21:36
  • I'm a little bit worried about the interaction overall. In the times, when WYSIWYG is a past hype for many, many years, and we're going towards edit-without-saving in many cases, this kind of interaction seems outdated to me. Be sure you have a special use case that is supported by this interaction. May 10, 2017 at 6:17
  • As far as the inserted row is concerned (assuming you don't adopt any iconography as suggested in mgiesa's answer) I would make the entry in the first column ("No") also blue -- to better distinguish an inserted row from one where all fields have been edited.
    – TripeHound
    Jun 9, 2017 at 15:13

2 Answers 2

2

Since the user must commit changes, you could indicate changes such as the deleted row by using opacity.

Reduce opacity of the row to be deleted to indicate it's going away.

enter image description here

1
  • As noted above, for the inserted row, I'd continue the blue into the "No" column (to distinguish it from an existing row with all values edited).
    – TripeHound
    Jun 9, 2017 at 15:16
1

You could:

  1. Put a strike through effect on the deleted row
  2. Add an icon and/or text beside each edited row to indicate its state. For example an edited row could have a pencil beside it while a deleted row could have a garbage can (careful to not make them look clickable). You could also add "(edited)" or "(deleted)" either below the icon or as tooltip text to make it really obvious what's going on. Make these thing more subtle than the rest of the row's text, it shouldn't blend in with actual content.
  3. Gray out the row and disable any further edits.
  4. Move the row to a second table below, titled "Deleted Items", which disappears when nothing is in it. This is really only useful if the first table doesn't have a lot of rows in it.

I was going to list using another colour, like red, but if you have any kind of validation you may already be using red to indicate a validation error. I mention it only for completeness.

2
  • Strike-thru almost works. One other constraint is that the table has a fixed number of rows...
    – Jay Elston
    Nov 9, 2016 at 17:28
  • @JayElston If you're worried that the strike-through approach still occupies a row, then let the table grow to have one more row for each deleted one. May 10, 2017 at 6:14

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.