Benutzeroberflächen & Usability

Vom Arbeitsablauf zur Oberfläche

Beginne mit Zielgruppe, Aufgabe und Informationsfluss. Was muss eine Person eingeben, entscheiden und erkennen? Zeichne einen einfachen Ablauf und beschreibe Hauptweg, Fehlerweg und Rückkehr. Ein schönes Formular löst den Auftrag erst dann, wenn es die fachliche Handlung unterstützt. Lege Abnahmekriterien vor dem Entwurf fest, etwa verständliche Fehlermeldungen und Bedienung ohne Maus.

Semantisches HTML

Verwende passende Elemente statt jedes Element als div zu bauen. main kennzeichnet den Hauptinhalt, nav Navigation und button eine Aktion. Eine Überschrift beschreibt eine Inhaltsstruktur und nicht bloß eine Schriftgröße. Nutze h1 für die Hauptüberschrift und passende untergeordnete Ebenen. Listen und Tabellen brauchen die ihrem Inhalt entsprechende Struktur.

<main>
  <h1>Tickets</h1>
  <section><h2>Offene Anfragen</h2><p>Hier findest du deine Aufgaben.</p></section>
</main>

Formulare und Beschriftungen

Ein sichtbares label muss dem Eingabefeld zugeordnet sein, etwa über for und eine eindeutige id. placeholder ersetzt keine dauerhafte Beschriftung. Wähle einen passenden Eingabetyp und erkläre Pflichtfelder. Verwende autocomplete nach tatsächlicher Feldbedeutung. Gruppierte Auswahlfelder können über fieldset und legend einen gemeinsamen verständlichen Kontext erhalten.

<label for="mail">E-Mail-Adresse</label>
<input id="mail" name="email" type="email" autocomplete="email" required>

Eingabeprüfung und Fehlerzustände

Prüfe früh genug, um Rückmeldung zu geben, aber auch auf dem Server, weil Browserregeln umgangen werden können. Eine Fehlermeldung nennt das betroffene Feld und eine umsetzbare Korrektur. Verknüpfe Hinweise mit aria-describedby und setze aria-invalid nur passend zum Zustand. Bewahre bereits korrekte Eingaben bei einem Fehler. Unterscheide Speichern, Erfolg und unbestätigte Verbindung statt nach jedem Klick Erfolg zu behaupten.

Tastatur, Fokus und Aktionen

Interaktive Elemente müssen mit der Tastatur erreichbar sein und einen sichtbaren Fokus besitzen. Verändere nicht ungeprüft die natürliche Reihenfolge mit positiven tabindex-Werten. Native Buttons unterstützen viele Verhaltensweisen bereits. Ein klickbares div benötigt zusätzliche Semantik und Tastaturbehandlung und ist für gewöhnliche Aktionen unnötig kompliziert. Ein modaler Dialog braucht passende Fokusführung und eine verständliche Schließmöglichkeit.

Kontrast, Texte und Zustandsanzeigen

Text und Bedienelemente brauchen ausreichenden Kontrast; Farbe allein darf keinen wesentlichen Zustand vermitteln. Ein Fehler benötigt zusätzlich Text oder ein anderes verständliches Merkmal. Passe Zeilenhöhe und Abstand an, damit Zeichen wie Ü und Ä nicht abgeschnitten werden. Prüfe lange Überschriften, Zoom, helle und dunkle Darstellung sowie vergrößerte Schrift. Die Werkstatt prüft ausgewählte Strukturregeln, keine vollständige Kontrast- oder Barrierefreiheitszertifizierung.

Responsives Layout mit CSS

Ein Layout soll auf schmalen und breiten Geräten funktionieren. Nutze flexible Breiten, Grid oder Flexbox und gezielte Media Queries. Vermeide feste Höhen für längere Inhalte. Tabellen können eine ausdrücklich beschriftete horizontale Scrollregion benötigen. Buttons dürfen nicht unter Text oder außerhalb des sichtbaren Bereichs verschwinden. Mobile Gestaltung ist eine Anpassung an Aufgaben und Platz, kein bloßes Verkleinern des Desktopbildes.

.karten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
button:focus-visible { outline: 3px solid #087f73; outline-offset: 3px; }

Tabellen und strukturierte Informationen

Tabellen sind für tabellarische Beziehungen geeignet. Eine caption beschreibt den Inhalt; th und passende scope-Angaben ordnen Überschriften Zeilen oder Spalten zu. Verwende nicht ausschließlich visuelle Fettschrift für Tabellenköpfe. Für eine einfache Aufzählung ist eine Liste leichter verständlich. Beachte Sortierzustände und Leerzustände in echten Anwendungen.

Datenschutz und sichere Darstellung

Fordere nur notwendige Daten an und erkläre deren Zweck. Gib fremde Texte als Text aus statt sie ungeprüft in HTML einzusetzen. Ein Hinweis im Frontend erteilt keine Serverberechtigung. Links, Anhänge und eingebettete Inhalte benötigen Grenzen. Die Oberflächenwerkstatt entfernt aktive und externe Inhalte und zeigt den Entwurf in einer isolierten Vorschau; sie führt kein JavaScript aus.

Usability testen

Gib einer Testperson eine konkrete Aufgabe, ohne den vorgesehenen Weg vorzusagen. Beobachte Fehler, Suchaufwand, Abschluss und Rückfragen. Erfolg ist ein erledigter Auftrag, nicht die Aussage, dass Farben gefallen. Prüfe auch Tastaturbedienung, lange Werte, fehlende Daten und kleine Bildschirme. Dokumentiere Probleme nach Auswirkung und Häufigkeit und überprüfe die Verbesserung erneut.

Iterativ entwickeln und begründen

Erstelle zuerst eine kleine funktionale Version des Hauptablaufs. Hole Rückmeldung ein und passe sie an. Anforderungen, technische Umsetzung und Tests müssen sich auf dieselben Ziele beziehen. Vergleiche den Nutzen einer Änderung mit ihrem Aufwand, etwa weniger Fehlbestellungen oder kürzere Bearbeitungszeit. Agile Begriffe allein machen noch keinen überprüfbaren Entwicklungsprozess.

Praxis: ein Ticketformular

Entwirf ein Formular mit sichtbaren Labels, passenden Feldtypen, Pflichtfeldhinweisen und verständlichem Fehlerbereich. Ordne die Elemente in einem flexiblen Layout an. Prüfe mit Tastatur und schmaler Darstellung, ob die Handlung verständlich bleibt. Dokumentiere akzeptierte Eingaben und Abnahmekriterien. Übertrage die Anforderungen anschließend auf ein Frontend und ein Java- oder Python-Backend mit serverseitiger Validierung; die Werkstatt übt die Oberfläche und ersetzt keine vollständige Backend-Anwendung.