Benutzerschnittstellen entwerfen und implementieren

Eine Anwendung kann technisch perfekt sein und trotzdem scheitern, wenn niemand sie versteht. Du lernst, von den Benutzenden und ihren Aufgaben auszugehen, Abläufe zu skizzieren und daraus Wireframes und klickbare Prototypen zu machen. Du wendest bewährte Gestaltungsregeln für Layout, Typografie, Farbe und Rückmeldungen an und achtest von Anfang an auf Barrierefreiheit. Den Entwurf setzt du mit wiederverwendbaren Komponenten um und prüfst ihn mit echten Personen in einem Usability-Test.

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

1. 1

   Benutzende und ihre Aufgaben analysieren

   Kompetenz A

   Bevor du gestaltest, klärst du, wer die Anwendung nutzt, in welcher Situation und mit welchem Ziel. Du führst kurze Interviews oder Beobachtungen durch und hältst die Ergebnisse in Personas und User Stories fest.

   Situation

   Die Spitex einer Region im Emmental will ein Tool, mit dem Pflegefachpersonen Einsätze beim Klienten dokumentieren. Bisher geschieht das abends auf Papier.

   Deine Aufgabe

   Finde heraus, was die Pflegenden wirklich brauchen.

   Gutes Ergebnis

   Drei Kurzinterviews und eine halbtägige Begleitung zeigen: Erfassung meist stehend, oft mit einer Hand, Zeitdruck von 5 Minuten pro Einsatz. Daraus zwei Personas und acht User Stories, z.B. 'Als Pflegefachfrau will ich Standardleistungen mit einem Tipp erfassen, damit ich keine Zeit beim Klienten verliere.'

   PersonaUser StoryKontextanalyseInterview / BeobachtungNutzungskontext
2. 2

   Abläufe und Seitenstruktur mit Wireframes skizzieren

   Kompetenz B

   Du zeichnest den Weg der Benutzenden durch die Anwendung als User Flow und entwirfst dann grobe Wireframes ohne Farben und Details. So diskutierst du Struktur und Inhalte, bevor jemand über Farben streitet.

   Situation

   Ein Fitnesscenter in Wil will die Kursanmeldung online anbieten. Heute rufen Mitglieder an der Theke an.

   Deine Aufgabe

   Skizziere Ablauf und Screens für die Anmeldung zu einem Kurs.

   Gutes Ergebnis

   User Flow mit fünf Schritten von 'Kursplan öffnen' bis 'Bestätigung'. Low-Fidelity-Wireframes in Figma für Kursplan, Kursdetail und Bestätigung. Im Review fällt auf, dass die Warteliste fehlt. Das ist auf Papier in zwei Minuten ergänzt.

   User FlowWireframeLow vs. High FidelityInformationsarchitektur
3. 3

   Gestaltungsregeln für Layout, Typografie und Farbe anwenden

   Kompetenz C

   Du nutzt Raster, Abstände und visuelle Hierarchie, um das Wichtigste hervorzuheben. Du wählst gut lesbare Schriften und Farben mit genügend Kontrast und bleibst über alle Screens konsistent.

   Situation

   Das interne Bestellformular einer Druckerei in Biel wirkt überladen: sieben Schriftgrössen, vier Grüntöne, Buttons an wechselnden Stellen.

   Deine Aufgabe

   Überarbeite das Formular nach klaren Gestaltungsregeln.

   Gutes Ergebnis

   8-px-Abstandsraster, zwei Schriftgrössen für Text plus zwei für Titel, eine Primär- und eine Akzentfarbe, Primärbutton immer unten rechts. Die durchschnittliche Ausfüllzeit sinkt im Test von 3:40 auf 2:10 Minuten.

   visuelle HierarchieRaster und AbständeTypografieFarbkontrastKonsistenz
4. 4

   Interaktionen mit klarem Feedback und verständlichen Fehlermeldungen gestalten

   Kompetenz C

   Jede Aktion bekommt eine sichtbare Rückmeldung: Ladezustand, Erfolg, Fehler. Fehlermeldungen erklären, was passiert ist und was die Person jetzt tun kann. Du prüfst deine Oberfläche gegen bekannte Usability-Heuristiken.

   Situation

   Im Kundenportal eines Elektrizitätswerks erscheint beim Erfassen des Zählerstands nur 'Fehler 422'. Viele Kunden rufen danach die Hotline an.

   Deine Aufgabe

   Gestalte die Eingabe so, dass Fehler vermieden und verständlich erklärt werden.

   Gutes Ergebnis

   Inline-Validierung direkt am Feld, Hinweis 'Der Zählerstand muss höher sein als der letzte Wert von 12'480 kWh', Beispielbild des Zählers und Ladeindikator beim Senden. Die Anrufe zu diesem Thema halbieren sich im ersten Monat.

   Nielsen-HeuristikenSystemstatusFehlervermeidungInline-ValidierungMicrocopy
5. 5

   Oberflächen barrierefrei gestalten und prüfen

   Kompetenz D

   Du sorgst dafür, dass die Oberfläche auch mit Tastatur, Screenreader, Vergrösserung oder Farbsehschwäche funktioniert. Dazu gehören semantisches HTML, Beschriftungen, Fokusreihenfolge und ausreichender Kontrast nach WCAG.

   Situation

   Das Online-Formular für Parkkarten einer Stadtverwaltung lässt sich mit der Tastatur nicht abschicken, und ein Screenreader liest nur 'Button, Button, Eingabefeld' vor.

   Deine Aufgabe

   Mach das Formular barrierefrei nach WCAG 2.1 AA.

   Gutes Ergebnis

   Echte '<button>' und '<label>'-Elemente, sichtbarer Fokusrahmen, logische Tab-Reihenfolge, Fehlermeldungen per 'aria-describedby' mit dem Feld verknüpft. axe DevTools meldet 0 Fehler, ein Test mit NVDA gelingt ohne Maus.

   WCAG 2.1 AAsemantisches HTMLARIATastaturbedienungScreenreader
6. 6

   Den Entwurf mit wiederverwendbaren Komponenten umsetzen

   Kompetenz E

   Du übersetzt den Prototyp in Code und baust dabei Bausteine wie Buttons, Eingabefelder oder Karten einmal sauber, die überall wiederverwendet werden. Farben, Abstände und Schriften definierst du zentral als Design-Tokens.

   Situation

   In einer Webapp eines Reisebüros gibt es elf leicht unterschiedliche Buttons, weil jede Seite ihren eigenen gebaut hat.

   Deine Aufgabe

   Vereinheitliche die Oberfläche technisch.

   Gutes Ergebnis

   Eine React-Komponente 'Button' mit den Varianten primary, secondary und danger sowie Zuständen hover, focus, disabled und loading. Farben und Abstände als CSS-Variablen. Alle Varianten sind in Storybook dokumentiert, die elf alten Buttons sind ersetzt.

   KomponenteDesign-TokenDesignsystemZustände (States)Storybook
7. 7

   Einen Usability-Test durchführen und auswerten

   Kompetenz A

   Du lässt drei bis fünf Personen typische Aufgaben mit deinem Prototyp oder deiner Anwendung lösen, beobachtest, wo sie stocken, und leitest konkrete Verbesserungen ab.

   Situation

   Die neue Kursanmeldung des Fitnesscenters ist fertig. Vor dem Launch soll sie mit Mitgliedern getestet werden.

   Deine Aufgabe

   Plane, führe durch und werte einen Usability-Test aus.

   Gutes Ergebnis

   Fünf Mitglieder, drei Aufgaben, Methode lautes Denken. Vier von fünf finden die Stornierung nicht, weil sie im Profil versteckt ist. Massnahme: Link 'Abmelden' direkt in der Kursliste. Ein Nachtest mit zwei Personen bestätigt die Verbesserung.

   Usability-TestLautes DenkenTestaufgabeErfolgsquoteIteration

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.

Jana ist im 2. Lehrjahr als Informatikerin Applikationsentwicklung bei der Seeblick Software AG in Romanshorn, einem Softwarehaus mit 35 Mitarbeitenden. Eine regionale Musikschule mit 600 Schülerinnen und Schülern nimmt Anmeldungen bisher mit einem vierseitigen Papierformular entgegen. Jana soll im Team die neue Online-Anmeldung entwerfen und das Frontend umsetzen.

1. Kapitel 1

   Wer meldet sich eigentlich an?

   Jana interviewt zwei Mütter, einen Vater und die Sekretärin der Musikschule. Dabei zeigt sich, dass Eltern das Formular meist abends auf dem Handy ausfüllen wollen und das Sekretariat pro Semester rund sechs Stunden mit Rückfragen wegen fehlender Angaben verbringt. Jana hält die Erkenntnisse in einer Persona fest: Sandra, 41, zwei Kinder, wenig Zeit. Daraus formuliert sie fünf User Stories für das Team.

   Ziel 1

2. Kapitel 2

   Vier Schritte statt 28 Felder

   Der erste Online-Entwurf, eine 1:1-Übertragung des Papierformulars, hat 28 Felder auf einer einzigen Seite. Jana zeichnet einen User Flow mit vier Schritten: Kind, Instrument und Wunschzeit, Eltern, Bestätigung. In Figma baut sie daraus Wireframes und verbindet sie zu einem klickbaren Prototyp. Die Sekretärin weist darauf hin, dass viele Familien Geschwister anmelden, worauf Jana einen Schritt zum Hinzufügen eines weiteren Kindes ergänzt.

   Ziel 2

3. Kapitel 3

   Meldungen, die weiterhelfen

   Jana legt ein Stilset mit zwei Markenfarben, drei Schriftgrössen und einem 8-Pixel-Abstandsraster an. Die alte Fehlermeldung "Ungültige Eingabe" ersetzt sie durch "Bitte gib das Geburtsdatum im Format TT.MM.JJJJ ein". Nach dem Absenden erscheint eine Zusammenfassung mit dem Hinweis, dass die Bestätigung innert zwei Arbeitstagen per E-Mail kommt. So wissen Eltern jederzeit, was gerade passiert und was als Nächstes kommt.

   Ziel 3Ziel 4

4. Kapitel 4

   Mit Tastatur und Screenreader

   Jana setzt die Screens in React mit Tailwind um und baut Schrittanzeige, Eingabefeld mit Fehlerzustand und Auswahlkarte als wiederverwendbare Komponenten. Beim Test mit NVDA bleibt der Screenreader bei der Instrumentenwahl stumm, weil die Karten nur div-Elemente ohne Rolle sind. Sie ersetzt sie durch gestylte Radio-Buttons und hebt den Kontrast des orangen Buttons von 2.9:1 auf 4.6:1 an. Danach meldet axe DevTools keine kritischen Funde mehr.

   Ziel 5Ziel 6

5. Kapitel 5

   Drei Eltern, ein Problem

   Zum Schluss testet Jana die Anmeldung mit drei Eltern, die je drei Aufgaben lösen. Zwei von drei finden nicht heraus, wie man ein zweites Kind anmeldet, weil der Button ganz unten unter der Zusammenfassung steht. Jana verschiebt ihn direkt unter die Angaben zum ersten Kind und benennt ihn in "Weiteres Kind anmelden" um. Im Nachtest schafft es eine Person in 40 Sekunden, und Jana fasst die Ergebnisse in einem kurzen Bericht für die Musikschule zusammen.

   Ziel 7

1. 1

   Wer nutzt das eigentlich?

   ca. 3 Std.

   Du lernst, von den Benutzenden auszugehen, und sammelst Anforderungen an eine Oberfläche.

   • Zwei Personen aus deinem Umfeld zu einer Software interviewen, die sie täglich nutzen
   • Daraus eine Persona und fünf User Stories formulieren
   • Eine bestehende Webseite gegen die zehn Nielsen-Heuristiken prüfen

   Trainiert Kompetenz A1C1

   Lernziel14

2. 2

   Skizzieren und strukturieren

   ca. 4 Std.

   Du zeichnest Abläufe und Wireframes, zuerst auf Papier, dann in Figma.

   • Einen User Flow für eine Online-Reservation auf Papier zeichnen
   • Low-Fidelity-Wireframes für drei Screens in Figma erstellen
   • Die Wireframes in fünf Minuten einer Kollegin erklären und Feedback einholen

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Gestalten mit System

   ca. 4 Std.

   Du machst aus Wireframes einen gestalteten, klickbaren Prototyp mit konsistenten Regeln.

   • Ein kleines Stilset mit Farben, Schriften und Abständen in Figma anlegen
   • Kontraste mit einem Kontrast-Checker prüfen und anpassen
   • Die Screens zu einem klickbaren Prototyp verbinden, inklusive Fehler- und Ladezuständen

   Trainiert Kompetenz C1C2

   Lernziel34

4. 4

   Für alle zugänglich

   ca. 4 Std.

   Du prüfst und verbesserst die Barrierefreiheit einer Oberfläche.

   • Eine Webseite nur mit der Tastatur bedienen und Probleme notieren
   • Mit NVDA oder VoiceOver ein Formular ausfüllen
   • axe DevTools und Lighthouse laufen lassen und alle Fehler beheben

   Trainiert Kompetenz D1D2

   Lernziel5

5. 5

   Vom Prototyp zum Code

   ca. 5 Std.

   Du setzt den Entwurf mit Komponenten und Design-Tokens um.

   • Button, Eingabefeld und Karte als Komponenten mit allen Zuständen bauen
   • Farben und Abstände als CSS-Variablen oder Tailwind-Konfiguration zentral definieren
   • Komponenten in Storybook dokumentieren

   Trainiert Kompetenz E1E2D2

   Lernziel65

6. 6

   Mit echten Menschen testen

   ca. 3 Std.

   Du testest deine Oberfläche und verbesserst sie anhand der Beobachtungen.

   • Drei Testaufgaben und einen kurzen Testleitfaden schreiben
   • Den Test mit drei Personen durchführen und Beobachtungen protokollieren
   • Die drei wichtigsten Probleme beheben und kurz nachtesten

   Trainiert Kompetenz A2A3

   Lernziel71

Persona

Fiktive, aber auf echten Beobachtungen beruhende Beschreibung einer typischen Benutzergruppe.

User Flow

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

Wireframe

Vereinfachte Skizze eines Screens, die Struktur und Inhalte ohne gestalterische Details zeigt.

Prototyp

Klickbares Modell der Oberfläche, mit dem Abläufe vor der Umsetzung getestet werden können.

Usability

Gebrauchstauglichkeit: wie effektiv, effizient und zufriedenstellend Personen ihre Ziele mit einem System erreichen.

WCAG

Internationale Richtlinien für barrierefreie Webinhalte mit den Stufen A, AA und AAA.

ARIA

HTML-Attribute, die assistiven Technologien zusätzliche Informationen über Elemente und Zustände liefern.

Designsystem

Sammlung aus Regeln, Tokens und Komponenten, die eine einheitliche Oberfläche sicherstellt.

Passende Module