views:

56

answers:

2

I have a single web page with master detail form/input layout. Currently the form works in a way like

  1. User opens the page containing both master/detail data entry controls and enters the master information (The details save button is disabled)
  2. When he saves the master information, the save master button gets disabled and save details is enabled
  3. User continues to enter multiple details which get populated in a gridview at the bottom of page
  4. All works well
  5. Problem is that, the master part contains a lot of data entry controls (drop down lists gridviews etc)

How do I facilitate the user much more then the current layout? Should he be redirected to a new page after he enters the master record ? How can I improve on this?

+1  A: 

There can be various options:

  1. Page may show master and summary (gridview) of details. Save button will only work for master data. Add/Edit details will happening in a modal pop-up.

  2. Have a tabbed view - one tab will show master while other tab will show details. There will be one save button per tab. Tab switching will happen on client side.

  3. Have both master and details always open for editing. Any changes in details will be temporarily held in view-state/session-state. The save button for master will save changes for both master and details. No need to disable any UI.

We typically prefer #1 - IMO, its simple UI from user's perspective.

VinayC
thanks for reply, what would you do about all the controls belonging to master information (drop down lists, gridviews,textboxes) would you disable all of them ? How would you not confuse the user not to change any of them accidently ? The impact might not be on database but certainly visible on screen.
Popo
Opition 1 sounds good but what about the controls on form, do you disable them after saving master (check my screen shot as my master layout is quite big)
Popo
@Popo, we keep master data open/editable. We also have some logic that marks edited (dirty) fields - so if user accidentally changes any filed, it starts appearing with light yellow background indicating dirty field. If user tries to leave the page w/o saving then he get warning about potential unsaved data. In your case, you may choose to have read-only view and editable view for master data. Read-only view is created using labels/text-boxes - disabling drop-downs to make them read-only looks ugly.
VinayC
On side notes, you may want to consider #2 where you can even divide master data across tabs. Tabs are client side tabs and just provide various layers grouping the large set of data.
VinayC
Thanks Vinay. I tried AJAX toolkit tabs earlier but users wanted to see master data while entering the details record so they did not suffice without me recreating the master template again on the 2nd tab.
Popo
Popo-- I’m not clear why you don’t want the user to change any of the master after starting work on the detail. To maximize flexibility, apply VinayC’s Option 3 in any case and let the user change any field of either the master or detail any time they want, rather than imposing an unnecessary work order on them. This simplifies things for the user and reduces the clutter on your page.
Michael Zuschlag
Popo
+1  A: 

If the user doesn’t need to refer to the entire master to complete the detail, and isn’t navigating among multiple masters to view/edit their details, then you don’t need a master-detail, and you can divide the input into two or more windows. A window for the details can repeat a few fields from the master that users need to complete the details.

Assuming it is desirable to keep everything on the same page, I think I see few things you can do:

  • Use edit-in-place for both the master and detail, so you don’t need space for both editing/creating a record and space to display it. Every field should only appear once.

  • Pack your controls more tightly together. You can do this without appearing too cluttered if you adopt a quieter visual style (e.g., lose the reverse-video and the rules). Allocate about 20 vertical pixels per single-row control

  • Adopt an object-selection-action syntax so you don’t need to take space repeating the same command buttons/links for every record. That leaves mores space for fields.

  • Put your tables in their own panes with vertical scrolling. The tables you have now are already pretty short (5 or fewer rows), but limiting them to 5 or fewer visible rows will keep the window from being too long for cases when there are a lot of rows.

  • Assuming you have edit-in-place, use wider tables, each set in their own pane with horizontal scrolling in order to reduce the height by moving fields out of the “overflow” spaces and into the tables. Be sure you have row headers that do not scroll away.

  • Divide fields up into tabs, especially on the master. That reduces the space the master needs to a fraction. You can have tabs within a portion of the master if your users need to keep key fields constantly visible.

  • Put some fields within the master or detail in expanders or secondary windows, especially for fields the user doesn’t necessary need to interact with (e.g., where usually the default values are correct). Show an aggregate, abbreviation, or summary of what the users don’t see to cue them on when they do need to interact with the fields.

  • Consider using a “paging” interface for your stack of multi-row text boxes at the bottom of the master so they’re “stacked” in the z-dimension rather than the y-dimension and thus take up the space of a single text box.

  • Consider using more compact drop-down lists rather than radio buttons, especially for fields the user is less likely to change (e.g., the default is very often correct). A dropdown list is more work to set a value (takes two clicks) but no more to see the value, and you can weigh the editing effort against navigation effort (scrolling, tab-clicking, etc.)

  • Consider putting the entire master in its own scrolling pane so the detail is always in view at normal window size and the user can scroll the master to whatever portion is relevant for entering details.

If users are telling you that everything in the window must be constantly in view, then you’re going to have to dig deeper, prioritize fields, and make trade-offs because that’s not going to happen unless your client buys everyone a suite of big-ass monitors. Some fields will be out of view, even it that just means scrolled out of view.

Michael Zuschlag
Popo
Popo
BTW I am still reading all your points. They are very informative =)
Popo
Having an edit/insertion and display views in a multiview may make life easier for you, but it makes it harder for the users (e.g., if they realize they made a mistake on insertion, they have to figure out how to get back into “edit mode”), so for the sake of usability avoid it if you can.
Michael Zuschlag
Thanks Michael, I will try my hands on what you advised.
Popo