A crucial factor for the usability of an application is the uniform placement and designation or labeling of elements.
In the context of this style guide, we recommend that generally all labels be placed above the input elements on standard forms.
- Placing the name and input element close together allows the form to be accessed and completed quickly.
- This way, forms can be designed very well within a fixed grid.
- Because there is more space for the label text, this option is the most suitable one for localized applications. The layout of forms is often very tight in one language, causing problems with the layout in other languages when the lengths of the words change. This risk is minimized by placing the label above the input element.
- The only disadvantage is that more vertical space is needed.
- The alternative is to align it to the left, with the label to the left of the field instead of above it. Because user tests have shown that this layout requires somewhat more time we recommend that only, for example, settings that are rarely accessed, such as profile or system settings, which do not have to be filled in as quickly as possible but just need a brief thought, use the left-aligned option.
- Whether left-aligned or placed above, within the same form all labels must be uniform.
- Mandatory fields generally do not have to be formatted differently from optional input fields. They simply need to be marked with a red asterisk. This must be placed after the label, not before it, so it does not affect readability.