Facebook Icon X Twitter Icon LinkedIn Icon YouTube Icon
Zeitlose Designprinzipien: Deine Beste Verteidigung

Zeitlose Designprinzipien: Deine Beste Verteidigung

TL;DR

📖 10Min. Lesezeit

KI-Tools produzieren Schnittstellen, die wie Websites aussehen — ohne notwendigerweise deren Lesbarkeit oder Robustheit zu haben. Visuelle Hierarchie, Konsistenz, Nutzer-Feedback und echte Zugänglichkeit sind die vier fundamentalen Prinzipien, die KI nicht ersetzen kann, weil sie kontextuelles Urteilsvermögen erfordern. Eine schnelle 3-Test-Prüfung ohne Budget reicht aus, um die Punkte zu identifizieren, die die Umwandlung auf deiner Website blockieren.

Wichtige Punkte zum Merken

  • KI-Schnittstellengenerierung halluziniert: Sie produziert statistisch plausible, aber funktional fehlerhafte Komponenten — Schaltflächen, die wie Links aussehen, irreführende Hierarchien, fehlende Rückmeldungszustände.
  • Visuelle Hierarchie ist die erste Schutzmaßnahme: dominanter Titel, kontextueller Untertitel, offensichtliches CTA. Das Auge folgt vorhersehbaren Mustern in 50 ms — wenn die Struktur nicht leitet, geht der Besucher.
  • Visuelle Konsistenz ist ein unbewusstes Vertrauenssignal. In Isolation generierte Komponenten erzeugen ein inkohärentes Ganzes, das die wahrgenommene Glaubwürdigkeit beeinträchtigt.
  • Zugänglichkeits-Overlays bieten keine echte Compliance: 95,9% der Websites haben 2024 automatisch erkennbare WCAG-Fehler, Overlays eingeschlossen. Zugänglichkeit wird entworfen — nicht geflickt.
  • KI ist ein außergewöhnlicher Ausführender, aber ein mittelmäßiger Richter: Sie glänzt bei der Generierung von Varianten, scheitert aber bei der Bewertung, ob eine Nutzer-Journey für dein spezifisches Publikum intuitiv ist.
  • Drei budgetlose Tests offenbaren das Wesentliche: Tastaturnavigation (nur Tab), CSS deaktivieren (semantische Struktur), unvollständiges Formular (Qualität der Fehlerrückmeldung).

Vor wenigen Monaten zeigt uns ein Kunde stolz seine neue Website. Komplettes Redesign, beträchtliches Budget, eine “KI-spezialisierte” Agentur am Ruder. Das Ergebnis? Ein Kontaktformular, das nach dem Absenden ohne Bestätigungsmeldung verschwindet. Ein Navigationsmenü, das sich von Seite zu Seite verhält. Automatisch generierte Alt-Texte, die… das falsche Bild beschreiben. Und unten auf der Seite, gut sichtbar: ein Badge “barrierefreie Website” bereitgestellt von einem Overlay.

Barrierefrei. Wirklich.

Was wir immer häufiger in unserer täglichen Agenturarbeit sehen, ist eine gefährliche Gleichung: mächtige KI-Tools, eingesetzt von Teams ohne Grundlagen. KI beschleunigt. Aber sie beschleunigt auch Fehler — und manchmal erfindet sie sie aus dem Nichts.

Die gute Nachricht? Die Prinzipien, mit denen du diese Fehler erkennen kannst, gibt es seit 30 Jahren. Sie werden nicht aus der Mode kommen.


Warum KI in deinen Schnittstellen “Halluzinationen” erzeugt — und was es wirklich kostet

Der Begriff “Halluzination” ist aus der Welt der LLMs (Sprachmodelle wie ChatGPT oder Claude) entlehnt. Ein Modell halluziniert, wenn es selbstbewusst eine falsche Antwort generiert. In UX nimmt das Phänomen eine andere Form an, ist aber gleichermaßen problematisch.

Ein KI-Schnittstellengenerierungs-Tool kann eine Schaltfläche produzieren, die wie ein Link aussieht, ein Karussell, das kritische Inhalte verbirgt, eine typografische Hierarchie, die an Orten Wichtigkeit suggeriert, wo es keine gibt. Das ist nicht böswillig — es ist statistisch. Die KI hat von Tausenden von Websites gelernt, einschließlich der schlechten.

Konkretes Ergebnis: dein Besucher versteht nicht, was er tun soll. Er zögert. Er geht.

Die Zahlen aus unseren Audits zeigen, dass eine mehrdeutige Nutzer-Journey zwischen 20% und 40% der möglichen Conversion-Rate kostet. Kein technischer Bug. Kein Geschwindigkeitsproblem. Nur eine Schnittstelle, die dem Nutzer nicht klar sagt, wohin er schauen und was er tun soll.

Vergleich zwischen einer klaren Schnittstelle und einer KI-generierten Schnittstelle mit visuellen Inkonsistenzen

Die Frage ist nicht “ist dein KI-Tool gut?”. Die Frage ist: kann die Person, die es nutzt, den Unterschied zwischen einer funktionierenden Schnittstelle und einer Schnittstelle, die so aussieht, als würde sie funktionieren, erkennen?


Die Fundamentalen Prinzipien, die KI nicht ersetzen kann

Hier wird es interessant. Die Designprinzipien, mit denen du diese Probleme erkennen kannst, sind nicht neu. Sie sind auch nicht besonders komplex. Aber sie erfordern etwas, das KI nicht hat: kontextuelles Urteilsvermögen.

Visuelle Hierarchie, erste Schutzmaßnahme

Ein Nutzer, der deine Seite erreicht, verbringt etwa 50 Millisekunden damit zu entscheiden, ob sie seine Aufmerksamkeit verdient. Eye-Tracking-Studien der Nielsen Norman Group bestätigen dies seit Jahren: das Auge folgt vorhersehbaren Mustern, in F- oder Z-Form, und sucht nach visuellen Ankern.

Klare Hierarchie bedeutet: dominanter Titel, Untertitel mit Kontext, offensichtliches CTA. In dieser Reihenfolge. Mit genug Unterschied in Größe und Gewicht, dass das Auge nicht zögert.

Ein KI-Tool, das Inhalte generiert, kann diese Struktur respektieren. Aber wenn es auf Websites trainiert wurde, die dies nicht tun — oder wenn der anfängliche Prompt dies nicht angibt — wird es etwas produzieren, das “aussieht wie” eine Webseite, ohne deren Lesbarkeit zu haben.

Konsistenz, Grundlage des Vertrauens

Hier ist etwas, das man in Agenturen nie sagt: visuelle Konsistenz ist ein unbewusstes Vertrauenssignal.

Ein blauer Knopf auf der Homepage, grün auf der Kontaktseite, grau auf der Seite Services. Technisch funktioniert es. Psychologisch sagt es deinem Besucher, dass etwas nicht stimmt. Sein Gehirn erkennt die Inkonsistenz, bevor er sich dessen bewusst ist. Er assoziiert es mit mangelnder Ernsthaftigkeit.

KI-Tools generieren oft Komponenten isoliert. Jeder Abschnitt ist für sich genommen korrekt. Das Ganze entbehrt Einheit. Es ist ein Systemproblem — und wird durch ein Design System gelöst, nicht durch einen besseren Prompt.

Nutzer-Feedback, unsichtbar aber kritisch

Ein Formular ausfüllen. Auf “Senden” klicken. Und… nichts. Oder schlimmer: die Seite wird neu geladen.

Das Feedback-Prinzip ist einfach: jede Nutzer-Aktion muss eine sichtbare, unmittelbare und verständliche Reaktion hervorrufen. Ein Spinner während des Ladens. Eine Bestätigungsmeldung. Ein Fehler, der in menschlichen Begriffen erklärt, was fehlt.

Das ist Grundlagen-Stoff. Und es wird systematisch übersehen in KI-generierten Schnittstellen, weil diese Zustände — Erfolg, Fehler, Laden, Leer — explizit angegeben werden müssen. Die KI erfindet sie nicht spontan.


Zugänglichkeit: Zwischen falscher Compliance und echter Praxis

Sprechen wir über das heikle Thema. Webzugänglichkeit ist zu einem Markt geworden. Dutzende von Tools versprechen, deine Website in wenigen JavaScript-Zeilen “WCAG-konform” zu machen. Diese Accessibility-Overlays verkaufen sich als schlüsselfertige Lösungen.

Das sind sie nicht.

WebAIM, die Referenzorganisation für digitale Barrierefreiheit, veröffentlicht jedes Jahr ihre Analyse der am häufigsten besuchten eine Million Startseiten. 2024 hatten 95,9% davon automatisch erkennbare WCAG-Fehler — einschließlich Websites, die Overlays nutzen. Automatische Compliance ist ein Widerspruch in sich.

Web-Zugänglichkeitsprüfung läuft, Überprüfung des Kontrasts und der Tastaturnavigation

Hier ist, was ein Overlay nicht kann:

Es kann eine schlecht konstruierte Überschriftenhierarchie nicht umstrukturieren. Wenn deine Seite von H1 zu H4 springt, ohne Zwischenschritte, verliert ein Bildschirmleser den Faden. Kein JavaScript kann das in Echtzeit reparieren, ohne etwas anderes zu brechen.

Es kann die Absicht eines Bildes nicht erraten. Von KI generierter Alt-Text beschreibt, was es “sieht” im Bild. Es weiß nicht, warum dieses Bild hier ist, was es zum Kontext beiträgt, was ein sehbehinderter Nutzer verstehen muss.

Es kann eine Schnittstelle nicht tastaturnavigierbar machen, wenn sie nicht dafür entworfen wurde. Tastaturnavigation wird vom Design an gedacht. Sie wird in der DOM-Reihenfolge, in der Focus-Verwaltung, in ARIA-Landmarks kodiert. Es ist kein Flickwerk — es ist eine Architektur.

Was echte Zugänglichkeit erfordert

Mein Rat für ein kleines Unternehmen mit kleinerem Budget: strebe nicht sofort nach vollständiger Conformance. Strebe nach den wirkungsvollsten Gewinnen.

Minimales Text-zu-Hintergrund-Kontrastverhältnis von 4,5:1 für normalen Text. Explizite Labels auf allen Formularfeldern. Alt-Text von jemandem geschrieben, der den Kontext versteht. Navigation ohne Maus auf kritischen Nutzer-Journeys (Kontakt, Kauf, Anmeldung) möglich.

Diese vier Punkte decken die meisten echten Situationen ab. Sie sind mit kostenlosen Tools wie Lighthouse oder WAVE in weniger als einer Stunde überprüfbar. Und sie erfordern kein Overlay.


Wie du KI nutzt, ohne in ihre Fallen zu tappen

Es wäre unehrlich von mir, KI im Design zu kritisieren, ohne den Kontext zu klären. In meiner Agentur nutze ich Claude Code täglich. Nova Mind, unser SaaS, ist darauf aufgebaut. KI erlaubte mir, 21 Seiten in 10 Stunden auf einem jüngsten Projekt zu liefern.

Aber ich weiß genau, wo sie zuverlässig ist und wo nicht.

KI ist ausgezeichnet beim: Generieren von Komponentenvarianten, Vorschlagen von Seitenstrukturen aus einem Brief, Automatisieren des Schreibens von Fehler- und Erfolgszuständen in Formularen, Überprüfen von Farbtoken-Konsistenz in einem bestehenden Design System.

KI ist mittelmäßig beim: Beurteilen, ob eine visuelle Hierarchie das Wesentliche effektiv kommuniziert, Bewerten, ob eine Nutzer-Journey für dein spezifisches Publikum intuitiv ist, Schreiben von Alt-Texten, die in ihrem Kontext Sinn machen, Testen der Robustheit einer Schnittstelle mit echten Nutzern.

Drehen wir es um: KI ist ein außergewöhnlicher Ausführender. Sie braucht einen Architekten, der weiß, was er will.

Designer nutzt KI als Tool mit menschlicher Beaufsichtigung von UX-Prinzipien

Der Workflow, der bei uns funktioniert: wir definieren Prinzipien und Beschränkungen im Voraus (Hierarchie, Konsistenz, Basis-Zugänglichkeit), lassen KI innerhalb dieses Rahmens generieren, überprüfen das Ergebnis gegen menschliche Kriterien. KI arbeitet in den Schienen, die wir für sie bauen.

Ohne diese Schienen macht sie das, was sie kann: etwas produzieren, das dem ähnelt, was du fragtest. Nicht notwendig etwas, das funktioniert.


Drei Fragen zur Überprüfung deiner Website Heute

Kein Budget nötig, keine Premium-Tools. Diese drei Überprüfungen dauern 20 Minuten und offenbaren das Wesentliche.

1. Teste deine Website ohne Maus. Navigiere nur mit der Tab-Taste. Kannst du das Kontaktformular erreichen? Ist der Focus bei jedem Schritt sichtbar? Wenn du dich verirrst, auch deine Nutzer.

2. Deaktiviere CSS-Stile. Die meisten Browser ermöglichen dies über Entwicklertools. Ist dein Inhalt noch lesbar und strukturiert? Haben Überschriften eine echte Hierarchie H1 > H2 > H3? Wenn die Seite ohne CSS unverständlich wird, braucht deine semantische Struktur Überarbeitung.

3. Sende dein Hauptformular unter Leer-Lassung eines Feldes ab. Zeigt die Fehlermeldung, welches Feld problematisch ist? In verständlichen Begriffen? Oder nur “Fehler” in Rot? Dieser Test offenbart die Qualität des Nutzer-Feedbacks in 30 Sekunden.


Was Dies für deine Website Konkret Ändert

KI wird sich weiter in die Webproduktion integrieren. Das ist unvermeidlich, und es ist eine gute Sache für Teams, die wissen, wie man sie nutzt.

Aber “wissen, wie man sie nutzt” bedeutet, das zu beherrschen, was sie nicht kann. Die fundamentalen Prinzipien — Hierarchie, Konsistenz, Feedback, echte Zugänglichkeit — sind keine akademischen Beschränkungen. Sie sind die Mindestbedingungen dafür, dass ein Besucher deine Website versteht, ihr vertraut und handelt.

In ganz Deutschland und darüber hinaus wollen Unternehmen, die in eine Website investieren, messbare Ergebnisse. Nicht ein 49€/Monat Accessibility-Badge. Nicht eine in 5 Minuten generierte Schnittstelle, die wie eine Website aussieht, aber nicht konvertiert.

“Gutes Design beeindruckt nicht. Es leitet, ohne dass du es bemerken.” — dieser Satz fasst 15 Jahre Webprojekte besser zusammen als irgendein methodisches Framework.

Tools ändern sich. Nutzer-Verhalten bleiben bemerkenswert stabil. Menschen wollen verstehen, wo sie sind, was du ihnen anbietest, und was sie danach tun sollen. Das war 2010 wahr. Es ist heute wahr. Es wird wahr sein, wenn KI ganze Schnittstellen in Echtzeit generiert.


Willst du Wissen, wie es um deine Website bei diesen Kriterien Steht?

Bei Projekten, die wir in den letzten Monaten durchgeführt haben, reicht eine 3-stündige Prüfung normalerweise aus, um die 5-6 Punkte zu identifizieren, die Conversion blockieren oder Nutzer-Erfahrung beeinträchtigen. Kein systematisches Redesign. Keine unnötigen Service-Verkäufe.

Wenn deine Website mit KI-Tools ohne ernsthafte technische Beaufsichtigung gebaut oder neu entworfen wurde, oder wenn du ein “Accessibility”-Overlay installiert hast, denkend, du hättes das Kästchen angekreuzt — es lohnt sich zu überprüfen.

Kontaktiere GDM-Pixel für eine ehrliche Prüfung. Wir sagen dir, was nicht stimmt, warum, und was es kostet zu reparieren. Unverbindlich.

Charles Annoni

Charles Annoni

Front-End-Entwickler und Ausbilder

Charles Annoni begleitet Unternehmen seit 2008 bei ihrer Webentwicklung. Er ist auch Ausbilder in der Hochschulbildung.