Zurück zur Übersicht

Inhaltsnavigation und -steuerung

Filterspalte

Die Breite der Filterspalte beträgt 220 Pixel. die Höhe ist variabel.

Filterspalte
Zurück nach oben

Interaktionskonzept

Facetten auf- und zuklappen

Seiten mit einer Filterspalte, werden Boxen mit verschiedenen Facetten zum auf- und zuklappen angeboten.

Standardmäßig sind die ersten x Boxen geöffnet. Sie haben einen Minus-Button vor der Überschrift der jeweiligen Box.

Alle anderen Boxen sind geschlossen. Sie haben einen Plus-Button vor der Überschrift der jeweiligen Box.

Der Nutzer kann manuell alle Boxen öffnen und schließen. Zwischen den Boxen bestehen keine Abhängigkeiten.

  • Verhalten eines Aufklapp-Moduls
  • Animation: Veränderung des Icons, Inhaltsanzeige, das nachfolgende Modul rutscht nach unten
  • Zeit: Null Sekunden
Funktionale Layer

Aktion 1

Bei Mouseover über einen Link mit einem Pfeil-Button in der Service-Navigation öffnet sich ein Layer. Der Layer öffnet sich auch, wenn der Nutzer auf den Pfeil-Button klickt.

Aktion 2

Wird der Mauszeiger aus dem Layer-Bereich heraus bewegt, schließt sich der Layer nach einer kleinen Verzögerung von 0,5 Sekunden.

Anzeige des Layers

  • Animation: Alpha von 0 bis 100 % (und zurück)
  • Übergang: easeOutCubic/ easeInCubic
  • Zeit: 0,5 Sekunden
  • Verzögerung: 0,3 Sekunden (öffnen) 0,5 Sekunden (schließen, nur wenn sich der Mauszeiger aus dem Layer heraus bewegt)

Aufklapp-Modul

Aufklapp-Modul

Interaktionskonzept

Wird nur ein Modul angeboten, ist es zu Beginn geschlossen.

Werden mehrere Module angeboten, ist das Erste geöffnet. Alle anderen sind geschlossen.
Der gesamte Bereich um die Überschrift und den Button ist sensitiv. Bei Mouseover gibt es ein entsprechendes Feedback.

Durch einen Klick auf diesen Bereich öffnet oder schließt sich das Modul. Der Nutzer kann alle Module öffnen. Er muss sie manuell wieder schließen. Verlässt der Nutzer die Seite wird der Ausgangszustand wiederhergestellt. Geschlossene Module haben einen Plus-Button, geöffnete Module ein Minus-Button.

  • Animation: Veränderung des Icons, Inhaltsanzeige, das nachfolgende Modul rutscht nach unten
  • Zeit: Null Sekunden

 

Zurück nach oben

Aufklapp-Modul mit Editierfunktionen

Aufklapp-Modul mit Editierfunktionen
Zurück nach oben

Reitermodule

Grundlegend gilt, die Breite der Reiter leitet sich von der Gesamtbreite geteilt durch die Anzahl der notwendigen Reiter (minus dem Abstand zwischen den Elementen) ab. Nur in Ausnahmefällen werden zweizeilige Texte zur Beschriftung der Reiter verwendet. Der Text in den Reitern ist immer vertikal und horizontal zentriert.

Reitermodule

Von oben nach unten: Standardreiter, Glossarreiter und Reiter mit Pfeilen

Zurück nach oben

Reitermodul mit Inhalt

Die Höhe der höchsten Spalte bestimmt die Gesamthöhe beider Spalten.

Reitermodul mit Inhalt
Zurück nach oben

Sekundäre Navigation

Sekundäre Navigation
Zurück nach oben

Sprungmarken

Sprungmarken
Zurück nach oben

Fortschrittsbalken anklickbar

  • Schriftart: Verdana
  • Schriftfarbe: #FFFFFF
  • Schriftgröße: 100 %
  • Schriftschnitt Prozessschritt Nummerierung: fett
  • Schriftschnitt Prozessschritt Beschreibung: normal
  • Hintergrundfarbe anklickbare Prozessschritte: #0098a1
  • Hintergrundfarbe nicht anklickbare Prozessschritte: #0098a1 mit 50 % Transparenz

 

Interaktionskonzept

Nur der gerade aktive Prozessschritt ist mit einer Beschreibung versehen. Durch einen Klick auf einen vorhergehenden Prozessschritt gelangt der Nutzer zu diesem Prozessschritt zurück und findet dort die von ihm bereits gepflegten Daten vor.  Auf folgende Prozessschritte kann nicht geklickt werden, dazu ist ein entsprechender Primary Call-to-Action-Button notwendig. Wechselt der Nutzer in einen anderen Prozessschritt wird dort die entsprechende Beschreibung angezeigt.

Zurück nach oben

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