Sticky Hauptnavigation - Verbesserungsvorschläge für Rebrush

[lukasniebler]

Über die letzten Monate gab es vermehrt die Frage, ob der sticky Header optimiert werden kann, da auf kleinen Desktop-Geräten oder Tablets der Sticky-Header auf Inhaltsseiten bis zu 1/3 des Bildschirms füllen kann.

Die "Content to Chrome Aspect Ratio" ist auf FAU-Seiten für kleine Desktopbildschirme und Tablets sehr schlecht. So nimmt der Sticky Header leicht bis zu 1/3 des gesamten vertikalen Bildschirmbereichs ein. Bei langen Menünamen und vielen Menüeinträgen vergrößert sich der Bereich im Sticky header.

Ist-Zustand:

Ist-Zustand mit Vergrößerung durch den Nutzer:

Lösungsansätze

Scrollbedingter Sticky Header

Eine mögliche Lösung ist die Umsetzung eines "Partially Persistent Header", der nur beim Scrollen nach oben auf der Webseite mit einer Slide-In-Animation von 300-400ms eingeblendet wird.

Kein Sticky Header

Eine andere Möglichkeit ist das komplette deaktivieren der Sticky-Funktion. Da es ein Back2Top-Button am unteren rechten Bildschirmrand gibt. Könnte das ebenso eine mögliche Option sein.

C2Chrome Ratio verbessern

Die Fläche für den sticky Header verringern. Die riesige Logofläche ist für den Seitenbesucher uninteressant, während er Beiträge, Artikel oder Inhaltsseiten liest.

Quellen

https://www.nngroup.com/articles/sticky-headers/
https://www.nngroup.com/articles/content-chrome-ratio/
https://uxdesign.cc/things-to-consider-when-designing-sticky-ui-elements-10aef22dac3d
https://xd.adobe.com/ideas/process/ui-design/best-practices-designing-fixed-elements/

[xwolfde]

Bitte um Vorschläge, wie man dies optimieren kann. Bitte erst Vorschläge zeigen und abstimmen, dann erst umsetzen :)

Idee hier war auch: Kein Sticky beim runterscrollen, aber es erst sichtbar machen, wenn man "etwas" nach oben scrollt (auch touch event nach oben).

[xwolfde]

In dem Zuge ggf. auch andenken: "Nach oben Link" oberhalb des blauen Footers lassen, so daß dieser stets auf weißen Hintergrund bleibt?

[danielboese]

Ich würde eine Kombination aus "Partially Persistent Header" und Flächenreduzierung vorschlagen. Somit haben wir eine sehr gute, weitgehend ungestörte Darstellung des Inhalts, ohne auf Komfort zu verzichten.

Der Sticky Header wird direkt eingeblendet, sobald man hochscrollt. Der Weißraum im Header wird beschnitten und die Inhalte simpel vertikal zentriert. Der Schatten unterhalb des Headers ist etwas prominenter, um den Inhalt besser vom Rest abzuheben.

Tablet-Viewport:

Desktop-Viewport:

[danielboese]

In dem Zuge ggf. auch andenken: "Nach oben Link" oberhalb des blauen Footers lassen, so daß dieser stets auf weißen Hintergrund bleibt?

Ich denke das ist nicht nötig, denn durch die Kombination Pfeil/Box ist ja stets genug Kontrast gewährleistet.

[xwolfde]

Hm, aber obige Problemmeldung von Lukas betrifft ja den Fall, dass der Viewport zu eng in der Breite ist, dass das Logo sich umfaltet und die Hauptnavigation sich ebenfalls auf 2 oder mehr Zeilen ausdehnt.
Oder ich verstehe es gerade nicht, wo die Lösung liegt?

[danielboese]

Also ich bin jetzt eher auf die Verbesserung der "Content to Chrome Aspect Ratio" eingegangen, hab dabei aber ein bisschen die vertikale Darstellung im Tablet-Viewport unterschlagen. Ich werde nochmal speziell darauf eingehen mit Mockups.

Wie ist das denn mit dem Logo? Soll das aktuelle Verhalten beibehalten werden, also dass "Friedrich-Alexander-Universität FAU" umbricht? Oder kann dieser Teil evtl. sogar ausgeblendet werden, wenn es zu eng wird?

[xwolfde]

Ja, das mit dem Umbruch im Logo ist wirklich Absicht so und Teil der CI.... (aber frag nicht, was sich der Designer dabei gedacht hat. Ich hab das dann nur als SVG+CSS umgesetzt)

[danielboese]

Ich würde vorschlagen, die kompakte Navigation mit Burger-Menü auch noch für "screen-md", also bis 991px, zu nutzen. Somit vermeiden wir den häufigen, unschönen Umbruch der Level1-Menüelemente.

Vor "screen-md", wo der Logotext bereits umbricht um mehr Platz für das Menü zu machen, müsste im Notfall (also bei sehr vielen Level1-Menüpunkten) weiterhin ein Umbruch des Menüs erfolgen. Die "Gefahr" könnten wir noch weiter reduzieren, indem das Logo da noch ein wenig kleiner wird. Soll ich genau das vielleicht auch nochmal als Mockup darstellen? Oder wie denkt ihr darüber?

Hier nochmal eine Ansicht von 1000px mit "hohem" Logo. Habe den Weißraum auch hier etwas reduziert, damit wir mehr vom Content haben.

[xwolfde]

Ok, dann machen wir das erste, also die kompakte Navigation mit Burger-Menü auch noch für "screen-md".

[lukasniebler]

Also wenn ich's richtig gelesen habe:

• Der Header wird kompakter
• Der Header wird mit einer Slide-In-Animation von 300-400ms eingeblendet beim hochscrollen
• Bis 991px wird das Hamburger-Menü angezeigt

Klingt gut.

[lukasniebler]

@danielboese Noch als Anmerkung:

Da screen-md bis 1200px gehen würde: Laut NNGroup sorgt versteckte Navigation (also auch die Navigation durch z.B. ein Hamburger-Menü) dafür, dass Nutzer 50% seltener neue Inhalte entdecken. Außerdem erhöht sich die Zeit, die Nutzer benötigen um eine Aufgabe zu erledigen und die Schwierigkeit erhöht sich für den Nutzer.

Auch wenn der Umbruch hässlich aussieht, wär es deshalb aus UX-Sicht performanter, wenn wir das Hamburger-Menu nur bis screen-sm einblenden. Ab screen-md sollte die Navigation schon voll sichtbar sein (auch wenn es vielleicht nicht immer schön aussieht).

Das wär auch kein Problem, da sie ja beim runterscrollen und lesen sowieso wegklappt.

Wie siehst du das? Wär das machbar? Im Notfall können wir auch mit dem Hamburger-Menü leben bis zum Relaunch.

(Quelle: https://www.nngroup.com/articles/hamburger-menus/ )

[xwolfde]

Wie gerade besprochen: Hamburger-Menu geht bis 992.

[FitoreGashi]

Ich habe $screen-sm auf 992px geändert, damit das Burger-Menü und auch die Seite angezeigt werden. in der Mobil-/Tablet-Version sein @xwolfde @lukasniebler @danielboese

[xwolfde]

Äh, bitte keine hardcodierten Werte verwenden. Wir haben doch dafür die Variablen in der _variables.scss.
Bitte stattdessen die Variablennamen verwenden:

// Extra small screen / phone

$screen-xs:                  480px;
$screen-xs-min:              $screen-xs;

$screen-sm:                  768px;
$screen-sm-min:              $screen-sm;

$screen-md:                  992px;
$screen-md-min:              $screen-md;

$screen-lg:                  1200px;
$screen-lg-min:              $screen-lg;

$screen-xl: 1400px;
$screen-xxl: 1760px;
$screen-xxs: 320px;

[xwolfde]

Bei der Programmierung des Sticky-Header gibt es in einem Sonderfall einen Fehler:

Wenn man ein geloggt ist, wird die Headerleister nicht sichtbar sein, sondern von der wpadminbar überdeckt.
Denn durch den Inline-Style (warum Inline, warum keine Class?!) in #headerwrapper wird die Position auf top: 0; gesetzt und nicht auf 0 + die wpadminbar-Höhe.

[xwolfde]

thxs