3D und Interaktion auf Websites: Spielerei oder Wirkung?

3D-Szenen, Partikel, bewegte Hintergründe: Moderne Browser können vieles darstellen, was früher Spielen vorbehalten war. Die Frage für einen Betrieb lautet aber nicht „Geht das?“, sondern „Hilft das meinen Besuchern?“. Wir bauen selbst 3D-Websites, auch unsere eigene Agentur-Seite, und haben dabei gelernt, wann es sich lohnt und wann nicht.

Wann 3D und Interaktion Sinn ergeben

• Das Produkt ist räumlich: Möbel, Küchen, Gebäude, Werkstücke. Hier kann eine Drehansicht mehr erklären als drei Fotos.
• Es erzählt eine Geschichte: Ein Betrieb mit Tradition, ein Ort, ein Handwerksprozess, der sich Schritt für Schritt entfaltet.
• Es unterscheidet Sie in einer Branche, in der alle Seiten gleich aussehen, und passt zu Ihrer Zielgruppe.
• Es ist Zusatz, nicht Voraussetzung: Die wichtigen Informationen (Leistungen, Kontakt, Öffnungszeiten) stehen als normaler Text auf der Seite.

Wann es eher Spielerei ist

• Bewegung ohne Zweck, nur weil es möglich ist
• Texte, die erst nach Animationen lesbar werden
• Navigation, die nur mit Maus und Verständnis der Szene funktioniert
• Ein Hintergrund, der auf dem Handy ruckelt und den Akku leert
• Eine Szene, die so viel lädt, dass Besucher schon weg sind

Die Kosten: Ladezeit und Leistung

3D bringt zusätzlichen Code und Daten mit. Das wirkt auf die Core Web Vitals: Der größte sichtbare Inhalt soll laut Google nach höchstens 2,5 Sekunden gerendert sein (LCP), Eingaben sollen innerhalb von 200 Millisekunden eine Reaktion zeigen (INP). Auf einem älteren Handy kann eine unbedachte 3D-Szene beides verfehlen.

Mögliche Gegenmittel:

1. Inhalt zuerst: Text und Layout erscheinen sofort als normales HTML. Die 3D-Szene lädt erst danach nach.
2. Aufwand begrenzen: Weniger Objekte, einfache Materialien, angepasste Bildrate.
3. Schwache Geräte erkennen: Wenn die Grafikleistung nicht reicht, wird auf eine ruhige Fassung umgeschaltet.
4. Eigene Auslieferung: Skripte und Schriften vom eigenen Server, ohne Aufrufe an fremde Dienste.
5. Messen: Wirkung auf Ladezeit und Bedienbarkeit auf echten Geräten prüfen, nicht nur am Entwicklerrechner.

Barrierefreiheit: Bewegung ist nicht für alle

Für manche Menschen sind Bewegung und Animation unangenehm oder sogar auslösend für Schwindel und Übelkeit. Betriebssysteme bieten deshalb die Einstellung „Bewegung reduzieren“, die der Browser über die Medienabfrage prefers-reduced-motion an Websites meldet. Eine gute Seite beachtet sie:

• Bei „reduzieren“ werden Bewegungen abgeschaltet oder stark vereinfacht.
• Inhalte bleiben in jedem Fall zugänglich und bedienbar.
• Dauerhaft laufende Bewegung lässt sich anhalten, wie es das WCAG-Kriterium „Pause, Stop, Hide“ (2.2.2, Stufe A) für automatisch startende Bewegung von mehr als fünf Sekunden verlangt. In der Praxis heißt das meist: ein sichtbarer, per Tastatur bedienbarer Schalter.
• Bewegung, die durch Interaktion ausgelöst wird, lässt sich abschalten („Animation from Interactions“, 2.3.3, Stufe AAA und damit eine weitergehende Empfehlung über das übliche Ziel AA hinaus).
• Bedienelemente funktionieren auch per Tastatur, und Kontraste bleiben lesbar.

Das ist keine Kür: Wer Gäste einladen möchte, sollte niemanden ausschließen.

Unsere eigene Seite als Beispiel

Auf allen Seiten von Tannenbaum Media liegt hinter dem Text eine 3D-Szene im Weltraum-Stil, gebaut mit der Open-Source-Bibliothek Three.js. Die Inhalte sind reines HTML und stehen vor der Szene bereit; die Szene lädt danach nach. Wer „Bewegung reduzieren“ eingestellt hat, sieht statt der Szene einen ruhigen Hintergrund. Alle anderen finden unten links auf jeder Seite den Schalter „Animation pausieren“: Er hält die Szene und die dauerhaft laufenden Animationen an, lässt sich per Tastatur bedienen, zeigt seinen Zustand über „aria-pressed“ an und merkt sich die Wahl im Browser. Die Bibliothek liefern wir von unserem eigenen Server aus, es gibt keine Anfragen an fremde Anbieter. Mehr zur Technik steht auf der Seite Technologien.

Das ist ein Beispiel für eine Agentur, die zeigen möchte, was sie kann – bei einer Pension oder Schreinerei würden wir deutlich zurückhaltender vorgehen. Dort entscheiden Fotos, klare Texte und ein einfacher Kontakt.

Entscheidungshilfe in fünf Fragen

1. Hilft die Bewegung, etwas zu verstehen, oder dient sie nur der Dekoration?
2. Bleiben alle wichtigen Informationen auch ohne JavaScript und ohne Szene erreichbar?
3. Reagiert die Seite auf „Bewegung reduzieren“, und gibt es einen Schalter zum Anhalten?
4. Läuft sie auf einem mittleren Handy flüssig, in einem Mobilfunknetz mit schwankendem Empfang?
5. Wer pflegt die Seite, wenn sich Inhalte ändern?

Lautet die Antwort mehrfach „Nein“, lohnt sich eine schlichtere Lösung. Das wirkt oft professioneller als jeder Effekt.

Fazit

3D und Interaktion können Eindruck machen, wenn sie einem Zweck dienen und die Grundlagen stimmen: schnelle Ladezeit, lesbarer Inhalt, Rücksicht auf Menschen mit Bewegungsempfindlichkeit. Wir beraten ehrlich, was zu Ihrem Betrieb passt. Mehr zu unserem Vorgehen unter Webentwicklung und Webdesign Südschwarzwald; für den Einstieg empfiehlt sich der kostenlose Website-Check.