...
The single-page complex form allows to fill in larger amounts of data and replaces the existing form using horizontal tabs. The main characteristic of this form is to provide that it provides an instant overview over all key values. Its , even those contained in other tabs. The data sets are mostly independent of each other, but still connected in the sense that they are part of a larger whole. While these sets could be spread among multiple tabs, in your use case, you see a clear advantage to make all of them visible at once on one page.
In order to improve orientation in the form, data shall also be grouped visually. Each group of data must be consistent and constructed such that it may largely stand on its own. In addition, we distinguish between important and less important data sets, the former being visible at all times while the latter may be hidden at first.
Concept
...
it 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 panels. 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.
Concept
| Mockup | ||||||
|---|---|---|---|---|---|---|
|
As stated in the goals, we distinguish between data sets containing values, which have to be entered every time or at least most of time a user fills out the form, and sets which are changed less frequently. We use a combination of fieldsets to group important data and accordion-type tabs for hiding forms for less important sets. Important data sets must be visible immediately when opening the form and may not be hidden by the user.
...