Gehen Sie ans Limit – Eine Übersicht über Long-Scroll-Websites

Long-Scroll- oder Infinite-Scroll-Websites sind genau das: Die Seiten sind viel länger als die „durchschnittliche“ Website-Seite und scrollen daher „unendlich“. Diese Arten von Websites sind bei Social-Media-Websites und Websites wie Pinterest beliebt geworden, die viele nutzergenerierte Inhalte sowie einige Nachrichten- und Blog-Websites enthalten. Auch persönliche Websites und Portfolios beginnen, Long-Scroll-Techniken einzusetzen, um zu wachsen Benutzerinteraktion und die Zeitdauer, die Benutzer auf einer Website verbringen.

Unendliches Scrollen ist zu einem beliebten und verbreiteten Designmuster geworden, dennoch gibt es einige potenzielle Fallstricke, die UI-Designer beachten sollten, wenn sie eine Website entwerfen, die langes Scrollen verwendet. Es gibt auch einige Arten von Websites, bei denen es nicht angebracht ist, ein Designmuster mit langem Scrollen zu verwenden.

Der Zweck und die Vorteile von Long Scroll

Einer der größten Vorteile von Long-Scroll-Websites besteht darin, dass sie Besucher länger auf einer Website halten. Wenn Menschen keine bewusste Entscheidung treffen müssen, mehr Inhalte zu konsumieren, ist es weniger wahrscheinlich, dass sie wegklicken.

Stellen Sie sich dies ähnlich vor, wie Facebook, YouTube, Netflix und ähnliche Websites Videos automatisch abspielen, wenn das Video, das ein Benutzer ansieht, zu Ende ist. Sie wissen, dass ein Besucher, der sich anstrengen muss, um auf ein neues Video zu klicken, genauso wahrscheinlich auf eine ganz andere Website klickt. Aber wenn Videos weiter abgespielt werden, ist es wahrscheinlicher, dass sie weiterschauen.

Wenn Long-Scroll-Sites richtig codiert sind, laden sie mit jedem neuen Inhalt eine neue URL. Das entspricht mehr Seitenaufrufen für die Website, was die Werbeeinnahmen und den Gesamtwert der Website steigern kann.

Wie bei jeder UX-Entscheidung ist es wichtig, die Vor- und Nachteile für die Personen abzuwägen, die die Website tatsächlich nutzen, bevor Sie sich für ein Format entscheiden. Langes Scrollen kann für bestimmte Arten von Websites eine großartige Option sein, während es in anderen Situationen nur Benutzer frustriert. Es ist wichtig, den Unterschied zwischen den beiden zu lernen.

Wann sollte man Long Scroll verwenden (und wann nicht)

Das Wichtigste, woran man denken sollte, wenn man über langes Scrollen nachdenkt, ist, dass der Inhalt das Format bestimmen sollte, egal welche Art von Website entworfen wird. Long-Scroll-Websites eignen sich hervorragend für bestimmte Arten von Inhalten, können jedoch bei anderen Arten einen großen UX-Fehler darstellen.

Im Großen und Ganzen profitieren aufgaben- und zielorientierte Sites nicht von Endlos-Scroll-Designs (z. B. E-Commerce-Sites und Tutorial- oder andere Bildungs-Sites, auf denen Benutzer einen bestimmten Fortschritt sehen möchten). Diese Arten von Websites müssen den Benutzern ein Gefühl der Vollständigkeit und Leistung vermitteln, was bei Websites mit langem Scrollen schwieriger zu erreichen ist.

Etsy zum Beispiel probierte 2012 ein Endlos-Scroll-Design aus und wechselte schließlich wieder zur Paginierung. Sie stellten fest, dass, während die Kunden immer noch mit ungefähr der gleichen Rate kauften, das Nutzerengagement stark zurückging. Sogar Dinge wie die Anzahl der durchgeführten Suchen sind gesunken.

Eine Option, die einige E-Commerce-Websites den Besuchern bieten, ist die Option „Alle anzeigen“, wenn sie sich Produktseiten ansehen. Dies gibt dem Benutzer die Möglichkeit, die Website in einem unendlichen Bildlaufformat anzuzeigen, wenn er dies wünscht, während die kürzeren Ergebnisseiten für Benutzer beibehalten werden, die dieses Format bevorzugen.

Die Paginierung ist auch hilfreich, wenn es für Personen wichtig ist, Informationen in chronologischer Reihenfolge anzuzeigen. Während eine One-Page-Scrolling-Website die Besucher dazu anregen könnte, weiter zu blättern und zu springen, verlangsamt die Paginierung den Besucher und erhöht die Wahrscheinlichkeit, dass sie Informationen in der richtigen Reihenfolge konsumieren.

Wo eine Single-Page-Scrolling-Website wirklich glänzen kann, sind Websites, auf denen das Lesen zusätzlicher Inhalte oder Artikel der natürliche Fluss ist. Dies gilt für Dinge wie Nachrichtenseiten oder Themenblogs. Benutzer auf diesen Websites möchten oft große Mengen an Informationen auf einmal aufnehmen, und unendliches Scrollen macht es viel einfacher.

Ein weiterer offensichtlicher Bereich, in dem unendliches Scrollen eine beliebte UX-Wahl ist, sind Social-Media-Websites oder Websites mit vielen benutzergenerierten Inhalten. Facebook, Pinterest und Twitter verwenden alle unendliches Scrollen. Diese Seiten möchten die Benutzer so lange wie möglich auf der Seite halten, und unendliches Scrollen macht das gut.

Psychologische Kosten langer Schriftrollen

Die psychologischen Auswirkungen jeder Designentscheidung sollten immer sorgfältig abgewogen werden. Wenn es um Single-Page-Scrolling-Websites geht, gibt es sowohl psychologische Effekte dafür als auch dagegen.

Das erste, was zu berücksichtigen ist, ist, dass Benutzer nichts dagegen haben, gezielt zu klicken. Das Klicken ist praktisch seit seinen Anfängen Teil der Computertechnik, der grafischen Benutzeroberflächen und des Internets. Die Leute sind an diese bestimmte Art der Interaktion gewöhnt und werden nicht abgeschreckt, wenn sie auf ein paar Links klicken müssen, um zu weiteren Inhalten zu gelangen.

Viele Benutzer mögen das unendliche Scrollen standardmäßig nicht. Vor einer extrem langen Seite zu scrollen, kann sich ein bisschen anfühlen, als würde man in einem endlosen Meer von Informationen ertrinken. Wenn Benutzer nach bestimmten Informationen suchen, ist Scrollen selten der effizienteste Weg, sie zu finden.

Da die Seitenlänge nicht genau angezeigt wird, unterbricht der unendliche Bildlauf die Bildlaufleiste an der Seite der Seite. Obwohl nicht jeder Benutzer die Bildlaufleiste verwendet, können diejenigen, die dies tun, das unendliche Scrollen frustrierend finden.

Endloses Scrollen beseitigt auch das Gefühl der Vollendung, das Benutzer erhalten, wenn sie eine Aufgabe erledigen oder ein Ziel auf einer Seite erreichen und dann zur nächsten Seite klicken. Der Verlust dieses Gefühls der Vollständigkeit kann Benutzer entmutigen und dazu führen, dass sie andere Quellen für dieselben Informationen oder Aufgaben suchen.

Eine weitere negative psychologische Auswirkung, die Websites mit langem Scrollen haben können, besteht darin, dass Benutzer dazu neigen, Inhalte, die weiter unten auf der Seite stehen, als weniger wichtig anzusehen als die Inhalte ganz oben. Die Verwendung von Überschriften kann dabei helfen, da es das Gehirn des Besuchers „zurücksetzt“, was „oben“ ist.

Best Practices für Long-Scroll-Websites

Wenn festgestellt wurde, dass sich ein Website-Projekt für ein Long-Scroll-Design eignet, sollten einige Best Practices beachtet werden, um sicherzustellen, dass es ein optimales Benutzererlebnis bietet.

Erstens, lass die Fußzeile weg! Wenn Inhalte kontinuierlich geladen werden, wird die Fußzeile kontinuierlich vom unteren Rand der Seite verschoben. Das bedeutet, dass alle Inhalte oder Informationen, die in der Fußzeile enthalten sind, nicht sichtbar sind. Noch schlimmer ist es, wenn Benutzer einen Blick auf die Fußzeile erhaschen, sie aber aus den Augen verlieren, bevor sie die Möglichkeit haben, auf etwas zu klicken. Die Verwendung einer klebrigen Fußzeile ist eine Möglichkeit, dies zu umgehen, obwohl es oft eine bessere Option ist, die Fußzeile vollständig zu entfernen.

Die Verwendung visueller Hinweise ist wichtig, insbesondere wenn beim Laden des Hauptbildschirms nicht sofort ersichtlich ist, dass mehr Inhalt auf der Seite vorhanden ist. Websites mit einem großen Header-Bild oder visuellen Inhalten, die den Bildschirm ausfüllen, wenn die Seite geladen wird, enthalten häufig einen Pfeil (manchmal animiert) oder ähnliche Bilder, um anzuzeigen, dass unten mehr Inhalt vorhanden ist.

Die Navigation sollte durchgängig sichtbar sein, entweder durch die Verwendung eines klebrigen Headers oder einer stationären Seitenleiste mit Navigationslinks. Die Ausnahme hiervon bilden mobile Geräte, auf denen Sticky-Header wertvollen Platz auf dem Bildschirm einnehmen können. Facebook handhabt dies gut, indem die Kopfzeile verschwindet, wenn Benutzer nach unten scrollen, aber dann wieder erscheint, wenn sie anfangen, wieder nach oben zu scrollen.

Der Chrome-Webbrowser macht etwas Ähnliches mit seinen Steuerelementen am unteren Bildschirmrand; Sie verschwinden, wenn der Benutzer nach unten scrollt, und erscheinen wieder, wenn er wieder nach oben scrollt. Es ist eine sehr intuitive Möglichkeit, eine Benutzeroberfläche zu erstellen, die die verfügbare Bildschirmfläche maximiert.

Eine wichtige UX-Funktion, die glücklicherweise bei Websites mit unendlichem Scrollen häufiger geworden ist, ist das Ändern der URL, wenn zu jedem Abschnitt gescrollt wird. Einige tun dies mit internen Lesezeichen innerhalb der Seite. Andere Websites, insbesondere Nachrichtenseiten und Blogs, aktualisieren die gesamte URL, wenn der Benutzer scrollt. Dies ist wichtig, da es Benutzern ermöglicht, auf genau die Inhalte zu verlinken, auf die sie verlinken möchten, unabhängig von Änderungen an der Seite selbst.

Einige Webdesigner entscheiden sich dafür, eine „hybride“ Long-Scrolling-Site zu erstellen, mit einer „Mehr laden“-Schaltfläche, die Inhalte direkt auf dieselbe Seite lädt. Einige UI-Designer verwenden dies wiederholt auf der Seite, während andere sich dafür entscheiden, es nur einmal einzufügen und die Website danach in ein traditionelleres Long-Scrolling-Format umzuwandeln.

Abgesehen von diesen Designüberlegungen für Websites mit langem Scrollen gelten auch andere UI- und UX-Best Practices zum Erstellen guter Designs für Websites, die unendliches Scrollen verwenden.

Beispiele für Long Scroll richtig gemacht

Dann gibt es diese Seite von Andrew McCarthy. Obwohl das Design einzigartig ist, scrollt es endlos mit den gleichen Informationen immer und immer wieder. Da McCarthy Designer ist, ist es wahrscheinlich eine bewusste Entscheidung, um sich von der Masse abzuheben.

Und ein weiteres Beispiel von Sam Rosen, der auch immer wieder dieselben Inhalte wiederholt, obwohl diese Seite zum Anfang zurückkehrt, anstatt den gesamten Inhalt neu zu laden.

Fazit

Obwohl Long-Scroll-Websites nichts Neues sind, erreichen sie einen neuen Reifegrad. Designer verwenden sie nicht mehr nur als das nächste „große“ Ding und achten stattdessen darauf, wie sich das Muster auf die Benutzererfahrung auswirkt.

Das Befolgen von Best Practices beim Erstellen von Websites mit unendlichem Scrollen ermöglicht es Designern, eine UX zu erstellen, die Benutzer begeistert, anstatt sie zu frustrieren. Gleichzeitig können richtig implementierte Long-Scroll-Websites auch Marken dabei helfen, ihre Website-Ziele zu erreichen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Überzeugendes Design: Fortgeschrittene Psychologie effektiv nutzen
• Designpsychologie und die Neurowissenschaft von Awesome UX
• Erfahrung ist alles – Der ultimative UX-Leitfaden
• Der ultimative UX-Hook – Vorausschauendes, überzeugendes und emotionales Design in UX
• Die erprobten und wahren Gesetze von UX (mit Infografik)