...
Concept
| Mockup | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
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.
| Mockup | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
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).
...
The whitespace between the last vertical tab and the lower edge of the form should actually be large enough for the form to look good. Some forms may actually use this space to show a preview of the content item they allow to edit. This is a very convenient and clear way to link to the item the user is looking at. Such a preview only works, if there's still enough whitespace between the preview and the last tab - if the two are too close, the resulting form will look too crammed. If in doubt, leave out the preview.
| Mockup | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
Long forms
If a sub form has many elements, add a scrollbar inside the tab to allow to scroll it. If there are too many tabs, consider re-engineering the form or splitting it up into a multi-step process, if applicable.
If that is not possible, add a scrollbar on the very right to allow the tabs to be scrollable as well. Note that a possible preview will scroll as well - this is almost certainly not what you want, so consider splitting up the form entirely.
| Mockup | |||||||||
|---|---|---|---|---|---|---|---|---|---|
|
Please also note that messages must not scroll - an error message at the top of the form or a field description below must be sticky. The scrollbar on the right edge should only scroll the tabs (and a possible preview). See the remark on long standard forms for a approximative visualization of this requirement.