it-swarm.com.de

Usability-Forschung zu klebrigen Headern?

Sticky (oder feste) Header sind heutzutage keine Seltenheit, und für eine große Website, die stark auf Katalog- und Suchfunktionen angewiesen ist, ist sie möglicherweise eine gute Wahl, um dem Benutzer zu helfen.

Während ich gerade eine solche Website entwerfe, habe ich mich gefragt, ob Nachforschungen darüber angestellt wurden, wie Benutzer auf sie reagieren. Natürlich hängt alles davon ab, wie Sie es implementieren und wie geschickt Ihre Benutzerbasis ist, aber gibt es forschungsbasierte Musterinformationen? Häufige Fallstricke, Best Practices usw.?

17
vincent.io

Wenn Sie sich Sorgen über die Bildschirmhöhe machen, kann das Menü beim Scrollen nach unten von der vollen Größe auf eine kleinere Größe reduziert werden. Verwenden Sie dann einen Abwärtspfeil oder eine andere Möglichkeit, um sie über das Klicken oder Überrollen zu informieren, und es wird wieder in voller Größe erweitert

9
Earle

Sticky-Header mögen wie ein neues Konzept erscheinen, unterscheiden sich jedoch nicht wesentlich von Frames (visuell).

Meines Wissens gibt es leider keine direkte Forschung zu klebrigen Headern. Hoffentlich können andere ihre Erkenntnisse aus ihrer eigenen Nutzerforschung teilen ...

Als bewährte Methode würde ich klebrige Elemente einschließen, wenn sie nützlich sind (d. H. Erkennung statt Rückruf). Siehe Vanguard als Beispiel: https://personal.vanguard.com/us/funds/vanguard/all?sort=name&sortorder=asc

Achten Sie darauf, nicht zu viel Bildschirmfläche zu verwenden. Wenn der Benutzer nach unten scrollt, ist er wahrscheinlich an dem Inhalt interessiert. Ich mag die Idee, die Größe des Headers zu verringern, wenn der Benutzer nach unten scrollt. Wenn Sie ein großes Logo haben, können Sie eine kleinere Version verwenden, wenn der Benutzer einen Bildlauf durchführt und den Header etwas verkleinert. Stellen Sie außerdem sicher, dass das Scrollen von Seiten funktioniert, wenn der Benutzer die Leertaste oder die Bildlaufleiste verwendet. Bei Verwendung dieser Bildlaufmethoden werden normalerweise die letzten ein oder zwei Textzeilen oben auf der Seite angezeigt.

Die wichtigste bewährte Methode sollten Sie bereits tun: Machen Sie den Header nützlich und verständlich. Wenn der Header zunächst unbrauchbar ist, ist der klebrige Header nur ärgerlich.

Sticky-Elemente können auch verwendet werden, um die Aufmerksamkeit auf CTAs (Handlungsaufforderungen) zu lenken, die ganz links oder rechts angezeigt werden können, wenn der Benutzer einen Bildlauf nach unten durchführt (stellen Sie erneut sicher, dass der Inhalt nicht beeinträchtigt wird). Wir haben Erfolg mit klebrigen Elementen für die Kontaktaufnahme, den Helpdesk und Links nach oben gefunden.

7
Andrew

In Ermangelung realer Forschungsdaten dachte ich, ich würde einige Dinge teilen, die ich beim Studium von klebrigen Überschriften gefunden habe (die meisten dieser Punkte werden auch von den anderen Befragten hervorgehoben):

  • Halten Sie die Kopfzeile klein, der größte Teil des Ansichtsfensters sollte für den Inhalt reserviert sein.
  • Setzen Sie nur absolut notwendige Dinge ein (brauchen Sie dort wirklich Ihr Logo?).
  • Stellen Sie sicher, dass der Header einen ausreichenden Kontrast zum Inhaltsteil aufweist. Es ist viel schwieriger, dies nur mit Leerzeichen zu tun (was normalerweise bei nicht klebrigen Überschriften funktioniert). Die Verwendung einer dunkleren Hintergrundfarbe für den klebrigen Header funktioniert einwandfrei.
  • Sticky-Header funktionieren kaum, wenn Websites auf Geräten mit kleinem Bildschirm wie Telefonen angezeigt werden (Webanwendungen sind etwas anderes).
  • Minimieren Sie auffällige Animationen, wenn der Benutzer nach unten scrollt und das Menü "einrastet". Dies stört nur den Fokus auf den Inhalt und hat kaum Verwendung.
7
vincent.io

Ich entschuldige mich dafür, dass ich keine Nachforschungen angestellt habe, aber es gibt andere Quellen. Shawn Borsky , professioneller User Interface Designer und ein Autor haben den Sticky Header folgendermaßen kommentiert:

Wenn Benutzer Bildlaufinhalte wie einen Feed oder einen Artikel lesen, ist es einfach, Tunnelblick zu erhalten und die Navigation zu ignorieren. Wenn sie mit dem Konsumieren von Inhalten fertig sind oder diesen Tunnel verlassen, kann es frustrierend oder verwirrend sein, keinen Zugriff mehr auf die Hauptaktionen auf der Website zu haben, weil Sie den Inhalt gelesen oder vertieft haben.

Ich denke, das ist eine gute Erklärung, warum Sie es haben sollten. Man muss jedoch vorsichtig sein, da die Bildschirmhöhe sehr unterschiedlich ist. Abgesehen von der Kopfzeile des Browserfensters, möglicherweise mit nervigen Symbolleisten und anderen integrierten Browserleisten, wie z. B. der Favoritenleiste, bleibt weniger Platz für den eigentlichen Inhalt. Wenn Sie einen Sticky-Header implementieren, machen Sie ihn relativ klein (um zu vermeiden, dass der eigentliche Inhalt zu viel Platz beansprucht), aber hoch genug, um die Regeln von Fitts'sches Gesetz zu implementieren.

In der Praxis würde mir das gefallen:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

6
Benny Skogberg

Ich bekomme Migräne.

Für mich gibt es also drei Probleme. Erstens beginnen die meisten klebrigen Header mit einem großen Block, dessen Größe sich ändert, wenn Benutzer mit dem Scrollen beginnen. Dies kann Migräne auslösen. Zweitens verschieben die meisten klebrigen Überschriften die Kante zwischen scrollenden und nicht scrollenden Elementen näher an die Mitte des Bildschirms, was die Augen zusätzlich belastet. Drittens können klebrige Header je nach Software die Seiten auf- und abblättern.

Ich denke, wenn Sie klebrige Überschriften benötigen, wäre es hilfreich, eine schmale Überschrift auf einer Seite des Fensters zu haben.

0
Marja Erwin