it-swarm.com.de

Warum schalten Websites die Sichtbarkeit von Headern beim Scrollen um?

Einige Websites haben einen (normalerweise eher kleinen) Header, der ausgeblendet wird, wenn der Benutzer nach unten scrollt.

Was ich nie verstanden habe ist, warum es beim Scrollen wieder angezeigt wird. Manchmal möchte ich ein bisschen nach oben scrollen, um den Inhalt etwas höher auf der Seite zu lesen, und es wird wirklich nervig. hier ist ein Beispiel.

Warum wird das gemacht? Was versuchen Webdesigner mit dieser Implementierung zu erreichen? Es scheint nur wirklich nervig zu sein.

53
Kevin

Warum ist das Navigationsmenü sichtbar, wenn Sie nach oben scrollen?

Bei inhaltsorientierten Websites und Seiten erwarten die Benutzer, dass sie bei einem Engagement nach unten scrollen. Wenn der Benutzer nicht nach unten, sondern nach oben scrollt, kann er als "nicht engagierter Benutzer" akzeptiert werden. Das Hauptziel dieses Verhaltens ist die Bereitstellung anderer Optionen für das Engagement.

Das gleiche Muster ist auch in der mobilen Safari-App zu sehen. Wenn der Benutzer nach oben scrollt, werden die anderen Funktionen sichtbar. Wenn der Benutzer nach unten scrollt, werden Elemente in ein unsichtbares Format umgewandelt, um die Fläche zu vergrößern.

  • Dieses Verhalten macht Elemente unsichtbar, um Ablenkungselemente bei Eingriffen zu reduzieren
  • Dieses Verhalten macht Elemente sichtbar, um die Optionen zu erhöhen, wenn kein/weniger Engagement besteht
49
Abektes

Mobil fokussiertes Design

Dies wird manchmal als Bildlaufleiste bezeichnet und ist ein Produkt von mobilem Design. Es ist ein Kompromiss zwischen einer festen Navigationsleiste, die immer auf dem Bildschirm angezeigt wird, und einer fließenden Navigationsleiste, die sich nur oben auf der Seite befindet. Die feste Navigationsleiste hat den Nachteil, dass sie einen erheblichen Teil des kleineren mobilen Bildschirms einnimmt, während die fließende Navigationsleiste den Nachteil hat, dass viel Scrollen erforderlich ist, um auch auf relativ kurzen Seiten zu gelangen.

Auf dem Desktop ist keines davon ein so großes Problem. Eine feste Navigationsleiste nimmt einen kleineren Teil des Ansichtsfensters ein und kann aufgrund der höheren Genauigkeit der Maussteuerung kleiner sein. Das Zurückblättern zum oberen Rand der Seite dauert viel kürzer - sowohl weil die Seite kürzer ist und weniger Bildlauf erfordert, als auch weil der Benutzer mithilfe der Bildlaufleiste und dem Ziehen des Chevrons schnell zum oberen Rand der Seite scrollen kann .

Es ist auch eine Alternative zum sogenannten "Hamburger-Menü", das Navigationselemente hinter einer Taste verbirgt, die der Benutzer drücken soll. Wenn Sie die Optionen hinter einer Schaltfläche ausblenden, sind sie weniger erkennbar und werden häufig weniger verwendet. (Wenn sich die Leute daran gewöhnen, ist es besser als früher.)

Indem Sie die Navigationsoptionen oben auf der Seite anzeigen und dann eine natürliche Aktion wie das Scrollen nach oben nutzen, um die Optionen erneut anzuzeigen, sind die Navigationsoptionen besser erkennbar und werden daher besser genutzt.

Warum nur beim Scrollen nach oben?

Die Navigationsleiste wird beim Scrollen nach oben aus zwei Gründen angezeigt: Zum einen ist es wahrscheinlicher, dass der Benutzer, der nach oben scrollt, sich nicht mehr mit der Seite beschäftigt als nach unten. Das zweite ist, dass es sich um eine natürliche Aktion handelt: Der Benutzer hat diese Navigationsoptionen beim Öffnen der Seite gesehen und beginnt daher natürlich, wieder nach oben zu scrollen, um zu versuchen, sie zu erreichen.

Was diejenigen betrifft, die aus anderen Gründen nach oben scrollen, besteht die Idee darin, dass Sie nur ein bisschen mehr nach oben scrollen müssen und dann natürlich wieder nach unten scrollen, während Sie weiterlesen und die Navigationsleiste von der Seite zurückschieben.

Wie in den Kommentaren hier angegeben, ärgert dies diese Benutzer jedoch häufig. Meine Empfehlung, damit umzugehen, ist zweifach. Lassen Sie die Navigation zunächst erst erscheinen, wenn der Benutzer mehr als ein kleines Stück nach oben gescrollt hat. Beachten Sie zweitens, wie schnell der Benutzer scrollt, und reagieren Sie anders. Ein schneller Bildlauf oder ein schneller Blick auf dem Handy versucht eher, wieder an den Anfang der Seite zu gelangen, während ein langsamer Bildlauf eher nur den Inhalt anpasst.

Ich persönlich empfehle auch, nicht zu versuchen, mobiles Design auf dem Desktop zu zeigen. Neben der Überprüfung der Breite des Ansichtsfensters gibt es verschiedene Möglichkeiten, um zu erkennen, dass sich ein Benutzer auf dem Desktop befindet (oder auf andere Weise keine Touch-Steuerelemente hat). Wenn sich der Benutzer auf dem Desktop befindet, greifen Sie auf eine feste Navigationsleiste zurück und halten Sie die Größe für die Verwendung mit der Maus angemessen.

22
trlkly

Viele Menschen tun dies, weil andere dies tun und keinen anderen Grund.

Ihr angeblicher Grund könnte sein, ihrem Inhalt maximalen Platz zu geben und gleichzeitig den Header zu minimieren, über den sie irgendwo lesen. Ich stimme Ihnen jedoch zu. Es ist ärgerlich, wenn der Header beim Scrollen erweitert wird. Es würde mich nicht stören, wenn es warten würde, bis Sie oben angekommen sind, ohne den Inhalt zu vertuschen, aber nur wenige tun dies.

14
Rob

Die Absicht hinter dieser Funktionalität ist es, die angenommene Absicht des Benutzers zu unterstützen:

  • Wenn der Benutzer nach unten scrollt, muss er den Inhalt lesen. Helfen Sie ihm also, indem Sie den Header aus dem Weg räumen.
  • Wenn sie nach oben scrollen, müssen sie mit dem Lesen fertig sein und versuchen, zur Navigation oben auf der Seite zurückzukehren. Helfen Sie ihnen also, indem Sie die Kopfzeile wieder anzeigen.

Das ist das Ideal. Dies wird zu einem Problem, wenn der Versuch der Benutzeroberfläche, die Absicht des Benutzers zu erraten, fehlschlägt und den Header in die Richtung schiebt, in der der Benutzer nur ein wenig nach oben gescrollt hat, um die vorherige Zeile erneut zu lesen.

Häufig handelt es sich lediglich um eine schlechte Implementierung: Es ist einfach, den Header einfach auszulösen, damit er bei einem Aufwärts-Scroll-Ereignis wieder angezeigt wird. Viele Websites (einschließlich des Beispiels, auf das Sie verlinkt haben) tun dies auf ein Minimum und nennen es einen Tag.

Eine viel bessere Implementierung würde warten, bis der Benutzer eine signifikante Strecke nach oben gescrollt hat - weit genug, dass er klar seine Absicht signalisiert hat, zum oberen Rand der Seite zu gehen -, bevor er den Header wieder einfügt Aussicht. (Obwohl es nicht so lange dauert, bis der Benutzer vor dem Auslöser den oberen Rand der Seite erreicht!) Dies ist keine Schwierigkeit der Raketenwissenschaft, aber wesentlich komplizierter als die naive Methode. Und selbst wenn es versucht wird, ist ein gewisses Urteilsvermögen erforderlich, um es auf die richtige Dauer, für bestimmte Inhaltslängen usw. abzustimmen. All dies erfordert Zeit, Aufmerksamkeit, Benutzertests, eine gute Kommunikation zwischen Design- und Codeteams und so weiter. All dies führt dazu, dass es nicht allzu oft richtig gemacht wird und die minderwertige Methode in freier Wildbahn weitaus häufiger vorkommt.

8
Daniel Beck

Nun, sie möchten, dass das Navigationsmenü immer vorhanden ist, damit Benutzer schnell durch die Seiten wechseln können. Die Designer sind bestrebt, die Seitenaufrufe und die Zeit vor Ort zu erhöhen . Deshalb setzen sie den klebrigen Header.

Ich fand jedoch 1 A/B-Test , wo die Ergebnisse nicht sehr beeindruckend waren: Nur 11% mehr Seitenaufrufe auf Tablets, auf Desktop- und Mobilgeräten gab es keine signifikanten Gewinne.

(Scroll AB test

In der von Ihnen angegebenen Beispielwebsite haben die Designer es schlecht gemacht, weil die obere Leiste zu groß ist und den Hauptinhalt verbirgt.

3

In diesem speziellen Fall ist das Design aus zwei Gründen fehlerhaft:

  1. Es ist zu empfindlich. Schon ein Schritt auf dem Mausrad drückt den gesamten Header hinein. Wie andere sagten, sollte es einen bestimmten Schwellenwert/eine bestimmte Geschwindigkeitsbegrenzung für die Anzeige des Headers geben.

  2. Der Header ist unnötig groß. Sie wissen, auf welcher Website Sie sich befinden, daher ist das Logo völlig überflüssig. Wenn der Header nur die einzeilige Leiste wäre, würde der Benutzer alle erforderlichen Inhalte des Headers erhalten.

Wenn diese beiden Punkte kombiniert werden, würde ein Bildlauf nach oben auch dazu führen, dass die Ansichtsfenster unter allen Umständen nach oben verschoben werden, wodurch auf beide Arten von Wünschen reagiert wird, die eine Verschiebung nach oben auslösen (mehr Inhalt anzeigen, Kopfzeile anzeigen).


Was mich wirklich ablenkt (wenn ich meine persönlichen Erfahrungen teilen kann), ist das "Springen" des Headers, mehr als die Tatsache, dass es einen Teil der Seite abdeckt. Dies geschieht sowohl beim Anzeigen als auch beim Ausblenden des Headers.

2
yo'

Nun, ich denke, wenn Sie entscheiden, dass Sie die Navigation aus irgendeinem Grund ausblenden müssen, müssen Sie auch einen Weg finden, sie wieder anzuzeigen. Dieser Designer hat die Navigation bei mehreren Bildlauf nach unten ausgeblendet. Und dann schien es logisch, es beim Scrollen nach oben noch einmal zu zeigen. Aber es hätte sicherlich schöner gemacht werden können. Lassen Sie gerne eine Art Navigation oben, aber verkleinern Sie sie. Und vielleicht verwenden Sie die Mausbewegung, um die Navigation wieder zu erweitern. Aber ja, das ist nicht der perfekte Weg, dies zu tun.

2
dinaak

Es geht um Content-Fokussierung, eine Art UX-Design zur Verbesserung des Engagements und der Benutzererfahrung.

  • Wenn Benutzer nach unten scrollen, geht es ums Lesen.
  • Wenn Benutzer nach oben scrollen, geht es nicht ums Lesen.

Dieses Verhalten ist mehr zu reden, einige Websites zeigen sogar zusätzliche Optionen an, wenn sie nach oben scrollen. (Überprüfen Sie die Beitragsseite in medium.com)

Derzeit arbeite ich an einem Projekt, das definitiv so gestaltet ist. Wir verbergen die gesamte Benutzeroberfläche und zeigen nur den Inhalt beim Lesen und zusätzliche Optionen beim Scrollen an (z. B. Nav, Überschrift, Freigabeschaltflächen, Kommentar, soziale Links usw.). .usw)

1
bard

Eine andere Sache, die ich noch nicht erwähnt habe, ist, dass sie mich an das Popup-Schema "Oh, warte, bevor du gehst" erinnert, das Websites verwendet haben, als du eine Bildschirmbewegung ausgeführt hast, die als Exit-Bewegung interpretiert wurde. Diese Assoziation ist für mich ziemlich negativ, aber ich gehe davon aus, dass ich solche Pop-Down-Sites nach Möglichkeit anpassen oder einfach vermeiden werde.

0
Kevin Leary