I'm struggling with a decision here..
What is the best place (and why) to put the edit button on a table if the edit mode will act only in partial content of that row?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
It depends whether your users are entering large change sets, or are making small one-off changes.
I have previously developed a table that had an "edit mode" that you had to switch on. Once in edit mode all the editable fields of the selected row became text fields, so it was obvious which content you could change. Changed fields were highlighted in green, red for deleted rows, and you could filter to review the change set before saving. This approach is nice for large change sets, and for users who are mostly viewing data and want to feel confident they won't accidentally change something.
The trend I've seen of late is to place the edit button as close as possible to the thing you're editing (but only when you're focused on the element).
There's at least a few web apps I use that I can think of where hovering over a field presents a pencil icon, and from there I can click or double-click to modify the value for that one field. Obviously, the apps use different types of layouts, but you can experiment with the layout and see what works better.
A few apps use inline editing directly (shown below), while others display a modal input that overlays the page. The inline variety is my preference, as you don't need to move your mouse/finger very far to do quick edits.
This design works well if you're expecting a small number of edits or you want to give your users a quick way to edit single values. Of course, if you expect they'll need to edit multiple values per row at once, then putting the button in the first column would probably be best, at least in languages that read left-to-right. This is doubly true if there's a large amount of data (to the extent where the user might need to scroll right to find the edit button).
In addition to buttons, make sure that, if the device you're targeting has a keyboard, that ESC and Enter/Return are wired to the cancel and save/edit buttons (respectively), so that users don't actually need to even use the mouse if they don't want to, or have accessibility needs.
It possibile you open an modal to inform your user about this inputs they can change only clicking them and only appear the save button when they change this, using a mini animation in this case to better explain about this option.
I think it be better because is like you do on paper, get the eraser and change that value.
Instead add an single button you add a edit button to eache value they can change open a doubt to your user because they saw only one save button.
First, I'd discard the one with the edit button on the left since it goes against the natural of flow of reading a row and then deciding to edit it.
Then you should analyze:
Depending on the answer of these I would choose a different option between input, row or column editing.
For me most of the time row editing is what works best because it's a middle point that doesn't annoy users making them click in every input they want to edit but neither edit everything thus loosing the track of everything that was edited. This is a example: