Informatik · Klasse 9 · Software-Projekt: Von der Idee zum Produkt · 2. Halbjahr

Benutzerfreundlichkeit (UX/UI)

Die Schülerinnen und Schüler lernen die Grundlagen von User Experience (UX) und User Interface (UI) Design kennen und wenden sie an.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren
• KMK: Sekundarstufe I - Kommunizieren

Über dieses Thema

Benutzerfreundlichkeit im UX/UI-Design beschreibt, wie Software intuitiv, zugänglich und effizient für Nutzer gestaltet wird. Schülerinnen und Schüler in Klasse 9 lernen Grundlagen kennen: klare Navigation, konsistente Farben und Symbole, minimale Lernkurve. Sie analysieren reale Apps wie WhatsApp oder Google Maps, identifizieren Stärken und Schwächen anhand von Heuristiken wie Nielsens Usability-Prinzipien. Im Software-Projekt entwerfen sie Interfaces für ihre eigene Anwendung und integrieren Feedbackschleifen.

Dieses Thema verknüpft sich eng mit KMK-Standards zu Modellieren und Kommunizieren in der Sekundarstufe I. Schüler modellieren Nutzerperspektiven durch Personas und Journey Maps, kommunizieren Ideen in Wireframes und Prototypen. Es schult systemisches Denken: Wie wirken Designentscheidungen auf Nutzererlebnis und Projektziel? Bewertung von Iterationsprozessen vertieft Verständnis für agile Methoden.

Aktives Lernen eignet sich hervorragend, weil Prototyping und Usability-Tests direkt erlebbar sind. Schüler basteln Low-Fidelity-Modelle aus Papier, testen sie gegenseitig und iterieren basierend auf Beobachtungen. Solche hands-on-Aktivitäten machen abstrakte Prinzipien greifbar, fördern Kollaboration und erhöhen Retention durch eigene Erfolge und Misserfolge.

Leitfragen

1. Analysieren Sie, was eine benutzerfreundliche Software ausmacht.
2. Entwerfen Sie ein intuitives User Interface für Ihre Anwendung.
3. Bewerten Sie die Bedeutung von Feedbackschleifen im UX-Designprozess.

Lernziele

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

Bevor es losgeht

Grundlagen der Programmierung

Warum: Ein grundlegendes Verständnis dafür, wie Software funktioniert, hilft den Schülern, die Notwendigkeit von benutzerfreundlichen Oberflächen zu erkennen.

Projektmanagement-Grundlagen

Warum: Die Schüler sollten bereits erste Erfahrungen mit der Planung und Durchführung kleiner Projekte gesammelt haben, um den Produktentwicklungsprozess zu verstehen.

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.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Ein schönes Design ist automatisch benutzerfreundlich.

Was Sie stattdessen lehren sollten

Benutzerfreundlichkeit priorisiert Funktionalität über Ästhetik: klare Hierarchien und intuitive Flows zählen mehr. Aktive Tests in Paaren zeigen schnell, wo Schönheit irreführt, z. B. bei überladenen Buttons. Peer-Feedback korrigiert dies durch reale Nutzerperspektiven.

Häufige Fehlvorstellung

UX/UI-Design ist nur für Profis relevant.

Was Sie stattdessen lehren sollten

Jeder Entwickler braucht UX-Grundlagen für nutzbare Produkte. Schüler lernen in Gruppen, dass einfache Prinzipien wie Fitts Law sofort anwendbar sind. Hands-on-Prototyping beweist, wie Iterationen ohne Profi-Tools Erfolge bringen.

Häufige Fehlvorstellung

Einmal entworfen, braucht UI kein Feedback.

Was Sie stattdessen lehren sollten

Feedbackschleifen sind Kern des UX-Prozesses für kontinuierliche Verbesserung. Kleingruppen-Tests offenbaren unerwartete Nutzerfehler. Strukturierte Runden helfen Schülern, Iteration als Standard zu sehen.

Ideen für aktives Lernen

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.

35 Min.·Partnerarbeit

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.

45 Min.·Kleingruppen

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.

50 Min.·Ganze Klasse

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.

25 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• UX/UI-Designer bei Unternehmen wie Spotify oder Zalando arbeiten täglich daran, die Navigation und das Erscheinungsbild von Apps und Websites zu optimieren, um die Kundenzufriedenheit zu erhöhen und die Nutzung zu vereinfachen.
• Entwickler von Navigationssystemen in Autos oder von Bedienoberflächen für Haushaltsgeräte wie Waschmaschinen müssen sicherstellen, dass die Funktionen auch für technisch weniger versierte Nutzer leicht verständlich und bedienbar sind.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Lassen Sie die Schülerinnen und Schüler auf einem Zettel zwei Apps nennen, die sie für besonders benutzerfreundlich halten. Sie sollen für jede App ein konkretes UI-Element (z.B. Menü, Suchleiste) benennen und kurz erklären, warum es gut gestaltet ist.

Gegenseitige Bewertung

Die Schülerinnen und Schüler tauschen ihre erstellten Wireframes für eine gemeinsame Anwendungsidee aus. Jeder gibt dem Partner Feedback zu zwei Punkten: Ist die Navigation klar erkennbar? Gibt es genügend Platz für wichtige Elemente? Die Kommentare sollten konstruktiv sein.

Kurze Überprüfung

Stellen Sie eine Frage wie: 'Welches Usability-Prinzip wird verletzt, wenn ein Button an einer Stelle plötzlich anders aussieht als sonst?' Die Schülerinnen und Schüler antworten kurz auf einem Notizzettel und geben diesen ab.

Häufig gestellte Fragen

Was ist der Unterschied zwischen UX und UI?

UX (User Experience) umfasst das gesamte Nutzererlebnis: Emotionen, Effizienz, Zufriedenheit durch Recherche, Personas und Tests. UI (User Interface) ist der visuelle Teil: Buttons, Farben, Layouts. In Klasse 9 entwerfen Schüler beides iterativ, testen mit Peers und lernen, dass gutes UI UX unterstützt. Beispiele wie Airbnbs einfache Suche illustrieren die Verknüpfung. (62 Wörter)

Wie kann aktives Lernen beim UX/UI-Design helfen?

Aktives Lernen macht UX/UI greifbar: Schüler skizzieren Wireframes in Paaren, testen sie in Gruppen und iterieren nach Feedback. Solche Stationen oder Rotations fördern Beobachtung realer Nutzerfrustrationen, z. B. bei unklarer Navigation. Kollaboratives Prototyping stärkt Kommunikation, reduziert Fehlanalysen und erhöht Motivation durch sichtbare Verbesserungen. Im Vergleich zu Frontalunterricht bleibt Wissen länger, da Schüler eigene Designs optimieren. (72 Wörter)

Welche Tools eignen sich für Anfänger im UI-Design?

Für Klasse 9 reichen kostenlose Tools wie Figma (Community-Version), Canva oder Papier-Skizzen. Figma erlaubt kollaboratives Prototyping, Export als PDF für Tests. Schüler starten mit Templates für Apps, fügen Drag-and-Drop-Elemente hinzu. Wichtig: Fokus auf Prinzipien vor Tools, z. B. Grid-System für Konsistenz. Integration ins Projekt: Exportiere Prototypen für Usability-Tests. (68 Wörter)

Warum sind Feedbackschleifen im UX-Prozess entscheidend?

Feedbackschleifen ermöglichen Iteration: Nutzertests decken Pain Points auf, z. B. zu viele Klicks. Schüler lernen agile Zyklen: Design, Test, Anpassen. In Gruppenrunden bewerten sie Designs, priorisieren Änderungen. Dies passt zu KMK-Kommunizieren: Diskussionen schärfen Argumentation. Langfristig: Bessere Produkte, weniger Frustration. Beispiel: TikToks Swipe-Navigation entstand durch User-Feedback. (71 Wörter)