:bulb: UX exploration: Pattern - Edit record, new pattern suggestion

Hello Everyone,

I just documented a new pattern idea to edit a record and I would love to have your feedback.

When users click on the record pane edit icon, the pane shall be editable (instead of having a full-screen edit record page).

vendor-edit-in-pane2424×1176 167 KB

Structure
The edit pane header shall have a close icon on the left, a “Update {app name} button on the right and a centred title with the following format: Edit {record name}. Also, the content layout shall be similar to the selected record with editable text fields.

Behavior
Users might be able to add text fields by clicking on the “+ Add {category name}” button in the default style.
They shall also be able to delete a field by clicking on the red “Remove” button next to it.
When users click on the “Update {app name} button, changes are saved and the pane comes back to its original noneditable state.

Hi @Stephanie,
in principle this looks useful. I am concerned that there may be some issues on low-resolution or strange format displays/devices if input masks with many wide fields are to be displayed.

It looks like you are working with a high-res display (2424x1176 px), therefore you shouldn’t experience any issues. I’m using a 1080p full hd display and in the inventory app the “edit directly in third pane” could be quite challenging:

image1919×1065 295 KB

Especially when you compare it with the current edit screen, where almost 3/4 of the screen is used:

image1920×1076 129 KB

Just my 2 cents --Felix

Thank you for your feedback, Felix! @kevinhorek, do you have any comments/thoughts on this?