Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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".

share|improve this question
3  
I think you answered it on the last line here, "on StackOverflow, the profile pages are shown as labels/text and switched to forms when the user clicks "edit"." –  Matt Rockwell Oct 11 '11 at 13:39
    
indeed ^^^........ –  colmcq Oct 11 '11 at 15:25

1 Answer 1

up vote 5 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.