Oberflächen (UIs) mit Webtechnologien entwickeln

Eine gute Oberfläche sieht nicht nur gut aus, sie lässt Menschen ihr Ziel schnell und ohne Frust erreichen. In diesem Modul erfasst du Nutzerbedürfnisse, skizzierst Abläufe und baust in Figma klickbare Prototypen mit wiederverwendbaren Komponenten. Danach setzt du die Oberfläche mit Webtechnologien um: komponentenbasiert, responsiv, touchtauglich und barrierefrei nach WCAG. Zum Schluss testest du mit echten Personen und verbesserst die Lösung anhand der Ergebnisse.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Nutzerbedürfnisse erfassen und in Anforderungen an die Oberfläche übersetzen

   Kompetenz A

   Du findest heraus, wer die Oberfläche nutzt, in welcher Situation und mit welchem Ziel. Daraus leitest du Personas, User Stories und einen User Flow ab, der die wichtigsten Schritte zeigt.

   Situation

   Ein Bergbahnunternehmen im Wallis will den Online-Ticketkauf verbessern. Viele Gäste brechen auf dem Smartphone an der Kasse ab.

   Deine Aufgabe

   Erfasse die Bedürfnisse der wichtigsten Gruppe und skizziere den idealen Ablauf.

   Gutes Ergebnis

   Persona 'Familie Meier, kauft am Vorabend auf dem Handy, 2 Erwachsene, 2 Kinder, Halbtax'. User Story: 'Als Familie will ich alle Tickets in einem Schritt kaufen, damit ich nicht viermal dieselben Daten eingebe.' User Flow mit vier Schritten statt bisher sieben.

   PersonaUser StoryUser FlowNutzungskontextAkzeptanzkriterien
2. 2

   Wireframes und klickbare Prototypen in Figma erstellen

   Kompetenz B

   Du beginnst mit groben Wireframes und verfeinerst sie zu einem High-Fidelity-Prototyp. Du arbeitest mit Auto Layout, Komponenten mit Varianten und Styles, damit der Entwurf konsistent und später leicht umsetzbar ist.

   Situation

   Für die Ticketstrecke der Bergbahn soll das Management vor der Umsetzung den Ablauf auf dem Handy durchklicken können.

   Deine Aufgabe

   Erstelle einen klickbaren Prototyp für Mobile.

   Gutes Ergebnis

   Vier Screens im Frame 390 x 844 px. Komponenten 'Button' (primary, secondary, disabled), 'Ticketzeile' mit Plus/Minus und 'Preiszusammenfassung'. Prototyp-Verbindungen zwischen den Screens, freigegeben als Figma-Link.

   WireframeHigh-Fidelity-PrototypAuto LayoutKomponenten und VariantenStyles / Variables
3. 3

   UI-Komponenten wiederverwendbar mit HTML, CSS und JavaScript umsetzen

   Kompetenz C

   Du baust die Figma-Komponenten als Webkomponenten nach: einheitliche Klassennamen, Zustände (hover, focus, disabled, error), Design-Tokens als Custom Properties und schlankes JavaScript für Interaktionen.

   Situation

   Die Entwicklerin der Bergbahn möchte die Ticketzeile mit Mengenwahl als fertige HTML/CSS/JS-Komponente übernehmen.

   Deine Aufgabe

   Setze die Komponente um und dokumentiere ihre Varianten.

   Gutes Ergebnis

   Komponente '.ticket-row' mit Label, Preis in CHF und zwei echten button-Elementen für Plus und Minus. Minus ist bei 0 deaktiviert, die Menge wird mit aria-live angesagt. Eine Demo-Seite zeigt alle Zustände nebeneinander.

   KomponenteZuständeDesign-TokensBEMPattern Library
4. 4

   Oberflächen responsiv und touchtauglich umsetzen

   Kompetenz D

   Du sorgst dafür, dass die Oberfläche auf kleinen Touchscreens genauso gut bedienbar ist wie mit Maus und Tastatur. Touch-Ziele sind gross genug, wichtige Aktionen liegen im Daumenbereich, und Komponenten passen sich mit Container Queries ihrem Platz an.

   Situation

   Im Prototyp stehen auf dem Handy 'Zurück' und 'Weiter' als kleine Textlinks direkt nebeneinander. Testpersonen treffen oft den falschen.

   Deine Aufgabe

   Überarbeite die Navigation der Ticketstrecke für Touch.

   Gutes Ergebnis

   'Weiter' als volle Breite, 48 px hoch, fix am unteren Rand. 'Zurück' als Pfeil oben links. Mindestens 8 px Abstand zwischen Touch-Zielen. Die Preiszusammenfassung wechselt per Container Query von gestapelt zu zweispaltig.

   Touch-Ziel (mind. 44 x 44 px)DaumenzoneContainer QueriesBreakpointsEingabemodi
5. 5

   Barrierefreiheit nach WCAG umsetzen und prüfen

   Kompetenz E

   Du baust die Oberfläche so, dass sie mit Tastatur, Screenreader und Vergrösserung funktioniert. Du nutzt semantisches HTML vor ARIA, achtest auf Kontraste, verständliche Fehlermeldungen und eine logische Fokusreihenfolge und prüfst automatisiert und manuell.

   Situation

   Eine Schweizer Gemeinde verlangt für ihr neues Anmeldeportal WCAG 2.1 AA, wie es für Behördenangebote üblich ist.

   Deine Aufgabe

   Prüfe das Portal und behebe die wichtigsten Mängel.

   Gutes Ergebnis

   axe findet 12 Probleme: fehlende Labels, Kontrast 3,2:1 bei grauem Text, ein Modal ohne Fokusfalle. Nach der Korrektur: alle Felder mit label, Text auf #555 (7,5:1), Modal hält den Fokus und schliesst mit Escape. Test mit NVDA bestätigt, dass alle Schritte ansagbar sind.

   WCAG 2.1 / 2.2 AATastaturbedienungScreenreaderARIA (sparsam)FokusmanagementKontrast
6. 6

   Die Oberfläche mit Usability-Tests prüfen und gezielt verbessern

   Kompetenz F

   Du planst einen kleinen Test mit fünf Personen, gibst ihnen realistische Aufgaben und beobachtest, ohne zu helfen. Die Probleme priorisierst du nach Schwere und Häufigkeit und leitest konkrete Verbesserungen ab.

   Situation

   Der Prototyp der Bergbahn ist fertig. Vor der Umsetzung will das Management wissen, ob Gäste damit zurechtkommen.

   Deine Aufgabe

   Führe einen Think-Aloud-Test durch und werte ihn aus.

   Gutes Ergebnis

   Fünf Personen, Aufgabe: 'Kauf Tickets für deine Familie für morgen.' Vier von fünf finden den Halbtax-Rabatt nicht. Priorität hoch: Halbtax-Abfrage direkt in die Ticketzeile verschieben. Nach der Anpassung schaffen es alle fünf in unter zwei Minuten.

   Think-AloudTestaufgabeErfolgsquoteSchweregradIteration

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Nico ist im 3. Lehrjahr als Mediamatiker bei der Kernform AG in St. Gallen, einer Digitalagentur mit 28 Mitarbeitenden. Ein Sport- und Freizeitzentrum in Gossau will die Online-Reservation für Badmintonplätze und Schwimmkurse erneuern, weil viele Gäste lieber anrufen, als sich durch das alte Formular zu kämpfen. Nico übernimmt die Oberfläche von der Recherche bis zum fertigen Frontend.

1. Kapitel 1

   Warum alle anrufen

   Nico führt sechs kurze Interviews an der Kasse des Sportzentrums und wertet die Webanalyse aus. 70 Prozent der Besuche kommen vom Handy, und viele brechen bei der Wahl des Zeitfensters ab. Er erstellt zwei Personas, einen berufstätigen Badmintonspieler und eine Mutter, die einen Schwimmkurs für ihre Tochter sucht. Daraus leitet er ab, dass freie Zeiten auf einen Blick sichtbar sein müssen.

   Ziel 1

2. Kapitel 2

   Klicken, bevor programmiert wird

   In Figma baut Nico zuerst Wireframes in Graustufen und danach einen klickbaren Prototyp mit Komponenten für Zeitfenster, Button und Eingabefeld. Mit Varianten bildet er die Zustände frei, belegt und ausgewählt ab. Die Kundin wünscht sich ein grosses Logo im Kopfbereich, worauf Nico im Prototyp zeigt, dass dann auf dem Handy kein einziges Zeitfenster mehr ohne Scrollen sichtbar ist. Man einigt sich auf eine schlanke Kopfzeile.

   Ziel 2

3. Kapitel 3

   Fünf Tests, drei Probleme

   Mit dem Prototyp testet Nico fünf Gäste des Sportzentrums. Drei finden den Wechsel zum nächsten Tag nicht, weil der Pfeil klein und hellgrau ist, und zwei verstehen den Begriff 'Slot' nicht. Nico ersetzt den Pfeil durch beschriftete Tagesreiter und schreibt 'freie Zeiten'. Im zweiten Testlauf schaffen alle fünf die Reservation in unter zwei Minuten.

   Ziel 6

4. Kapitel 4

   Vom Figma-Bauteil zum Code

   Nico setzt die Zeitfenster-Komponente mit HTML, CSS-Variablen und wenig JavaScript um, inklusive der Zustände für Fokus und belegt. Das Raster baut er mit CSS Grid mobile first, und auf breiten Bildschirmen zeigt es dank Container Query eine ganze Woche. Auf einem älteren Android-Handy merkt er, dass die Zeitfenster nur 32 Pixel hoch sind und oft daneben getippt wird, und vergrössert sie auf 48 Pixel.

   Ziel 3Ziel 4

5. Kapitel 5

   Mit Tastatur und Screenreader

   Zum Schluss prüft Nico die Seite mit axe DevTools und NVDA. Der Screenreader liest bei den Zeitfenstern nur 'Schaltfläche' vor, und belegte Zeiten sind allein an der Farbe erkennbar. Nico ergänzt sprechende Beschriftungen wie 'Platz 3, 18 Uhr, frei', ein zusätzliches Symbol für belegte Zeiten und einen gut sichtbaren Fokusrahmen. Im Prüfbericht für die Kundin dokumentiert er die geprüften Kriterien nach WCAG 2.1 AA und die behobenen Mängel.

   Ziel 5

1. 1

   Menschen verstehen

   ca. 4 Std.

   Du startest bei den Nutzenden und nicht beim Layout.

   • Drei kurze Interviews mit potenziellen Nutzenden führen und Notizen strukturieren
   • Eine Persona und fünf User Stories formulieren
   • Einen User Flow für die wichtigste Aufgabe in FigJam zeichnen

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   Prototyp in Figma

   ca. 6 Std.

   Du entwickelst die Oberfläche vom Wireframe bis zum klickbaren Prototyp mit Komponenten.

   • Low-Fidelity-Wireframes für Mobile und Desktop erstellen
   • Komponenten mit Varianten und Auto Layout bauen
   • Die Screens zu einem klickbaren Prototyp verbinden

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Früh testen

   ca. 4 Std.

   Du testest den Prototyp, bevor eine Zeile Code geschrieben ist.

   • Einen Testleitfaden mit drei Aufgaben schreiben
   • Fünf Think-Aloud-Tests durchführen
   • Probleme priorisieren und den Prototyp überarbeiten

   Trainiert Kompetenz F1F2

   Lernziel6

4. 4

   Komponenten im Code

   ca. 8 Std.

   Du setzt die Komponenten aus Figma in HTML, CSS und JavaScript um und machst sie responsiv.

   • Design-Tokens aus Figma als Custom Properties übernehmen
   • Button, Eingabefeld, Karte und Modal mit allen Zuständen umsetzen
   • Layouts mit Grid und Container Queries anpassen und auf echten Geräten testen

   Trainiert Kompetenz C1C2D1D2

   Lernziel34

5. 5

   Barrierefreiheit prüfen

   ca. 4 Std.

   Du testest die Umsetzung automatisiert und manuell und behebst Mängel.

   • Mit axe DevTools und Lighthouse prüfen
   • Die ganze Oberfläche nur mit der Tastatur bedienen
   • Einen Ablauf mit NVDA oder VoiceOver durchgehen und Mängel dokumentieren

   Trainiert Kompetenz E1E2

   Lernziel5

6. 6

   Abschlussprojekt

   ca. 6 Std.

   Du entwickelst eine kleine Oberfläche komplett, von der Analyse bis zum getesteten Code.

   • Analyse, Prototyp und Umsetzung in einem Projekt verbinden
   • Einen zweiten Usability-Test mit der umgesetzten Version durchführen
   • Ergebnisse und Entscheide in einer kurzen Dokumentation festhalten

   Trainiert Kompetenz A3C3E3F3

   Lernziel1356

UI

User Interface: die sichtbare Oberfläche, über die Menschen eine Anwendung bedienen.

UX

User Experience: das gesamte Erlebnis einer Person bei der Nutzung eines Produkts.

Persona

Fiktive, aber auf Recherche basierende Beschreibung einer typischen Nutzerin oder eines typischen Nutzers.

User Flow

Darstellung der Schritte, die eine Person durchläuft, um ein Ziel zu erreichen.

Prototyp

Klickbares Modell einer Oberfläche, mit dem man Abläufe testen kann, bevor programmiert wird.

Auto Layout

Figma-Funktion, mit der sich Elemente wie in Flexbox automatisch anordnen und mitwachsen.

WCAG

Web Content Accessibility Guidelines: internationale Richtlinien für barrierefreie Webinhalte mit den Stufen A, AA und AAA.

ARIA

Attribute, die Screenreadern zusätzliche Informationen über Rollen und Zustände geben, wenn HTML allein nicht ausreicht.

Think-Aloud

Testmethode, bei der Testpersonen laut aussprechen, was sie denken, während sie Aufgaben lösen.

Passende Module