Formulare bilden eine besonders wichtige Schnittstelle zwischen Nutzer und Audi Anwendungen. Oft stehen sie an kritischen Stellen einer User Journey. Deshalb sollten Formulare leicht verständlich gestaltet und die Anzahl der abgefragten Informationen so klein wie möglich sein. Optionale Abfragen werden in einem Formular gesondert gekennzeichnet, wenn sie nicht ganz vermieden werden können. Zum Aufbau von Formularen werden die vorhandenen Komponenten nach Bedarf kombiniert und gruppiert.

Die Größe der Formularelemente ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Dementsprechend ist ihre Größe flexibel. Die Formularelemente stehen in Schwarz und Weiß zur Verfügung.

Textfeld

Textfelder bestehen aus einem Label und einer Linie. Sie können in der Breite variiert werden. Aktiviert der Nutzer ein Textfeld, bewegt sich das Label nach oben, verkleinert sich und lässt Platz für die Eingabe.

Textfelder, die bestimmte Datenformate erwarten, wie z. B. Zahlen, E-Mail-Adressen oder Passwörter, werden passend deklariert. So wird dem Nutzer mit der passenden virtuellen Tastatur die Eingabe erleichtert.

Textfelder können mit einem Icon kombiniert werden.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Suchfeld

Beim Suchfeld werden Suche-Icon und Label miteinander kombiniert. Im Unterschied zum Standard-Textfeld wird das Label bei Eingabe überschrieben und bewegt sich nicht nach oben. Nach der Eingabe einiger Zeichen kann ein Dropdown mit Autosuggest-Einträgen erscheinen.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--icon">
  <div class="aui-textfield__field">
    <svg class="audiicon">
      <use xlink:href="#aui-icon-search-small"></use>
    </svg>
    <input class="aui-textfield__input" type="text" id="sample-textfield-icon" />
    <label class="aui-textfield__label" for="sample-textfield-icon">Search</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>
<div class="icon-sprite">
	<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 24 24" id="aui-icon-search-small" xmlns="http://www.w3.org/2000/svg"><title>search-small</title><path d="M22 22l-8.3-8.3L22 22zM15.5 9c.1 3.5-2.6 6.4-6.1 6.5H9c-3.6 0-6.5-2.9-6.5-6.5S5.4 2.5 9 2.5s6.5 2.9 6.5 6.5z" stroke="currentColor" fill="none"/></symbol></svg>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
	.icon-sprite {
		width: 0;
		height: 0;
		visibility: hidden;
	}
</style>

Mehrzeiliges Textfeld

Mehrzeilige Textfelder können beliebig viel Text aufnehmen und wachsen dabei abhängig von der Eingabe des Nutzers in die Höhe. Die Textmenge kann bei Bedarf auf eine maximale Zeichenzahl begrenzt und über einen Countdown dargestellt werden. Im Unterschied zu den übrigen Textfeldern sind Label und Eingabetext in einem feinen Rahmen platziert.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--multiline" data-autosize="">
  <div class="aui-textfield__field">
    <textarea class="aui-textfield__input" id="sample-textfield-multiline" name="name" rows="3"></textarea>
    <label class="aui-textfield__label" for="sample-textfield-multiline">Label</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Auswahlfeld

Auswahlfelder zeigen nach Aktivierung eine beliebige Anzahl an Auswahloptionen in einem Dropdown. Sie können mithilfe von Labels gruppiert werden.

Bei Bedarf wird eine Mehrfachauswahl per Checkbox ermöglicht. Mehrere Optionen werden nach Auswahl durch Kommas getrennt nebeneinander aufgelistet. Überschreitet die Liste die Breite des Auswahlfelds, wird sie gekürzt dargestellt. Ein Auslassungszeichen und eine numerische Darstellung der Anzahl der ausgewählten Optionen verweisen auf die nicht mehr gezeigten Optionen.

If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-select aui-js-select aui-select--floating-label">
  <select class="aui-select__input" id="sample-select">
    <option selected disabled class="aui-select__input-label">Label</option>
    <option value="0">Audi Sport</option>
    <option value="1">Audi City</option>
    <option value="2">Audi e-tron</option>
    <option value="3">Audi quattro</option>
    <option value="4">Audi connect</option>
    <option value="5">Audi mobility</option>
    <option value="6">Audi driving experience</option>
  </select>
  <label class="aui-select__label" for="sample-select">Label</label>
  <span class="aui-select__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Gliederung und Gruppierung

Formularelemente können durch Zwischenüberschriften, Weißraum, Trennlinien und Flächen gegliedert und gruppiert werden. Längere Datenabfragen sollten in mehrere Schritte aufgeteilt werden, um mögliche Datenverluste zu vermeiden und weniger abschreckend zu wirken.

Title
HTML
<fieldset class="aui-fieldset aui-fieldset--textfields">
  <legend class="aui-fieldset__legend aui-fieldset__legend">Title</legend>
  <div class="aui-fieldset__fields">
    <div class="aui-fieldset__field">
      <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
        <div class="aui-textfield__field">
          <input class="aui-textfield__input" type="text" id="sample-textfield-1">
          <label class="aui-textfield__label" for="sample-textfield-1">Text</label></span>
        </div>
      </div>
    </div>
    <div class="aui-fieldset__field">
      <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
        <div class="aui-textfield__field">
          <input class="aui-textfield__input" type="text" id="sample-textfield-2">
          <label class="aui-textfield__label" for="sample-textfield-2">Text</label></span>
        </div>
      </div>
    </div>
  </div>
</fieldset>

Kennzeichnung Pflichtfelder/Optionale Eingabefelder

Formularfelder, die nicht ausgefüllt werden müssen, können durch einen textlichen Zusatz wie “(optional)” in Label oder Feldbeschreibung gekennzeichnet werden.

 
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. (optional)
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label</label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. <small class="aui-small">(optional)</small></span>
</div>
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label <small class="aui-small">(optional)</small></label>
  </div>
  <span class="aui-textfield__description">If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty.</span>
</div>

Validierung

Fehlerhafte Eingaben werden durch eine rot eingefärbte Linie, ein rotes Label, eine rote Fehlerbeschreibung und bei einer Gruppe eine rote Gruppen-Überschrift kenntlich gemacht. 

 
Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.
HTML
<div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
  <div class="aui-textfield__field">
    <input class="aui-textfield__input" type="text" id="sample-textfield" />
    <label class="aui-textfield__label" for="sample-textfield">Label</label>
  </div>
  <span class="aui-textfield__error">Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.</span>
</div>
Title
Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.
HTML
<fieldset class="aui-fieldset aui-fieldset--textfields is-invalid">
  <legend class="aui-fieldset__legend aui-fieldset__legend">Title</legend>
  <div class="aui-fieldset__fields">
      <div class="aui-fieldset__field">
        <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
          <div class="aui-textfield__field">
            <input class="aui-textfield__input" type="text" id="sample-textfield-1">
            <label class="aui-textfield__label" for="sample-textfield-1">Text</label><span class="aui-textfield__focus-line"></span>
          </div>
        </div>
      </div>
      <div class="aui-fieldset__field">
        <div class="aui-textfield aui-js-textfield aui-textfield--floating-label">
          <div class="aui-textfield__field">
            <input class="aui-textfield__input" type="text" id="sample-textfield-2">
            <label class="aui-textfield__label" for="sample-textfield-2">Text</label><span class="aui-textfield__focus-line"></span>
          </div>
        </div>
      </div>
   <span class="aui-textfield__error">Error messages that reassure users can make it easy for them to correct their mistakes and continue with the form.</span>
  </div>
</fieldset>

Datumsauswahl

Bekannte Daten kann der Nutzer am leichtesten über numerische Eingabefelder eingeben. Ein Auswahlfeld für den Monat verhindert Missverständnisse, welche durch international unterschiedliche Datumsformate verursacht werden können.

Ein Kalender hilft insbesondere bei der Auswahl zuvor unbekannter Daten. Er wird einem Eingabefeld bspw. in Form eines Popovers als alternative Eingabemöglichkeit zur Seite gestellt. Können nur Daten aus einem eng begrenzten Zeitraum ausgewählt werden, wird auf das Eingabefeld verzichtet. Auf mobilen Endgeräten wird der native Datumsauswahldialog des Betriebssystems bevorzugt.

Audi UI Kit Sketch
Version 1.4 (Releases: https://github.com/audi/audi-templates/releases)
ZIP
76.3 MB

Anwendungsbeispiele

Don’ts

Formularfelder eindeutig bezeichnen.
Formularfelder nicht auf Rot platzieren.
So wenig Formularfelder wie möglich verwenden. Lange Formulare gliedern.