Verwendung der Elemente

Buttons

Command-Button

Ein Command-Button führt beim Auslösen direkt eine Aktion aus. Sie werden in verschiedenen Kontexten verwendet.

Dialogfenster

  • Innerhalb einer Seite, zum Beispiel zur Auswahl aus einer Liste von Aktionen
  • In Assistenten, um zum folgenden Schritt zu gelangen (siehe Bild).

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ückkehren zu können).
  • CommandButtons starten oder beenden Prozesse, verändern Objekte, bestätigen eine Auswahl, etc. wohingegen zur Navigation eher (Hyper-) Links oder die Kacheln (siehe TeaserTile) verwendet werden sollten.

Verwendungshinweise:

  • Benennung:
    • Verwende Verben
    • Konkrete Namen bevorzugen: z.B. Angebot "Erstellen" statt "Ok"
    • Ausnahme in Assistenten: Um im Flow eines Assistenten zurück / weiter springen zu können sind auch Button-Labels ohne Verb erlaubt. Beispiele: "Weiter", "nächste Frage".
    • Ein Icon statt einem Label ist nur bei sehr häufig verwendeten Aktionen sinnvoll und wenn Nutzer das Symbol aus anderen Anwendungen her kennen (z.B. Ausschneiden, Kopieren).
  • Größe: ein Command-Button ist mindestens so breit wie hoch.

 

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:

  • Email-Adressen
  • Telefonnummern
  • Web-Adressen

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

Zurück nach oben

Überlagernde Fenster

(Nichtmodaler) Aktionsdialog am Beispiel eines Suchdialogs  

(Nichtmodaler) Aktionsdialog am Beispiel eines Suchdialogs

Dialogfenster

Ein Popup-Dialog ist ein untergeordnetes UI Fenster. Es kann verwendet werden, um

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

Verwendungshinweise

  • Seien Sie grundsätzlich sparsam mit Dialogfenstern. Sie reißen Nutzer aus einem Kontext heraus und sind nicht immer einfach für die Orientierung. Außerdem wird es als Charakteristikum von Phoenix Contact Anwendungen gesehen, dass Dialogfenster nur selten eingesetzt werden.
  • Stapeln Sie Dialogfenster nicht übereinander
  • Geben Sie den Buttons sprechende Namen. "Ok" ist nicht ausreichend.
  • Üblicherweise öffnet ein Dialog sich in der Mitte des übergeordneten Fensters. 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
Zurück nach oben
Beispiel einer Rückfrage aus den Microsoft Windows User Experience Interaction Guidelines  

Beispiel einer Rückfrage aus den Microsoft Windows User Experience Interaction Guidelines

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

Aktionsdialoge geben dem Nutzer die Möglichkeit eine Aktion näher zu spezifizieren, bevor diese Aktion gestartet wird. Bekannt sind die üblichen Dialoge zum Datei öffnen/speichern, zum Drucken, oder Suchen/Finden.

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)

Einstellungsdialoge bieten Nutzer eine größere Anzahl an Einstellmöglichkeiten, die in der Regel die Anwendung insgesamt betreffen.

Beachten Sie bei den Buttons auch die entsprechenden Richtlinien.

Wireframe in Anlehnung an Project+  

Wireframe in Anlehnung an Project+

Popup

Ein Popup-Element ist ein schwebendes Fenster, dass einfache Interaktionsmöglichkeiten enthält. Es wird nach einem Klick auf einen Button angeboten. Es erscheint räumlich direkt unterhalb des Buttons. Nutzer können im Popup einfache Interaktionen durchführen.

Verwenden Sie einfache Auswahlelemente im Popup: CheckBox, RadioButton, ToggleButton. Die Elemente sollten kein weiteres überlappendes Element öffnen (wie das bei z. B. DropDown Listen der Fall ist).

Tooltip

Ein Tooltip ist ein kleines Popup Fenster. Es erscheint, wenn die Maus über einem UI Element schwebt. Es ist sehr flüchtig verschwindet bei Mausaktionen sofort wieder.

Ein Tooltip wird zur textuellen Beschreibung eines UI-Elements ohne Text verwendet. Sehr häufig sind das Toolbar Icons. In diesem Fall ist ein Tooltip Pflicht.
Profitiert ein UI Element von einer ergänzenden Erläuterung? Labels müssen in der Anwendung möglichst kurzgehalten werden. Um Unklarheiten oder Zweideutigkeiten auszuräumen helfen Tooltips.

Verwendungshinweise

Texte, die für Tooltips geschrieben werden, sollten folgende Eigenschaften haben:

  • Kurzgefasst: Text müssen in kurzen Sätzen oder gar Satzfragmenten formuliert sein. Es muss also kein grammatikalisch korrekter Satz verwendet werden. Wichtiger ist
  • Informativ: keine redundanten Informationen, die Nutzer bereits auf dem Bildschirm sehen.
  • Ergänzend: da Tooltips nicht dauerhaft angezeigt werden, darf die Information zur Bedienung nicht essentiell sein. Die zentralen Informationen müssen mit selbsterklärenden Labels oder ergänzenden Texten auf der Oberfläche darstellbar sein. Tooltips dienen eher dazu Hintergrundinformationen zu liefern, die Lernbarkeit der Anwendung zu unterstützen, oder Elemente ohne Text zu erläutern.
  • Stabil: die Texte in einem Tooltip ändern sich nicht. Nutzer können die Veränderung nicht erkennen, da Tooltips nur auf Anfrage der Nutzer (Maus Hover) erscheinen.
  • Eine Ausnahme sind Tooltips auf UI Elemente im Statusbereich einer Anwendung. Dort muss allerdings auch das Status-Element die Veränderung anzeigen.
  • Zeiten:
    • Initial: die Zeit, die der Mauszeiger auf dem UI Element steht, bis der Tooltip erscheint. Ein guter Default ist 0,5 Sekunden.
    • Wiederherstellen: Die Zeit, die der Mauszeiger ruhig bleiben muss, wenn der Mauszeiger von einem Element zum nächsten wandert. Ein guter Default ist 0,1 Sekunden.
    • Entfernen: Die Zeit nach der ein Tooltip entfernt wird. Ein guter Default ist 5 Sekunden.

Nutzerdefinierte Auswahl

Checkboxen, Siwtches und Togglebutton  

Wireframes von einer Liste mit Checkboxen, Siwtches oder Togglebutton

Checkbox, Switch, ToggleButton

Alle drei Elemente erlauben eine Auswahl zwischen zwei komplementären Zuständen. Ein *Switch* erlaubt eine Auswahl zwischen zwei Zuständen, die mit An/Aus beschrieben werden können.

Es steht ein binärer Zustand zur Auswahl, der mit An/Aus beschrieben werden kann. 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 zueinander komplementär sein, d.h. 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 stattdessen CheckBoxen und ToggleButtons verwenden.
  • Insgesamt sollten beide Controls in einer Anwendung nicht beliebig gemischt verwendet werden; ganz besonders wichtig ist dies auf ein und demselben Bildschirm.

Verwendungshinweise

  • Checkboxen, ToggleButtons und Switches sollten in einer Gruppe miteinander nicht gemischt werden.
  • Eine Liste Checkboxen, ToggleButtons oder Switches
    • kann mit einem Label darüber beschrieben werden.
    • Checkboxen/Switches werden untereinander angeordnet.
    • ToggleButtons können unter- und nebeneinander angeordnet werden
  • Sortierung in einer Liste:
    • 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
Wireframes mit einer Liste von RadioButtons  

Wireframes mit einer Liste von RadioButtons

RadioButton

Ein RadioButton ist ein grafisches Steuerelement. Der Nutzer kann eine 1-aus-N Auswahl treffen. Bei RadioButtons kann der Nutzer immer nur eine Option wählen. Das ist geeignet, wenn:

  • Optionen müssen sich gegenseitig ausschließen

Bei RadioButtons kann der Nutzer die Alternativen, die zur Auswahl stehen, 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 (sonst schlecht lesbar)
Wireframes von einer Dropdown-Liste mit Wochentagen  

Wireframes von einer Dropdown-Liste mit Wochentagen

DropDown, Combobox

Wann werden DropDown / ComboBox verwendet?

  • Der Nutzer muss eine Auswahl aus einander ausschließenden Elementen treffen.
  • Die Auswahl besteht aus Werten, nicht aus Aktionen oder Navigationselementen.
    • Aktionen werden besser über Menüs, Buttons oder Links abgebildet.
  • Die Auswahl sollte mehr als 3 Optionen umfassen. Wenn nicht, verwende Radio- oder ToggleButtons.

Verwendungshinweise

  • Es sollte einen sinnvollen Default-Wert geben. Leere Dropdown-Listen / ComboBoxen sind unüblich.
  • Sortierung:
    • Verwandte Optionen stehen beieinander
    • Bevorzugt: Am häufigsten verwendete Optionen kommen zu erst
    • Alternativ eine natürliche / logische Reihenfolge verwenden
    • Listen mit 12 oder mehr Einträgen werden alphabetisch/numerisch/chronologisch sortiert.
  • Meta-Optionen, wie "Alle" oder "Nichts":
    • Stehen immer am Anfang der Liste.
    • Sind in Klammern geschrieben, um sich von den übrigen Elementen abzuheben: z.B. "(Alle)"
    • Verwende immer eine Meta-Option in Klammern anstatt leerer Einträge

ComboBoxen erlauben es dem Nutzer, eigene Einträge zu ergänzen:

  • Textlänge sollte beschränkt werden.
  • Die Einträge in der Liste sind systematisch vorgegeben:
    • Entweder die häufigsten Optionen, so dass diese nicht händisch eingetragen werden müssen.
    • Oder eine repräsentative Auswahl, die dem Nutzer erläutert, welche Eingabe sinnvoll ist.

Überbrückung von Wartezeiten

Aktivitätsanzeige  

Aktivitätsanzeige: links ausgelastet, rechts Hintergrundaktivität

Aktivitätsanzeige

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

Wann wird eine Aktivitätsanzeige verwendet?

Bevorzugen sie grundsätzlich den Fortschrittsbalken vor einer Aktivitätsanzeige. Dieses UI Element ist sinnvoll, wenn ...

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

Verwendungshinweise

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

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

Die Anzeige sollte zusätzlich einen Text anzeigen, der erklärt, woran das System gerade arbeitet.

Aktivitätsanzeige für PC Anwendungen: es gibt 2 Mauszeiger:

  • Ausgelastet: Wenn die Anwendung aktuell nicht auf Nutzereingaben reagiert.
  • Hintergrundaktivität: Ein Prozess läuft im Hintergrund und bremst voraussichtlich die Arbeit mit der Anwendung. Die Anwendung reagiert aber nach wie vor auf Mausaktionen, wie zeigen, klicken, ziehen.
Zurück nach oben
Dialog mit Fortschrittsanzeige (Wireframe)  

Dialog mit Fortschrittsanzeige (Wireframe)

Fortschrittsbalken

Ein Fortschrittsbalken stellt den Fortschritt einer laufenden Operation dar. Sie zeigt die (geschätzte) Dauer bis zur Beendigung der Operation. Dieses Element ist sinnvoll, wenn ein Prozess die Oberfläche blockiert oder der Prozess länger als drei Sekunden dauert.

Ein Fortschrittsbalken besteht aus einem "Schiene", die sich von links nach rechts füllt, während die Operation voranschreitet (siehe Abbildung). Ein Fortschrittsbalken erlaubt keine Aktionen vom Nutzer. Das heißt zum Beispiel ein Klick/Touch auf einen Fortschrittsbalken löst keine Aktionen aus und zeigt keine zusätzlichen Informationen. Es gib eine Ausnahme: der Nutzer kann einen Prozess abbrechen. Dazu muss ein entsprechender Button zur Verfügung stehen.

  • Verwenden Sie einen Fortschrittsbalken in einem modalen Dialog, wenn der Nutzer die Anwendung nicht sinnvoll weiterverwenden kann bevor der Prozess abgeschlossen ist.
  • Verwenden Sie einen Fortschrittsbalken in der Statusleiste, wenn der Prozess im Hintergrund ausgeführt werden kann.
  • Geben Sie Texte aus, um zu erläutern, was das System zu einem bestimmten Zeitpunkt tut. Z. B. (1) Verbinden mit dem Server, (2) Datei herunterladen, (3) Aktualisierung installieren.
  • Mindestens alle drei Sekunden soll eine sichtbare Veränderung am Fortschrittsbalken erkennbar sein.

Formulare strukturieren und gruppieren

Illustration als Wireframe  

Illustration als Wireframe

Je mehr Informationen sich in einer Maske befinden, desto aufwändiger wird es für den Nutzer diejenigen Felder zu finden, die er aktuell benötigt. Strukturieren Sie Inhalte, um die Auffindbarkeit zu erleichtern. Die Möglichkeiten zur Strukturierung folgen einer (Gruppierungs-) Hierarchie:

  • Fenster/Dialoge
    • TabSheet
      • GroupBox
        • Strukturierung durch Abstände

Beispiel: es ist nicht vorgesehen, dass TabSheets innerhalb von GroupBoxen eingesetzt werden. GroupBoxen innerhalb von TabSheets sind jedoch sehr wohl sinnvoll.

  • Es ist immer möglich, die Zwischenebenen wegzulassen.
    • Beispiel: GroupBoxen direkt in einem Fenster/Dialog sind möglich
  • Dasselbe Element darf in der Hierarchie nicht doppelt eingesetzt werden:
    • Beispiel: keine GroupBox in GroupBoxen
    • Beispiel: keine Tabs in Tabs

Strukturierung in einer Maske durch Abstände

Allein mit Abständen lassen sich Inhalte gut strukturieren. Verwenden Sie kleine Abstände, wenn Elemente zusammengehören und größere Abstände, um sie voneinander abzugrenzen.

Wann werden Abstände verwendet?

Abstände können eingesetzt werden, um kleinere Mengen von UI Elementen voneinander abzugrenzen.

Bei einer kleinen Anzahl von UI Elementen (ca. unter 10, aber mehr als 2)
Auf der untersten Ebene eine Gruppierungshierarchie (siehe oben)

Verwendungshinweise

Fassen Sie Felder zusammen, wenn sie häufig gemeinsam benötigt werden. Das ist häufig der Fall, wenn eine bestimmte Nutzeraufgabe es erfordert, die gleichen Felder zu bearbeiten (während andere ignoriert werden können).
Fassen Sie Inhalte zusammen, die

Group-Boxes

Eine Group-Box grenzt eine rechteckige Fläche ab und hat einen Titel. Sie werden für komplexere Informationen verwendet.

  • Gruppen können sinnvoll gebildet und benannt werden
  • Es gibt mehr als eine Gruppe
  • Es gibt mehr als ein Element in der Gruppe

Verwendungshinweise

Benennung der GroupBox

Kurzes, prägnantes Label
Aussagekräftig, also z.B. nicht „Sonstiges“
Die Labels mehrerer GroupBoxen sollten nicht den gleichen Wortanfang haben.

TabSheet
Wann werden TabSheets verwendet?

Wenn die Inhalte auf einen einzelnen Reiter passen, dann sind Reiter überflüssig.
Die Auswahl eines Reiters darf keine Auswahl von Inhalten implizieren. Reiter strukturieren Inhalte lediglich. Es ist nicht zulässig, dass die Auswahl eines Reiters zu einer bestimmten Entscheidung führt.
Die Inhalte auf verschiedenen Reitern sind unabhängig voneinander.

Eine Eingabe auf einem Tab, darf keine Auswirkungen auf andere Tabs haben.
Alternative 1: Assistent

Die Inhalte auf den Tabs sind gleichberechtigt. Es besteht keine hierarchische Beziehung.

Alternative: ein Tree Control in einer Master-Detail Anordnung kann hierarchische Beziehungen darstellen.

Die Inhalte auf den Tabs sind nicht als Schritte bei der Bearbeitung einer Aufgabe zu verstehen.
Die Inhalte auf den Tabs sind verschieden. Es handelt sich nicht allein um Ansichten auf dieselben Inhalte.

Verwendungshinweise

Verwenden Sie nicht mehr als sieben Reiter. Alle Reiter sollen in eine Zeile passen (auch nach der Lokalisierung in andere Sprachen). Nutzer müssen die Wahl haben, in welcher Reihenfolge sie die Tabs öffnen.


Benennung der Reiter

Kurzes, prägnantes Label
Aussagekräftig, also z.B. nicht „Sonstiges“
Mehrere Labels sollten nicht den gleichen Wortanfang haben.
Substantive

Wenn ein Reiter in einem Kontext keinen Sinn macht, wird er entfernt.

Zurück nach oben

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect