Page History

Goal

The single-page complex form allows to fill in larger amounts of data and replaces the existing form using with horizontal tabs. The main characteristic of this form is that it provides an instant overview over all key values, even those contained in other tabs (see also the explanation below).

The data sets it the form collects are organized using vertical tabs to make the forms wider than high. Inside a single form, the fields used to obtain the actual data can be grouped using various grouping elements such as blocks and panelsfield sets. In fact, the single-page complex form builds on the same principles as the standard form and also uses the same mechanisms to show notification messages.

...

Vertical tabs, which are currently not topped, use one short line to show the key values of the aspect they represent. These value lines are emphasized compared to the actual title of the tab. If you look at all vertical tabs at once, it is very easy to get an overview of all currently hidden values.

The single-page complex form is designed to guarantee good structured forms by providing a hierarchical set of grouping elements. The following picture shows the overall structure of the form.

The form uses vertical tabs to split a larger form into several sections called aspects containing one sub form each (3). Each aspects receives one vertical tab. If an aspect has several topics, which you don't want to or can't spread over several tabs, you may use horizontal tabs on layer 4 as an additional measure to sub divide one sub form into several sub sub forms (4). The fields on these forms may then be grouped even further: layers 5 and 6 correspond exactly to the two inner-most layers 3 and 4 of the standard form (see there).

In fact, the two outer-most layers 1 and 2 are similar to the outer layers of the standard form as well. The single-page complex form, however, may employ horizontal tabs on layer 2 to capture several content layers of the item you're capturing with the form. Do never use these horizontal tabs to sub divide your form. They are optional and should only be used to capture different semantic layers, which must be handled by different forms all together, but should be bundled together nevertheless. Multiple translations of the same item or the page references, both shown in the mockup above, are very good examples of such semantic layers.

Mandatory values on first form

Properly structuring and arranging form elements is often a UX task, but one that should be somewhat straight forward in this case, if you have a clear understanding of the type and structure of your data and use the grouping elements described above according to their intent. Try to place all mandatory values into the first form of the first tab. The idea is that these important fields pop up immediately as soon as the form shows up. In a typical case, I would only have to look at the first form, fill in values there, glance over the summary texts of the other tabs to verify if the defaults match my expectations, and if they do, click save. I should not have to click through every tab sequentially once I'm accustomed to a form and don't have any extra requirements.

Providing meaningful value lines

If you look at all vertical tabs at once, it is very easy to get an overview of all currently hidden values, if the values shown are meaningful and the tabs don't contain forms with a large number of form groups all its data sets into settings groups, which receive one vertical tab each. Tabs which are currently not topped, have one short line to present the values of their key data fields. Don't show every value in a tab, but only focus on key values , and try instead. Try to summarize what's on a tab rather than simply listing the values. It is actually amazing how much information fits in just a couple of words - if . If it doesn't fit, consider using two lines, but don't go beyond that. You may also want to consider splitting up one tab into several ones as you may have found a case where too much data is requested by a single settings group.

Inside a tab, the form may be subdivided into several sub groups using panels, blocks and field sets. The following image provides a rough overview of the entire form structure.

tabs.

...

When not to use this form

Do not use such a form, if you end up with a single vertical tab (3) and no horizontal tabs (2) only after structuring your form actually does contain data sets, which are more like multiple, connected steps. In such a case, use a multi-step process. Also, if the overview over all values is not a requested feature, your form may be less overwhelming if you break it up and make the parts accessible using tabs.

Notifications

: in this case, employ a simple standard form instead - it completely matches your requirements and is actually quicker to grasp. Likewise, if you detect that you actually intend to collect sets of data using multiple steps, refer to the multi-step process instead.

Notifications

Messages such as description for fields as well as warning and error messages are shown right above the bottom edge of the form, as is also shown in the mockup above. Please refer to Showing descriptions and validation messages in forms for the a complete treatment of validation and other messages in forms.

Note that field descriptions are optional and the . The form may alternatively choose to only provide help screensa help page (which is required, however).

Growing and shrinking

...

dialogs

If the user opens the block of a less important data set, a surrounding dialog might form is shown in a dialog, it will have to adjust its height to accommodate the entire form. It previously invisible form elements or messages - it does so by using a transition - introducing scrollbars is unwanted.showing the dialog growing in size. Try to avoid scrollbars, if possible. If you must use a scrollbar, check out the concept for long forms.

The If a block is closed again, the dialog only reduces its height, if the reduced form occupies less than 2/3 3rds of the its current height. This avoids too many movements in the interface. If a dialog chooses to not reduce its height, the superfluous space whitespace is inserted right above any possibly showing notification message field description, or else above the bottom edge of the form box. E.g. in the first mockup aboveon this page, this space would be added between the "language settings" block last field and the field description message (similar to what is defined for multi-step process forms).

Abort editing

If the form is shown using an overlay dialog or a dialog in a separate window, the user aborts editing by clicking the "close window" button in the upper right corner. If the form is shown on a page directly, use a "cancel" button instead.

Help screen

The form may also provide a help button offering additional information about the values it collects. Try to make it clear what you expect from the user by providing a good, initial description and clear labels in the form. Only provide an overall explanation in a help screen through the help button, if this is not enough.

Note that the dialog must not change its size to fit the help screenpage, but should shall retain its current width and height. If the help text does not fit into the current dimensions, provide add a scroll bar.

...

Abort editing

If the form is shown using an overlay dialog or a dialog in a separate window, the user aborts editing by clicking the "close window" button in the upper right corner or by clicking the "cancel" button

Additional notes

If presented in a dialog, the form is embedded in a colored frame, which contains all controls, such as buttons for submitting the form, to cancel submission in a review step or for closing a help screen. The form frame should focus on content, the frame on control. If the form is presented shown on a page directly, leave out the frame, but still ensure that the form itself resides in a box and the controls are arranged around it using a layout much like in case of the dialogthe only option is the "cancel" button.