Verwendung der Elemente

Buttons

Beispiel Command-Button  

Beispiel Command-Button

Command-Button

Command-Buttons werden in verschiedenen Kontexten verwendet. Sie dienen innerhalb einer Seite oder in Popups der Auswahl aus einer Liste von Aktionen. In Assistenten dienen sie der Navigation zum folgenden Schritt.

Zur Benennung werden Verben verwendet. Konkrete Namen werden bevorzugt, z. B. Angebot "Erstellen" statt "Ok". Eine Ausnahme sind Assistenten. Um im Ablauf eines Assistenten zurück oder weiter zu springen, sind auch Button-Labels ohne Verb erlaubt, z. B. "Weiter" oder "nächste Frage".

Ein Command-Button ist mindestens so breit wie hoch.

Zurück nach oben
Beispiel Command Button  

Beispiel Command-Button in einem Assistenten

Verwenden Sie Command-Buttons, wenn:

  • Eine Aktion wird augenblicklich ausgeführt, einschließlich dem Öffnen eines Sub-Fensters.
  • Die Aktion wird nicht im Fließtext dargestellt.
  • Die Aktion ist Teil einer Gruppe mit ähnlichen Aktionen
  • Die Aktion ist nicht umkehrbar. Nutzer assoziieren Links mit Navigation und daher mit der Möglichkeit, wieder zum Ausgangspunkt zurückzukehren.
  • Command-Buttons starten oder beenden Prozesse, verändern Objekte oder bestätigen eine Auswahl. Wohingegen zur Navigation eher Links oder die Kacheln verwendet werden sollten.

Link

Der Link führt den Nutzer in einen anderen Bereich einer Anwendung, in eine ganz andere Anwendung oder zur Online-Dokumentation.

Verwenden Sie Links auf jeden Fall bei:

  • E-Mail-Adressen
  • Telefonnummern
  • Web-Adressen

Der Text des Links muss sicherstellen, dass Nutzer das Verhalten vorhersagen können.

Buttons in der Navigationsleiste

Buttons in der Navigationsleiste stellen Nutzern zweitrangige Aktionen bereit. Die Aktionen beziehen sich entweder auf den Inhalt der jeweils aktuellen Seite, oder sie dienen zur Navigation in der Anwendung.

Beispiele:

  • Menü öffnen
  • Home (z. B. zurück zum Hauptbildschirm)
  • weiter oder zurück in der Navigation
  • Öffnen zusätzlicher Informationen passend zur aktuellen Seite

Die Aktion steht auf der überwiegenden Mehrzahl der Seiten zur Verfügung.

Verwenden Sie Icons. Ein textuelles Label wird nur verwendet, wenn es dem Nutzer klare Vorteile im Verständnis bietet.

Buttons in der Navigationsleiste  

Buttons in der Navigationsleiste

Kacheln

Kacheln werden eingesetzt, um Nutzern einen schnellen Überblick über verfügbare Inhalte zu verschaffen. Sie ermöglichen den Zugriff auf wichtige Funktionalitäten. Vorzugsweise werden Kacheln auf der Startseite einer App verwendet und verlinken auf untergeordnete Seiten.

 

Detail-Disclosure-Button

Ein Detail-Disclosure-Button öffnet eine neue Ansicht und stellt zusätzliche Information zu einem Element bereit. Vorzugsweise wird ein Popover verwendet oder in seltenen Fällen ein Dialog. Das kann in verschiedenen Situationen notwendig sein:

  • Nutzer benötigen die Information nur während sie sich in die App einarbeiten.
  • Nutzer können sich die Information nicht merken, z. B. weil sie Gelegenheitsnutzer sind oder die Information schwer zu merken sind.
  • Die Information wird nur von wenigen Nutzern benötigt.

Der Detail-Disclosure-Button wird je nach Kontext unterschiedlich dargestellt. Üblicherweise wird allerdings ein Info-Icon verwendet.

 

Popups

Popover  

Beispiel Popover

Popover

Ein Popover kann beliebige Inhalte anzeigen oder zur Navigation dienen. Das Popover legt sich über bestehende Inhalte. Erlaubt sind vor allem inaktive Elemente, die nicht geklickt werden:

  • Bilder
  • Texte
  • Vorteilskommunikation

Die Größe sollte im Verhältnis zum Rest des Bildschirms stehen und maximal 50 % der Bildschirmfläche bedecken.

Aktionen sind erlaubt, wenn sie zur Navigation dienen. Wenn Aktionen erforderlich sind, wird ein Dialog verwendet.

  • Scrolling: Nutzer können im Popover scrollen während es geöffnet bleibt.
  • Paging: Nutzer können im Popover wechseln während es geöffnet bleibt.
  • Verlinkung: beim Klick auf eine Verlinkung (realisiert über Listeneintrag, Link oder Button) wird das Popover geschlossen.
Zurück nach oben

Popup-Dialog

Ein Popup-Dialog ist ein untergeordnetes Fenster. Es wird verwendet, um

  • eine Aktion auszuführen.
  • Parameter für eine Aktion zu erfragen, die ein Nutzer initiiert hat.
  • Nutzern eine Auswahl zu ermöglichen.
  • Informationen anzuzeigen.

Ein Dialog öffnet sich in der Mitte des Bildschirms. Die Größe ist abhängig vom dargestellten Inhalt.
Es gibt modale und nicht-modale Dialoge:

  • Modale Dialoge: Nutzer müssen den Dialog schließen, bevor sie mit der Bearbeitung auf dem Bildschirm fortfahren können. Ein modaler Dialog hat mindestens einen Command-Button, die eine Bestätigung oder Entscheidung erlauben.
  • Nicht-modale Dialoge sind rein informativ. Sie erfordern keine direkte Aktion. Nutzer können nicht-modale Popups schließen, indem sie auf den Bildschirm außerhalb des Popups klicken.
Bestätigungsdialog  

Beispiel Bestätigungsdialog

Ein Dialog kann verschiedene Arten von Inhalt anzeigen. Entsprechend wird unterschieden in mehrere Typen:

Bestätigungsdialog: Der Bestätigungsdialog erscheint als Ergebnis eines Prozesses. Er informiert den Nutzer über den Fortschritt des Prozesses oder über dessen Ergebnis. Der Bestätigungsdialog enthält:

  • Nachricht in Textform
  • Command-Button
  • Icon (optional)
Menüdialog  

Beispiel Menüdialog

Menüdialog: Zusätzliche Menüs mit untergeordneter Wichtigkeit werden in einem Popup-Dialog angezeigt. Ein typisches Beispiel ist ein Einstellungsdialog. Der Menüdialog enthält:

  • Titel
  • Menü
  • Weitere Elemente sind optional
Informationsdialog  

Beispiel Informationsdialog

Informationsdialog: der Informationsdialog erscheint, wenn ein Detail-Disclosure-Button ausgelöst wird. Dann zeigt der Dialog spezielle Information zu einem Thema oder einer Funktion. Der Informationsdialog enthält einen Titel und einen beschreibenden Text. Der Text ist bei Bedarf scrollbar.

Scrolling und Paging

Scrollen und Paging sind Formen der unstrukturierten Navigation. Der Nutzer kann auf Inhalte zugreifen, die über den Inhalt einer Seite hinausgehen.

  • Bei einer kontinuierlichen, fließenden Anordnung der Inhalte spricht man von Scrolling.
  • Bei einer Anordnung der Inhalte in diskrete Stufen spricht man von Paging (Blättern).

Bevor Sie größere Mengen an Inhalt über Scrollen oder Paging bereit stellen, überlegen Sie zuerst, ob Sie die Inhalte aufteilen können. Dann ist evtl. eine andere Navigationsstruktur möglich:

  1. Semantische Aufteilung: Inhalte werden aufgrund ihrer Bedeutung gruppiert. Jede Gruppe erhält einen Namen.
  2. Aufgabenorientierte Aufteilung: Inhalte werden anhand einer Aufgabe unterteilt, sodass sich einzelne unabhängige Aufgabenschritte ergeben.

Für den Nutzer ist es ein Vorteil, wenn bei der Entwicklung hier Aufwand investiert wird. Denn bei einer unstrukturierten Navigation kann der Nutzer keine Erwartung darüber ausbilden, welche Inhalte noch kommen. Er weiß also nie, ob es sich lohnt, weiter zu scrollen, oder ob er besser abbricht und etwas Anderes probiert.

Zurück nach oben
Scrollbars und Panning Indicators  

Horizontales Scrollen mit Panning-Areas

Scrollbars und Panning-Indicators

Scrollbars und Panning-Indicators zeigen dem Nutzer dieselbe Information. Der Unterschied besteht in der Interaktion. Panning-Indicators werden nicht direkt bedient.

Ein Panning Indicator gibt dem Nutzer Hinweise über den Umfang an Inhalt und der aktuellen Position. Er stärkt die Orientierung und damit das Vertrauen in eigenen Fähigkeiten die Anwendung zu beherrschen.

  • Panning-Indicators: Verwendung im mobilen Umfeld mit Touch-Bedienung.
  • Scrollbars: PC-Umfeld mit Maus und Tastatur.

Scrollbars und Panning-Indicators sind notwendig:

  • Der angezeigte Inhalt passt nicht auf eine Bildschirmseite.
  • Der Inhalt besteht aus gleichartigen Elementen, die sich nicht in Gruppen strukturieren lassen.

Wenn der Inhalt für alle Endgeräte zu umfangreich ist, sollte über eine andere Form der Navigation nachgedacht werden.

  • Panning-Indicators sind vertretbar, wenn sie die Nachteile kleinerer Displays kompensieren, während der Inhalt auf einem größeren Display vollständig angezeigt wird.
  • Der Inhalt sollte drei Bildschirmseiten nicht überschreiten.

Mehrere Container mit Panning oder Scrolling sollten nicht ineinander geschachtelt werden. Ebenso sollte Panning, Scrolling und Paging nicht geschachtelt werden.

Scrollbare Container sind:

  • Panning-Areas bieten horizontale Panning-Indicators. Sie sind damit Anwendungen vorbehalten, die im Querformat ausgeführt werden.
Paging  

Beispiel Paging

Paging

Das Paging wird verwendet, um Inhalte klar zu strukturieren. Z. B. je eine Seite zur Präsentation eines Produkts oder je eine Seite mit allen Produkten aus einem Themenbereich. Paging erfolgt nur bei horizontaler Anordnung der Seiten und ist bis maximal 10 Seiten möglich.

Ein visueller Indikator für das Paging wird über das Paging Control angezeigt.

Nutzerdefinierte Auswahl

Checkbox und Switch  

Beispiel für Checkbox und Switch

Checkbox und Switch

Ein Switch erlaubt eine Auswahl zwischen zwei Zuständen, die mit An oder Aus beschrieben werden können. Für binäre Zustände, für die An/Aus keine sinnvolle Beschreibung ist, verwenden Sie eine Checkbox. In vielen Fällen ist dies nur eine Sache der Formulierung der Labels, muss aber trotzdem berücksichtigt werden.

  • Beispiel Switch: "Tonersparmodus (An / Aus)" wird durch einen Switch dargestellt
  • Beispiel Checkbox: "Toner sparen (Ja / Nein)" wird durch eine Checkbox dargestellt

Die beiden Zustände müssen sich gegenseitig ausschließen.

  • Beispiel: Die Auswahl des Seitenformats (Hochformat / Querformat) beim Drucken von Dokumenten kann man nicht sinnvoll über eine Checkbox darstellen, weil die beiden Formate keine Gegensätze darstellen.

Switches werden vornehmlich im mobilen Kontext verwendet. In einem reinen Desktop Umfeld sollte man sie vermeiden. Checkboxen und Switches sollten nicht in einer Gruppe miteinander gemischt werden. Eine Gruppe von Checkboxen und Switches wird mit einem Label darüber beschrieben. Für die Sortierung in der Gruppe gilt:

  • Am häufigsten verwendete Optionen kommen zu erst
  • Bevorzugt: Verwandte Optionen stehen beieinander
  • Alternativ eine natürliche, logische Reihenfolge verwenden
  • Alphabetische Reihenfolgen vermeiden
Zurück nach oben
Radio-Button  

Beispiel Radio-Button

Radio-Button

Ein Radio-Button ist ein grafisches Steuerelement. Der Nutzer kann eine 1-aus-N-Auswahl treffen. Der Nutzer kann immer nur eine Option auswählen. Das ist geeignet, wenn Optionen sich gegenseitig ausschließen müssen.

Bei Radio-Buttons kann der Nutzer die zur Auswahl stehenden Alternativen permanent sehen. Das ist geeignet, wenn:

  • Nutzer die möglichen Einträge nicht im Gedächtnis haben
  • Reduzierte Anzahl von Klicks

Verwendungshinweise

  • Anzahl Optionen: 2-10, bei mehr als 10 muss eine andere Lösung gefunden werden
  • Default: es gibt immer eine vorausgewählte Option
    • Optimalerweise die am häufigsten verwendete Option
  • Beschriftung:
    • Optional kann oberhalb einer Gruppe mit RadioButtons ein Text verwendet werden, der die Gruppen insgesamt erläutert
    • Jede Option hat einen Text
  • Sortierung:
    • Verwandte Optionen stehen beieinander
    • Bevorzugt: Am häufigsten verwendete Optionen kommen zu erst
    • Alternativ eine natürliche, logische Reihenfolge verwenden
    • Alphabetische Reihenfolge ist nicht erlaubt
  • Anordnung: Mehrere RadioButtons stehen untereinander (ist schlecht lesbar)

Überbrückung von Wartezeiten

Aktivitätsanzeige  

Beispiel Aktivitätsanzeige

Aktivitätsanzeige

Eine Aktivitätsanzeige demonstriert einen laufenden Prozess ohne einen Hinweis zu geben, wann der Prozess beendet sein wird. Sobald diese Vorhersage möglich ist, wird ein Fortschrittsbalken verwendet.

Dieses Element ist sinnvoll, wenn:

  • ein Prozess die Oberfläche blockiert.
  • der Prozess länger als drei Sekunden dauert und kürzer als 10.
  • unmöglich bestimmbar ist, welcher Anteil des Prozesses bereits beendet ist.

Der Indikator rotiert solange der Prozess läuft. Er verschwindet, wenn er beendet ist.

Wenn möglich sollte die Animation nicht vom zugrundeliegenden Prozess unabhängig sein. Wenn der Prozess stockt, sollte dies auch der Aktivitätsindikator tun.

Die Aktivitätsanzeige wird in der Main-Screen-Area platziert. Dort wird er zentriert. Auf diese Weise wird dem Nutzer direkt signalisiert, dass ein Prozess läuft. Die Anzeige sollte zusätzlich einen Text anzeigen, der den laufenden Prozess erklärt.

Bevorzugen Sie grundsätzlich den Fortschrittsbalken vor einer Aktivitätsanzeige.

Zurück nach oben
Fortschrittsanzeige  

Fortschrittsanzeige

Fortschrittsanzeige

Eine Fortschrittsanzeige stellt den Fortschritt einer laufenden Operation dar. Er zeigt die geschätzte Dauer bis zur Beendigung der Operation. Die Fortschrittsanzeige besteht aus einer Schiene, die sich von links nach rechts füllt, während die Operation voran schreitet. Das Element ist sinnvoll, wenn ein Prozess die Oberfläche blockiert und länger als drei Sekunden dauert. Mindestens alle drei Sekunden soll eine sichtbare Veränderung der Fortschrittsanzeige erkennbar sein.

Eine Fortschrittsanzeige erlaubt keine Aktionen vom Nutzer. Ein Klick auf eine Fortschrittsanzeige löst keine Aktionen aus und zeigt keine zusätzlichen Informationen. Es gibt eine Ausnahme: der Nutzer kann einen Prozess abbrechen.

Geben Sie Texte aus, um zu erläutern, was das System zu einem bestimmten Zeitpunkt tut, z. B. Verbinden mit dem Server, Datei herunter laden, Aktualisierung installieren.

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect