26

I've seen this question asked a few times, but none that relate to my particular scenario. I'm working on a large, complex UI that involves many user types. For this screen, there are 4 types of users:

1) Those wanting to just "view" the details of a Fund.

2) Those wanting to edit only 2-3 fields.

3) Those wanting to edit "sections" (in this case, "Static Data").

4) Those wanting to edit many elements, thus wants to have the entire page be "editable" at once.

enter image description here

The attached is just a rough wireframe, but my feeling is that having an "Edit Profile" (top right), "Edit Static Data" (right, inside the box), and "Edit Inline" function is overkill. Is there a better way to achieve this without adding too much complexity?

My gut tells me I should definitely keep the global "Edit Profile" function, plus either the "Edit Section" OR "Edit Inline"... what are your thoughts?

Most of these pages are very, very long, and they have many fields and sections. The current UI has this entire screen in "edit mode" all the time (they're not all "form fields" either - there are Tables, large text areas, etc...). I find the whole page very distracting, especially for users who are simply "looking" at the data.

Another little wrench in all this: some users can be making changes to the same field/section/page at the same time. So I need to somehow account for that fact - not that we want that element to be "non-editable", but that we'll need to save the most current instances somehow, or indicate that "This is currently being edited by xxx".

Any suggestions or best practices? And what about "Saving"? Where would that fit in the picture when editing an entire page vs a section? Placed at the bottom and lost, or kept with the top icons, as it is currently?

1

2 Answers 2

25

I would recommend going with an approach like Facebook has i.e. section level edits. If you look at Facebook's design, If I click on Edit for a specific section only that section becomes editable and a person can edit what ever fields he wants and ignore the rest.

enter image description here

I strongly recommend against going for a inline edit for each and every field as that would greatly increase the clutter on the screen and can cause accidental clicks

With regards to the save functionality, I would recommend providing the save feature at two levels i.e at a section level as shown in the image above and also at a global level so that an user can quickly click and save the entire page as opposed to saving section by section.

With regards to the a person editing the same section, you could go with an approach as done by stack exchange to inform an user about an new answer being posted as he is typing a response.

enter image description here

1
  • Great example - thank you! On a related note, what would you suggest for the "view mode" of checkboxes and the like? Would you only show the ones that have been selected, or still show all the options (so the user knows what "can" be checked if they were to click Quick Edit)?
    – Lynn Cyr
    Commented Oct 24, 2012 at 15:54
1

When a person begins an edit others must be locked out from editing the same thing (there are ways around this but I think they're too complicated, see version control systems).

Given that, I think you want to lock a smaller unit than the whole profile so I'd make the section the unit of editing/locking.

I'd make the initial view read-only and nothing would even look editable. Each section would also show if it's checked out (locked, being edited by) another person. If not locked, an edit button would be clickable, and if the edit button was clicked the appearance of the section would change to show it was editable. (At this point it would be nice if other people's views of the section would update to show it's locked by XXXX.) The section could be edited, saved explicitly, at which point the view changes to read-only and the view of others viewing the section be updated to show the edits and the fact that it is now editable by others.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.