1. Use Cases
Use Cases stellen typische Szenarien oder Seiten dar, die bestimmte Funktionalitäten oder Aktionen erfordern. Dieser Abschnitt kombiniert Design Patterns, um benutzerfreundliche Lösungen für spezifische Anwendungsfälle zu präsentieren und ihre Umsetzung anhand von Beispiel-Screens zu veranschaulichen.
1.1. Formulare
Inhalte von Formularen sollten sich an einem virtuellen, nicht visuell dargestellten Raster ausrichten. Formulare sollen einem einspaltigen, zweispaltigen oder dreispaltigen Layout folgen. Dabei sind alle Spalten innerhalb eines Formulars gleich breit aufgebaut.
Beispielhaftes Formular dreispaltig:
Formulare bestehen mindestens aus einer Eingabefeldgruppe und einer beliebigen Anzahl weiterer Elemente. Alle Regeln für Eingabefelder und Label haben hier auch ihre Gültigkeit.
Die inhaltliche Gruppierung folgt dabei keinem starren Muster, sondern kann fachlich entsprechend angepasst werden. Diese Gruppierung der Inhalte kann dabei sowohl horizontal als auch vertikal gestaltet werden. Hierbei ist wichtig, dass die Inhaltselemente über eine Gruppenüberschrift logisch zusammengefasst werden.
Exemplarische inhaltliche Nutzung der Spalten:
Durch die saubere Anwendung der Gruppenüberschriften, Titel und Eingabefeldgruppen ist auch ein Wechsel der vertikalen Gruppierungsgröße nicht negativ auffällig. Jede inhaltliche Gruppe (dreispaltig in der ersten Gruppe (rosa, orange, gelb) und einspaltig in der nächsten Gruppe (grün)) wird ganzheitlich als logisches Element wahrgenommen.
Wahrnehmung der inhaltlichen Gruppen:
Gleichmäßige Feldlängen unterstützen den Lesefluss der Nutzenden. Die letzten Eingabefelder können bei Bedarf ihrem Inhalt entsprechend gekürzt werden. Dies unterstützt die inhaltlich logische Gruppierung und signalisiert den Nutzenden auch visuell ein Ende der inhaltlichen Gruppe.
Bei geringeren Auflösungen sollten Eingabefelder untereinander angeordnet werden, um sich der begrenzten Breite anzupassen.
Die Größenanpassung erfolgt innerhalb von gewissen Bereichen:
-
Wird das Browserfenster kleiner als der darzustellende Inhalt (in der Regel bei Tablets und Smartphones), so wird das gesamte Fenster vertikal scrollbar.
-
Der vertikale Abstand zwischen Gruppen und Eingabefeldern bleibt unabhängig von der Bildschirmgröße konstant.
-
Der Abstand zwischen Eingabefeldern und Labeln bleibt ebenfalls unverändert.
-
Bei einer Veränderung der Browserfenster-Größe sollte sich die Breite der Spalten dynamisch an den verfügbaren Platz anpassen, ohne dabei die Lesbarkeit zu beeinträchtigen.
Beispielhafte Gesamtumsetzung eines Formulars im Anwendungsrahmen:
