UX: Edit in place vs. separate edit page / modal ?

Question

I have some data that is broken up into sections, much like the Resume feature of StackOverflow Careers (it's not resume data, though), that is editable/create-able via a jQuery web app. It's a bit more hierarchical (jobs can have sub-jobs, etc.) so depending on what method of CRUD I take, it means differing amounts of work. I don't mind spending the time to do it right, but I don't want to spend a lot of time making something fancy that isn't an optimal user experience.

Has there been any research done into the different styles of "editing" this kind of segmented, hierarchical text data:

1) Edit in place (e.g. you click on a form element such as job title, it turns editable, then you click "ok" and it saves)

2) Edit button that takes you to a new screen (like Stackoverflow currently)

3) Edit button that pops up a modal form

4) All fields are open and editable, single save button (like StackOverflow Careers)

Is there general consensus on when those different forms should be used to provide the best user experience? Thanks!

Answer 1

It depends. If your user base is web savvy, I would recommend an edit in place approach because of the natural editing flow it provides.

---

Edit in place

When you edit a section of a heirarchy, you edit inline with the rest of the information. This allows you to check how your edits apply to the other information as you're making them (rather than having to move back and forth between screens).

In terms of usability, a scenario where grouped items are editable all at once is nice as it saves multiple clicks. For example, if a job has the following data items:

Title
Description
Positions

It's good to provide a mechanism to edit all at once along with the edit each item in place behavior.

Inline editing also protects the other sections of the hierarchy from being accidentally updated.

---

Modal Edit

This editing method introduces a barrier between the hierarchy as a whole and the section you're editing (i.e. the relationship between the information you're entering and it's place in the hierarchy isn't immediately apparent from looking at the UI).

---

New Screen

As with the modal edit, the relationship of the edited information to the entire hierarchy is lost. However it is a very basic setup that most of your user base will understand immediately. It also protects the entire document from accidental updates.

---

All Fields Open

This provides the benefit of keeping the edited information in context (as with edit-in-place) and is very simple. There's no learning curve that requires a user to learn they have to click an element to edit it.

However, as someone that has more than one form ruined by my curious kids, I don't like how it exposes the entire hierarchy to unintended updates.