How to make the most usable data editing in the web interface?

Question

User interface

There are documents/objects that the user can view and modify.
For example, your own profile.
I consider three ways to implement these actions: form, inline, focus.
Initial state: object/document data is displayed somewhere in a block/panel/on a separate page.
Form.
u1. switching on the editing mode ("change" button)
i1. displaying the completed form in the same block or in a separate dialog
u2. input/change of data
i2. validate data/highlight
u3.1 save change with "save"
button i3.1 validate data on server/highlight, or save and return to view mode
u3.2 discard changes with "cancel" button
i3.2 return to view mode
Advantages:
- familiar scheme
- explicit designation of the action mode
Disadvantages:
- unnatural and bureaucratic switching to "view" and "edit" modes
- additional buttons "change", "save", "cancel" forming an extra block
- very different layout of the document in viewing and editing modes
- saving data that has not changed
Inline
u1. field selection by double or single click
i1. the field becomes editable
u2. input/change of data
i2. data validation/highlighting
u3.1 saving data by pressing enter
i3.1 data validation on the server/highlighting,
u3.2 cancel changes by pressing escape
i3.2 return the original value of the field
Advantages:
- the usual scheme for text editors
- unchanged layout
- no mode switching
- no additional buttons and the need to reach for them
- natural saving and canceling
- the ability to change one field
Disadvantages:
- non-obviousness of actions for changing the field
- impossibility to attach viewing functions to the fields (following links, opening blocks with details, highlighting text, etc.)
- impossibility to validate related fields
Focus
u1. selecting a field or block of fields by hovering over it
i1. the appearance next to the selected icon "change" (for example, the icon "pencil")
u2. enable editing by pressing the
i2 pencil. focusing on the selected field, darkening everything else, transforming the element into an input field, drawing next to the field icons "save", "cancel", "delete"
u3. input/change of data
i3. data validation/highlighting
u4.1 saving data by pressing enter or pressing
i4.1 validating data on the server/highlighting or saving
u4.2 discarding changes by pressing escape or pressing
i4.2 reset field value, cancel focus
Benefits:
- the presence of additional buttons to indicate possible actions
- the naturalness of saving and canceling
- the ability to change one field
- the explicit designation of the action mode
Disadvantages:
- the actions for changing are not obvious
- jumping layout due to additional elements
- the impossibility of validating related fields
I consider this method optimal and going to implement in the project.
You can get rid of the jumpy layout by placing additional elements above the rest of the content, and leaving an empty space in the layout. Linked fields can be combined into one fully editable block.
The non-obviousness of actions for changing is partially compensated by the appearance of the icon on hover, which in itself seems to be a fairly natural movement when you want to do something.
What other points did I miss?

Answer 1

Usability is inextricably linked with 3 things that lie in its definition:
- task
- user
- context
@DmitriyEntelis absolutely rightly pointed out that without understanding what task data editing is necessary for and in what context, it is impossible to assess the degree of efficiency at all , laboriousness and satisfaction (and this is usability).

Answer 2

The question is very abstract and depends, for example, on what data is planned to be edited.
If we are talking about something important (bank details, etc) - I would insist on a separate form, the user should not change them just like that.
If we are talking about something less important, it seems to me normal (and de facto used on a bunch of sites) some kind of hybrid approach from the last two points.
According to the hover, it is necessary to somehow highlight the field, calling on it to click.
By clicking to open editing in +- field borders.
Be sure to show a cancel button.
By clicking on any other place / pressing enter - save the data.
Look for example at https://trello.com/
or in Jira for editing issue.
PS I'm not a designer, my opinion is subjective.

Answer 3

And it is worth remembering that now people often access sites from mobile devices that do not have a cursor and corresponding events.