Design, UX und Barrierefreiheit

Design, UX und Barrierefreiheit verstehen

Beobachten Sie eine Aufgabe statt nur das Seitenbild. Verbinden Sie Lesereihenfolge, Bedienelementnamen, Zustände und Fehlerbehandlung. Größere Schrift und Tastatur zeigen Hindernisse, die ein statischer Entwurf nicht erkennen lässt.

81 Begriffe mit Definitionen und praktischen Hinweisen.

Im gesamten Glossar suchen

KI-generierte Illustration — Design, UX und Barrierefreiheit verstehen — KI-generierte Illustration

Ein Lesepfad

1. Lesen orientieren

Visuelle Hierarchie
Grafische Organisation, die angibt, was zuerst durch Größe, Kontrast, Raum und Position gesehen und verstanden werden sollte.
Informationsarchitektur
Organisation von Inhalten, Kategorien, Etiketten und Navigationspfaden, damit Informationen leicht zu finden und zu verstehen sind.
Lesereihenfolge
Reihenfolge, in der Seiten- oder Dokumentinhalte angetroffen werden, auch durch Tastatur oder Hilfstechnologie.

2. Interaktionen beschreiben

Zugänglicher Name
Name, der Hilfstechnologien ausgesetzt ist, um eine Schaltfläche, ein Feld, einen Link oder eine andere interaktive Komponente zu identifizieren.
Komponentenzustand
sichtbarer Zustand eines Steuerelements wie Fokus, Fehler, Laden oder Nichtverfügbarkeit.
Feldfehlermeldung
Nachricht, die einem Formularfeld zugeordnet ist, das das Problem und die erwartete Korrektur erklärt.

3. Nutzung beobachten

Nutzbarkeit
Einfacher, mit dem Benutzer eine Schnittstelle verstehen, Aufgaben erledigen und Fehler vermeiden oder wiederherstellen können.
Responsives Design
Design Anpassung von Layout, Medien und Interaktionen an unterschiedliche Bildschirmgrößen und -bedingungen.
Cumulative Layout Shift (CLS)
Kennzahl zur visuellen Stabilität anhand der größten Gruppe unerwarteter Layoutverschiebungen.

Hilfreiche Unterscheidungen

Alternativer Text / Zugänglicher Name

Ein Alternativtext vermittelt die Bildfunktion; ein zugänglicher Name identifiziert ein Element. Ein Bild als Bedienelement muss die Handlung verständlich machen.

Wireframe / Modell

Ein Wireframe untersucht Struktur; ein Mockup verfeinert Darstellung. Beides beweist keinen funktionierenden Browserablauf.

Lehrbeispiel

Mit Begriffen eine Entscheidung vorbereiten

Situation

Ein Formularfehler ist sichtbar, das betroffene Feld mit Tastatur aber schwer zu finden.

Vor der Entscheidung

Prüfen Sie Name, Zuordnung der Meldung und Reihenfolge. Eine andere Farbe allein erklärt keine Korrektur.

Eine konkrete Prüfung

Wiederholen Sie mit ungültiger Eingabe ohne Anleitung durch die gestaltende Person.

Alle Begriffe des Themas

Links öffnen die vollständige Definition auf der alphabetischen Seite. Kürzel und Synonyme bleiben im Hauptglossar suchbar.

Primäre Referenzdokumente

Diese Dokumente erläutern technische Begriffe. Lesepfade und Beispiele sind redaktionelle Methoden zur Anpassung an Ihr Projekt.

Geh zum Üben