Thema der Stunde(n)
Beschreibung des Themas
Einführung in Human Computer Interaction (HCI) – Gestaltung und Nutzung von Technologien Schüler:innen lernen die Grundlagen von Human Computer Interaction (HCI) kennen, verstehen die Prinzipien der Gestaltung benutzerfreundlicher Technologien und analysieren, wie Menschen mit Technik (Computer, Smartphone, aber auch “dummen” Geräten wie Geldautomaten) interagieren. Der Fokus liegt auf der Verbindung von Design, Ergonomie und Benutzererfahrung, um Technologien zu entwickeln, die intuitiv und effektiv genutzt werden können. Ein zweiter Fokus liegt auch der Barrierefreiheit und wie Technologien für alle Menschen zugänglich gestaltet werden können.
Aufgaben und Ziele
- Schüler:innen können erläutern, was unter Human Computer Interaction (HCI) zu verstehen ist und einfache Beispiele aus ihrem Alltag nennen.
- Schüler:innen können gute und schlechte Bedienungskonzepte von Geräten/Apps beschreiben und anhand konkreter Beispiele bewerten.
- Schüler:innen können erklären, was Barrierefreiheit (Accessibility) bedeutet, und alltagsnahe Beispiele barrierefreier Technologien aufzählen.
- Schüler:innen können Verbesserungsvorschläge zur benutzerfreundlichen und barrierefreien Gestaltung einer App oder Funktion entwickeln und begründen.
Inhalte
Human Computer Interaction (HCI) – Was ist das?
Wann sollten wir uns darüber als Informatiker Gedanken machen?
- 👨💻 Immer wenn uns ein Gerät nervt, weil es schlecht zu bedienen ist
- 📱 Wenn wir ein neues Gerät kaufen, wollen wir, dass es einfach zu bedienen ist
- 🧓👴 Wenn Verwandte wollen, dass wir ihnen bei der Bedienung helfen
Besonders zum Punkt "Großeltern Technik erklären":
Wer hat hier Erfahrungen?
- Was war vielleicht besonders schwer zu erklären?
- Welche Ansätze haben geholfen?
Rechercheauftrag (5 Min): Was bedeutet der Begriff Skeuomorphismus?
Skeuomorphismus
Idee: Digitale Dinge so gestalten, wie ihre analogen Vorbilder aussehen
© Appleinsider Okey noch irgendwie einleuchtend, die Tasten sollen an der selben Position bleiben
© Justinmind Ja okey, Radioknöpfe nach rechts drehen. Aber vielleicht wäre auch ein Slider möglich.
© Thoughtbot Hä? Warum muss ein E-Book Reader wie ein Bücherregal aussehen? Das macht doch gar keinen Sinn!
Beispiele für Skeuomorphismus
- 📚 E‑Book‑Reader als Bücherregal – Buchcover liegen in einem virtuellen Holzregal
- 🎵 Musik‑Apps mit Plattenspieler oder Kassette – obwohl Musik digital ist
- 🎨 Notizen‑Apps mit linierten oder karierten „Papierseiten“
- 📷 Kamera‑Apps mit Auslöser wie ein mechanischer Knopf
- 📂 Ordner‑Icons wie klassische Papierordner oder Aktenmappen
- 🕰️ Uhren‑Apps mit Zeigern und Ziffernblatt statt nur digitaler Zahlen
- 🧮 Taschenrechner‑Apps mit Tastenlayout wie bei echten Geräten
- 🧾 Kalender‑Apps mit „abgerissenen“ Seiten oder Ringbindung
- ✉️ E‑Mail‑Symbol als Briefumschlag
- ☎️ Telefon‑Apps mit alter Wählscheibe oder Hörer‑Symbol
Hausübung: Beobachte deine Interaktionen mit Technik
Ziel: Du sollst eine Woche lang bewusst darauf achten, mit welchen Geräten und wie du mit ihnen interagierst. Am Ende sollst du besser verstehen, wie stark Technik deinen Alltag prägt.
1. Partner:in finden
- Such dir eine:n Klassenkolleg:in als Partner:in.
- Ihr führt die Aufgabe gemeinsam, aber jede:r beobachtet den eigenen Alltag.
2. Eine Woche lang beobachten
- Welches Gerät?
- Was hast du gemacht? (z. B. tippen, wischen, Sprachbefehl geben, Karte einstecken, Knopf drücken …)
- Wie hat es sich angefühlt? (leicht/schwer, nervig/intuitiv, unklar/klar)
3. Nachrichten an deine:n Partner:in
Immer wenn du mit einer neuen Art von Gerät interagierst, die du in dieser Woche noch nicht aufgeschrieben hast:
- Schreib deiner:m Partner:in sofort eine kurze Nachricht, z. B. über Messenger:
- „Neues Gerät: Fahrkartenautomat – hab versucht ein Ticket zu kaufen, viele verwirrende Knöpfe.“
- Deine Partner:in macht das auch bei neuen Geräten.
”Kann ich auch im Rollstuhl eine SMS schreiben?” – Barrierefreiheit in der HCI
Dumme Frage oben, aber… 🦯 Was ist, wenn ich blind bin?
Was bedeutet Barrierefreiheit (Accessibility)?
- Technik so gestalten, dass möglichst alle Menschen sie nutzen können –
unabhängig von:
- 👂 Hörbeeinträchtigung
- 👀 Sehbeeinträchtigung (z. B. Farbenblindheit, geringe Sehschärfe)
- 🦽 körperlichen Einschränkungen (z. B. Motorik, Rollstuhl)
- 🧠 kognitiven Besonderheiten (z. B. Konzentration, Verständnis)
- Barrierefreiheit nützt nicht nur Menschen mit Behinderung, sondern allen
(z. B. Untertitel in lauter Umgebung, große Buttons am Handy, klare Sprache).
Aus dem Alltag
- 📱 Bildschirmtastatur kann mit einer Hand oder mit Hilfsgeräten bedient werden
- 🔊 Screenreader liest Texte vor
- 🖱️ Anpassbare Mausgeschwindigkeit und Tastenkombinationen
- 🎧 Untertitel bei Videos
- 🎨 Hoher Kontrast und Zoomfunktionen für bessere Lesbarkeit
- 🎙️ Sprachsteuerung (z. B. Siri, Google Assistant)
Beispiele
© Barrierefrei-studieren-Köln
© Netzwelt.de
© Heise
Reflexion
- Welche Funktionen an deinem Smartphone / Computer sind speziell für Barrierefreiheit gedacht?
- Nutzt du selbst etwas davon – auch wenn du keine Behinderung hast?
- Wie würde sich die Nutzung verändern, wenn du:
- nur eine Hand benutzen könntest?
- kaum sehen würdest?
- nur langsam tippen könntest?
Analyse: Eine Funktion barrierefreier machen (10–15 Min)
- Wählt in Paararbeit eine typische Aktion, z. B.:
- 📱 SMS / Chat-Nachricht schreiben
- 📱 Foto machen und verschicken
- 📱 In einer App etwas suchen
- 📱 Gaming (Bitte recherchieren in: Xbox-Barrierefreiheitsfunktionen | Barrierefreies Gaming | Xbox)
- Überlegt:
- Wo könnten Hürden für bestimmte Menschen entstehen?
- Wie könnte man die Oberfläche oder Bedienung anpassen, damit mehr Menschen sie nutzen können?
- Haltet mindestens 3 konkrete Verbesserungsvorschläge fest
(z. B. größere Buttons, Sprachausgabe, alternative Eingabemethoden).
Merksatz
Gute HCI = benutzerfreundlich + barrierefrei.
Technologien sind nur dann wirklich „gut“, wenn sie für möglichst viele Menschen nutzbar sind – nicht nur für junge, gesunde und technisch geübte Nutzer:innen.
Wer bestimmt wie wir mit der Welt interagieren?
Wer hat hier eigentlich die Kontrolle?
- Wer entscheidet, wo ein Knopf sitzt, wie groß er ist und wie er aussieht?
- Wer legt fest, ob man drücken, schieben, ziehen oder wischen muss?
- Wie viel Mitbestimmung haben Nutzer:innen dabei?
Designer:innen, Ingenieur:innen, Firmen – und wir Nutzer:innen
- 💡 Produktdesigner:innen & UX-Designer:innen
Planen, wie Produkte aussehen und sich anfühlen (Form, Farbe, Anordnung).- 🛠️ Ingenieur:innen & Programmierer:innen
Entscheiden, was technisch möglich ist und wie das System reagiert.- 💰 Firmen & Marketing
Bestimmen, welche Funktionen wichtig sind und was verkauft werden soll.- 👥 Nutzer:innen
Geben Rückmeldung – durch Kaufverhalten, Bewertungen, Support-Anfragen.
Eye-Tracking
© MeasuringU
© Alpha.One
Türbeispiel: Ziehen oder Drücken?
- Griff, der nach „ziehen“ aussieht, aber man muss drücken → frustrierend
- Große Platte ohne Griff → wirkt wie drücken, nicht ziehen
- Pfeile, Symbole oder Text („Push“ / „Pull“) helfen – wenn sie verständlich sind
- Designer:innen entscheiden über Form und Hinweise – wir merken es erst, wenn es nervt.
Mini-Aktivität (5–10 Min)
- Schau dich im Klassenraum / Schulgebäude um:
- Finde mindestens 3 Dinge, bei denen die Bedienung klar ist (z. B. Lichtschalter, Tür, Fenstergriff).
- Finde mindestens 2 Dinge, die verwirrend sind.
- Notiert zu jedem Gegenstand:
- „Was erwartest du?“
- „Was passiert wirklich?“
Wir sammeln die Erkenntnisse gemeinsam
Gute und schlechte Bedienung erkennen
Was würden wir als gute Bedienung beschreiben?
Woran erkenne ich gute Bedienung?
- ✅ Klarheit – ich sehe sofort, was ich machen kann
- ✅ Rückmeldung – das Gerät zeigt mir, dass es reagiert (Ton, Licht, Animation, Text)
- ✅ Fehler verzeihen – man kann leicht zurück / rückgängig machen
- ✅ Konsistenz – ähnliche Dinge verhalten sich ähnlich
- ✅ Passend zur Situation – wichtige Funktionen sind leicht erreichbar
Woran erkenne ich schlechte Bedienung?
- ❌ Viele versteckte oder unklare Funktionen
- ❌ Symbole ohne Erklärung, die man falsch versteht
- ❌ Aktionen, die man nicht rückgängig machen kann
- ❌ Kleine, schwer zu treffende Klickflächen
- ❌ Zu viele Schritte für einfache Aufgaben
Gruppenarbeit: Bedienung bewerten (ca. 15 Min)
- Bildet Gruppen zu 3–4 Personen.
- Jede Gruppe wählt eine Website oder eine App, z. B.:
- Schul- oder Lern-App
- Kalender
- Smartphone-App (Kamera, Chat, Musik …)
- Beantwortet: Mithilfe der Punkte von oben:
- Was findest du gut an der Bedienung? (mind. 3 Punkte)
- Was findest du schlecht oder nervig? (mind. 3 Punkte)
- Was würdet ihr konkret verbessern?
- Haltet eure Ergebnisse stichwortartig fest (in einem Word-Dokument).
Gemeinsame Sammlung
- Welche Muster für gute Bedienung tauchen immer wieder auf?
- Welche Fehler (schlechte Bedienung) begegnen uns in vielen Geräten?
- Welche „goldenen Regeln“ für gute HCI können wir daraus ableiten?