Benutzerfreundlichkeit (UX/UI)

Aktives Lernen funktioniert bei UX/UI besonders gut, weil Schülerinnen und Schüler Nutzerperspektiven direkt erleben. Sie merken selbst, wie kleine Designfehler große Frustration auslösen, was nachhaltiges Verständnis schafft. Durch praktische Arbeit verstehen sie, dass Benutzerfreundlichkeit kein theoretisches Konzept ist, sondern eine Fähigkeit, die man üben muss.

• Klasse 9
• Digitale Welten Gestalten: Informatik und Gesellschaft
• 4 Aktivitäten
• 25 Min.–50 Min.

Lernziele

1. Analysieren Sie die Schlüsselelemente einer benutzerfreundlichen Oberfläche anhand von Beispielen populärer Apps.
2. Entwerfen Sie einen Low-Fidelity-Prototyp (Wireframe) für eine neue Anwendung, der die Prinzipien der intuitiven Navigation berücksichtigt.
3. Bewerten Sie die Effektivität von Feedbackschleifen im Designprozess durch die Analyse von Nutzerinteraktionen.
4. Erstellen Sie ein einfaches UI-Element (z.B. einen Button oder ein Formularfeld) unter Berücksichtigung von Konsistenz und Klarheit.
5. Vergleichen Sie zwei verschiedene UI-Designs für dieselbe Funktionalität hinsichtlich ihrer Benutzerfreundlichkeit.

Projektbasiertes Lernen

⏱ 35 Min.·Partnerarbeit

Paararbeit: Wireframe-Skizzen

Paare skizzieren ein UI für eine fiktive App, z. B. Schulplaner. Sie definieren drei Hauptfunktionen, zeichnen Screens mit Navigation und notieren Begründungen. Abschließend präsentieren sie sich gegenseitig und notieren Verbesserungsvorschläge.

Vorbereitung & Details

Analysieren Sie, was eine benutzerfreundliche Software ausmacht.

Moderationstipp: Während der Wireframe-Skizzen in Paararbeit immer wieder fragen: 'Was würde ein Nutzer hier zuerst suchen?' und auf Unklarheiten hinweisen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 45 Min.·Kleingruppen

Kleingruppen: Usability-Tests

Gruppen testen Wireframes anderer Teams: Ein Nutzer durchläuft Aufgaben, der Beobachter protokolliert Fehler und Frustrationen. Nach 5 Minuten pro Test geben Tester Feedback, Prototypen werden iteriert. Plenum diskutiert gängige Probleme.

Vorbereitung & Details

Entwerfen Sie ein intuitives User Interface für Ihre Anwendung.

Moderationstipp: Bei Usability-Tests darauf achten, dass die Testpersonen tatsächlich laut denken, um Fehlerquellen sichtbar zu machen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 50 Min.·Ganze Klasse

Ganzer Unterricht: Feedback-Runde

Jede Schülerin oder jeder Schüler zeigt sein UI-Design vor, Klasse bewertet anhand einer Checkliste (z. B. Konsistenz, Zugänglichkeit). Moderator sammelt Punkte, Designer notiert nächste Schritte. Abschluss: Gemeinsame Best Practices.

Vorbereitung & Details

Bewerten Sie die Bedeutung von Feedbackschleifen im UX-Designprozess.

Moderationstipp: In der Feedback-Runde gezielt nach konkreten Beispielen fragen: 'Wo habt ihr selbst Unsicherheiten erlebt?' und diese sammeln.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 25 Min.·Einzelarbeit

Individuell: App-Analyse

Jede Schülerin oder jeder Schüler analysiert eine App (z. B. Instagram), notiert UX/UI-Stärken und -Schwächen in einem Formular. Sie skizzieren eine Verbesserung und begründen sie. Ergebnisse werden in Portfolio abgelegt.

Vorbereitung & Details

Analysieren Sie, was eine benutzerfreundliche Software ausmacht.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Dieses Thema unterrichten

Starten Sie mit einfachen Prinzipien wie Fitts Law oder der Drei-Klick-Regel, bevor Sie komplexe Designsysteme erklären. Vermeiden Sie lange Theorieteile – stattdessen sofort mit Papierprototypen arbeiten lässt das Gelernte greifbar werden. Nutzen Sie Fehler als Lernchance: Wenn ein Button nicht gefunden wird, fragen Sie nicht 'Warum war das so?', sondern 'Wie hätten wir das besser machen können?'

Was Sie erwartet

Erfolg sieht man, wenn Schülerinnen und Schüler Designentscheidungen bewusst begründen können. Sie erkennen Standardlösungen in Apps und wenden Heuristiken an, um Schwächen zu benennen. Ihre eigenen Entwürfe zeigen klare Hierarchien und schnelle Orientierung. Feedback wird nicht als Kritik, sondern als notwendiger Teil des Prozesses verstanden.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Wireframe-Skizzen (Aktivität 1) beobachten Sie, wie Schüler oft Farben und Formen priorisieren, ohne auf logische Abfolgen zu achten.

Was Sie stattdessen lehren sollten

Fordern Sie die Paare auf, ihre Skizzen einem Mitschüler ohne Erklärung zu zeigen: Wenn dieser die Hauptfunktion nicht sofort erkennt, muss die Hierarchie überarbeitet werden. Nutzen Sie die Materialien (Stifte, Post-its), um Platzhalter für Nutzerwege zu legen und so die Funktionalität zu testen.

Häufige Fehlvorstellung

Während der Usability-Tests (Aktivität 2) hören Sie oft Argumente wie 'Das Design ist doch schön, also muss es gut sein'.

Was Sie stattdessen lehren sollten

Legen Sie den Fokus auf die Testprotokolle: Wenn Nutzer sagen 'Ich habe 30 Sekunden gebraucht, um zu verstehen, wo die Einstellungen sind', wird klar, dass Ästhetik zweitrangig ist. Nutzen Sie die konkreten Nutzeraussagen, um Designregeln wie Konsistenz zu veranschaulichen.

Häufige Fehlvorstellung

In der Feedback-Runde (Aktivität 3) äußern einige: 'Wir brauchen kein Feedback, wir wissen doch, was gut ist'.

Was Sie stattdessen lehren sollten

Zeigen Sie die gesammelten Testprotokolle aus Aktivität 2 und fragen Sie: 'Würdet ihr euch selbst vertrauen, wenn andere diese Fehler machen würden?' Nutzen Sie die Runde, um Iteration als Standardprozess zu etablieren und die Schüler ihre eigenen Entwürfe kritisch hinterfragen zu lassen.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der App-Analyse (Aktivität 4) notieren die Schülerinnen und Schüler auf einem Zettel zwei konkrete UI-Elemente aus ihren analysierten Apps und begründen deren Benutzerfreundlichkeit mit einem Heuristik-Prinzip.

Gegenseitige Bewertung

Während der Wireframe-Skizzen (Aktivität 1) tauschen die Schüler ihre Entwürfe aus und geben sich gegenseitig Feedback zu zwei vorgegebenen Kriterien: 'Ist der Hauptbutton sofort erkennbar?' und 'Führt der Fluss logisch zum Ziel?' Die Kommentare werden auf den Skizzen notiert.

Kurze Überprüfung

Während der Usability-Tests (Aktivität 2) stellen Sie zwischendurch die Frage: 'Welches Nielsen-Prinzip wird verletzt, wenn Nutzer mehrmals auf denselben Button klicken müssen, um zum nächsten Schritt zu kommen?' Die Antworten sammeln Sie auf einem Whiteboard.

Erweiterungen & Unterstützung

• Fordern Sie schnelle Teams auf, ihre Wireframes mit einer zweiten App-Idee zu vergleichen und Gemeinsamkeiten in der Navigation zu identifizieren.
• Schülern, die unsicher sind, geben Sie eine Vorlage mit vorgegebenen Elementen, die sie nur anordnen müssen, um den Einstieg zu erleichtern.
• Für vertiefte Exploration lassen Sie Teams eine einfache App von Grund auf neu entwerfen und dabei bewusst gegen ein Heuristik verstoßen, um die Wirkung zu testen.

Schlüsselvokabular

User Interface (UI)	Die visuelle Gestaltung und die interaktiven Elemente einer Software, die der Nutzer sieht und bedient. Dazu gehören Layout, Farben, Typografie und Schaltflächen.
User Experience (UX)	Das gesamte Erlebnis, das ein Nutzer bei der Interaktion mit einem Produkt oder einer Dienstleistung hat. Es umfasst Gefühle, Einstellungen und Zufriedenheit.
Wireframe	Eine schematische Darstellung des Layouts und der Struktur einer Benutzeroberfläche, die sich auf die Anordnung von Elementen und die Funktionalität konzentriert, ohne visuelle Details.
Usability-Prinzipien	Grundlegende Richtlinien, die helfen, benutzerfreundliche und effiziente Schnittstellen zu gestalten. Beispiele sind Konsistenz, Fehlervermeidung und klares Feedback.
Feedbackschleife	Ein Prozess im Design, bei dem Nutzerfeedback gesammelt, analysiert und zur Verbesserung des Produkts verwendet wird. Dies geschieht oft in mehreren Iterationen.