Overlays: Wie man den Missbrauch von Lightboxen verhindert

Schlecht umgesetzte Overlays und Lightboxen sind nicht nur für Nutzer frustrierend, sie können sich auch desaströs auf die Konversion und Aufgabenerledigung auswirken. Verwenden Sie die 5 W's, um herauszufinden, ob ein Overlay wirklich die ideale Design-Lösung ist und wie Sie es am besten implementieren.

 

by Kathryn Whitenton (deutsche Übersetzung) - 25.05.2015

 

Als Lightboxen und Overlays vor wenigen Jahren auftauchten, stellten sie eine elegante Lösung für eine knifflige Herausforderung des Interaktionsdesigns dar: sie kommunizieren wichtige Informationen, ohne dass der Nutzer den Überblick über den aktuellen Bildschirm verliert, und reduzieren gleichzeitig einige der Probleme, die Pop-ups und Dialogfelder mit sich bringen. Wir zeichneten die Lightbox sogar als Anwendungsdesign-Technik des Jahres 2008 aus.

Seit diese Technik zum ersten Mal auftauchte, verwenden Designer Lightboxen leidenschaftlich gerne. Erst letzte Woche sprach mich im Rahmen unserer Usability Week Konferenz (engl.) ein Designer an und fragte: "Ist es in Ordnung, Anchor-Links in einer Lightbox zu verwenden?" Das fragliche Overlay enthielt so viel Text, dass ein Scrollbalken notwendig wurde - und um bis zum Ende des Texts zu gelangen, war LANGES Scrollen notwendig. Um das Scrollen zu minimieren, dachte das Team darüber nach, Anchor-Links hinzuzufügen, deren positiver Begleiteffekt Linkziele wären, über die Nutzer von anderen Websites direkt auf den Overlay-Inhalt verwiesen werden könnten. Falls Sie Probleme haben, sich dieses Design vorzustellen, ist hier ein Beispiel eines ähnlichen Designs aus dem Support-Bereich von Apple.com.

Der MobileMe Support-Bereich von Apple präsentierte Hilfeinhalte früher in einem Overlay-Fenster, das einen Link zu einem anderen Hilfe-Artikel über Spam und einen Scrollbalken, um zu weiter unter befindlichen Inhalten zu gelangen, enthielt.

Scrollen und Anchor-Links machen auf sehr langen Websites Sinn. Falls Sie allerdings gerade dabei sind, einem Overlay mehrere Navigationsmechanismen hinzuzufügen, sollten Sie aufhören und Ihren Zugang neu überdenken. Apple veränderte sein Design in der Zwischenzeit und eliminierte das Overlay komplett. Stattdessen wird der Inhalt als komplette (neue) Seite angezeigt. Das Resultat ist, dass der sichtbare Inhaltsbereich wesentlich grösser ist und der normale Scrollbalken des Browsers verwendet werden kann, was es Nutzern ermöglicht, die Standardfunktionen, an die sie gewohnt sind, zu nutzen. Die eigenständige Seite ermöglicht es Nutzern auch, problemlos Links zu diesen Inhalten zu speichern und zu teilen - ein sehr wichtiges Nutzungsszenario für Hilfe-Inhalte. Apple vermied die Verwendung eines Overlays sogar für eine Einladung zu einer Umfrage und zeigt diese stattdessen in einer Feature-Box im oberen Bereich der Seite an.

In der aktuellen Version des Kundenserviceinhalts betreffend verspätete E-Mails von Apple wurde das Overlay komplett entfernt. Stattdessen werden die Kundenserviceinformationen als neue Seite angezeigt.

Overlays sind manchmal angemessen. Doch wie im oben stehenden Beispiel zu sehen ist, werden sie oft im Übermass oder missbräuchlich verwendet. Manchmal passiert das mit den besten Absichten: Designer möchten schnellen Zugriff auf wichtige Informationen bieten. In anderen Fällen scheinen Lightboxen nur aufgrund der Bequemlichkeit von Designern verwendet zu werden, da mehr Funktionen oder Inhalte präsentiert werden können, ohne eine neue Seite erstellen oder die Navigation verändern zu müssen.

Überlegungen vor der Verwendung von Overlays

Viele Designer kennen einige Standard-Richtlinien zur Verwendungen von Overlays, wie:

• Inkludieren Sie eine sichtbare "Schliessen"-Funktion, um es Nutzern zu ermöglichen, zur darunterliegenden Seite zurückzukehren.
• Stellen Sie sicher, dass sich das Overlay visuell vom Hintergrund abhebt, indem Sie es kleiner machen und durchscheinende Farbtöne verwenden, um den Hintergrund zu verdunkeln (was zeigt, dass der darunterliegende Inhalt derzeit nicht interaktiv ist, und den Nutzer darüber informiert, dass er nicht auf eine neue Seite weitergeleitet wurde).
• Machen Sie den Inhalt des Overlays für Tastaturnutzer erreichbar (indem die Escape Taste das Overlay schliesst und indem per Tastatur auf den Inhalt und Felder im Overlay zugegriffen werden kann).

Sie können alle diese Regeln befolgen und dennoch ein frustrierendes Erlebnis produzieren - manchmal ist es so schlecht, dass Nutzer nicht nur genervt sind, sondern weder auf Inhalte zugreifen noch Aufgaben erledigen können. Um derartige Situationen zu vermeiden, sollten Sie einen systematischen Ablauf befolgen, um Ihr Designproblem zu analysieren, und sicherstellen, dass ein Overlay tatsächlich die geeignetste Lösung ist. Nur weil Sie ein Overlay verwenden können, bedeutet das nicht, dass Sie es auch tun sollten.

Wenn Sie über ein Overlay, eine Lightbox oder ein modales Fenster nachdenken, stellen Sie sich die folgenden Fragen:

• Wer ist das Zielpublikum?
• Welche Handlung wird vom Nutzer erwartet?
• Wann erscheint das Overlay und wird es eine Unterbrechung sein?
• Wo auf der Seite wird das Overlay erscheinen?
• Warum muss dieser Inhalt in einem Overlay - statt auf einer Website - angezeigt werden?

WER ist das Zielpublikum?

Falls Ihre Nutzer mobile Geräte verwenden, ist ein Overlay, das für einen grossen Desktop-Bildschirm gestaltet wurde, bestenfalls verwirrend. Im schlimmsten Fall kann es Nutzer daran hindern, auf Ihre Inhalte zuzugreifen.

• Verwirrung. Die Viafoura.com Website zeigt den verwirrenden Effekt, den Overlay-Formulare auf mobile Nutzer haben können: nachdem sie auf den Button "Kostenlosen Test anfordern" geklickt haben, ist auf dem nächsten Bildschirm nur ein kleiner Teil des Formulars zu sehen. Die Nutzer müssen die Ansicht sofort verkleinern, um zu verstehen, was gerade angezeigt wird.
  
  Links: Was Nutzer tatsächlich sehen, nachdem Sie auf viafoura.com auf "kostenlosen Test anfordern" geklickt haben. Rechts: Das ganze Overlay-Formular, nachdem die Tastatur geschlossen und die Ansicht verkleinert wurde.
• Blockierter Zugriff auf Inhalte. Ein weiteres gängiges- und wesentlich ernsteres - Problem tritt auf, wenn eine inkorrekte Implementierung oder ein Fehler die Scroll- bzw. Zoom-Funktionen deaktivieren, die benötigt werden, um ein Overlay zu schliessen. Sie haben das wahrscheinlich selbst schon erlebt: Sie besuchen eine Website über ein mobiles Gerät, nur um mit einem Overlay konfrontiert zu werden, das den Inhalt der Seite blockiert. Die Steuerungselemente, die das Overlay schliessen, befinden sich ausserhalb des sichtbaren Bereichs. In dieser Situation kann der Nutzer nicht auf den Inhalt der darunterliegenden Seite zugreifen. In einigen Fällen verhindert die Darstellung der Seite sogar das Verkleinern oder Zoomen bzw. erschwert es so sehr, dass es fast unmöglich ist, die Seite ausreichend zu verkleinern, um auf die Steuerungselemente des Overlays zugreifen zu können.

Falls Nutzer von mobilen Geräten ein wichtiger Teil Ihres Publikums sind, denken Sie gut darüber nach, bevor Sie wichtige Inhalte in einem Overlay anzeigen. Falls Sie sich für ein Overlay entscheiden, bereiten Sie sich auf anfängliche und fortlaufende Investitionen vor, was Tests und Frage-Antwort-Sitzungen betrifft, um sicherzustellen, dass das Design auf Bildschirmen mit unterschiedlichen Auflösungen und bei verschiedenen Ausrichtungen des Geräts richtig funktioniert.

Die Erreichbarkeit ist ein weiterer Faktor, den Sie berücksichtigen sollten, während Sie beurteilen, wer Ihr Overlay verwenden wird. Sehbehinderte Nutzer mit normal grossen Bildschirmen verwenden häufig Bildschirmlupen, um die Inhalte am Bildschirm stark zu vergrössern. Nachdem sie den Inhalt herangezoomt haben, sehen diese Nutzer nur einen kleinen Teil der Seite, weshalb Overlays auf Nutzer von Bildschirmlupen dieselbe verwirrende Wirkung haben, wie auf Nutzer von mobilen Geräten.

WELCHE Handlung wird vom Nutzer erwartet?

Um ein gutes Overlay zu designen, müssen Sie zuerst seinen Zweck klar formulieren: was sollen Nutzer als Reaktion auf den Inhalt tun? Sollen Sie eine kurze Nachricht überfliegen, eine grosse Auswahl von Bildern durchsehen oder lange Texte lesen? Müssen sie sich zwischen verschiedenen Optionen entscheiden oder einfach den Erhalt von Informationen bestätigen? Oder müssen Nutzer sogar Inhalte in die Lightbox eingeben - und falls ja, welche Art von Inhalt und wie viel?

Abläufe, die dem Nutzer schnell und einfach erscheinen, sind normalerweise nicht das Resultat eines schnellen und einfachen Designvorgangs. Ein Design zu schaffen, das für Ihr Publikum einfach zu verwenden ist, bedeutet, sich Zeit zu nehmen, um den Zweck, die Umstände und die gewünschten Resultate klar zu formulieren.

Overlays werden normalerweise verwendet, damit Nutzer Inhalte sehen, ein Formular ausfüllen oder eine Entscheidung treffen.

Texte lesen oder Bilder ansehen: Falls es die einzige Funktion des modalen Fensters ist, eine kurze Statusbenachrichtigung anzuzeigen, funktioniert ein einfaches Overlay mit einem Button, über den die Nutzer die Benachrichtigung bestätigen oder ablehnen können, sehr gut. Alles was über einen oder zwei Sätze hinausgeht, erhöht allerdings die Unübersichtlichkeit:

1. Fügen Sie einen Scrollbalken hinzu, falls der Inhalt zu lang ist, um in eine kleine Lightbox zu passen? Falls ja, denken Sie darüber nach, den Scrollbalken des Browsers zu deaktivieren, um zu verhindern, dass Nutzer versehentlich durch die Seite im Hintergrund - statt durch die Lightbox - scrollen. (Eine Deaktivierung des Browser-Scrollbalkens kann allerdings unbeabsichtigte Konsequenzen haben, falls mobile Nutzer nicht scrollen können, um die Steuerungselemente des Overlays zu sehen.)
2. Werden Nutzer den Inhalt des Overlays ihren Favoriten hinzufügen oder teilen wollen? Wenn ein Overlay tatsächliche Inhalte und nicht einfach Statusmeldungen enthält, möchten Nutzer diese Inhalte vielleicht nutzen - und sie zum Beispiel zur späteren Verwendung den Favoriten hinzufügen oder den Link mit anderen teilen. Sie müssen daher unter Umständen zusätzliche Designarbeit investieren, um spezielle Speichern und Teilen Funktionen hinzuzufügen.
3. Wird der Inhalt auf bessere Weise präsentiert, wenn Sie ein grösseres Fenster (zum Beispiel ein ganzes Browserfenster) verwenden? Falls Nutzer aufgrund des kleinen Overlays lange scrollen müssen, um den Inhalt zu lesen, verschwenden Sie Platz am Bildschirm.

Ein Formular ausfüllen: Overlays, die Formularfelder enthalten, ermöglichen es Ihnen, von jeder Seite aus Zugriff auf das Formular zu bieten - ohne eine neue Seite laden zu müssen. Das ist eine sehr attraktive Funktion für Dinge, wie Logins oder Abonnement-Formulare. Bedenken Sie allerdings, dass es Fehler dem Nutzer unmöglich machen könnten, auf diese ausschlaggebenden Funktionen zuzugreifen. Planen Sie auch in diesem Fall anfängliche und fortlaufende Tests (über Browser, Betriebssysteme und Geräte hinweg) ein oder bleiben Sie beim bewährten Login-Bildschirm. Einige Probleme, nach denen Sie Ausschau halten sollten:

1. Overlays, die Nutzer um eine Eingabe bitten, benötigen die ausdrückliche Option "Abbrechen" - auch wenn es sich nur um ein einzelnes Eingabefeld handelt. Häufig nehmen Designer an, dass Nutzer wissen, dass sie einfach auf eine beliebige Stelle ausserhalb des Overlays klicken können, um es zu schliessen. In Wirklichkeit ist das vielen Nutzern nicht bewusst, während andere (vor allem jene, die Touchscreens verwenden) das Overlay versehentlich schliessen könnten. Im unten stehenden Bluefly-Beispiel hatte ein Klick auf den grauen Bereich des Bildschirms überhaupt keine Auswirkung. Die einzige Möglichkeit, dieses Overlay zu schliessen, ist es, auf den schwarzen Button "Jetzt einkaufen" zu klicken. Die Platzierung des Buttons kommuniziert allerdings, dass er das Formular absenden - und nicht schliessen - wird.
   
   Die einzige Möglichkeit, um das Overlay von Bluefly zu schliessen, ist es, auf den schwarzen Button "Jetzt einkaufen" zu klicken.
2. Um es Nutzern zu ermöglichen, ein versehentliches Schliessen des Overlays rückgängig zu machen, sollten alle Eingaben gespeichert werden und das Overlay einfach zu reaktivieren sein.

Eine Entscheidung treffen: Overlays werden auch häufig verwendet, um Handlungen von Nutzern zu bestätigen und um ihnen dabei zu helfen, eine einfache Auswahl vorzunehmen. Das ist problematisch, da wir aus den zahlreichen Pop-ups und unwichtigen Overlays, die uns im Laufe der Zeit auf anderen Websites begegneten, gelernt haben, ein modales Fenster sofort nach seinem Erscheinen zu schliessen. Falls tatsächlich ein wichtiges und nützliches Fenster angezeigt wird, schliessen wir es automatisch, ohne uns den Inhalt durchzulesen. Diese Tendenz wird durch Aktions-Buttons mit allgemeinen Bezeichnungen verstärkt, wie die Buttons zur Zahlungsbestätigung von US Airways zeigen, die einfach mit "OK" und "Abbrechen" bezeichnet wurden.

US Airways zeigt ein Overlay an, das bestätigt werden muss, bevor eine Kreditkarte belastet wird. Die Aktions-Buttons geben aber nicht eindeutig Hinweise darauf, welche Aktion Sie bestätigen.

Um zu vermeiden, dass Nutzer eine Lightbox schliessen, ohne sich den Konsequenzen dieser Handlung bewusst zu sein, sollten Sie einen eindeutigen Button-Text verwenden, der genau erklärt, was passiert, sobald der Nutzer darauf klickt. Ein Beispiel dafür liefert LinkedIn mit seiner "Yes, Remove them" (Ja, entfernen) Bestätigungstaste in der Lightbox, die das Löschen eines Kontakts bestätigt.

LinkedIn verwendet den spezifischen Button-Text "Yes, remove them", um das Löschen eines Kontakts zu bestätigen.

Sie sollten auch darüber nachdenken, was passiert, falls sich der Nutzer dafür entscheidet, die gewünschte Handlung NICHT durchzuführen. Natürlich sollten Sie eine eindeutige Möglichkeit zum Schliessen der Lightbox zur Verfügung stellen - eine gängige Strategie von Nutzern ist es allerdings, auf die Zurück-Taste des Browsers zu klicken, um zum darunterliegenden Bildschirm zurückzukehren. Normalerweise behandeln Webbrowser Overlays aber nicht wie separate Websites, weshalb die Zurück-Taste den Nutzer nicht auf die darunterliegende Seite, sondern auf die Seite, die davor besucht wurde, führt. Falls Ihre Analytics zeigen, dass Nutzer auf Zurück klicken, nachdem sie ein Overlay erreicht haben, sollten Sie die Zurück-Taste anpassen, damit sie die Lightbox schliesst - und nicht die vorhergehende Seite im Browsing-Verlauf öffnet.

WANN erscheint das Overlay und wird es eine wichtige Aufgabe unterbrechen?

Eine der grössten Herausforderungen, was Overlays betrifft, ist, dass sie die aktuelle Tätigkeit des Nutzers unterbrechen. Wie kann eine derartige Unterbrechung vermieden werden?

Eine Strategie ist es, Overlays zu einem Zeitpunkt zu präsentieren, an dem Nutzer mit grosser Wahrscheinlichkeit nicht in eine Aufgabe vertieft sind. Viele Apps verwenden Overlays zum Beispiel für anfängliche Anleitungen (engl.) oder Tipps zur Nutzung einer Nutzeroberfläche. Nutzer verfolgen eine bestimmte Aufgabe, wenn Sie eine App starten, allerdings werden Sie auf diese Weise nur am Anfang der Aufgabe gestört, und nicht in der Mitte unterbrochen. Das Overlay-Format ist vor allem auf kleinen Bildschirmen hilfreich, auf denen der Platzmangel dazu führt, dass die Tipps nur über dem darunterliegenden Bildschirm angezeigt werden können.

Die iPhone App von Zappos verwendet ein Begrüssungs-Overlay, um die Bedeutung der Symbole zu erklären.

1. Vom Nutzer initiierte Overlays können eine tolle Möglichkeit sein, um Progressive Disclosure (engl.) zu implementieren und Nutzern weiterführende Informationen oder Optionen zu jenem Zeitpunkt zu präsentieren, an dem sie diese benötigen. Häufig steht diese Art von Overlay eng mit der aktuellen Aufgabe des Nutzers in Verbindung, was den Hauptvorteil von Overlays optimal nutzt: die Möglichkeit, den Überblick über den aktuellen Bildschirm zu behalten, während zusätzliche Inhalte oder Funktionen präsentiert werden. Die iPhone App von Facebook verwendet ein Overlay, um verschiedene Optionen zum Teilen der Inhalte zu präsentieren. Dabei handelt es sich in Wirklichkeit nur um eine modifizierte, visuelle Darstellung eines Auswahlmenüs, die den Fokus auf den aktiven Workflow richtet, während der Überblick über die Aufgabe erhalten bleibt. Während Sie entscheiden, wie Sie Inhalte teilen möchten, ist es hilfreich, den Titel des jeweiligen Inhalts im Hintergrund zu sehen - vor allem, falls Sie gerade nach einer Unterbrechung zum Bildschirm zurückgekehrt sind.
   
   Facebook zeigt Optionen zum "Teilen" als Overlay über einem Artikel an. Den Titel des Artikels "hinter" dem Overlay zu sehen, hilft Nutzern dabei, sich daran zu erinnern, was sie gerade teilen wollten, falls Sie während der Aufgabe unterbrochen wurden.
2. Bei Overlays, die nicht vom Nutzer initiiert wurden, sieht die Sache allerdings ganz anders aus. Wenn die Website plötzliche die Seite verdeckt, die der Nutzer gerade liest, ist das im besten Fall störend und im schlechtesten Fall inakzeptabel. Manchmal enthalten diese Benachrichtigungen wichtige Informationen, die die Unterbrechung rechtfertigen - häufig versuchen derartige Overlays allerdings, den Nutzer zu Handlungen zu motivieren, die positiv für das Unternehmen sind (wie das Abonnieren eines Newsletters). (Viele Web-Vermarkter scheinen das Prinzip "der Zweck heiligt die Mittel" zu verfolgen und glauben, dass der Vorteil einer höheren Anzahl von Abonnenten den Nachteil der Verärgerung der Nutzer überwiegt. Falls Sie diese Strategie verfolgen, sollten Sie sicherstellen, dass Sie Kontrollen durchführen, und messen, ob diese zusätzlichen Abonnenten wirklich qualifizierte Kundenkontakte sind. Kaufen diese Personen tatsächlich Ihre Produkte? Falls nicht, könnten Sie Ihr echtes Publikum ohne guten Grund verärgern.)
   Manchmal scheinen Overlays, die nicht vom Nutzer initiiert werden, harmloser zu sein. Schlechtes Timing kann allerdings dazu führen, dass sie genauso irritierend sind, wie aufdringliche Abonnement-Aufforderungen. Nach dem Zufallsprinzip auftauchende Hilfe-Chatfenster gehören in diese Kategorie. Auf der unten dargestellten Website der Bank of the West erscheint das Live Chat Support-Overlay auf jeder einzelnen Seite - auch auf Formularen, die der Nutzer gerade ausfüllt, um ein Konto zu eröffnen. In diesem Fall erschwert es das Overlay den Nutzern, zu neuen Kunden zu werden, da sie zuerst das Overlay schliessen müssen, bevor sie mit dem nächsten Formularfeld fortfahren können.
   
   
   Die Bank of the West Website stört Nutzer, die gerade das Formular zur Kontoeröffnung ausfüllen, mit einem Overlay, das Kundenservice per Live Chat anbietet.
   Die sicherste Strategie ist es, Overlays nur auf vom Nutzer initiierte Aktionen oder wirklich wichtige Nachrichten zu beschränken, und alternative Methoden (wie die Feature-Boxen auf der weiter oben abgebildeten Apple.com Website) für weniger wichtige Inhalte zu verwenden. Falls Sie sich dafür entscheiden, Nutzer mit Lightboxen zu konfrontieren, sollten Sie unbedingt mit Timing und Zielseiten experimentieren, um sicherzustellen, dass Sie die Unterbrechung minimieren - zum Beispiel, indem Sie die Overlays nur dann präsentieren, wenn Nutzer die Seite gerade verlassen, wie es DigitalMarketer.com mit seinem "Free Gift"-Angebot tut.
   
   Dieses Overlay auf der DigitalMarketer.com Website vermeidet es, Nutzer zu unterbrechen, indem das Overlay erst dann angezeigt wird, wenn Nutzer die Seite verlassen.

WO auf der Seite wird das Overlay erscheinen?

Zu häufig werden Overlays zu weit unten auf der Seite angezeigt. Das gilt vor allem für mobile Geräte, passiert allerdings auch auf normal grossen Bildschirmen. Denken Sie während der Planung Ihres Designs daran, dass viele Nutzer Browser-Toolbars installiert haben und der sichtbare Browsing-Bereich daher wesentlich kleiner sein könnte, als in einem Browser ohne Toolbars. Der Inhalt der Lightbox sollte direkt im Sichtfeld des Nutzers erscheinen oder sogar etwas höher auf der Seite platziert werden. Auf der mobilen Broadband-Website von Verizon ist der Grossteil der Lightbox nicht sichtbar.

Das Overlay auf der mobilen Broadband-Website von Verizon befindet sich in der Mitte der Seite, aufgrund der Browser-Toolbars des Nutzers ist der untere Bereich der Lightbox allerdings nicht sichtbar.

Ihr Overlay im oberen Bereich der Seite (anstatt genau in der Mitte) zu platzieren, minimiert das Risiko, dass die Unterkante abgeschnitten wird. Den Scrollbalken des Browsers zur Verfügung zu stellen, stellt ausserdem sicher, dass Nutzer sogar in sehr kleinen Browserfenstern nach unten scrollen können, um die ganze Lightbox zu sehen.

Bei USPS befindet sich das Overlay weiter oben auf der Seite, was die Wahrscheinlichkeit erhöht, dass der gesamte Inhalt sofort sichtbar ist.

Eine weitere wichtige Überlegung - vor allem für grössere Lightboxen - ist, wo die Steuerungselemente und Inhalte innerhalb des Overlays platziert werden sollen. Manchmal werden in Werbe-Overlays Steuerungselemente absichtlich an ungewöhnlichen Stellen platziert (um Nutzer zu zwingen, länger mit dem Werbeinhalt zu interagieren) - als ob das Foltern von Kunden zu positiven Gefühlen gegenüber einer Marke führen würde. Häufig werden Steuerungselemente allerdings auch einfach schlecht platziert. Besonders problematisch ist es, wenn ein einzelnes, standardisiertes Overlay-Design verwendet wird, um Inhalte mit verschiedenen Dimensionen anzuzeigen. Im unten stehenden Beispiel präsentiert American Furniture Warehouse den Inhalt (ein Foto eines Schreibtischs) im oberen Bereich der Lightbox, während sich der Button zum Schliessen der Lightbox ganz unten befindet. Das hat eine sehr grosse leere Fläche zur Folge, durch die Nutzer scrollen müssen, um das Overlay zu schliessen.

American Furniture Warehouse platziert die "Schliessen"-Schaltfläche ganz unten, wodurch das Overlay so gross wird, dass es eine ganze Seite in Anspruch nimmt.

WARUM muss dieser Inhalt in einem Overlay - statt auf einer Website - angezeigt werden?

Zu guter Letzt, aber nicht minder wichtig: verwenden Sie kein Overlay, falls Sie keine klaren, durchschlagenden Argumente dafür haben, dass dieser Inhalt nicht auf einer normalen Website präsentiert werden sollte. Gute Gründe für die Verwendung eines Overlays inkludieren zum Beispiel:

• Der Nutzer möchte eine Handlung unternehmen, die ernste Konsequenzen hat und nur schwierig wieder rückgängig gemacht werden kann.
• Es ist ausschlaggebend, eine geringe Menge von Informationen einzuholen, bevor Nutzer mit dem nächsten Schritt in einem Prozess fortfahren können.
• Der Inhalt in den Overlays ist dringend und Nutzer bemerken ihn in einem Overlay mit grösserer Wahrscheinlichkeit.

Der erste Fall (die Verwendung eines Overlays, um eine Handlung des Nutzers zu bestätigen) sollte zurückhaltend verwendet werden - und nur dann, wenn es wirklich schwierig ist, die Handlung wieder rückgängig zu machen. Auch dann sollten Sie den Nutzern die Option "Nicht mehr nachfragen" anbieten, falls es sich um eine Aktion handelt, die sie mehrmals wiederholen müssen.

Das Prinzip, wichtige Informationen schnell in einem Overlay zusammenzufassen, demonstriert der unten stehende Chase.com Bildschirm. Der Nutzer hatte Preise für eine Autofinanzierung angefordert, die Website kann die richtigen Preise allerdings nur dann anzeigen, wenn der Wohnort des Kunden bekannt ist.

Chase.com verwendet sein Overlay auf richtige Weise: um wichtige Informationen einzuholen, die notwendig sind, um eine vom Nutzer angeforderte Aktion abzuschliessen, was dem Nutzer erklärt werden muss.

Das letzte Prinzip (dem Nutzer dringende Informationen zur Verfügung zu stellen) ist am stärksten von der Auslegung abhängig. „Dringend“ bedeutet nicht für alle Menschen dasselbe. Was einem Marketingexperten, der ein neues Produkt vermarkten möchte, dringend erscheinen kann, könnte für einen Nutzer, der einfach zum Suchfeld gelangen und nach einem komplett anderen Produkt suchen möchte, völlig irrelevant sein.

Es ist am einfachsten, die Dringlichkeit zu ermitteln (und sie Ihrem Publikum zu kommunizieren), wenn das Interesse des Unternehmens und das Interesse des Nutzers weitgehend übereinstimmen. Im Dezember präsentierte die Website des Environmental Defense Fund Besuchern zum Beispiel ein Overlay, das um Spenden bat und erklärte, dass alle Spenden, die vor einer bestimmten Frist eintreffen, von einem Sponsor verdoppelt werden würden. Wenn man die zeitliche Komponente berücksichtigt, wurde diese Information wahrscheinlich von vielen Besuchern der Website als dringend eingestuft - vor allem von jenen, die an steuerlich absetzbaren Spenden zum Jahresende interessiert waren. Doch wie sieht es mit dem zweiten Beispiel aus? Dieses Overlay, das im April angezeigt wurde, enthält keine spezifische Frist und scheint einfach ein allgemeines Angebot zu sein. Spenden zu sammeln ist für das Unternehmen sicherlich dringend, es wird von Besuchern aber mit wesentlich geringerer Wahrscheinlichkeit als dringend eingestuft.

Der Environmental Defense Fund verwendet ein Overlay, um zeitkritische Informationen zu übermitteln.

 

Diese Handlungsaufforderung des Environmental Defense Fund ist wesentlich weniger relevant für den Nutzer, da die Dringlichkeit nicht überzeugend kommuniziert wird.

Beachten Sie bitte, dass unsere Liste der guten Gründe, aus denen ein Overlay verwendet werden kann, nicht das Argument „damit wir keine neue Websites-Vorlage erstellen müssen“ enthält. (Falls das Setup einer neuen Seite so schwierig ist, dass Sie Inhalte in Overlays anzeigen müssen, sollten Sie vielleicht über Ihre Websites-Plattform nachdenken.) Die Suche nach Teilnehmern für Studien zur Nutzerforschung wurde ebenfalls nicht inkludiert. Obwohl wir Nutzerforschung als sehr wichtig einstufen, erreicht die Anzahl der Websites, die Besucher auffordern, eine Umfrage auszufüllen, nahezu epidemische Ausmasse. Es gibt sicherlich weniger aufdringliche Möglichkeiten, um Nutzerfeedback einzuholen.

Schlussfolgerung

Overlays können in bestimmten Zusammenhängen effektiv sein - zu häufig werden sie allerdings ohne ausreichende Planung verwendet, da es sich um eine praktische Möglichkeit handelt, zusätzliche - angemessene oder nicht angemessene - Inhalte zu veröffentlichen. Sie sind häufig grösser als die Bildschirme von mobilen Geräten oder kleine Browserfenster, sorgen für Verwirrung und Ärger, verlangen Nutzern mehr Arbeitsschritte ab, um dieselbe Aufgabe zu erledigen, und erschweren es, zu einem späteren Zeitpunkt zu den Inhalten zurückzukehren. Anderes ausgedrückt, überwiegen die Nachteile von Overlays häufig ihre Vorteile.

In vielen Fällen lässt sich das Problem lösen, indem der Inhalt auf einer Website anstatt in einem Overlay angezeigt wird. Bevor Sie ein Overlay verwenden, ermitteln Sie die Gründe dafür und denken Sie an die fünf Ws. Falls Sie danach immer noch glauben, dass ein Overlay die richtige Lösung für Ihren Bedarf ist, fahren Sie mit Vorbehalt fort. Testen Sie das Design immer wieder über verschiedene Browser und Geräte und stellen Sie sicher, dass es einwandfrei funktioniert.

Mehr darüber, wie Sie Inhalte effektiv präsentieren und den Workflow von Aufgaben vereinfachen können, erfahren Sie in unserem ganztägigen Seminar über die Top-Richtlinien für das Design von Nutzeroberflächen im Internet (engl.).

 

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