Zurück zur Übersicht

Interaktionsmuster in Applikationen

Navigation

Hauptnavigation

Die Hauptnavigation wird genutzt, um zwischen verschiedenen Applikationen zu wechseln.

Das Ausklappmenü zeigt nur die erste Navigationsebene der Applikation. Die Subnavigation ist in der Applikation selbst platziert.

Applikationsnavigation

Alle Navigationselemente, die den Benutzer zu unterschiedlichen Funktionen innerhalb der Applikation (z. B. Suche) führen, sind nun Teil der Applikationsnavigation.

Aufgrund des Platzbedarfs von Inhaltselementen (vor allem komplexer Tabellen) wird auf eine linksbündige Navigation in der Applikation verzichtet.

InhaltsnavigationDie Inhaltsnavigation wird verwendet, wenn die Applikation sehr komplex ist. Sie wird als übergeordnete Ebene der Aufklappmodule oder anstatt von Aufklappmodulen genutzt, z. B. wenn unterschiedliche Inhaltstypen innerhalb der verschiedenen Bereiche genutzt werden.
AufklappmoduleDieses Element wird verwendet, um unterschiedliche Abschnitte innerhalb der Applikation zu strukturieren.
Zurück nach oben

Funktionen

Funktionen und damit verbundenen Dienste werden immer bei der Dateneingabe oder dem Inhaltsbereich platziert zu dem sie gehören. Es gibt übergeordnete Funktionen mit Einfluss auf die gesamte Applikation, wie Hilfe und Kontakt. Diese Funktionen sind in dem Bereich oberhalb des Applikations-Headers untergebracht.

  • Funktionen mit Bezug auf den Unternavigationsbereich, werden unterhalb des Headers platziert.
  • Funktionen mit Bezug auf einen bestimmten Inhalt (z. B. Tabellen), werden über dem konkreten Inhaltsbereich platziert.
  • Funktionen zum Erweitern oder Minimieren von Modulen, werden im Erweiterungsbalken platziert.
  • Funktionen mit Bezug auf eine Zeile einer Tabelle, werden in der letzten Spalte dieser Zeile platziert.
  • Eine Ausnahme ist die Erweiterungsfunktion von Zeilen in Tabellen. Weil es ein Element zur Strukturierung ist, wird es am Anfang neben der Auswahlfunktion (falls vorhanden) platziert.
  • Funktion mit Bezug auf eine einzelne Zelle einer Tabelle betreffen, werden rechtsbündig in der selbst Zelle platziert. sie kann allein in einer Zelle stehen (linksbündig) oder als Ergänzung zum Text. Mit einem Klick auf das Symbol öffnet sich ein Layer mit zusätzlichem Inhalt.

Werden die gleichen Funktionen in einer Applikation verwendet, werden sie immer in der gleichen Art und Weise angezeigt.

Zurück nach oben

Suche und Suchergebnisse

Es gibt verschiedenen Komplexitäten von Suchfunktionen innerhalb von Applikationen. Um dies abzudecken, sind in Applikationen verschiedene Suchtypen verfügbar. Bei allem Suchtypen wird der Suchbereich über dem Ergebnisbereich angezeigt.

 

Typ 1: erweiterbare Standardsuche

  • Suchbereich mit spezifischen Suchfeldern, wie Texteingabefelder, Drop-down-Liste, usw. Die Suche ist auf eine Zeile beschränkt. Darunter werden der Primary- und Secondary-Action-Button rechtsbündig dargestellt. Die Optionen Erweiterungsfunktion ist linksbündig angeordnet. Durch einen Klick werden zusätzliche Suchoptionen angezeigt.
  • In der erweiterten Ansicht wird ein Schließen-Button unterhalb des Suchfelds angezeigt.
  • Suchergebnisse werden in einer Tabelle dargestellt.

 

Typ 2: erweiterbare komplexe Suche

Wenn die Suche komplexer ist, liegt der Fokus auf dem Suchergebnis. Die Suche ist erweiterbar.

 

Type 3: einfache Textsuche mit Filtern

  • Suchbereich mit Type-Ahead-Textsuche. Die Ergebnisse werden nach der suche angezeigt.
  • Um die Suchkriterien zu verfeinern, werden Filterelemente in der ersten Zeile jeder Spalte angezeigt.
  • Ein Such-Button wird in der letzten Spalte über der Tabellenfunktion platziert. Durch Klick auf den Suche-Button werden die gesetzten Filter auf die Suchergebnisse angewendet.

 

Suchergebnistabelle

Die „Alle auswählen“-Checkbox, „Alle anzeigen“- und „“Alle verbergen"-Buttons sind linksbündig angeordnet. Der „Liste editieren“, „Liste exportieren“ und „Auswahl löschen“-Buttons sind rechtsbündig angeordnet.

Suchergebnistabelle
Zurück nach oben

Drop-down-Listen (lang)

Wenn es viele auswählbare Optionen gibt, sind Drop-down-Listen und Type-Ahead-Textfelder kombinierbar. Zunächst kann der Nutzer entscheiden, ob er die benötigten Suchbegriffe eingibt oder sich die komplette Optionsliste ansieht. Klickt der Nutzer auf eine der Optionen, wird sie im Eingabefeld angezeigt.

Je nach der Menge der anzuzeigenden Produkte gibt es verschiedene Anzeigemöglichkeiten:

  • bis zu 20 Einträgen (zwei Spalten)
  • bis zu 30 Einträgen (drei Spalten)
  • Mehr als 30 Einträge (drei Spalten mit Paging oder A-Z-Funktion)

 

Zurück nach oben

Funktionale Tabellen

Funktionale Tabellen werden immer in der gleichen Art und Weise strukturiert, damit der Nutzer die das Verhalten der Interaktionsmuster erlernen kann.

Die folgenden Interaktionsmuster sind in einer Tabelle kombinierbar:

ElementBeschreibung
1. Paging

In einer Suchergebnisliste sind die Paging-Elemente über und unter der Ergebnisliste platziert.

Der Nutzer kann die Anzahl der angezeigten Ergebnisse selbst auswählen. Das Paging und die Ergebnistabelle passen sich den gewählten Einstellungen an.

2. Funktionen mit Bezug zur ganzen TabelleLinksbündig: Auswahl- und Anzeigeoptionen,
rechtsbündig: Editierfunktionen
3. Auswahl, Erweitern

Wenn Dateneinträge ausgewählt werden können , wird diese Option in der ersten Spalte angezeigt.

Falls die Dateneinträge erweiterbar sind, wird diese Option rechts neben der Auswahloption angezeigt.

Mit einem Klick wird eine erweiterte Ansicht der Zeile angezeigt. Die Anzeige kann anschließend wieder geschlossen werden.

4. TitelDer Titel des Dateneintrags kann ein Link sein, der den Dateneintrag öffnet. Der Titel ist eine Spalte, die spezielle Eigenschaften des Dateneintrags, wie Projekt- oder Benutzername, beinhaltet.
5. Funktionen mit Bezug zur SpalteEditierfunktionen in einer Zeile sind rechtsbündig in der letzten Spalte der Tabelle angeordnet.

Eine weitere Funktion ist die „Eintrag hinzufügen“-Funktion, die auch in einer Zelle platziert werden kann. Mit einem Klick öffnet sich ein Layer mit den benötigten Eingabefeldern.

Zurück nach oben

Dateneintrag

In einer Suchergebnisliste sieht die Detailansicht eines Dateneintrags wie folgt aus:

Dateneintrag
  1. Zurück: Führt zurück auf die vorherige Ansicht, z. B. Suchergebnis
  2. Funktionen mit Bezug auf den gesamten Dateneintrag: Informationen zum Dateneintrag und Editierfunktion (editieren, exportiere, löschen)
  3. Überschrift: Titel des Dateneintrags
  4. Inhaltsnavigation: Falls der Dateneintrag verschiedene Abschnitte oder Unterkategorien hat, wird die Inhaltsnavigation verwendet.
  5. Dateneintrag-Detailansicht: Inhalt des Dateneintrags. Er wird mithilfe von Aufklappmodulen strukturiert.

 

Funktionen und Navigation in einem Dateneintrag

Die Funktionen unterhalb des Trennbereichs beeinflussen den gesamten Dateneintrag einschließlich aller Teilabschnitte der Inhaltsnavigation.

Die Inhaltsnavigation wird genutzt, um zwischen verschiedenen Teilabschnitten des Dateneintrags hin und her zu springen. Durch Klicken öffnet sich der Reiter und zeigt die ausgewählten Unterabschnitte.

Um dem Nutzer zu ermöglichen am Ende der Inhaltsnavigation einen neuen Abschnitt hinzuzufügen, gibt es einen „Eintrag hinzufügen“-Button. Mit einem Klick öffnet sich ein neuer Abschnitt im Editiermodus.

Um Aktionen mit Bezug auf den gesamten Abschnitt (ausgewählte Inhaltsnavigation) einzufügen, sind Primary- und/oder Secondary-Action-Buttons rechtsbündig über oder unter dem Inhaltsbereich platziert. Die gleichen Funktionen sind oberhalb und unterhalb des Inhalts platziert.

Es kann notwendig sein, dass der Inhaltsbereich selbst durch Erweiterungs- und Minimierungselementen strukturiert ist. Um den Unterabschnitten Funktionen zuzuweisen, werden auf der rechten Seite Funktions-Buttons platziert.

Zurück nach oben

Datei-Upload

Der Datei-Upload besteht aus einem einfachen Eingabefeld mit zwei Buttons: „Suche“ und „Upload“. Falls keine Datei ausgewählt ist, ist der „Upload“-Button inaktiv.

Datei-Upload
Zurück nach oben

Ein Klick auf den „Suche“-Button öffnet den Datei-Browser des Betriebssystems.

Datei-Upload

Die Bezeichnung der ausgewählten Datei erscheint im Eingabefeld.

Datei-Upload

Nach dem Klick auf „Upload“ wird die Datei in einer Liste unterhalb des Dialogs angezeigt.

Datei-Upload

Zurück zur Übersicht
Weitere Informationen

PHOENIX CONTACT
GmbH & Co. KG

+49 5235 3-41984

Christine Nolte-Dietrich

Christine Nolte-Dietrich

Coordinator Communication Guidelines

Diese Webseite verwendet Cookies. Indem Sie weiter navigieren, stimmen Sie der Nutzung zu. Für weitere Informationen lesen Sie unsere Datenschutzerklärung.

Schließen