Vorsicht vor horizontalem Scrollen und dem Nachahmen von Swiping auf dem Desktop

Auch jetzt, wo mehr Webseiten das Swiping nachahmen und die horizontale Bildlaufleiste in Desktop-Designs übernehmen, zögern Anwender, sich seitlich durch Inhalte zu bewegen.

 

by Katie Sherwin (deutsche Übersetzung) - 27.04.2014

 

Wir wissen schon seit Jahren, dass horizontales Scrollen für Nutzer von den Desktop-PCs anstrengend ist. Trotz der weiten Verbreitung von mobilen Geräten, auf denen Touch-Gesten verwendet werden, um zu Inhalten zu swipen, schätzen Nutzer das horizontale Scrolling auf Desktop-Websites nicht. Dieser Artikel handelt von den inhärenten Problemen des vom Touchscreen inspirierten horizontalen Scrollens. Er bietet einige Alternativen und Vorschläge wie man Nutzern helfen kann, sich seitlich durch Inhalte zu bewegen. Es ist klar, dass Sie ohne Touchscreen nicht wirklich swipen können. Wir verwenden deshalb "swipe" in Anführungszeichen, um auf die Bewegung auf dem Desktop zu verweisen.

Die Attraktivität des horizontalen Scrollens

Der dominierende Standard für die Bewegung durch lange Seiten mit Inhalten auf Desktop-Seiten ist das vertikale Scrollen. Die herkömmliche Maus und das Scrollrad macht es sehr einfach, nach oben und unten zu scrollen.

Websites, die absichtlich mit dieser Konvention brechen und die Links-Rechts-Bewegung bevorzugen, tun das häufig aus einem der folgenden Gründe:

• Einheitlichkeit auf allen Geräten. Unsere Forschung zu Mobilgeräte hat ergeben, dass das horizontale Scrollen üblich ist, und die Anwender sich dieser Geste auf Telefon- und Tablet-Touchscreens wohlfühlen. Responsive Websites oder sogenannte "Mobile-First" Sites verwenden das horizontale "Swipen" gerne auf allen Geräten. Auch auf Desktops, weil das gleiche Design auf allen Geräten zu haben billiger zu erstellen ist und angeblich eine konsistentere Erfahrung bietet.
  Da horizontales Scrollen auf Desktops weniger verbreitet ist, haben Nutzer oft keine Ahnung, dass sie die Inhalte auf den grossen Bildschirmen durch "swipen" entdecken können. Da Menschen mit mobilen und Desktop-Geräten anders interagieren, kann deshalb dieser Vereinheitlichungs-Ansatz nach hinten losgehen. Der entscheidende Punkt ist, dass Nutzer am ehesten Konsistenz in ihrem Nutzererlebnis wünschen, während sie auf ihrem aktuellen Gerät zwischen Websites wechseln.
  Es ist weniger wahrscheinlich, dass sie sich an die exakten Interaktionstechniken erinnern, die auf einem anderen Gerät verwendet wurden, mit dem sie die Site vor einiger Zeit besucht haben.
• Stöbern durch unwichtige Inhalte. Nicht alle Inhalte sind von entscheidender Bedeutung. Für sekundäre Informationen, zum Beispiel Bilder in einer Fotogalerie, ermöglicht das horizontale Scrollen den Nutzern, ein kleines Beispiel der Inhalte zu sehen, und bietet ihnen die Möglichkeit, schnell zu "swipen" oder zu klicken, um mehr zu erfahren. Bei einigen Inhalten ist es okay, dass die Kunden keinen ganzen Filmstreifen blättern wollen. Stellen Sie von Ihrer Seite her einfach sicher, dass Sie keine wichtigen Inhalte hinter einer horizontalen Bildlaufliste verstecken, weil es dann nicht jeder finden wird.
• Vertikal Platz auf dem Bildschirm sparen. Statt den gesamten Inhalt auf einmal auf einer sehr langen Seite anzuzeigen, führen horizontale Layouts die Nutzer zu kleineren Informationsstückchen. Das Layout ist flexibel und erweiterbar, weil Inhalte sowohl als auch horizontal angezeigt werden können.
  
  Hulu.com: Filmstreifen nach Kategorie werden gestapelt, also können die Nutzer Optionen innerhalb einer Kategorie sehen, indem sie zur Seite scrollen, oder sie können nach unten scrollen, um verschiedene Kategorien anzuzeigen. Diese Nutzung beider Dimensionen hilft den Nutzern dabei, weil sie sich eine Vielzahl von Optionen ansehen können, ohne, dass sie verschiedene Kategorieseiten besuchen müssten.
• Ein unverwechselbares Design präsentieren. Viele Seiten, insbesondere diejenigen von Künstlern und digitalen Agenturen, nutzen den horizontalen Bildlauf auf ihrer Seite, um herauszustechen und einen Einblick in ihre Design-Fähigkeiten zu geben. Für Mainstream-Seiten ist die Idee "anders zu sein", nur um des "anders sein"-Willen ein schreckliches Design-Argument.

Die Risiken des horizontalen Scrollens auf dem Desktop

Zwar ist das horizontale Scrollen in einigen Situationen akzeptabel, aber es sollte mit Vorsicht angewandt werden. Seien Sie sich bewusst: Horizontales Scrollen auf dem Desktop ist eine der wenigen Interaktionen, die konsequent negative Reaktionen der Nutzer hervorrufen.

Nur als Anekdote: die Verachtung ist so weit verbreitet, dass ich sie gerne als Illustration dafür verwende, was Nutzerfreundlichkeit ist, wenn Leute sich damit nicht auskennen. Ich frage sie, ob sie sich eine Website mit horizontalem Scrollen vorstellen können. Normalerweise stöhnen sie dann und sagen, sie hassen es, und dann erkläre ich ihnen, wie wir diese Dinge sehen und Methoden finden, sie besser zu machen. Normalerweise antworten sie etwas in der Art wie: "Danke, ich wünschte, es gäbe mehr von Euch."

Beachten Sie, dass auch wenn "swiping" auf dem Desktop nicht das gleiche Mass an negativen Reaktionen hervorruft wie die traditionelle horizontale Scrollbar, die Risiken dennoch ähnlich sind. Sehen wir uns 3 Hauptgründe dafür an, warum horizontales Scrollen und "swiping" auf dem Desktop problematisch sind.

1. Die traditionelle horizontale Scrollbar erfordert eine konstante Aufmerksamkeit und eine grössere körperliche Anstrengung, um das Scrollen zu halten.

Die meisten Leute nutzen den Scrollbalken um zu blättern und nicht die Pfeile auf der Bildlaufleiste. Dies ist insofern schwierig, weil es bei einem so dünnen Bereich eine sorgfältige Steuerung des Zeigegerätes (Pointer) erfordert.

(Das ist ein Beispiel für das, was wir im Englischen als Steering Law bezeichnen. Es besagt, dass die Zeit, die ein Nutzer benötigt, um mit einem Steuerwerkzeug durch einen Tunnel zu lenken, von der Länge und der Breite des Tunnels abhängt. Je länger und schmaler der Tunnel, desto mehr Zeit brauchen die Nutzer, um den Zeiger von einem Ende zum anderen zu bewegen.) Das Steering Law, das von Fitts' Gesetz abgeleitet wurde, behandeln wir in unserem Kurs zur Interaktion von Mensch und Computer. Daher bringt eine Bildlaufleiste auf dem Desktop hohe Interaktionskosten (engl.) mit sich und verlangsamt die Interaktion. In einer aktuellen Anwendungsstudie war ein Teilnehmer frustriert durch das seitliche Scrollen durch Produktkataloge und beschwerte sich: "Es dauert ewig, da durchzublättern."

2. Nutzer ignorieren ggf. Inhalte, die nur durch horizontales Scrollen oder "swipen" zugänglich sind, weil sie dort keine Inhalte erwarten.

Unsere Studie hat gezeigt, dass selbst klare Icons wie Pfeile häufig unbemerkt bleiben. Leute sind es gewohnt vertikal zu scrollen, um an zusätzliche Inhalte zu gelangen. Aber sie erwarten nicht, seitwärts zu scrollen. Das horizontale Scrollen widerspricht ihrem mentalen Modell einer Website.

Apple.com: Diese Eyetracking- Heatmap zeigt, wie ein Nutzer sich einen Filmstreifen mit Produktbildern ansieht, aber den Pfeilen keine Beachtung schenkt. Deswegen sieht er die anderen Produkte im Rest des Filmstreifens gar nicht.

3. Selbst offensichtliche Hinweise für den horizontalen Bildlauf bieten nur wenig Vorgeschmack.

Auch wenn Leute Hinweise auf das horizontale Scrollen bemerken, wollen sie vielleicht trotzdem nicht Inhalte laden, die sie nicht voraussagen können. Hinter einem horizontalen Bildlauf versteckter Inhalt ist im Nachteil, weil selbst markante visuelle Cues nicht genügend Hinweise auf den Inhalt liefern: Nutzer können kaum erraten, welche Informationen sie erhalten wenn sie auf einen Pfeil klicken oder horizontal scrollen. Bei Implementierungen, wo man über die gesamte Seite "swipen" muss, um neue Inhalte zu finden, ist das Risiko einer Enttäuschung sogar noch höher: Ggf. muss der Nutzer lange warten, bis die Seite geladen ist, nur um dann festzustellen, dass die neue Seite für seine Bedürfnisse irrelevant ist.

USAToday.com: Nutzer ignorieren die Pfeile auf den Seiten der Artikelseiten, weil nicht klar ist, was sie erfahren würden, wenn sie klicken. Als die Nutzer speziell nach den Pfeilen gefragt werden, sagte einer: "Ich würde die nicht benutzen. Ich will lesen, was ich lesen will."

Empfehlungen für die Implementierung von horizontalem Scrollen oder "Swipen" auf dem Desktop

Wenn Sie in Erwägung ziehen, die "Swipe"-Bewegung nachzuahmen oder auf Ihrer Desktop-Website horizontal zu scrollen, dann folgen Sie diesen Empfehlungen, um es Ihren Nutzern zu ermöglichen, Ihre Inhalte zu bemerken und auf sie zuzugreifen.

1. Machen Sie das "Swipen" nicht zur primären Navigation auf Ihrer Website

Zwingen Sie Ihre Nutzer nicht, durch Ihre Inhalte zu "swipen": Einige werden das tun, andere nicht. Erlauben Sie alternative Navigationswege: Geben Sie den Nutzern auch die Möglichkeit, auch mit Menüs zu navigieren. Menüs sagen den Nutzern, was auf Ihrer Website ist, und helfen ihnen dabei, die Informationen zu finden, die sie benötigen. Auf diese Informationen können die Nutzer sich verlassen, um Ihre Seite weiter zu erkunden oder sich zwischen den Kategorien zu bewegen. Ohne eine globale Navigation (engl.) ist es schwieriger für die Nutzer, sich zu bewegen und weitere Inhalte zu entdecken.

Dennys.com: Dieses Design bietet eine deutlich sichtbare globale Navigation zusätzlich zu den Pfeilen, mit denen man durch den Content navigieren kann. Beim Test dieser Website hat ein Nutzer nie die Pfeile verwendet, um zwischen den Seiten zu streichen. Stattdessen hat er sich ausschliesslich auf die globale Navigation verlassen und konnte alle Funktionen erfolgreich nutzen. Beachten Sie bitte auch, dass die partielle Sichtbarkeit von Inhalten auf einer der beiden Seiten des Hauptfensters die Irritationen reduziert, wenn die Inhalte in den Fokus rücken.

2. Lassen Sie die Nutzer nicht raten, wie viele Inhalte vielleicht noch da sein könnten

Nutzen Sie eine Bildlaufleiste oder eine Paginierung, um zu zeigen, wie viel Inhalt noch kommt. Am besten ist es immer, den Nutzern zu zeigen, wo auf Ihrer Website sie sich befinden, damit sie sich besser orientieren können. Sagen Sie den Leuten, wie viel noch übrig ist, damit sie sich entscheiden können, wie weit sie noch lesen wollen. Oder, im Falle einer Schleife, wollen die Nutzer wissen, wann sie wieder zurück am Anfang sind.

Amazon.com: Seitennummern und ein Link zurück zum Beginn des Filmstreifens bieten einen nützlichen Kontext, um zu erfahren, wie viele Optionen noch übrig sind, und, wie man schnell zum Anfang zurück kommt.

3. Schaffen Sie deutlich sichtbare Signale für horizontales Swipen

Lassen Sie Ihre Nutzer auf der Site mittels Klick und mittels Tastatur vorankommen. Wenn Pfeile nur "on hover" sichtbar werden (wie im Netflix Beispiel) kann es sein, dass die Nutzer nicht mal merken, dass noch mehr Inhalte verfügbar sind. Wenn die Pfeile nur schwebend sichtbar sind (wie im Beispiel von Netflix unten), dann werden die Leute vielleicht gar nicht erkennen, dass es noch mehr Inhalte gibt. Sowohl für einzelne Seiten als auch für Karussells sollten Sie gut sichtbare Zielbereiche gestalten, auf die die Leute klicken können, um zu neuen Inhalten weiterzukommen.

Netflix.com: Im normalen Zustand gibt es keine visuellen Hinweise, die anzeigen, dass noch weitere Inhalte verfügbar sind (oben). Die Pfeile erscheinen nur, wenn man darauf zeigt (unten). Um mehr Inhalte innerhalb einer Kategorie zu sehen, müssen Nutzer den Mauszeiger auf den Pfeil lenken. Wenn sie das machen, beginnt der Filmstreifen, sich zu bewegen. Wenn die Nutzer mehr sehen wollen, müssen sie darauf achten, ihre Maus nicht vom Pfeilbereich wegzubewegen. Diese Interaktion kostet nicht nur viel Mühe und anhaltende Aufmerksamkeit, sondern ist auch langsamer und kann eher dazu führen, dass einem gefühlt schwindligt wird und man sich ärgert, statt sich zu freuen. Zu klicken, um auf das ganze Set zugreifen zu können, würde wesentlich schneller gehen.

Fazit

Auf dem Desktop horizontal zu scrollen und zu "swipen", ist schwieriger als auf Touchscreen Tablets und mobilen Geräten. Das ist nur ein weiteres Beispiel dafür, warum es wichtig ist, zu verstehen, dass die Leute mobile Geräte, Tablets und Desktops unterschiedlich nutzen, und warum es nützlich ist, das Design für verschiedene Zwecke zu optimieren. Vermeiden Sie es, Konventionen zu brechen, nur um sich abzuheben oder die Herausforderung einer Entwicklung für mehrere Plattformen zu umgehen. Evaluieren Sie stattdessen, ob horizontales Scrollen sich für Ihre Nutzer eignet oder nicht, damit Sie sicher sein können, dass Ihr Design ihre Experience verbessert, anstatt sie zu verschlechtern.

Erfahren Sie mehr über den horizontalen Bildlauf, Karussells und das Filmstreifen-Design sowie Möglichkeiten, diese Optionen nutzbar zu machen, in unserem Kurs für Websitendesign.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.