Intuitive Inline editing

Question

I have an edit page with a bunch of select menus, text inputs, and radio buttons, and a save button. Upon clicking the save button, a detail page is displayed with text of the given select menus, inputs, selected radio value. The detail page also has a (you guessed it) an edit button which goes to the edit page.

I wish to make it easier for the user to change various fields directly from the detail page without having to go to the edit page.

I've currently implemented such functionality for the select menus. Upon clicking a given field which relates to a select menu, the field text is replaced with a select menu. Upon selecting an option, the select menu is replaced with the new text. Upon clicking off the element, the menu disappears and the original text reappears. Seems okay, but not certain whether others will feel it is intuitive or it will be too easy to inadvertently change a setting to the wrong value. Maybe some explicit "save change" or "cancel" action is desired?

Question...

What is the most intuitive way to allow users to change select menu, input, and radio button values from a detail page which only displays their current values?

Answer 1

This is a common edit pattern used by various libraries like X-editable. Its quite intuitive to click on an element, and get a simple pop-up that lets you edit that field:

This UI pattern provides the option to get the user's confirmation, and gives a quick highlight as you confirm the change (the newly changed value gets highlighted with a yellow background).

With selects, you can ask for a confirmation within the small pop up: