Formular Layout

Overview

Das Formular-Layout dient dazu ein einheitliches Aussehen aller Formulare sicherzustellen und die Bedienbarkeit der Formulare zu erleichtern. Die beschriebenen Regeln zum Formular-Layout gelten sowohl für ein einzelnes Formular, als auch für eine Formularseite.

Aufbau

Das Layout passt sich an die Breite des zur Verfügung stehenden Platzes an. Der verfügbare Platz beziehungsweise Container kann die Größen S, M oder L haben. Die Anzahl der Layout-Spalten ist abhängig von der Containergröße. Die Layout-Spalten dienen als Hilfestellung bei der Darstellung und sind nicht mit den Formular-Spalten gleichzusetzen! Eine Formularspalte nimmt mehrere Layout-Spalten in Anspruch.

Als Maßstab für die Größe wird immer nur die Breite des Bereiches, beziehungsweise des Containers, in dem das Formular dargestellt werden soll, gezählt, alle anderen Bereiche (z.B. aufgeklapptes Menü, Sidebar, o.ä.) werden außer Acht gelassen.

Folge Grafik zeigt eine Übersicht über die möglichen Layout-Größen:

Die 3 Layout-Größen L, M und S

Der verfügbare Platz wird gleichmäßig auf die Anzahl der Layout-Spalten aufgeteilt. Der Raum zwischen den Layout-Spalten beträgt bei allen Layout-Größen 48 Pixel.

Unterschied zwischen Layout-Spalten und Formularspalten

Layout Regeln

Allgemeingültige Regeln

Folgende Regeln sind verbindlich und unabhängig von der Layout-Größe gültig:

• Eine Feldergruppe nimmt immer die gesamte Breite der Formularspalte ein.
• In einer Formularspalte können sich maximal 2 Eingabe-Elemente (z.B. Eingabefeld, Dropdown, Combobox) nebeneinander befinden.
• Wenn ein Eingabe-Element allein in einer Formularspalte ist, füllt dieses immer die gesamte Breite der Formularspalte aus.
• Eine Textarea nimmt jedoch immer die gesamte Breite der Formularspalte ein. Es können nicht zwei Textareas in einer Spalte nebeneinander stehen.

Tab-Reihenfolge bei mehreren Feldergruppen

Die Tab-Reihenfolge folgt den logischen Feldgruppen: Zuerst werden alle Felder einer Feldergruppe durchlaufen, dann geht es zur nächsten. Bei mehrspaltigen Formularen erfolgt die Navigation zeilenweise von links nach rechts und dann nach unten, nicht spaltenweise von oben nach unten. Siehe folgendes Bild:

Tab-Reihenfolge in Formularen

Allgemeine Empfehlungen

Folgende Empfehlungen sind nicht verbindlich, tragen jedoch zur besseren Bedienbarkeit des Formulars bei:

Wenn mehrere Eingabefelder zu einem bestimmten Thema (Z.B. Anschrift, Bezahldaten) vorliegen, sollten diese als Feldergruppe deklariert werden.

Die Feldergruppe, die mehr Zeilen hat, sollte in der linken Formularspalte platziert werden (wenn dies fachlich und inhaltlich sinnvoll und möglich ist).

Text-Eingabefelder sollten die ganze Breite der Formularspalte einnehmen (wenn dies inhaltlich sinnvoll ist).

Info für Dev

Mehrfachauswahlen-Gruppen (Checkbox Group) oder Alternativauswahl (Radio Button Group) können je nach Anzahl und Länge der Optionen horizontal oder vertikal angeordnet werden.

Es wird empfohlen diese Gruppen nicht neben weiteren Eingabefeldern dazustellen, sondern die gesamte Breite der Formularspalte dafür vorzusehen.

Regeln für Layout-Größe S

Bei Layout-Größe S gibt es zwei Layout-Spalten. Da eine Formularspalte zwei Layout-Spalten einnimmt, gibt es nur eine Formularspalte. Wenn zwei Eingabe-Elemente nebeneinander platziert werden, nimmt jedes der Elemente eine Layout-Spalte ein.

Regeln für Layout-Größe M

Bei Layout-Größe M gibt es vier Layout-Spalten. Da eine Formularspalte zwei Layout-Spalten einnimmt, gibt es zwei Formularspalten. Wenn zwei Eingabe-Elemente nebeneinander platziert werden, nimmt jedes der Elemente eine Layout-Spalte ein.

Regeln für Layout-Größe L

Bei Layout-Größe L gibt es sechs Layout-Spalten. Eine Formularspalte nimmt zwei Layout-Spalten ein. Dies ermöglicht es, dass das Formular zweispaltig werden kann. Die zwei rechten Layout-Spalten bleiben immer leer, sodass kein dreispaltiges Layout möglich ist. Ein Formular kann nur dann zweispaltig werden, wenn es aus mehreren Feldergruppen besteht. Die Feldergruppen werden dann nacheinander in die Formularspalten aufgeteilt. Das heißt die erste Feldergruppe ist in Spalte 1, die zweite Feldergruppe in Spalte 2, die dritte Feldergruppe in Spalte 1, die vierte Feldergruppe in Spalte 2, usw. Diese Aufteilung ist in nachfolgender Grafik veranschaulicht.

Korrekte Aufteilung der Feldergruppen der Layout-Größen L, M und S

Wenn es fachlich, inhaltlich und visuell Sinn macht, kann die zweite Formularspalte neben einer Feldergruppe ausnahmsweise leer gelassen werden. Bei der Aufteilung der Feldergruppen wird die zweite Formularspalte an dieser Stelle sozusagen übersprungen. Folgende Grafik veranschaulicht die Aufteilung. Im folgendem Beispiel würde dies Sinn machen, wenn Feldergruppen 2 und 3, sowie Feldergruppen 4 und 5 inhaltlich zusammengehören.

Darstellung: Mögliche korrekte Aufteilung der Feldergruppen bei Wechsel zwischen Layout-Größe L,M zu S asymmetrisch

Die erste Formularspalte darf nie leer gelassen oder übersprungen werden!

Regeln für mehrere Formulare auf einer Seite

Wenn sich mehrere Formulare auf einer Seite befinden, werden die Layout Regeln auf jedes Formular einzeln angewandt, während die Formulare immer untereinander dargestellt werden. Der Inhalt der zweiten Formularspalte muss also immer zum gleichen Formular gehören, wie der nebenstehende Inhalt der ersten Formularspalte.

Korrekte Aufteilung der Feldergruppen bei mehreren Formularen auf einer Seite

Beispiele

Gegenüberstellung von Negativ- und Positiv-Beispielen

Folgende Beispiele zeigen Formulare, bei denen die Layoutregeln falsch oder gar nicht angewendet wurden, und jeweils die korrekte Anwendung der Regeln daneben.

	Einzelnes Eingabe-Element in einer Formularspalte Ein Eingabe-Element muss immer die gesamte Formularspalte einnehmen und nicht, so wie hier links, alleine in einer Zeile stehen ohne die gesamte Breite zu nutzen.
	Einzelne Feldergruppe bei zwei Formularspalten Eine einzelne Feldergruppe füllt immer nur eine Formularspalte aus, auch wenn die Layout-Größe zwei Formularspalten ermöglicht.
	Größe von Formularspalten Die Formularspalten müssen immer die festgelegte Breite einhalten. Die zweite Formularspalte darf nicht breiter sein als die erste. Jede Formularspalte sollte, in der dargestellten Layout-Größe L, zwei Layout-Spalten einnehmen.
	Eingabe-Elemente müssen sich an das Spalten-Layout halten Die Eingabe-Elemente müssen sich an das vorgegebene Spalten-Layout halten. Ein Eingabe-Element darf nicht über mehrere Formularspalten gehen.
	Feldergruppen dürfen nie mehr als 2 Spalten nutzen

Anwendungsbeispiele

1-Spaltiges und 2-Spaltiges Layout

Nachfolgende Beispiele zeigen, wie man die Layout Regeln mit verschiedenen Arten von Eingabefeldern konkret in der Praxis anwenden kann. Die Entscheidung ob für ein Formular nur eine Spalte verwendet werden soll, oder ob zwei Spalten nebeneinander platziert werden sollten, obliegt dem Designer und hängt vom Anwendungsfall ab.

Anwendungsbeispiele Formulare

Erweiterte Hilfestellungen und Kontextinformationen

Hilfe-Text

Siehe Hilfestellung in Formularen für weitere Informationen.

Regulärer Text Absatz

Es ist jederzeit möglich einfache Absätze in Formular-basierten Dialogen einzuführen um die Nutzer beim Ausfüllen zu unterstützen.

Tooltip

Einzelne Eingabefelder können durch Tooltips mit ergänzenden Erläuterungen etc. versehen werden.

Callouts

Um Erläuterungen oder Kontext-Informationen noch stärker hervorzuheben, können diese in einem Callout dargestellt werden. Zusätzlich lässt sich dafür auch die 3. Spalte nutzen.

Formular Layout mit Hilfestellungen und Kontextinformationen

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/pattern-form-layout--docs

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=pattern%252Fform