it-swarm.com.de

Best Practices für die Positionierung des Navigationsmenüs in einem responsiven Header?

Angenommen, Sie haben einen reaktionsfähigen Header, der immer die gesamte Breite des Ansichtsfensters einnimmt (z. B. den in https: // mailchimp). com ), gibt es Best Practices für die Positionierung des Navigationsmenüs in dieser Kopfzeile?

Und genauer gesagt, wäre es eine schlechte Idee, wenn sich das Navigationsmenü immer auf der rechten Seite des Ansichtsfensters befindet (wie im Bild), da zwischen dem Navigationsmenü und dem Logo je nach Bildschirmgröße ein variabler Leerraum vorhanden ist?

(enter image description here

1
Pearu

In der Regel tritt in den Sprachen von links nach rechts die meiste Fixierung im oberen linken Bereich des Bildschirms auf. Die Aufmerksamkeit der Benutzer neigt dann dazu, ein "F" -Muster zu bilden, wenn sie die Seite scannen.

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Daher ist es oft ziemlich sicher, die wichtigsten Navigationselemente oben links zu platzieren.

Ein hier zu berücksichtigender Punkt ist der von Breitbildmonitoren. Probleme können auftreten, wenn die Kernnavigation ganz links oder ganz rechts im Ansichtsfenster fixiert ist und nicht an der Seite eines zentralen Inhaltscontainers (der häufig eine maximale Breite von nicht mehr als 1200 Pixel hat).

Auf Breitbild- oder 4K-Monitoren kann dies zu einem Problem werden. Je breiter der Bildschirm wird, desto mehr wird die Navigation vom Inhalt der Seite getrennt. Der Benutzer muss seinen Cursor immer weiter bewegen, um zwischen dem Inhalt und der Navigation zu wechseln. Dies kann häufig zu größerer Ungenauigkeit und verschwendeter Interaktion führen.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Für weitere Einzelheiten werfen Sie einen Blick auf das Fitts'sche Gesetz, das den Mechanismus dahinter erklärt. https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design

Stackexchange-Sites sind ein gutes Beispiel dafür. Während sich der Hintergrund des oberen Navigations-Wrappers auf die gesamte Bildschirmbreite erstreckt, sind die Navigationslinks selbst in einem zentralen Containerelement mit einer maximalen Breite von 1060 Pixel enthalten. Visuell trägt dies dazu bei, die Bedeutung der Navigation zu stärken und gleichzeitig die oben genannten Probleme des Fitts'schen Gesetzes abzumildern.

1
Paj

Angenommen, Sie haben einen zentrierten Hauptinhalt mit maximaler Breite, ist es möglicherweise optisch ansprechender, einen zentrierten Kopfinhalt mit maximaler Breite in einem Hintergrundfarbelement mit voller Breite zu haben. -) was auf vielen Seiten üblich ist.

Obwohl Stack Exchange nur für größere Breiten und nicht für kleinere reagiert, können Sie sich vorstellen, dass das Leerzeichen bis zu einem Punkt mit minimaler Breite zusammenbricht. Danach benötigen Sie ein anderes Menülayout:

(enter image description here

1
Aprillion

hier ist ein guter Artikel über Header:

Ich werde Ihre Fragen beantworten:

  • "Menschen folgen bestimmten Mustern, wenn sie Ihre Website zum ersten Mal aufrufen. Laut Nielsen (...) konzentrieren wir uns am meisten auf die Oberseite einer Website und auf die linke Seite, von wo aus wir die Hauptelemente im Inhaltsbereich kurz scannen."

  • "Der Schlüssel zu einem effektiven Navigationsmenü liegt darin, es einfach zu halten. Egal wie viele Inhaltskategorien Sie haben und wie viele Seiten Sie möglicherweise miteinander verknüpfen müssen, fordern Sie nicht zu viel von Ihren Benutzern."

Kurz:

  • Haben Sie immer Ihre Navigationsleiste oben (die Leute schauen normalerweise oben auf der Seite nach Navigation) und wichtige Dinge links.
  • Halten Sie es einfach - "(...) was Sie auf einer Seite sehen möchten. Möchten Sie beispielsweise etwas lesen, das auf der Seite zusammengedrückt ist, oder möchten Sie lieber etwas lesen, das einen guten Abstand hat?" Hier ist eine weitere gute Seite für Whitespace

Also würde ich "Login" mit "Sites" wechseln, damit Ihre Benutzer als Erstes sehen, was Ihre Site bietet.

1
Daniel Maurer