Die Regeln für das Scrollen im Webdesign

WEBDESIGN, INTERNET / JUNI 2018 / 7 MINUTEN LESEN

Was einst ein Tabu im Website-Design war, hat sich in den letzten Jahren zu einer der beliebtesten Techniken entwickelt, da die Nutzer eine neue Liebe und Wertschätzung für Seiten finden, auf denen das Scrollen eine Notwendigkeit ist. Das Scrolling, das seine alten Stigmata abstösst, erfindet sich als zentrales Interaktionsdesign-Element neu – das bedeutet auch, dass die Designer die neuen Regeln lernen müssen.

In diesem Beitrag werden wir die Wiedergeburt des Bildlaufs untersuchen, einige Vor- und Nachteile diskutieren und einige kurze Tipps für die Technik auflisten.

Warum das Scrollen wiedergeboren wird

Die einfache Antwort lautet: mobile Geräte.

Seitdem mobile Benutzer die Desktop-Benutzer übertroffen haben, haben sich die UI-Designer überall entsprechend angepasst. Und bei so vielen Benutzern auf kleineren Bildschirmen wird das Scrollen immer notwendiger: je kleiner der Bildschirm, desto länger der Bildlauf.

Aber es gibt noch andere Faktoren. Der Zugang zum Hochgeschwindigkeits-Internet ist an mehr Orten verfügbar, so dass der Bildlauf ein schnellerer Weg ist, um auf Informationen zuzugreifen, als das Klicken von Seite zu Seite. Die wachsende Stärke von Social-Media-Sites nährt auch die Technik: Das Scrollen kommt natürlich der Fülle der nutzergenerierten Inhalte entgegen.

Wie im Leitfaden Internet-Trends 2015 & 2016 erläutert, hat sich der lange Bildlauf direkt neben dem kartenbasierten Design entwickelt. Wenn man diese Techniken kombiniert, können Sie den Nutzern einen endlosen Strom von mundgerechten Inhalten bieten und das ist perfekt für die Web- und insbesondere Mobilerlebnisse.

Ausserdem wird die oben erwähnte Doktrin, die das Scrollen behindert hat, jetzt als der Mythos anerkannt, der sie wirklich ist. Die Wahrheit ist, laut aktuellen Studien, dass es den Benutzern wirklich nichts ausmacht, zu blättern. Die Praxis, alles oberhalb der Falte zu klemmen, verliert an Bedeutung, wenn man alles entlang einer gleichmäßigen und glatten Schriftrolle auf Abstand hält.

Ein Teil des Mythos wurde natürlich auch deshalb populär, weil das Scrollen erst nach den Fortschritten von Javascript und CSS ernsthaft als absichtliches Designmuster in Betracht gezogen wurde. Davor war es viel schwieriger, das Scrollen durch visuelle Erzählung „sexy“ zu machen. Wie Sie sich vielleicht vorstellen können, ist eine lange Seite voller Text (unterbrochen durch gelegentliche Bilder) kein sehr ansprechendes UI-Layout.

Aber sobald man sich dem langen Bildlauf als Leinwand für die Illustration von Anfang, Mitte und Ende nähert (durch Grafiken, Animationen, Symbole usw.), wird einem klar, dass er die Aufmerksamkeit der Benutzer wie ein Film fesselt.

Tatsächlich zeichnen sich einige hybride Muster als neuester Trend beim Scrollen ab. Zum Beispiel erzeugt der „Fixed-in-Place-Scroll“, den viele in eigenen UX-Seiten verwenden, die gleiche interaktive Erfahrung wie eine traditionelle Long-Scroll-Site, ohne die Site vertikal zu strecken.

Ist Scrollen das Richtige für Sie?

Bei jeder Designtechnik und jedem Werkzeug gibt es diejenigen, die das Konzept lieben, und diejenigen, die es hassen. In den meisten Fällen ist keine der beiden Seiten an sich richtig oder falsch; deshalb ist es wichtig, alle Überlegungen abzuwägen, bevor man ein solches Projekt in Angriff nimmt.

Vorteile des Scrollings:

• Fördert die Interaktion – Durch die ständige Stimulation von sich verändernden Elementen kann es eine interessante Erzählmethode sein, die die Interaktion der Benutzer fördert – insbesondere mit geschmackvoll ausgeführtem Parallaxen-Scrolling.
• Schneller – Langes Scrollen ist schneller als das Klicken durch einen komplexen Navigationspfad und verlangsamt oder beschränkt nicht die Benutzererfahrung. Wie in Interaction Design Best Practices beschrieben, ist die Wahrnehmung der Zeit oft wichtiger als das tatsächliche Vergehen der Zeit.
• Ermutigt die Benutzer – Die Benutzerfreundlichkeit fördert die Interaktivität und erhöht die Zeit vor Ort. Dies gilt insbesondere für Websites mit unendlichem Bildlauf, auf denen Sie den Benutzern helfen können, relevante Inhalte zu entdecken, an die sie vielleicht gar nicht gedacht haben.
  Reaktionsfähiges Design – Das Seitendesign kann bei Geräten mit unterschiedlichen Bildschirmgrössen und -funktionen kompliziert werden, aber das Scrollen hilft, die Unterschiede zu vereinfachen.
• Gestensteuerung – Der Bildlauf scheint organisch mit der Berührung verbunden zu sein, da das Abwärtsstreichen viel einfacher ist als wiederholtes Tippen auf verschiedene Bereiche des Bildschirms. Benutzer (insbesondere mobile) akzeptieren dies im Allgemeinen als eine Möglichkeit, Informationen anzuzeigen.
• Reizvolles Design – Wenige Klicks können zu schnelleren Interaktionen führen, was zu einem app- oder spielähnlichen Benutzererlebnis führt.

Nachteile des Scrollens:

• Hartnäckige Benutzer – Egal warum, manche Benutzer wehren sich immer gegen Änderungen. Dennoch ist die Technik inzwischen so weit verbreitet (insbesondere bei mobilen Erfahrungen), dass man mit Sicherheit sagen kann, dass die Mehrheit der Benutzer an die Technik gewöhnt ist.
• SEO-Nachteile – Nur eine Seite zu haben, kann sich negativ auf die SEO der Website auswirken. (Um zu erfahren, wie diese SEO-Nachteile minimiert werden können, werden wir demnächst einen informativen Artikel für Parallaxen-Scroll und unendliches Scrollen publizieren).
• Verwirrend – Die Trennung zwischen Scrolling und Inhalt kann die Benutzer verwirrt oder unzusammenhängend machen.
• Navigationsschwierigkeiten – Es kann umständlich sein, zu früheren Inhalten auf der Seite „zurückzugehen“. Um dem entgegenzuwirken, könnten Sie eine persistente Top-Navigation erstellen, bei der jedes Element in einem Seitenabschnitt verankert ist.
• Website-Geschwindigkeit – Grosse Inhaltsteile wie Video- oder Bildergalerien können die Site-Geschwindigkeit verlangsamen, insbesondere bei Parallaxen-Scrolling-Sites, die auf Javascript und jQuery angewiesen sind (in diesem Tutorial erfahren Sie, wie Sie Parallaxen-Sites ohne langsame Site-Geschwindigkeit erstellen können).
• Keine Fusszeilen – Bei Sites mit unendlichem Scrolling empfehlen wir eine schlanke, „klebrige“ Fusszeile, damit Sie die Navigationsfähigkeit nicht beeinträchtigen. Andernfalls könnten die Benutzer durch das Fehlen einer weiteren Navigation am unteren Rand der Seite verwirrt werden.

Abgesehen von den Vor- und Nachteilen ist das lange Scrollen eine Technik, die für einige Arten von Websites besser geeignet ist als für andere. Längere scrollende Websites und am besten geeignet für Inhalte und Designpläne, die:

• werden einen erheblichen Teil des mobilen Verkehrs (die meisten Nutzer) umfassen.
• häufige Aktualisierungen oder neue Inhalte (z.B. ein Blog) enthalten
• eine Menge Informationen in einer einzigartigen Weise zum Verständnis präsentiert haben (z.B. eine Infografik)
• enthalten keine Rich Media wegen der dadurch verursachten Belastung in Bezug auf die Ladezeiten

Social-Media-Sites mit konstanten und umfangreichen nutzergenerierten Inhalten kommen mit langem Scrollen gut zurecht (tatsächlich haben Facebook und Twitter vor Jahren zur Popularisierung dieser Technik beigetragen). Auf der anderen Seite tendieren zielorientierte Sites wie E-Commerce – die eine kohärente Navigation erfordern – eher zu konservativen Seitenlängen.

Der Mittelweg wäre eine Website der eine Hybridlösung verwendet: mehrere Seiten mit so genanntem „unendlichen“ Scrolling, die mit einem Aufruf von „Mehr zeigen“ enden.

Wie bei allen Webdesign-Trends sollten Sie keine längeren Bildlaufleisten verwenden, nur weil Sie gesehen haben, dass andere Websites dem Muster folgen. Stellen Sie sicher, dass Ihre Website die von uns besprochenen Kriterien erfüllt, sonst könnten Sie tatsächlich eine schlechtere Leistung erleben.

Beste Praktiken beim Scrollen

Langes Scrollen, Parallaxeneffekte und ähnliche Mechanismen sind noch relativ neu im Bereich des Designs (~4 Jahre) , aber noch immer haben einige rudimentäre Trial-and-Error-Verfahren einige grundlegende Best Practices hervorgebracht.

Zusammengefasst aus den Internet-Trends 2017 finden Sie hier einige alltägliche Tipps für die erfolgreiche Implementierung von langem Scrollen.

1. Scheuen Sie sich nicht davor, lange mit kurzen Bildläufen abzuwechseln. Lassen Sie den Inhalt die Länge des Bildlaufs bestimmen, nicht umgekehrt. Es ist völlig in Ordnung (und ziemlich populär), eine Homepage mit kurzem Scrolling und Landing Pages mit langem Scrolling (wie Produkte, Tour usw.) zu verwenden.
2. Ziehen Sie eine klebrige Navigation in Betracht, so dass die Benutzer immer schnell „zurück“ kommen oder von Element zu Element in der Rolle springen können.
3. Schlagen Sie das Scrollen mit Designelementen oder Werkzeugen vor, so dass jeder Benutzer schnell sehen kann, wie die Website funktioniert. Pfeile, animierte Schaltflächen oder ähnliche Werkzeuge für die Benutzeroberfläche sind unterhaltsame und einfache Möglichkeiten, um dem Benutzer zu helfen, zu bestimmen, was er als nächstes tun soll. Einige Websites enthalten sogar eine kleine Schaltfläche mit Anweisungen wie „Scroll für mehr“ oder „Mehr“, um die Navigation auf einer Website mit unkonventionellen Techniken zu erleichtern.
4. Unterscheiden Sie klar zwischen scrollenden Klicks oder Taps und anderen Aufrufen zum Handeln, damit Ihre Website die gewünschte Interaktion erhält.
5. Recherchieren Sie etwas und schauen Sie sich an, wie die Benutzer mit dem Scrolling interagieren. In Google Analytics können Sie zum Beispiel die Registerkarte „In Page Analytics“ öffnen, um zu sehen, wie viele Personen unter dem Falz klicken. Auf der Grundlage der Daten können Sie dann das Design nach Bedarf anpassen.
6. Übertreiben Sie es nicht. Langes Scrollen bedeutet nicht 500 Seiten mit fortlaufendem Inhalt – ein langer Bildlauf kann auch einfach sein. Erzählen Sie Ihre Geschichte und hören Sie dann auf. Erzwingen Sie es nicht.
7. Konzentrieren Sie sich auf Ihre Benutzerziele und akzeptieren Sie, dass selbst unendlich lange Scroll-Sites nicht wirklich endlos sind. Wenn Sie länger scrollende Seiten erstellen, müssen Sie verstehen, dass die Benutzer noch einen Sinn für Orientierung (ihren aktuellen Standort) und Navigation (andere mögliche Wege) benötigen.
8. Fügen Sie visuelle Hinweise ein, die den Benutzern die Orientierung im Bildlauf erleichtern.

Das Scrollen kann ein zweischneidiges Schwert sein, halten Sie sich also an die empfohlene Verwendung, um zu vermeiden, dass es mehr Schaden als Nutzen anrichtet.

Seitenlose Designs der Zukunft

Lange Bildlaufseiten führen nirgendwo hin. Wir haben zwar ein Ebbe und Flut (bzw. eine Zunahme und Abnahme) der Bildschirmgrössen auf beliebten Geräten erlebt, aber in absehbarer Zukunft werden wir nur noch kleine Seiten haben. Und kleine Bildschirme erfordern mehr Bildlauf.

Tatsächlich hat der Übergang vom langen Scrollen zum „seitenlosen“ Design bereits begonnen, und einige Designer glauben sogar, dass dies die Zukunft des Webs ist. Da Websites weiterhin einige der Beschränkungen ablegen, wie Benutzer über Informationen denken und sie konsumieren, müssen Designer radikaler darüber nachdenken, wie man am besten Inhalte in verschiedenen Umgebungen erstellt.

Interaktionsdesign ist die Grundlage für das Design von Websites mit langen Bildläufen. Wenn die Benutzer die Schnittstelle mögen und sie intuitiv und unterhaltsam finden, dann wird ihnen die Länge des Scrollings nichts ausmachen (solange sie nicht schrecklich lang ist).

Sie müssen die Zeilen nicht immer kürzen – Sie könnten die Wartezeit einfach viel unterhaltsamer gestalten.