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.

Crispy

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.

Excide

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>

Jackdaw

Your answer is intriguing; could you post some sample code how you did this (your last part of the answer)? That would be immensely helpful. Thank you! – Crispy

Answer 3

I would say that you should use in-place editing when editing the data is straightforward and simple (idiot-proof). It should be no more complicated to the user than selecting text in a word processor and typing over it.

If you need/want to show labels, instructions, error messages etc, you should probably use a dedicated edit page. Or find a clever way to do this in-page.

Also, sometimes you don't show exactly what the user entered. For example, you show the user's age, but when editing it shows the birthdate. Then I would suggest that you use an edit page, since it could be confusing to the user.

Courbet