Enable image upload

Create an account to upload screenshots of great design.

We believe that the activity of keeping and collecting screenshots
of great design makes you a great designer yourself. A good way to
start a design process is to get inspired by what others have done
before.

This card is part of the UI Patterns printed card deck

More examples

Solution

Let users edit values in the same place as they are displayed. Provide an easy way to let users edit parts of a page without having to be redirected to an edit page. Typically, hover effects are used to invite editing.

The Inplace Editor pattern allows for localized editing of elements on the fly. The pattern provides ease of editing by placing the controls right next to the elements they affect.

For example, when in editing mode of an application, a page title element will display editing controls when the user hovers their mouse over it. The elements background color is highlighted and a tooltip is shown prompting the user to click the element to edit it. Once the user clicks the element, it is transformed into an input field (text, dropdown, etc.). A save button and a cancel button are also displayed. Often, the input field matches the styling of the original element. If the original element was a header written in size 20pt, the size of the font in the input field would also be 20pt. This styling is mirrored to ensure that the user can connect the original element with the new editable

The user can then edit the value of the input field (which is the same as the original elements value) and click save or cancel. If ‘save’ is clicked, the value is saved through an AJAX call to the underlying database, the value of the element is updated and the element is returned to normal view. If cancel is clicked, the element is changed back to the original view without any changes.

This pattern is often combined with AJAX techniques, which is an asynchronous call to the server through javascript that does not require a refresh of the page. There are many javascript libraries available online that deliver ready-to-use inplace editors.

Rationale

An in-place editor provides an easy way to let the user edit parts of a page without having to be redirected to an edit page. Instead, the user can just click around on a page and edit the elements he or she wishes to change – without reloading the page.

Peter
on Aug 15, 2008

Use when there is a clear distinction between verb and information (Don’t mix words that are links and actions with words that can be edited).

I.e. – the text that can be edited shouldn’t contain verbs (links, actions), only information. If the texts on the page are intermixed information and verbs, than do not use inline editing. This is based on maintaining a clear distinction between usage and administration.

syed sabir
on Sep 24, 2010

Jay K
on Oct 26, 2010

The affordance that Google Contacts (consumer edition, not the enterprise edition) gives upon mouseover — displaying an input box around the text — is much clearer to my mind than a simple highlight. I think this will become more and more popular.

Comments have been closed

PatternsEducation

Build Persuasive Products

Learn how to apply psychology to design engaging online user experiences, that make people take action.Take the course

Be the first to know when new lectures are available

Sign up to receive tips and tricks on how to create online designs that make people take action.

UI-Patterns.com

Thousands come through UI-Patterns.com every day to learn to become awesome product designers.