UX, Interface Design und KI — Cheat Sheet

Das Methodenblatt zum Seminar Modern UI und UX Engineering für Webanwendungen — Raster, Vergleiche und Kurzformen zum Nachschlagen, wenn im Termin die Frage aufkommt, welches Verfahren jetzt eigentlich passt. Es bringt die Methoden nicht bei, es erinnert an sie. Die technische Seite — WCAG-Kriterien, semantisches Markup, Fokus, Prüfwege — liegt auf dem zweiten Blatt: Barrierefreie Weboberflächen.

Vier Begriffe, vier Fragen

Die Trennung ist kein Vokabeltest: Sie entscheidet, wer an einem Befund arbeitet.

So sieht ein zugeordneter Befund aus: „Preis erst nach drei Klicks sichtbar” → UX, Produkt und Konzept. „Fokus im Datumsfeld nicht erkennbar” → Accessibility, Design System. „Filter ohne sichtbaren Zustand” → Usability, Konzept und Frontend.

Modul: UI, UX, Usability und Accessibility

Human-centred Design nach ISO 9241-210

Ein Durchlauf ist noch kein Prozess; die Schleife ist der Kern. Die Brücke vom Kontext zur Anforderung ist ein knapper Steckbrief je Hauptaufgabe:

aufgabe:   Fahrt für morgen buchen
nutzende:  Pendelnde ohne Kundenkonto
mittel:    Telefon, mobile Daten, eine Hand
umgebung:  Bahnsteig, Sonnenlicht, unter Zeitdruck
folgen:
  - Zielgröße mindestens 44 Pixel
  - Kontrast über dem Mindestwert wählen
  - Zwischenstand bei Abbruch erhalten

Er begründet Zielgrößen und Kontraste, statt sie zur Geschmacksfrage zu machen. Zielgruppe und Nutzungskontext sind nicht dasselbe — dieselbe Person, andere Situation.

Modul: Human-centred Design

Forschung: Methoden und Quellen

Wer mit Interviews beginnt, erhebt oft teuer, was im Ticketsystem schon steht.

Eine Hypothese ist erst eine, wenn die Schwelle darinsteht: „Wir glauben, dass ein Beispieldatum im Hilfetext die Abbrüche senkt. Bestätigt, wenn die Abbruchquote in zwei Wochen um mindestens ein Fünftel fällt.” Und der Satz, der am häufigsten fehlt: was passiert, wenn sie nicht erreicht wird.

Modul: Human-centred Design

KI in Research und Discovery

Der Unterschied liegt nicht im Modell, sondern im Auftrag. Statt „Fasse dieses Nutzerfeedback zusammen”:

Fasse dieses Nutzerfeedback zusammen.
Belege jede Aussage mit einem wörtlichen Zitat
und der Zeilennummer aus der Quelle.
Was du nicht belegen kannst, lässt du weg.
Nenne am Ende, was unklar geblieben ist.

Der letzte Satz ist der wertvollste — er macht die Lücke sichtbar, statt sie zu überschreiben. Was aus solchen Läufen kommt, braucht ein Herkunftsfeld:

Simulierte Nutzer sind kein Ersatz für eine Sitzung mit Menschen:

Modul: KI in UX Research und Discovery

Informationsarchitektur und Benutzerführung

Zwei Ordnungen gleichrangig anzubieten — etwa nach Produktart und nach Kundenkonto — passt zu niemandem und bricht bei jeder zweiten Aufgabe. Und Progressive Disclosure heißt hidden plus aria-expanded, nicht display: none auf einem Klick-div.

Modul: Informationsarchitektur und Benutzerführung

Interface Design: Farbe, Typografie, Eingabe

body {
  font-size: 1rem;      /* folgt der Browsereinstellung */
  line-height: 1.6;
}
.fliesstext { max-width: 70ch; }

:root { --grund: #fff; --text: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  :root { --grund: #0d1b2a; --text: #e9edf2; }
}
@media (prefers-contrast: more)      { :root { --text: #000; } }
@media (prefers-reduced-motion: reduce) {
  .panel { transition: opacity .1s; transform: none; }
}

Jeder dieser Modi braucht eine eigene Kontrastprüfung — Werte aus dem hellen gelten im dunklen nicht. Und bei reduzierter Bewegung nicht alles abschalten: ein kurzes Ein- und Ausblenden bleibt hilfreich.

Mehr als drei Hierarchieebenen sind keine Hierarchie mehr — ab der vierten ist keine mehr erkennbar.

Modul: Modernes Interface Design

Design Systems und Tokens

/* Fokus als Token statt als Einzelfall in jeder Komponente */
:root { --fokus: 3px solid #1b4a7a; --fokus-luft: 2px; }
:focus-visible {
  outline: var(--fokus);
  outline-offset: var(--fokus-luft);
}

Jede Komponente im System bekommt vier Angaben — Rolle, zugänglicher Name, Tastenbelegung, gemeldete Zustände. Das ist zugleich die Vorlage für den Auftrag an einen Coding Agent:

rolle:    checkbox
name:     Platz 14A, Fenster, frei
tasten:   Leertaste wählt ab und an
zustaende:
  - aria-checked spiegelt die Auswahl
  - aria-disabled bei belegten Plätzen
  - Belegung zusätzlich im Namen genannt

Bibliotheken nicht nach Funktionsumfang und Sternen auswählen, sondern die Komponenten im eigenen Aufbau nachstellen — nicht die Demoseite prüfen.

Modul: Design Systems und wiederverwendbare Komponenten

Usability systematisch evaluieren

Eine Testaufgabe darf die Wörter der Oberfläche nicht enthalten — sonst misst sie Lesefähigkeit statt Auffindbarkeit. Also nicht „Klicken Sie auf Sitzplatzwahl”, sondern „Sie fahren Freitag nach Kirchbach und sitzen gern am Fenster. Buchen Sie die Fahrt.”

Modul: Usability systematisch evaluieren

KI-gestützte UI-Arbeit

Vier Fehlerbilder in generiertem Markup, die eine Sichtprüfung nie findet:

Deshalb „barrierefrei” nicht als Adjektiv in den Auftrag schreiben, sondern die Anforderung ausformulieren — und eine Aussage über das Verhalten verlangen:

Baue ein Akkordeon aus button und Panel.
Kein ARIA, wo ein Element genügt.
Der Schalter meldet seinen Zustand.
Bedienbar mit Tabulator und Eingabetaste.
Nenne am Ende die Tastenbelegung.

Modul: KI-gestützte UI- und UX-Entwicklung

Agentic Coding für Oberflächen

Projektregeln gehören ins Repository, nicht ins Wiki und nicht in jeden Prompt:

# Regeln für Oberflächenänderungen
- Systemkomponenten verwenden, keinen Eigenbau.
- Abstände und Farben nur über Tokens.
- Semantisches Element vor ARIA-Attribut.
- Jede Komponente nennt Rolle, Name, Tasten, Zustände.
- Fokus sichtbar lassen, outline nie ersatzlos entfernen.

Am Ende eines Laufs stehen fünf Zeilen: Geändert, Grund, Geprüft, Offen, Nicht angefasst. Die Zeile Offen ist die wichtigste — ohne sie wirkt jeder Lauf vollständig.

Modul: Agentic Coding für Weboberflächen · Das agentenfähige Web

Reifegrade und Agent Experience

Dieselbe Maßnahme hilft Menschen und Maschinen: Ein zugänglicher Name lässt Screenreader und Sprachsteuerung arbeiten — und einen Agenten das Element finden. Ein gemeldeter Zustand sagt die Änderung an — und lässt den Agenten den Erfolg erkennen. Das ist ein Nebeneffekt, kein Ersatz für die Begründung.

Modul: Das agentenfähige Web und Abschlussprojekt

Typische Fallen

• UX als Synonym für Optik. Die schlechteste Abkürzung im ganzen Feld — und sie sortiert jeden Befund in die falsche Zuständigkeit.
• Zuständigkeit an eine Rolle hängen statt an eine Frage. Dieselbe Falle in groß: eine Beauftragte für Barrierefreiheit entlastet alle anderen.
• Nutzungsanforderungen mit funktionalen Anforderungen verwechseln. Und: nur den Idealfall beschreiben, die Ausnahme später improvisieren.
• Aus fünf Beobachtungen eine Prozentzahl machen — oder aus einer Abbruchquote eine Ursache ableiten. Beide Richtungen sind falsch.
• Die Discovery mit dem teuersten Verfahren beginnen. Supportanfragen sind Feldforschung, keine Beschwerdesammlung.
• Personas erfinden und ihnen später Forschungsstatus zusprechen. Bei generierten Personas verschwindet die Kennzeichnung erfahrungsgemäß beim ersten Weiterreichen des Dokuments.
• Eine Schwelle nachträglich festlegen, wenn die Zahlen vorliegen.
• Konventionen brechen, um sich vom Wettbewerb zu unterscheiden. Vertraute Symbole mit neuer Bedeutung zu belegen, kostet immer mehr, als es bringt.
• Den Fokuszustand im Entwurf weglassen und ihn der Entwicklung überlassen. Was nicht entworfen ist, wird auch nicht abgenommen.
• Basisschriftgrößen in Pixeln festnageln. Die Vergrößerung im Browser läuft damit ins Leere.
• Den dunklen Modus durch bloßes Invertieren erzeugen — und die Kontraste darin nie eigens prüfen.
• Mit fünf Personen eine Kennzahl belegen wollen. Formativ testen und das Ergebnis als Qualitätsnachweis verkaufen, ist derselbe Fehler.
• Während des Tests Hilfestellung geben. Der Befund ist damit gelöscht.
• Generierten Code nur lesen und nicht bedienen. Er sieht am überzeugendsten dort aus, wo er am wenigsten funktioniert.
• Den grünen Agentenlauf als Abnahme werten. Und: die Freigabe an die Person geben, die den Auftrag geschrieben hat.
• Experimentelle Ansätze als Planungsgrundlage verkaufen. Den Reifegrad in Unterlagen wegzulassen, weckt Erwartungen, die niemand halten will.

Zum Seminar Modern UI und UX Engineering für Webanwendungen