2

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 enter image description here

Figure#2 enter image description here

  • What is the suffix? – icc97 Mar 14 '16 at 14:39
  • suffix is something you have after your name. for eg: James Kelly Phd. Here 'Phd' is the suffix. – Sharif Ahmed Mar 15 '16 at 6:56
  • I will go with the fig 2. – YogaPanda Mar 30 '16 at 20:53
4

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.

  • I understand your reason for using identical layouts but this section is very long, and our users will frequently print this, and that's why we want to keep the read-only view compact so that users need less papers for printing. And I have used the top-aligned label in editable mode, because, I have read that this style helps users to fill a form up quickly. These are the reason I have choosen different layouts for editable and read-only view. I have updated the screenshots, please have a look. – Sharif Ahmed Mar 15 '16 at 7:05
  • Please let me know what you think I should do. – Sharif Ahmed Mar 15 '16 at 7:47
  • I added a bit about print-specific layouts to the answer. – octern Mar 15 '16 at 10:50
0

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.

0

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.

0

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

enter image description here

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

You could try the following:

enter image description here

  • Thank you for your answer. Grouping is what I had in mind. I have planned to do it after I resolve the layouts. – Sharif Ahmed Mar 15 '16 at 6:53
0

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.

  • This section is very long, and our users will frequently print this, and that's why we want to keep the read-only view compact so that users need less papers for printing. And I have used the top-aligned label in editable mode, because, I have read that this style helps users to fill a form up quickly. These are the reason I have choosen different layouts for editable and read-only view. I have updated the screenshots , please have a look. – Sharif Ahmed Mar 15 '16 at 7:02
  • Please let me know what you think I should do. – Sharif Ahmed Mar 15 '16 at 7:47
  • @sharifahmed, you are probably reffering to this article : uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php . In my humble opinion, if users frequently visit the form, the right aligned version is better. But if you keep the top aligned label, you can have both read-only and editable as top aligned, and a print version as right aligned. Note that google and amazon use the top aligned in their sign up forms. – DesignerAnalyst Mar 15 '16 at 7:53
  • Yes, I read that article and many similar ones, and I have also seen almost everyone using top-aligned labels. This seems to be a general accepted practice, hence my choice. My question is: does having the same layout for both read-only and editable view of a form a general accepted practice also? – Sharif Ahmed Mar 15 '16 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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