Use inline editing to reduce mental burden. Page refreshes are disruptive to the user's mental flow. Instead of editing content on a separate page, do it directly in the context by showing available tools near the target of the actions. Editing directly in context is a better user experience since it doesn't require switching the user's context.

Use inline when editing one of many in a collection. This keeps the context in view which might be important in editing.

Use edit toggle to reduce visual noise with inline edits. Use an edit toggle when there are a number of items to edit and showing edit scaffolding would make the display visually noisy.

Make sure your editing modes are discoverable. A feature is useless if users don't discover it.

• Show a tooltip on hover e.g. "Click to edit". Use if readability is primary functionality.
• Changing the cursor to an edit cursor, the I-beam.
• Add a small "edit" button be could shown along with the title. Clicking the link would trigger the inline editing.

Introduce mental model that edited element is the same as the base element.

• One way to smooth out the transition between show and edit modes is by a subtle use of animation.
• Another approach is to use the same amount of space for both live preview and editing.

If you don't have automatic saving, show it. Highlighting the background of the currently edited area in yellow and revert to the neutral color after save. Saving the content shouldn't refresh the page, but it should update the content.

Use overlay editing if you can't fit the edit mode to the page. Sometimes you can't fit a complex edit into the flow of the page. Bring the editing form just a layer above the page via a lightweight pop-up.

Use overlay editing when what is being edited needs careful attention. This removes the likelihood of accidentally changing a critical value.

Providing an overlay feels a bit heavier. An overlay creates a slight contextual switch for the user's attention, but it's usually bearable.

Primary function of a table is presentation, not editing. Editing is secondary and should only allow simple inline editing.

Switching between edit modes should happen instantaneously. There is no point in making the user wait on an animation to finish before he can start editing.

Consider your audience. Providing an alternative to inline and overlay editing by allowing editing on a separate page can improve accessibility.

When you allow editing settings, allow seeing preview of the results. Avoid open, select, apply, close, validate loop. Reverting changes made this way is hard.

Sources

• The Same User Interface Mistakes Over and Over
• Designing Web Interfaces, Bill Scott, Theresa Neil