Interaction Design Basics

Chapter 1

Slides

HAWK SS25 Interaction Design Basics (PDF)

Die Küche zum Kochen (Otl Aicher)

Die Küche zum Kochen – Otl Aicher (Ökobuch Verlag)

Kernaussagen:

  1. Funktionalität vor Repräsentation – Aicher kritisiert die moderne Küche als “Schauküche” und plädiert für eine Rückbesinnung auf die primäre Funktion: das Kochen.
  2. Die Küche als Werkstatt – Aicher betrachtet die Küche als Werkstatt, in der alles seinen funktionalen Platz hat und schnell zugänglich sein muss.
  3. Arbeitsprozesse als Designgrundlage – Die Gestaltung der Küche sollte den tatsächlichen Arbeitsprozessen folgen.
  4. Gestalterische Ehrlichkeit – Aicher fordert eine “ehrliche” Küche, in der Form der Funktion folgt.

Affordances in der Küche

Herdplatten und Kochfelder:

  • Konzentrische Kreise auf traditionellen Elektroherden signalisieren Heizzonen
  • Induktionskochfelder mit aufgedruckten Kreisen schaffen ein mentales Mapping trotz flacher, homogener Oberfläche
  • Gas-Brenner mit Metallgittern kommunizieren durch ihre physische Form die Notwendigkeit einer stabilen Auflagefläche

Griffe und Bedienelemente:

  • Drehregler vermitteln Gradualität (stufenlose Temperaturregulation)
  • Die Größe des Griffes korreliert oft mit der Häufigkeit der Nutzung
  • Griffformen, die zur Handhaltung passen, kommunizieren die intendierte Bewegungsrichtung

Küchengeräte:

  • Messergriffe mit Fingermulden geben Hinweise auf die korrekte Griffhaltung
  • Die Neigung eines Schneidbretts mit Saftrinne kommuniziert die Ausrichtung
  • Die Form eines Pürierstabs mit Schutzabdeckung verdeutlicht Handhabung und Gefahrenzone

Mentale Modelle in der Küchengestaltung

Das Arbeitsdreieck – Fundamentales Organisationsprinzip zwischen Zubereitung (Arbeitsfläche), Garen (Herd) und Aufbewahrung (Kühlschrank). Kulturelle Varianten: Asiatische Küchen mit zentraler Position des Reiskochens.

Workflow-Orientierung:

  • Chronologische Anordnung nach Arbeitsschritten: Vorbereiten → Zubereiten → Garen → Anrichten
  • Funktionszonen-Modell: Lagern, Vorbereiten, Kochen, Spülen
  • Hierarchie der Wichtigkeit durch vertikale Anordnung

Mapping in verschiedenen Küchenkulturen

Herdkontrolle:

  • Lineare Anordnung: Regler links → Platte links
  • Iconische Darstellung: Miniaturabbild der Herdplattenpositionen neben den Reglern
  • Kulturelle Unterschiede: In manchen Ländern bedeutet Drehung im Uhrzeigersinn “höher”, in anderen “niedriger”

Constraints in Küchenumgebungen

  • Kindersicherungen an Schränken mit gefährlichen Inhalten
  • Zweistufige Aktivierung bei potenziell gefährlichen Geräten
  • Schubladeneinteilungen erzwingen ordnungsgemäße Lagerung
  • Kaffeemaschinen, die erst nach korrektem Einsetzen des Filters funktionieren

Kontaktloses Bezahlen

Affordances

  • Das Wellensymbol ))) als universelle Kennzeichnung
  • Leuchtende LED-Anzeigen am Terminal signalisieren Bereitschaft
  • Charakteristischer Signalton bei erfolgreicher Transaktion
  • Vibrationsrückmeldung auf Smartphones

Mentale Modelle

Von physisch zu virtuell: Physische Übergabe von Geld → physisches Einstecken einer Karte → kontaktloses “Schweben” der Karte → vollständig digitale Wallet. Je weiter von der physischen Übergabe entfernt, desto abstrakteres mentales Modell nötig.

Vertrauensmodelle:

  • “Zauberstab”-Modell: Die Karte/das Smartphone als magisches Werkzeug
  • “Schlüssel”-Modell: Die Karte/das Smartphone öffnet Zugang zu einem Konto
  • “Stellvertreter”-Modell: Die digitale Repräsentation des eigenen Geldes

Mapping

  • Nähe als Metapher für Übertragung: Je näher, desto sicherer die Verbindung
  • Farbcodes: Rot (warten), Gelb (in Bearbeitung), Grün (erfolgreich)
  • Multimodale Rückmeldung: Visuell (Display), akustisch (Ton), haptisch (Vibration)

Constraints

  • Betragslimits ohne zusätzliche Authentifizierung
  • Maximale Distanz für NFC-Kommunikation (ca. 4–10 cm)
  • Erzwungene PIN-Eingabe nach mehreren kontaktlosen Zahlungen

Kulturelle Unterschiede

  • Asien: Frühe Adoption, Japan mit FeliCa seit 1997, China mit QR-Code-basiertem System
  • Skandinavien: Vorreiter bei bargeldlosem Bezahlen, viele Geschäfte akzeptieren kein Bargeld mehr
  • Deutschland: Traditionell bargeldaffin, langsamere Adoption, Bedenken hinsichtlich Datenschutz

Fitness-Tracking

iPhone Health/Fitness App

  • Affordances: “Plus”-Symbole für manuelle Dateneingabe, Pull-to-refresh, Animationen bei Ringabschluss
  • Mentale Modelle: “Ringe schließen” als zentrale Metapher, hierarchische Datenorganisation
  • Mapping: Farbkodierung konsistent (rot für Bewegung, grün für Training, blau für Stehen)
  • Constraints: Bearbeitungsmöglichkeiten zeitlich begrenzt, feste Kategorien für Workout-Typen

Apple Watch

  • Affordances: Digital Crown für Dreh- und Drückinteraktion, haptisches Feedback (Taptic Engine)
  • Mentale Modelle: Uhr als persönlicher Fitness-Coach, kreisförmige Visualisierungen spiegeln die Uhrenform
  • Mapping: Drehen entspricht linearem Scrollen, Farbige Herzfrequenzzonen (grün→gelb→rot)

Sprachsteuerung via AirPods

  • Affordances: “Hey Siri” als verbaler Trigger, Bestätigungston signalisiert Bereitschaft
  • Mentale Modelle: Konversationelles Interface, verbaler Assistent als “freihändiger Trainingspartner”
  • Constraints: Begrenzte Vokabularmenge, kontextabhängige Befehle

Buchempfehlungen

Hausaufgabe: Beobachtungstagebuch (Diary Study)

Beobachtung eines Alltagsobjekts/-interfaces über einen Tag oder Woche hinweg. Das Beispiel sollte möglichst alle vier Konzepte veranschaulichen (Affordance, Mental Model, Mapping, Constraints).

  1. Dokumentiere dein Beispiel mit Fotos/Screenshots
  2. Identifiziere und beschreibe Affordances, mentale Modelle, Mapping und Constraints
  3. Überlege, wie soziale oder kulturelle Faktoren die Gestaltung beeinflussen
  4. Kurze Reflexion: “Was könnte ich bei diesem Interface verbessern?”
  5. Bereite eine kurze Präsentation vor (max. 5–7 Minuten + Feedback)

Vorlagen: