Die Illusion der Vollständigkeit: Was damit gemeint ist und wie man sie vermeiden kann.

by Kim Flaherty (deutsche Übersetzung) – 17. Januar 2016

Sich eine Website anzusehen, ist wie das Betrachten einer Landschaft durch ein Fernglas. Ein kleiner Teil der Landschaft befindet sich in Ihrem direkten Sichtfeld, Sie müssen aber nach oben und unten – bzw. von rechts nach links – schwenken, um alles zu sehen. Auf einer Website müssen Nutzer auf ähnliche Weise nach oben und unten bzw. von rechts nach links scrollen oder swipen, um alle verfügbaren Inhalte zu sehen.

Wenn wir uns eine Landschaft durch ein Fernglas ansehen, wissen wir, dass die Landschaft in alle Richtungen weitergeht – und dass wir unser Fernglas eventuell bewegen müssen, um den scheuen Weisskopfseeadler zu sehen. Im Internet müssen sich Nutzer aber auf das Design der Website verlassen, um herauszufinden, welche Verwendungsmöglichkeiten bestehen. Eine wichtige Information könnte unter dem Falz verborgen sein, wodurch sie Nutzer nie sehen, wenn sie nicht wissen, dass sie scrollen müssen (oder dazu motiviert werden). Es liegt an Webdesignern, Designs zu erstellen, die Menschen zu wertvollen Informationen führen, indem der Inhalt, der sich weiter unten bzw. rechts oder links befindet, klar kommuniziert wird.

Definition: Illusion der Vollständigkeit

Eine Illusion der Vollständigkeit tritt auf, wenn die am Bildschirm angezeigten Inhalte vollständig zu sein scheinen, obwohl ausserhalb des sichtbaren Bereichs weitere Informationen vorhanden sind. Der Begriff wurde von Bruce Tognazzini im Jahr 1998 erfunden. Die Illusion tritt auf, wenn das visuelle Design Nutzer nicht zu weiteren Inhalten, die sich ausserhalb des sichtbaren Bereichs befinden, führt. Zu glauben, dass eine Website komplett ist, obwohl das in Wirklichkeit nicht der Fall ist, ist ein ernstes Usability-Problem: Nutzer übersehen wichtige Informationen und werden daran gehindert, ihre Ziele zu erreichen.

Doch warum schreiben wir eigentlich schon wieder über dieses Usability-Problem, vor dem wir Designer bereits seit 18 Jahren warnen? Da Websites ständig denselben Fehler machen und wir im Rahmen unserer Nutzerforschung extrem häufig sehen, dass Nutzer in die Falle der Illusion der Vollständigkeit tappen. Daher möchten wir endgültig mit diesem Thema abschliessen und die Illusion der Vollständigkeit aus dem Internet verbannen, damit wir Ihnen im Jahr 2034 nicht wieder davon erzählen müssen.

Illusion der Vollständigkeit auf der vertikalen Achse

In der Anfangszeit des Internets scrollten Nutzer mit geringerer Wahrscheinlichkeit über den Falz hinaus. Seither gewöhnten sich Nutzer an das vertikale Scrollen. Doch nur weil Nutzer das Scrollen gelernt haben, können wir nicht erwarten, dass sie das ohne jeglichen visuellen Hinweis auch tun. Falls sie glauben, dass es keine weitere Informationen gibt, warum sollten sie dann scrollen?

Hier ist eine Liste der Designelemente, die oft das Ende des relevanten Inhalts kommunizieren und somit eine Illusion der Vollständigkeit schaffen:

• Grosse, fensterfüllende Bilder oder Videos. Der aktuelle Trend hin zu bildbasierten Designs hat zur Folge, dass viele Websiten grosse, auffällige Bilder oder Videos im oberen Bereich der Seite platzieren. Diese Vorgehensweise verschiebt wichtige Inhalte unter den Falz – ausserhalb des unmittelbaren Sichtfelds – und liefert keine zusätzlichen Hinweise, die Nutzer zum Scrollen motivieren.

Maple.com, ein Lieferservice in New York City präsentiert ein automatisch startendes Hero-Video, das den gesamten Platz am Bildschirm in Anspruch nimmt. Der Falz befindet sich auf allen Geräten unter dem Bild.

Im oben stehenden Beispiel lassen das Video und die starke Handlungsaufforderung die Seite komplett erscheinen, obwohl in Wirklichkeit alle Informationen über dieses Unternehmen im unteren Bereich des Bildschirms zu finden sind. Das Design schafft einen doppelten Boden und scheint das Ende der Website zu kommunizieren. Das Fehlen von Navigationselementen verstärkt diesen Eindruck.

In einer Usability-Studie baten wir Nutzer, diese Website zu besuchen und herauszufinden, welche Services das Unternehmen anbietet. Sechs von acht Nutzern bemerkten nicht, dass sie auf dieser Seite scrollen konnten. Da keine Links oder Handlungsaufforderungen sichtbar sind, klickten alle unsere Nutzer auf Get Started und sahen mehrere modale Fenster, in denen nach persönlichen Informationen gefragt wurde – nur um dann zu erfahren, dass der Service an ihrem Standort nicht verfügbar ist. 75% der Nutzer waren frustriert, da sie nicht nur Zeit und Mühe aufgewandt hatten, um ihre Daten auf der Website einzugeben, sondern nicht einmal herausfinden konnten, was dieses Unternehmen genau anbietet.

• Deutliche horizontale Linien. Die Illusion der Vollständigkeit kann überall auf der Website auftreten – nicht nur ganz oben (wie im oben stehenden Beispiel gezeigt). Ein Absatz, dem eine horizontale Linie in Seitenbreite folgt, schafft eine visuelle Barriere und hält Nutzer davon ab, weiter zu scrollen. Nutzer, die deutliche horizontale Lücken im Seiteninhalt sehen, könnten annehmen, dass es sich nicht nur um das Ende des Absatzes, sondern um das Ende der Seite handelt.

Virginamerica.com verwendet zwischen den Seitenbereichen horizontale Linien, deren Länge der Seitenbreite entspricht. Sie können fälschlicherweise das Ende des Inhalts kommunizieren.

• Grosse weisse Flächen zwischen Inhaltselementen. Wenn horizontale Zeilenzwischenräume zu gross sind oder der Inhalt den Container, in dem er sich befindet, nicht komplett ausfüllt, kann die grosse Lücke zwischen den Inhaltselementen das Ende einer Website signalisieren, während Nutzer nach unten scrollen. Warum sollte man weiterscrollen, wenn man sich keine weiteren Informationen mehr erwartet?

Urbanoutfitters.com. Die rot hinterlegten Blöcke repräsentieren Inhaltsbereiche. Grosse horizontale Lücken zwischen den Abschnitten lassen die Website komplett erscheinen, obwohl weiter unter zusätzliche Inhalte vorhanden sind.

• Unterbrechungen des Textflusses. Werbeanzeigen, interne Promo-Aktionen oder Social Media Buttons können Nutzern das Gefühl geben, das Ende der relevanten Inhalte der Website erreicht zu haben. Das Problem wird verstärkt, wenn eine Werbeanzeige so gross ist, dass die darunter befindlichen Inhalte nicht sichtbar sind – das ist vor allem auf mobilen Geräten mit kleinen Bildschirmen ein Problem. Wenn die Werbeanzeige an einem natürlichen Endpunkt im Textfluss platziert wird (z.B. am Ende eines Artikels), könnten Nutzer berechtigterweise annehmen, dass sich darunter keine weiteren interessanten Informationen mehr befinden (obwohl unter der Werbeanzeige zum Beispiel noch Kommentare zum Artikel oder weiterführende Inhalte zu finden wären).

Salon.com zeigt grosse Werbeanzeigen in der Mitte des Haupttextfelds an. Es ist nicht klar, dass der Artikel unter der Werbung weitergeht.

Die Illusion der Vollständigkeit auf der horizontalen Achse

Während Nutzer daran gewohnt sind, im Internet vertikal zu scrollen, erwarten sich nur sehr wenige, auf einer Desktop-Website horizontal scrollen (oder swipen) zu können. Sogar auf mobilen Geräten, auf denen die horizontale Wischgeste relativ häufig vorkommt, benötigen Nutzeroberflächen, die sich auf diese Gesten verlassen, starke Signifier, um dem Nutzer die Interaktionsrichtung zu kommunizieren.

Um in den Nachrichtenartikeln der Yahoo Digest iOS App stöbern zu können, müssen Nutzer wischen, um den nächsten Artikel aufzurufen. Diese Geste ähnelt dem Abheben der obersten Karte eines Kartenstapels, um die darunter befindliche Karte zu sehe (was der Grund dafür ist, dass dieses Interaktionsmuster „Kartenstapel“ genannt wird). In diesem Fall fehlen dem Bildschirm visuelle Ankündiger, die über die Möglichkeit des horizontalen Wischens informieren.

Auf Desktops wird die horizontale Navigation meistens mit Karussellen in Verbindung gebracht. Hinweise, die Nutzer darüber informieren, wie mit Karussellen interagiert und die restlichen Karussell-Frames aufgerufen werden können, sind ausschlaggebend.

Novartis.com. Punkte im unteren Bereich sind schlechte Karussell-Hinweise: sie sind unauffällig und die Navigationspfeile werden erst sichtbar, wenn der Mauszeiger darüber gehalten wird. Positiv ist, dass diese Website den Nutzer zum vertikalen Scrollen motiviert, da ein kleiner Teil des nächsten Bereichs (Corporate, Careers, News und Research) unter dem Karussell sichtbar ist.

Es kommt nicht sehr häufig vor, dass eine ganze Website horizontal designt wird und Nutzer einen horizontalen Scrollbalken verwenden müssen, um alle Inhalte zu sehen. Gelegentlich wählen Designer und kreative Unternehmen diesen Weg, um ihre kreativen Designfähigkeiten zu zeigen. Normalen Websites empfehlen wir aber nicht, sich auf das horizontale Scrollen zu verlassen. Der horizontale Scrollbalken ist umständlich, da ständige Aufmerksamkeit und körperliche Anstrengung notwendig sind, um den Mauszeiger entlang eines engen Korridors zu ziehen. Websites, die horizontales Scrollen voraussetzen, können dieselben visuellen Designfehler machen und dieselbe Illusion der Vollständigkeit schaffen, wie auf der vertikalen Achse.

Secondstory.com verwendet ein horizontales Layout. Es ist nicht sofort klar, dass zusätzliche Inhalte auf der rechten Seite des Hauptbildschirms zu finden sind. Nutzer müssen entweder den gelben Pfeil auf der rechten Seite finden, welchen sie sich nicht erwarten und welcher sich über einer bunten Grafik befindet, oder den unteren Scrollbalken mit der Maus vorsichtig nach rechts ziehen.

Stellen Sie sicher, dass Websites Fortsetzung vs. Vollständigkeit kommunizieren

• Vermeiden Sie bildschirmfüllende Inhalte. Wenn Sie grosse Banner, Karusselle oder Videos im oberen Bereich verwenden, stellen Sie sicher, dass zusätzliche Inhalte über dem Falz zu sehen sind, damit Nutzer motiviert werden, nach unten zu scrollen.
• Setzen Sie Linien in Kontrastfarben oder grosse weisse Lücken zwischen Inhalten bewusst ein. Diese Elemente können als Ende des relevanten Inhalts missverstanden werden.
• Behandeln Sie unterbrechende Inhalte mit Vorsicht. Falls Sie Inhalte mit einer Werbeanzeige oder Teilen-Buttons für soziale Medien unterbrechen müssen, kommunizieren Sie den Nutzern, dass darunter weitere Informationen zu finden sind.

Delish.com: Vor der Werbeanzeige im Artikel wird darauf hingewiesen, dass der Text unter der Anzeige weitergeht. (Allerdings in einer sehr hellen Schrift.)

• Setzen Sie deutliche Hinweise für horizontales Swipen ein. Wichtige Informationen gehören nicht in ein Karussell oder in andere Container, in denen horizontal gescrollt werden muss. Nutzer übersehen Navigationshinweise häufig, ausserdem ist der Information Scent dieser Hinweise zu schwach. Dadurch sind sich Menschen nicht sicher, was sie sich von den zusätzlichen Inhalten erwarten sollen. Wenn Sie ein Karussell verwenden, sollten Sie klar kommunizieren, dass weitere Informationen vorhanden sind:
  • Zeigen Sie Inhalte an, die über den Rand des Bildschirms hinausgehen.
  • Verwenden Sie eine Liste von Überschriften, um den Inhalt der verschiedenen Karussell-Frames zu kommunizieren.
  • Stellen Sie auffällige und offensichtliche Pfeile und Slider zur Verfügung.

Netflix.com verwendet ein Karussell, um Programme jeder Kategorie anzuzeigen. Die visuelle Behandlung der Objekte, die auf der rechten Seite über den Rand des Bildschirms hinausgehen, kommuniziert, dass weitere Optionen vorhanden sind.

Testen Sie auf vielen Geräten, um sicherzustellen, dass Designelemente in verschieden grossen Browserfenstern funktionieren.

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