Kurs · Modul 322
Benutzerschnittstellen entwerfen und implementieren
Nach diesem Kurs kannst du eine Benutzeroberfläche vom ersten Interview bis zum getesteten Code begleiten: Du findest mit Interviews und Beobachtung heraus, was Benutzende brauchen, hältst es in Personas und User Stories fest, skizzierst Abläufe als User Flows und Wireframes und vergleichst Varianten mit Argumenten statt Geschmack. Du gestaltest mit Raster, Schriftskala und Farbrollen, schreibst Fehlermeldungen, die weiterhelfen, baust Formulare und Komponenten barrierefrei nach WCAG und prüfst sie mit Tastatur, Kontrastrechnung, axe und Screenreader. Zum Schluss testest du mit echten Menschen und priorisierst die Befunde. Du lernst in 9 Lektionen am durchgehenden Beispiel der Online-Anmeldung einer Musikschule, übst in 14 JavaScript-Laboren direkt im Browser, setzt im geführten Projekt eine eigene Anmeldung um und prüfst dich in einer Simulation des Kompetenznachweises. Rechne mit rund 25 Stunden. Der Kurs wirkt, wenn du die Labore, die Interviews und den Usability-Test selbst durchführst; Lesen allein ersetzt das Üben nicht.
Dein nächster Schritt
UX beginnt bei den Menschen: Nutzungskontext und Interviews
Du unterscheidest UI, UX und Usability, klärst den Nutzungskontext einer Anwendung und findest mit Interviews und Beobachtung heraus, was Benutzende wirklich brauchen. · 40 Min.
Dein KI-Lerncoach
Lernen mit KI, aber richtig
Der Tutor kennt dieses Modul, deine Lektion und deine Aufgaben. Er führt dich zur Lösung, statt sie vorzusagen.
Training
…
Aufgaben gelöst
Karteikarten
…
Karten im Kurs
Praxisprojekt
…
Meilensteine
Prüfung
…
bestes Ergebnis
Deine Kompetenzen
offen begonnen sicher gemeistert
Berechnet aus deinen gelösten Aufgaben. Ziel für den Kompetenznachweis: überall mindestens «sicher» auf Stufe 2.
| 1 · Grundlagen | 2 · Fortgeschritten | 3 · Erweitert | |
|---|---|---|---|
| A · Nutzende verstehen und testen | 0% | – | – |
| B · Abläufe und Wireframes | – | – | – |
| C · Gestaltung und Feedback | – | – | – |
| D · Barrierefreiheit | – | – | – |
| E · Komponenten umsetzen | – | – | – |
Abzeichen
Lektionen
- 1UX beginnt bei den Menschen: Nutzungskontext und InterviewsDu unterscheidest UI, UX und Usability, klärst den Nutzungskontext einer Anwendung und findest mit Interviews und Beobachtung heraus, was Benutzende wirklich brauchen.Gratis40 Min.
- 2Personas und User Stories mit AkzeptanzkriterienDu verdichtest Interviewergebnisse zu belegten Personas, formulierst User Stories mit prüfbaren Akzeptanzkriterien und priorisierst sie mit MoSCoW.40 Min.
- 3Abläufe skizzieren: User Flows, Informationsarchitektur und WireframesDu zeichnest User Flows mit Abzweigungen, strukturierst Inhalte und Navigation, entwirfst Low-Fidelity-Wireframes, verbindest sie zu einem klickbaren Prototyp und vergleichst Varianten begründet.45 Min.
- 4Gestalten mit System: Hierarchie, Raster, Typografie und FarbeDu wendest visuelle Hierarchie und Gestaltgesetze an, legst ein Stilset mit Abstandsraster, Schriftskala und Farbrollen an und analysierst bestehende Oberflächen nach diesen Regeln.40 Min.
- 5Rückmeldung geben: Heuristiken, Zustände und FehlermeldungenDu prüfst Oberflächen mit den zehn Nielsen-Heuristiken, gestaltest Lade-, Leer-, Fehler- und Erfolgszustände und schreibst Fehlermeldungen, die zur Lösung führen.45 Min.
- 6Formulare, die Fehler verhindernDu fragst nur das Nötige, beschriftest und typisierst Felder korrekt und baust eine Inline-Validierung, die zum richtigen Zeitpunkt prüft und Fehler barrierefrei meldet.45 Min.
- 7Barrierefreiheit nach WCAG: Semantik, Tastatur, KontrastDu kennst die WCAG-Prinzipien und die wichtigsten Kriterien, setzt Bedienelemente mit semantischem HTML und ARIA um, berechnest Kontraste und prüfst mit Tastatur, axe und Screenreader.45 Min.
- 8Komponenten und Design-Tokens: vom Entwurf zum CodeDu setzt Entwürfe mit wiederverwendbaren React-Komponenten um, pflegst Gestaltungswerte zentral als Design-Tokens, gestaltest alle Zustände und entscheidest zwischen Variante und neuer Komponente.45 Min.
- 9Usability-Test: planen, durchführen, auswertenDu planst einen Usability-Test mit realistischen Aufgaben, moderierst neutral, wertest Erfolgsquote, Zeit und SUS aus und leitest priorisierte Massnahmen ab.45 Min.