Inplace Editing vs. Edit Page

Question

When you develop web applications, especially ones that deal with a good amount of data management (e.g. contacts, addresses, orders and so forth), do you usually create the interface as in-place edit or make a separate "edit" page (and a view-only page)?

Why / What is the advantage of one over the other? I'm trying to make a decision on my own project which has such data management and I'm not sure which way to go.

Answer 1

I think inline editing makes sense when the 'cost-of-effort' of making the change is relatively low.

For example, changing a description on a photo is something that's pretty easy to do, there's little risk if its not exactly right, and the user expects to do it right in context with the picture they're editing. In that case, inline makes sense to me.

On the other hand, in an application where the user needs to be helped or guided through a process, or the change means major changes in billing/shipping/account status. It may make sense to have a separate page to help them understand the full ramifications of their actions.

Answer 2

for things like settings where the main use for viewing the page is to edit it, inline makes sense.

After that, it's more about the usage. If people are constantly editing them then it should just be inline. If it's for say user details, where it is mostly read and sometimes changed, this is what I do:

The page is viewed without editable boxes. If the user wishes to change some information, they hit an edit button The same page is shown but with editable fields and cancel / submit buttons.

I achieve this by having the view decide based on a value in the property bucket which version of each field to show, which is set by the action (MVC)

EDIT:

Sample as requested (untested)

In the controller (castle monorail), let's say CustomerController:

public void View(int customerid)
{
    PropertyBag["customer"] = Customer.Find(customerid);
}

public void Edit(int customerid)
{
    PropertyBag["editing"] = true;
    View(customerid);
    RenderView("View");
}

in the View (brail):

<th>Name:</th>
<td>
  <% if IsDefined("editing"): %>
    <input name="c.Name" value="$customer.Name" />
  <% else: %>
    $customer.Name
  <% end %>
</td>