Zurück zur Übersicht

Webseitennavigation

Header mit erster Navigationsebene

Header mit erster Navigationsebene
Zurück nach oben

Header-Bereiche

Header-Bereiche

1. Metanavigation, 2. Logobereich, 3. Suche, 4. Service-Navigation, 5. Hauptnavigation, 6. Breadcrumb-Navigation

Breadcrumb-Navigation

Die jeweils aktuelle Seite ist im Modus „aktiver Link“, also nicht anklickbar.

Breadcrumb navigation

Suche mit Auto-Vervollständigung

Suche mit Auto-Vervollständigung

In der Liste werden maximal zehn Suchvorschläge angezeigt.

Zurück nach oben

Interaktionskonzept

Aktion 1Durch Texteingabe in das Suchfeld wird die Auto-Vervollständigung aktiviert.
Aktion 2

Wird der Mauszeiger aus dem Layer-Bereich heraus bewegt, schließt sich der Layer automatisch nach einer 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 (öffnen) 0,5 (schließen, nur wenn sich der Mauszeiger aus dem Layer heraus bewegt)
  • Reaktion auf die Eingabe des Nutzers in das Textfeld
  • Animation: Nur aktualisieren, wenn 0,3 Sekunden keine Eingabe erfolgt

Funktionale Layer

Funktionale Layer
Zurück nach oben

Interaktionskonzept:

Aktion 1Bewegt der Nutzer den Mauszeiger über einen Link mit einem Pfeil-Button, öffnet sich ein Layer in der Service-Navigation. Der Layer wird auch durch einen Klick auf den Pfeil-Button geöffnet.
Aktion 2

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

Anzeige des Layers:

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

Funktionaler Layer für die Länderauswahl

Funktionaler Layer für die Länderauswahl
  1. Alphabetische Sortierung aller Länder mit einer Phoenix Contact-Webseite
  2. Ländernamen werden immer in Englisch und der angebotenen Sprache der Zielseite angegeben
  3. Länder werden ihrer Landesflagge gekennzeichnet
  4. Länder ohne Phoenix Contact-Webseite können mit „Cannot find your local Phoenix Contact site? Use our selector“ aufgerufen werden.
  5. Links führen immer auf die Homepage der ausgewählten Landes-Webseite
  6. Für mehrsprachige Webseiten: Die Zielseite wird in der Sprache angezeigt, die vom Nutzer im Browser eingestellt wurde

 

Zurück nach oben

Navigations-Layer

die Breite des Layers beträgt 944 Pixel. Die Höhe ist variabel, aber nicht mehr als 432 Pixel.

Navigations-Layer
Zurück nach oben

Interaktionskonzept:

Aktion 1

Bei Mouseover eines Links der ersten Navigationsebene oder durch einen Klick auf den Navigationspfeil hinter dem Navigationslink öffnet sich der Navigations-Layer. Wird der Mauszeiger aus dem Layer-Bereich heraus bewegt, schließt sich der Layer automatisch nach einer kurzen Verzögerung.

Anzeige des Layers:

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

Eine schnelle Bewegung des Mauszeigers vom Header zum Inhaltsbereich soll den Navigations-Layer nicht öffnen.

Aktion 2

Mit einem Klick auf den Navigationspfeil hinter dem Navigationslink wird der aktuelle Layer geschlossen und der Navigations-Layer zum ausgewählten Link wird angezeigt.

Änderung der Navigationsstruktur:

  • Animation:
    1. Alpha von 100 bis 0 % (vorheriger Inhalt)
    2. Alpha von 0 bis 100 % (neuer  Inhalt)
    3. Horizontale Bewegung des neuen Inhalts von +/-20 Pixeln, je nach Navigationsebene
  • Übergang: easeOutCubic
  • Zeit: 0,5 Sekunden
Aktion 3Ein Klick auf den ersten Navigationspunkt öffnet sich die jeweilige Einstiegsseite. Der Navigations-Layer öffnet sich nicht, auch wenn der Mauszeiger sich noch im sensitiven Link-Bereich befindet. Der Nutzer muss den Mauszeiger aktiv aus dem sensitiven Bereich heraus und wieder zurück bewegen, um den Layer wieder zu öffnen.

Seitenfunktionen

Seitenfunktionen
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