Edit button or editable nodes?

Question

We are working to design online forms. Some forms are opened when they already have some of the user's personal information (like name and address).

The user can edit existing data, and enter additional information.

When the user edits the existing data, should he make explicit action that opens the field for editing? That is, if there is a table with phone numbers, should the user press the "Edit" button to make the table editable? The same goes for ordinary fields. Is it right to leave the field editable, but after each section to get a message like "Are you sure you want to change the information X?"

Answer 1

To slightly exaggerate, 99.99999% of the time when users change a field they mean to change it. Do not make more work for the user by making them click an Edit button. Do not use a confirmation message to verify if they want to save their edits. That just teaches users to always accept confirmation boxes without reading them. Instead, be sure the UI is designed so that user can immediately recognize the implications of their changes, and make it at least as easy to undo the changes as it is to do them in the first place.

If you have user research showing that many edits are accidental, then there is something fundamentally wrong with the UI. An Edit button or confirmation message is only a band-aid for it. For example, the fields may be poorly labeled so users think they’re changing something other than what they’re changing, or the fields are too close to other controls so users are mechanically missing their intended target and hitting something else (e.g., a check box).

Answer 2

I really like how Flickr handles information updates for their users. The photograph, shows it's title and it's content as plain text (no texboxes / left photo on the image below). But when the photo owner logs into the page, hovering on top the photo's labels or description will highlight the text in yellow (photo in the middle), and with one click it becomes editable (photo on the right).

Perhaps it would be worthy making the edition statement a little bit clearer by adding the icon of a pen on the top right section of the yellow-background text, to make it inviting.

The beauty of this approach is that it reduces the noise of text boxes everywhere making the page printable and more reader friendly.

I hope this helps, and actually solves your problem.