How to design a form that mostly is read-only, but sometimes editable?

Question

Often in database-centric application I need to design a view for records e.g. something like:

Name: __________
Phone Nr: _________
Website: ______
Email: __________@________
Location: ____________
Address: ______________
         ______________
Post code: ________

These views are mostly read-only, but sometimes the user needs to edit them.

What is a good way to show them in read-only mode? and what is a good way to switch to editable mode? What is the drawbacks with showing the fields in read-only mode as "disabled" input fields?

E.g. usually I design these views as forms, where the fields are disabled, and I have a "Edit" button that change all fields to enabled. But showing the fields as labels may be an alternative for read-only mode.

But here on StackOverflow, the profile pages are shown as labels/text and switched to forms when the user clicks "edit".

Answer 1

Showing the normal read-only view as a bunch of disabled form input elements will be visually ugly and contextually confusing; you're making it look like a form that you can't use, and it may not be readily apparent why it's not editable (because it's not a form yet!). You're violating good affordance by making things look like editable forms when they really aren't (in this view). Instead use plain text/lables and present it neatly like it's a piece of paper.

An edit button is a great way to toggle the view and make it clear why this view is read only. The simplest way would be to make the edit button switch to a different page that displays an editable input form.

As you've hit upon with your SE example, the alternative is to make the view only view look like text, but automatically change into a standard form appearance once you hit the edit button.

In a web app you can give this effect by using disabled form elements in your read only view and then style away the input boxes, the "greyed out" effect, ect, so you can easily hide the fact that you're using form elements until you click the edit button, when voilà, it's a form with a standard appearance, aiding affordance in both states.