The Inline Edit Design Pattern

Editing within the same context

Facebook allows you to edit your posts in context.

Inline edit allows the user to change content directly within its display view. This interaction is more intuitive than being redirected to a separate edit page, which often makes users feel lost.

Inline edit works by providing an edit button directly on the displayed content. When a user initiates the edit function they are allowed to manipulate the information. The user can then save the changes or cancel the action. This will initiate the display mode with the new changes or with the same information if canceled.

The discoverability of the inline edit function can be an issue. An affordance should be clearly presented. Facebook’s inline edit feature (shown above) is presented within a list of other actions after a user clicks the small arrow at the top of the post. This may be challenging to find for inexperienced users. The alternative would be to have a edit button directly on the post, which may clutter the display view.

The inline edit design patten is typically used on websites and apps that allow user generated content. It is usually only presented to authenticated users (users who have logged-in). This patten shouldn’t be used if editing is the primary function of the screen.