UI Patterns and Techniques

Edit-in-Place

Use when:

The UI contains text labels that the user may want to change sometimes -- the names of objects, for instance. They may be in a graphical editor, or a table, or a tree, or wherever.

Why:

If one wants to edit something, it makes sense to try to edit it where it lives. Making the user go somewhere else -- a place far away spatially, or disconnected from the original text in another window -- isn't usually ideal; it can be harder to find (though not always), and it takes longer than just clicking on the text and typing in place.

How:

When the user clicks or, more typically, double-clicks on the text to be edited, simply replace it with a text field containing the string (which should immediately be selected). If a text-entry cursor appears in the right place, and/or the text is automatically selected, that may be enough of a cue to the user to start editing; no border is necessary around the text field. Keep it in the same physical location, and retain the display font -- in short, make it as WYSIWYG as possible.