3

I'm working on a data table and each line is editable.

Editable data table

It's obvious what happens if you click on update or cancel, but what should happen if the editable row is out of view (click on another page of pagination, edit another entry, sort table, switch to a completely another page on the website)?

As the data is crucial the data shouldn't automatically saved (and changes happen not very often).

a) Show a confirm dialog on every click outside of the editable row? b) Show a confirm dialog on every action which would get the row out of sight? c) Discard changes automatically (don't like that as the user might expect a save) d) ... ?

Improve this question

1 Answer 1

Reset to default
2

Don't use a dialog unless the user is leaving the page.

I might want to scroll while making an input decision. A dialog will interrupt me if I scroll the active row out of view, blocking my view of other items I'm comparing.

One of the advantages of tabular data is sorting and comparison. This allows you to sort your current rows, and make judgements across other items. This could be amounts due (in your case).

You might start editing, and realize that you should adjust your amount based on other items in the table. I would expect that I could scroll the list freely, and scroll back to my row I'm currently editing to input a final value.

I don't know how much sorting and comparison applies to this specific table, but it sets a pattern for other areas in your app to which this is helpful.

If users don't notice (test them first!), apply an indicator of status.

One alternative is to append a small label indicating the table has a row that may or may not be in view, but that's in an edit state. If you have a large amount of rows, you could even have a 'show' link that scrolls to the editable item.

My language probably isn't optimal (Maybe 'unsaved changes' is better), and I took some liberty by removing the visible 'Edit' buttons (could you maybe have the edit button only on hover for desktop views) to help focus on the edit state as you scroll the list.

enter image description here

If you need to enforce only one edit at a time

Again, my text is not optimal, but you could show a disabled Edit button, explaining to the user that simultaneous multiple edits are not allowed.

enter image description here

Improve this answer
3
  • Good point, how would you prevent to edit multiple rows?
    – Gustav
    Jul 26, 2017 at 14:20
  • Good question! Would you want to? What's best for your users? If you want to prevent that, you could have the 'Edit' button on hover, but in a disabled state, with the Disabled cursor, and some text indicating there's an edit in process.
    – Mike M
    Jul 26, 2017 at 14:23
  • 1
    @Gustav I've updated a mock to include a suggestion for your multiple edit prevention.
    – Mike M
    Jul 26, 2017 at 15:43

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.