Design Pattern for displaying read only form data

Question

Description:

I have two views(editable and read-only) of my form. User will initially see the read-only view. Then, to go to the editable view, he needs to click an "Edit" button at the bottom. This will take him to a different page where he will see the editable view.

In the editable view, I have arranged the form in 2 column grid layout and the labels are placed top-aligned to the inputs (similar to figure#1).

I have two versions of the read-only view. Both the views are arranged in 2 column grid layout. View 1 has labels top-aligned with the input values of the form (see figure#1). Whereas, the view 2 has labels left-aligned with the input values (see figure#2).

Question:

Should the read-only view have exactly the same visual format as the editable view or it's a good approach to keep the read-only and the editable view styles totally different. Which one will be the best fit according to ux design patterns.

Figures:

Figure#1

Figure#2

Answer 1

I agree, the forms should be laid out identically. Here's the cognitive work your user has to do:

Identical layouts

1. I want to change that text.
2. [clicks edit]
3. Now I can!

Different layouts

1. I want to change that text.
2. [clicks edit]
3. Wait, where did it go? It was the first name...
4. [scans page for "first name" or for the name they wanted to change]
5. Okay, there it is.

Signaling editability

I suspect you're considering different layouts to help the user see when the text is editable and when it's not. There are unobtrusive cues that help show when text is editable (typeface, weight, visible input box around it), but their absence isn't so obvious that users can instantly tell the text isn't editable. So, I think you're right that they need something more.

My suggestion is that the read-only page have a small "edit" link next to every field. They can all go to the same edit page. This has a few advantages:

• It's clear that this isn't the edit page
• Users who don't know about / have forgotten the edit feature immediately know it's there
• The user doesn't have to move their mouse, and their attention, down to the edit button and then back up to the text they wanted to change.

Layout

If you go with the vertical layout, you should follow icc97's advice to put the name fields in one column. Also increase the space between the field content and the following line so that it's more obvious that the field groups with the header above and not the one below.

If you go with the horizontal layout, you should get rid of the large space between the field names and the field contents. Also consider right-aligning the field names, though this is a smaller issue.

Printing

If you want a more compact view for printing, you can create a Print button that goes to a print-specific layout or use a print-specific media query. Consistency with the on-screen version is less important unless you expect your users to frequently look back and forth between the screen and the printout.

Personally I would go with layout #2 for both screen and print, but if you want to switch between layout #1 and layout #2 it looks like it would mostly involve changing the field label divs from block to inline with a specified width.

Answer 2

I would go with the approach that you are showing in figure 2,reason being our eye scans a page mostly in the F pattern that is first horizontally then back to the left. So if I see a header for eg First Name ,I automatically tend to find its value adjacent to it on the right and not below the header. As far as edit mode goes once you enable the field to be editable you can probably enable the input type for editable fields,that would easily give you a clear distinction between editable/not-editable attributes.

Answer 3

You can go with the 'F pattern' and keep the read only and editable object in the same place, so that it is easy to identify that which field the user would have to edit.

Answer 4

I think more fundamentally you're failing on the Gestalt principle of proximity.

The First Name, Middle Name, Last Name aren't properly grouped in either of your designs.

You could try the following:

Answer 5

For consistency reasons, both read-only and editable views must have the same layout. In this way users will have to learn only one layout. Otherwise, if layouts are different, it may lead to confusion, errors and more cognitive effort.

I recommend you to use the figure#2 for both read-only and editable. Also, make the labels right-aligned instead left-aligned. This layout is the optimum for readability and scanning.