SideBarMenu

Überblick Visual Style Guide

Formulare

Formulare sollen in Stud.IP gemäß LifTers014 einheitlich gestaltet werden. Ein Standard Formular wird wie folgt definiert:

  1. <form class="default" ...>
  2.     ...
  3. </form>

Allgemein

Lange Erklärungstexte am Anfang des Formulars sollten vermieden werden. Erklärungen können über Tooltips an den Elementen (siehe unten) oder ggf. Texte in der Hilfelasche realisiert werden.

Gruppierung der Formularfelder

Formularfelder (oder auch Input-Elemente) sollen gruppiert werden, wenn sie inhaltlich oder funktional zusammenhängen, damit dieser Zusammenhang deutlich wird. Jede Gruppe sollte eine passende Überschrift haben.

  1. <form class="default" ...>
  2.       <fieldset>
  3.           <legend>Gruppenüberschrift 1</legend>
  4.           ...
  5.       </fieldset>
  6.       <fieldset>
  7.           <legend>Gruppenüberschrift 2</legend>
  8.           ...
  9.       </fieldset>
  10. </form>

Ein-/Ausblenden von von Gruppen

Einzelne Gruppen können aus- bzw. eingeblendet werden, indem entweder dem fieldset (für eine spezielle Gruppe) oder dem gesamten Formular (für alle Gruppen innerhalb) die Klasse collapsable gegeben wird. Dadurch wird durch einen Klick auf die legend des fieldsets die Gruppe versteckt bzw. wieder angezeigt. Soll die Gruppe bei der initialien Darstellung ausgeblendet sein, muss das fieldset zusätzlioch mit der Klasse collapsed ausgezeichnet werden.

  1. <form class="default" ...>
  2.       <fieldset>
  3.           <legend>Gruppenüberschrift 1</legend>
  4.           ...
  5.       </fieldset>
  6.       <fieldset class="collapsable collapsed">
  7.           <legend>Gruppenüberschrift 2</legend>
  8.           ...
  9.       </fieldset>
  10. </form>

Labels (Feldbeschriftungen)

Generell sollte analog zu LifTers010 das HTML-Markup <label> verwendet werden. Beispiel:

  1. <form class="default" ...>
  2.        <fieldset>
  3.            <legend>Beschriftung</legend>
  4.            ...
  5.            <label>Eingabe A
  6.            <input name="eingabe_a" type="text" placeholder="Texteingabe A" required>
  7.            </label>
  8.            ...
  9.        </fieldset>
  10.  </form>
  • Das erste Wort des Labels sollte mit einem großen Anfangsbuchstaben geschrieben werden.
  • Das Label sollte nicht mit einem Doppelpunkt abgeschlossen werden.

Wording:

  • Es sollen aussagekräftige Labels gewählt werden.
  • Fachbegriffe sollen vermieden werden.
  • Keine ganzen Sätze.

Ausrichtung der Formularfelder

Untereinander angeordnete Formularfelder sollten linksbündig angeordnet sein. Wenn mehrere Formularfelder eine logische Folge bilden oder aus anderen Gründen zusammengehören, können sie auch nebeneinander angeordnet werden (Beispiel: Straße und Hausnummer).

Formularfelder sollten nicht nebeneinander in Spalten angeordnet werden, da die rechte Spalte schnell übersehen wird.

Ausrichtung der Labels

Die Labels sollen linksbündig und oberhalb der Eingabefelder angebracht sein. Dies erleichtert die Lesbarkeit der Beschriftungen und verdeutlicht den Zusammenhang zwischen den Feldbeschriftungen und den Eingabefeldern.

Wenn der Platz in der Vertikalen beschränkt ist, sollen die Beschriftungen linksbündig und links neben den Formularfeldern angebracht sein. Dies erhält die Lesbarkeit und spart Platz in der Vertikalen. In diesem Fall sollten die Labels so gewählt werden, dass sie sich in ihrer Länge möglichst wenig unterscheiden, damit die Lücken zwischen den Labels und den Eingabefeldern nicht zu groß werden.

Innerhalb eines Kontextes sollten die Beschriftungen einheitlich angeordnet werden.

Placeholder/Platzhalter

Das placeholder-Attribut dient zum Befüllen von Eingabefeldern mit kurzen Hinweisen. Dieser Inhalt verschwindet, sobald ein Nutzer in das Eingabefeld klickt.

  • Placeholder sollten nicht als Alternative zum Label verwendet werden.
  • Placeholder sollten sparsam verwendet werden.

Beispiel für ein korrekt verwendetes placeholder-Attribut: TODO: Screenshot

Beispiel für ein falsches placeholder-Attribut:

Art der Formularfelder

Die Art der Eingabefelder soll so gewählt werden, dass man an ihr erkennen kann, welche Eingaben möglich sind. Ein Textfeld dient zur freien Eingabe von Zeichen ohne Beschränkungen (außer in der Zeichenanzahl). Checkboxen, Radio Buttons oder Drop-Down Listen werden verwendet, um die Anzahl der Optionen einzuschränken oder für Einträge, wo sich Nutzer leicht vertippen.

Größe der Formularfelder

Eingabefelder sollen groß genug sein, um typische Eingaben entgegen zunehmen, ohne dass man "über den rechten Rand hinausschreibt". Die Größe der Formularfelder soll so gewählt werden, dass sie deutlich machen, welche Eingaben dort möglich sind. Beispiel: Das Eingabefeld für die Veranstaltungsnummer sollte kürzer sein als das für den Veranstaltungstitel.

Das Stud.IP-Stylesheet schlägt standardmäßig drei Größen vor (CSS-Klassen "size-s","size-m" und "size-l"):

  • size-s: 10em (gedacht für kurze Eingaben wie z.B. Zahlen)
  • size-m: 48em
  • size-l: 100%
  1. <form class="default" ...>
  2. ...
  3.     <label>
  4.         Kurze Eingabe
  5.         <input type="text" class="size-s">
  6.     </label>
  7.  
  8.     <label>
  9.         Mittlere Eingabe
  10.         <input type="text" class="size-m">
  11.     </label>
  12.  
  13.     <label>
  14.         Längere Eingabe
  15.         <input type="text" class="size-l">
  16.     </label>
  17. ...
  18. </form>

Die Voreinstellung ist "size-m". Ausnahme: Für die Input-Typen "number" und "date" ist die Voreinstellung "size-s".

Kennzeichnung von Pflichtfeldern

  1. <form class="default" ...>
  2.        <fieldset>
  3.            <legend>Beschriftung</legend>
  4.            ...
  5.            <label>
  6.                <span class="required">Eingabe A</span>
  7.                <?= tooltipIcon(_('Bitte geben Sie hier nur eine Zahl ein')) ?>
  8.                <input type="number">
  9.            </label>
  10.            ...           
  11.        </fieldset>
  12.  </form>

Pflichtfelder müssen mit einem hochgestellten roten Stern rechts neben der Feldbeschriftung gekennzeichnet werden. Die kann in einem Label mittels <span class="required"> im Quelltext umgesetzt werden.

Hinweistexte zu den Formularfeldern

Da die Beschriftung eines Formularfelds möglichst kurz sein sollte, ist es möglich, dass weitere Informationen oder erläuternde Hinweise zum entsprechenden Feld nötig sind. Ein erforderlicher Hinweis- oder Beschreibungstext zu einem Formularfeld wird mittels Tooltip realisiert. Der Tooltip wird über die vorhandene Logik <?= tooltipIcon(_('...'))?> rechts neben dem Label und ggf. hinter der Kennzeichnung eines Pflichtfeld positioniert.

Formatvorgaben und Eingabevalidierung

Wenn Eingaben nur in einem bestimmten Format erfolgen dürfen, soll dies kenntlich gemacht werden, entweder durch

Die Eingabevalidierung soll, wenn möglich, direkt nach Verlassen des jeweiligen Eingabefeldes erfolgen. Zu jedem nicht ausgefüllten Pflichtfeld bzw. zu jedem sonstwie falsch ausgefüllten Eingabefeld soll der Korrekturhinweis direkt bei dem jeweiligen Eingabefeld erfolgen, so dass die Aufmerksamkeit des Benutzers direkt auf die noch zu vorzunehmenden bzw. zu korrigierenden Eingaben gelenkt werden.

Weitere Informationen: Eingabevalidierung

Buttons

Der Button zum Abschicken/Speichern/Übernehmen der eingegebenen Daten ("primäre Aktion") sollte linksbündig mit den Formularfeldern abschließen und sich direkt unterhalb des Formulars im <footer>-Element befinden. Damit wird deutlich, welche Daten durch einen Klick auf diesen Button übernommen werden.

Ein Button zum Abbrechen oder Zurücksetzen ("sekundäre Aktion") soll vermieden werden. Wenn er erforderlich ist, soll er sich visuell von dem Button für die primäre Aktion unterscheiden.

  1. <form class="default" ...>
  2. ...
  3.     <footer>
  4.         <?= \Studip\Button::createAccept(_("Speichern")) ?>
  5.         <?= \Studip\Button::createCancel(_("Abbrechen")) ?>
  6.     </footer>
  7. </form>
  • TODO: Genauere Vorgaben für die Gestaltung von Buttons für sekundäre Aktionen formulieren

Ausnahme: Buttons bei Wizards

Horizontale Gruppierung von Elementen

Um Elemente in einer Zeile horizontal zu gruppieren, benötigt es ein Wrapper-Element mit der Klasse .hgroup. Dieses Element nimmt die gleichen Größen wie die Elemente an und verteilt den Platz innerhalb von sich selbst erstmal gleich, aber die einzelnen Elemente können auch wiederum durch die bekannten Größenangaben beeinflusst werden.

  1. <form class="default" ...>
  2.  
  3.      <!-- ... -->
  4.  
  5.         <label for="gender">
  6.             <?= _('Geschlecht') ?>
  7.         </label>
  8.  
  9.         <section class="hgroup">
  10.             <label>
  11.                 <input type="radio" <? if (!$geschlecht) echo 'checked' ?> name="geschlecht" value="0">
  12.                 <?= _("unbekannt") ?>
  13.             </label>
  14.  
  15.             <label>
  16.                 <input type="radio" <? if ($geschlecht == 1) echo "checked" ?> name="geschlecht" value="1">
  17.                 <?= _("männlich") ?>
  18.             </label>
  19.  
  20.             <label>
  21.                 <input type="radio" name="geschlecht" <? if ($geschlecht == 2) echo "checked" ?> value="2">
  22.                 <?= _("weiblich") ?>
  23.             </label>
  24.         </section>
  25.  
  26.      <!-- ... -->
  27.  
  28. </form>

Weiterführende Informationen

Allgemein

Placeholder

Letzte Änderung am 08.05.2017 11:30 Uhr von eludwig.