Zurück
Dimitri Wittwer

Overlay, Modal, Lighbox oder Popup – wann nutze ich was?

Die Begriffe Overlay, Modal, Popup und Lightbox werden im Webdesign verwendet, um verschiedene Benutzeroberflächen-Elemente zu beschreiben, die Inhalte über die Hauptseite legen. Hier sind die Unterschiede:

#UX/UI Design

1. Overlay

Ein Overlay ist ein allgemeiner Begriff für eine beliebige Inhaltsschicht oder visuelle Ebene, die über dem Hauptinhalt angezeigt wird. Oft wird der Hintergrund abgedunkelt oder teilweise verdeckt, um die Aufmerksamkeit auf das Overlay zu lenken.

  • Zweck: Wird verwendet, um die Aufmerksamkeit des Nutzers auf einen bestimmten Inhalt oder eine bestimmte Interaktion zu richten. Inhalte finden in einem Viewport platz.

  • Beispiele: Burger Menü, das im Overlay öffnet, Benachrichtigung oder ein Suchfenster das sich über dem Hauptinhalt öffnet.

2. Modal

Ein Modal ist ein Dialogfenster oder ein Fenster, das eine Benutzeraktion erfordert, bevor die Hauptseite wieder verwendet werden kann. Es wird typischerweise zentriert auf dem Bildschirm angezeigt.

  • Zweck: Wichtige aber kurze Inhalte werden als Modal angezeit und zwingt den Nutzer, eine Aktion auszuführen. Nur in ganz seltenen Fällen sollte hier gescrollt werden müssen.

  • Beispiele: Anmelde- oder Registrierungsformulare, Warenkorb, Bestätigungsdialoge für Interaktionen.

3. Popup

Ein Popup ist ein kleines Fenster oder eine Box, die über dem Seiteninhalt erscheint. Es wird oft durch eine Benutzeraktion ausgelöst oder automatisch nach einer Verzögerung angezeigt. Im Gegensatz zu Modals blockiert ein Popup nicht unbedingt die Interaktion mit dem Rest der Seite.

  • Zweck: Zeigt nicht-kritische oder zusätzliche Informationen an, ohne dass eine Benutzeraktion erforderlich ist. Werden of automatisch ausgelöst.

  • Beispiele: Kurze Inhalte wie Aufforderungen zur Newsletter-Anmeldung. oder Tooltips oder Informationshinweise.

Hinweis: In manchen Kontexten bezieht sich „Popup“ auf ein Browser-Popup, das ein völlig separates Browserfenster ist (seltener wegen Popup-Blockern).

4. Lightbox

Eine Lightbox ist eine spezielle Art von Modal, die zur Anzeige von Medieninhalten wie Bildern oder Videos verwendet wird. Der Hintergrund wird abgedunkelt, und der Inhalt wird prominent in einem Rahmen angezeigt.

  • Zweck: Medien anzeigen, ohne die aktuelle Seite verlassen zu müssen. Inhalte sind ausgerichtet auf einen Viewport.

  • Beispiele: Wenig Inhalte, oftmals vergrößerte Bilder in einer Fotogalerie oder Video-Vorschauen oder Wiedergaben.