...
| 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.
...
| 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).
...
| 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.