Horizontales Scrolling am PC – Eine gute Idee?!

Da geht´s lang

Da geht´s lang


Auf Tablets und Smartphones ist horizontales Scrolling längst etabliert – und auch in Windows 8 scrollt der Nutzer (zumindest teilweise) horizontal. Werden wir also künftig auch auf Websites am Desktop-PC von links nach rechts statt von oben nach unten scrollen? Haben Sie schon mal darüber nachgedacht, ob das auch was für Ihre Website wäre?

Warum Sie sich das gut überlegen sollten und was es zu beachten gilt, darum soll es in diesem Beitrag gehen.

Warum Sie sich das mit dem horizontalen Scrolling gut überlegen sollten…

Zugegeben: Horizontales Scrolling ist ein Trend. Gerade im Zusammenhang mit responsive Webdesign erscheint es fast schon einleuchtend, auch am „stationären“ Bildschirm horizontal zu scrollen. Aber: Es gibt gute Gründe, noch einmal genau zu reflektieren, ob horizontales Scrolling für Ihre Anwendung wirklich sinnvoll ist. Allen voran die Tatsache, dass selbst in den Android- und iOS-Guidelines von horizontalem Scrolling abgeraten wird.

Schaut man sich Theorien zum Thema Informationsverarbeitung an, wird auch deutlich, warum das so ist.

Mentale Modelle sind träge

Ich möchte mit einer Plattitüde eröffnen, die da heißt: Der Mensch ist ein Gewohnheitstier. Wer jahrelang gelernt hat, dass man Websites von oben nach unten scrollt, der wird sich nicht so schnell daran gewöhnen, dass er von links nach rechts scrollen soll. Schuld daran sind so genannte „Mentale Modelle“, die Menschen in Bezug auf bestimmte Systeme (zum Beispiel für „Interaktion mit einer Website am PC“) entwickeln. Einfach gesagt: Nutzer bilden ein mentales Modell einer „übergeordneten Website“, in dem sie Annahmen darüber speichern, wie eine solche Seite funktioniert. Dies ist einfacher und weniger komplex, als zu jeder einzelnen Website, die man besucht, ein neues mentales Modell zu entwickeln.

Zwar sind diese Modelle von Mensch zu Mensch unterschiedlich – allerdings ist davon auszugehen, dass der Großteil der Menschen doch eher an vertikales Scrolling am PC gewohnt ist und diese Info auch genauso in seinem mentalen Modell „gespeichert“ hat. Man kann jetzt argumentieren, dass sich die mentalen Modelle, die die Nutzer von der Interaktion mit einer Website haben, ändern werden, je mehr sich horizontales Scrolling in anderen Bereichen durchsetzt. Und das ist korrekt, denn natürlich verändern sich die mentalen Modelle eines jeden Menschen kontinuierlich auf Basis seiner Erfahrungen. Aber:

„Mentale Modelle der Nutzer zeichnen sich durch große Trägheit aus: Wenn die Leute etwas gut kennen, neigen sie dazu, daran festzuhalten, auch wenn es ihnen nicht weiterhilft.“ (Quelle: http://www.usability.ch/bn/news/alertbox/detail/mentale-modelle.html)

Was hat das mit horizontalem Scrolling zu tun?: Horizontales Scrolling am PC wird die meisten Nutzer aktuell wohl erst einmal verwirren und verunsichern, da es nicht mit ihrem mentalen Modell übereinstimmt. Im Zweifel werden sie auch gar nicht erkennen, dass es rechts vom sichtbaren Bereich noch Inhalte gibt, da sie gar nicht auf die Idee kommen, horizontal zu scrollen.

Verzichten Sie auf horizontales Scrolling, wenn: … Ihre Zielgruppe wenig mobil unterwegs ist und generell eher wenig internetaffin ist.

Wenn es unbedingt „horizontales Scrollen“ sein muss: Machen Sie Ihre Nutzer explizit darauf aufmerksam, dass sie nach rechts scrollen müssen. Sonst wird das nämlich kaum jemand merken und im Zweifel wichtige Inhalte übersehen.

  • Verwenden Sie zum Beispiel deutlich sichtbare Pfeile und schneiden Sie Inhalte rechts so an, dass klar wird, dass dort noch weiterer Content zu finden ist.
  • Deuten Sie unterhalb einen Scrollbalkens an – dies ist zwar nicht so „hübsch“, signalisiert dem Nutzer aber auch, dass rechts noch etwas kommt.


Ein großer roter Pfeil in der Mitte der Seite gibt die Scrollrichtung vor. Rechts befinden sich zum weitere Inhalte, die leicht „angeschnitten“ sind. (Quelle: http://deanoakley.com/)

Ein großer roter Pfeil in der Mitte der Seite gibt die Scrollrichtung vor. Rechts befinden sich zum weitere Inhalte, die leicht „angeschnitten“ sind. (Quelle: http://deanoakley.com/)


Die Speicherkapazität unseres Kurzzeitgedächtnisses ist begrenzt

Das sollte jeder schon einmal bei sich selbst beobachtet haben. Theorien dazu, wie viele Dinge der Mensch gleichzeitig in seinem Kurzzeitgedächtnis speichern kann, gibt es einige. Sehr bekannt ist zum Beispiel die Theorie von Miller, die besagt, dass Menschen maximal 7+/-2 Elemente in ihren Kurzzeitgedächtnis speichern können.

Was hat das mit horizontalem Scrolling zu tun? Gerade wenn sich auf einer Seite viele Informationen befinden, verliert der Nutzer schnell den Überblick darüber, wo er welche Inhalte gesehen hat. Im Normalfall können Sie bei horizontaler Anordnung weniger Content pro Seite platzieren (da der Header immer zu sehen ist). Ergo verteilt sich der Content auf eine sehr lange „Strecke“ – der Nutzer muss also schlimmstenfalls mitzählen, wie oft er zu bestimmten relevanten Inhalten vor- oder zurück klicken muss. Die schöne, weiße Bluse – Wie weit muss ich jetzt dahin zurück?, Was habe ich nochmal in das Formularfeld vor drei Klicks eingetragen?

Noch schlimmer wird es, wenn nicht einmal mehr ein Navigationsmenü angezeigt wird, sondern die Nutzer nur noch von der Startseite aus in verschiedene Unterseiten einsteigen können. Zusammenhänge zwischen einzelnen Themen und Rubriken können auf diese Weise schlecht bis gar nicht hergestellt werden – es sei denn, der Nutzer macht sich nebenbei Notizen.

Verzichten Sie auf horizontales Scrolling, wenn:

  • …Ihre Website viele komplexe und zusammenhängende Informationen beinhaltet und einzelne Unterseiten daher sehr lang werden.
  • … sie auf Ihrer Website ein sehr umfangreiches Sortiment anbieten
  • … es viele und lange Formulare auf der Seite gibt.

Wenn es unbedingt „horizontales Scrollen“ sein muss: Ermöglichen Sie es den Nutzern, schneller zu bestimmten Inhalten zurückzukehren und bieten Sie Anhaltspunkte, an denen sie sich orientieren können.

  • In Online-Shops kann dies z. B. durch eine Merkfunktion ermöglicht werden, auf der interessante Produkte gespeichert werden können.
  • Bei Informationswebsites ist eine Funktion sinnvoll, mit der man z. B. Markierungen setzen kann, zu denen man schnell zurück springen kann. Denn auch z. B. in eReadern wie dem Kindle habe ich die Option, mir Markierungen zu setzen, um Inhalte schnell wiederzufinden.
  • Auch hier ist es sinnvoll, eine Art horizontalen Balken oder Fortschrittsanzeiger anzudeuten, damit die Nutzer wissen, an welchem Punkt sie sich zumindest ungefähr befinden und ihnen so einen besseren Überblick zu bieten.
  • Zeigen Sie in jedem Fall (!) rechts oder oben eine feststehende Navigation an, mit der der Nutzer schnell in andere Bereiche wechseln kann. Bieten Sie zudem auch die Breadcrumbs an, damit Nutzer immer wissen, wo sie sich gerade befinden.


Horizontales Scrolling auf gucci.com: Die Navigation oberhalb und der Footer stehen fest und bieten Orientierung auf der Seite – der Mittelteil ist horizontal scrollbar.  Nachteil: Die Seite ist dadurch sehr hoch und kann in den meisten Auflösungen daher auch vertikal gescrollt werden…

Horizontales Scrolling auf gucci.com: Die Navigation oberhalb und der Footer stehen fest und bieten Orientierung auf der Seite – der Mittelteil ist horizontal scrollbar. Nachteil: Die Seite ist dadurch sehr hoch und kann in den meisten Auflösungen daher auch vertikal gescrollt werden…


Es gibt gute Gründe, auf horizontales Scrolling zu verzichten

Die Interaktion mit mobilen Anwendungen und neuartigen Betriebssystemen kann ihren Teil dazu beitragen, dass horizontales Scrolling am PC vielleicht irgendwann „Routine“ ist. Allerdings glaube ich eher weniger daran, denn

  • … anders als mentale Modelle kann sich die Speicherkapazität des Kurzzeitgedächtnisses nicht verändern (außer durch intensives Gedächtnistraining natürlich). Und spätestens hier werden viele Konzepte an ihre Grenzen stoßen, wenn es darum geht, den Nutzer trotz horizontaler Navigation noch einen guten Überblick über den Inhalt der Seite zu geben.
  • … die Handhabung ist einfach am PC eine völlig andere. Interaktionen, die per Touch gut bedienbar sind, führen in der Interaktion mit Maus oder Tastatur doch noch oft zu Problemen. Hier werden zumindest spezielle Eingabegeräte erforderlich sein, um den Nutzern die Interaktion zu erleichtern. Natürlich gibt es Bildschirme mit Touch-Bedienung – ich sehe mich persönlich aber nicht unbedingt 8 h lang mit ausgestreckten Armen an einem Monitor hantieren…

Dennoch kann ich mir bestimmte Inhalte vorstellen, für die horizontales Scrolling (unter Beachtung der o.g. Inhalte) funktionieren kann:

  • Online-Shops mit eher kleinem Sortiment und vielen „inspirativen“ Einstiegen (die Idee einer horizontalen Produktliste kann ich mir auch am Desktop-PC gut vorstellen, sofern es nicht zu viele Produkte werden).
  • Websites mit eher geringem Informationsumfang, der sich z. B. auf nur 4-5 Seiten Content erstreckt.

In jedem Fall ist hier vor dem Live-Gang ein Testing mit Nutzern erforderlich – idealerweise sowohl auf mobilen Endgeräten als auch am Desktop-PC. Nur so kann erfasst werden, ob und wie die Zielgruppe mit horizontalem Scrolling zurechtkommt.

Zum Weiterlesen…

Eine Sammlung horizontal scrollender Websites (übrigens vorwiegend Seiten, die vom Umfang her überschaubar sind):

Weitere Diskussionen und Artikel zum Thema:

Wie sehen Ihre Meinungen und Erfahrungen zum Thema horizontales Scrolling aus? Ich freue mich auf einen spannenden Austausch!

4 Gedanken zu „Horizontales Scrolling am PC – Eine gute Idee?!

  1. Pingback: 10% zahlen bei Starbucks per Handy: Meilenstein für Mobile Payment [5 Lesetipps] | Handelskraft – Das E-Commerce und Social-Commerce-Blog

  2. Pingback: Top-Themen der letzten 30 Tage | Usabilityblog.de

  3. Radan

    Naja, es gibt bestimmt einige Seiten auf denen horizontales Scrolling sehr gut kommen könnte: für die eigene Visitenkarte im Netz bspw., oder auch bestimmte Blogs. Im Grunde gibt es das ja schon in den meisten Shopseiten eingebaut, nur eben als kleines Fenster mit den Artikeln die sich andere User angeschaut haben, etc..

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.