Interaktive Systeme

Alle drei Komponenten sind identisch (R=G=B)

if (R == G && G == B) { return true; // Es ist ein Grauwert }

B > R && B > G

return (color.b > color.r && color.b > color.g);

Aus der Wellenform Amplitude über Zeit) sieht man primär Lautstärke und den Rhytmus.

Das Frequenzspektrum mit der Tonhöhe sieht man dort kaum, dafür wird ein Spektogramm benötigt.

Die virtuelle Höhe eines Elements auf der z‑Achse, die durch Schatten dargestellt wird. Sie zeigt Hierarchie, Bedeutung und Interaktivität eines UI‑Elements.

Gemessen wird hier meist die Latzenz.

In der UI - Entwicklung ist der Worst Case am wichtigsten, da Nutzer eine unregelmäßige Verzögerung als störend empfinden

Weil dieselbe Handlung unterschiedliche Ergebnise liefern kann. Nutzer verlieren vielleicht den Fokus auf den aktuellen Zustand und begehen “mode Errors”

Größere Trefferflächen (Buttons etc benötigt)

Okklusion muss beachtet werden(Hand verdeckt den Inhalt)

​Präzision („Fat Finger“): Maus ist pixelgenau; Touch braucht große Trefflächen (ca. 10mm / 44pt) und mehr Abstand.

​Hover-Zustand: Maus hat Hover (für Tooltips/Menüs); Touch hat kein Hover (Infos müssen direkt sichtbar sein).

​Manipulation: Maus = indirekt; Touch = direkt (Achtung: Finger verdeckt dabei das Bedienelement!).

​Interaktion: Maus nutzt Klicks/Scrollrad; Touch nutzt Gesten (Swipe, Pinch-to-Zoom, Long-Press).

1. Definition: Schnelle, ruckartige (ballistische) Bewegungen der Augen.

2. Funktion: Sie richten den Blick neu aus, um ein neues Ziel in die Fovea (Bereich des schärfsten Sehens) zu bringen.

3. Dauer: Sehr kurz (ca. 30–80 ms).

1. Gesetz der Nähe

Elemente, die räumlich nah beieinander liegen, werden als zusammengehörig wahrgenommen. → Wir sehen Gruppen, obwohl keine Linien vorhanden sind.

2. Gesetz der Ähnlichkeit

Objekte mit ähnlichen Merkmalen (Farbe, Form, Größe, Orientierung) erscheinen als Einheit. → Z. B. gleichfarbige Punkte werden automatisch gruppiert.

3. Gesetz der guten Fortsetzung (Kontinuität)

Das Auge bevorzugt glatte, kontinuierliche Linien statt abrupter Richtungswechsel. → Linien werden als zusammenhängend wahrgenommen, selbst wenn sie sich schneiden.

4. Gesetz der Geschlossenheit

Unvollständige Figuren werden vom Gehirn automatisch ergänzt, sodass eine geschlossene Form entsteht. → Wir sehen z. B. ein Dreieck, obwohl nur Teile gezeichnet sind.

5. Gesetz der Prägnanz (gute Gestalt)

Wir nehmen Muster stets in der einfachsten, stabilsten und regelmäßigsten Form wahr. → Komplexe Formen werden zu einfachen geometrischen Figuren „vereinfacht“.

1. Zwei Sensoren/Augen nehmen die Szene aus leicht unterschiedlichen Positionen auf.

2. Überlagerung und Pattern Matching (Finden gleicher Punkte).

3. Berechnung der Tiefe durch Triangulation anhand der Disparität (Versatz der Punkte) und der Basislinie (Augenabstand).

1. Die Schwierigkeit, einen Bildpunkt im linken Bild eindeutig dem entsprechenden Punkt im rechten Bild zuzuordnen.

2. Zusatz: Besonders schwierig bei texturarmen Flächen (weiße Wand) oder sich wiederholenden Mustern.

Hängt vom Sensorabstand (Basislinie) ab:

• Zu nah: Triangulation ungenau / toter Winkel (Bereiche, die nur ein Auge sieht).

• Zu fern: Disparität geht gegen Null (kein messbarer Unterschied mehr zwischen den Bildern) → Pattern Matching scheitert.

1. Ein Auge wird abgedunkelt (Sonnenbrillenglas).

2. Das Gehirn verarbeitet das dunkle Bild langsamer.

3. Bei seitlicher Bewegung interpretiert das Gehirn die Zeitverzögerung als räumliche Tiefe.

Man teilt jeden der drei Farbkanäle (R, G, B) durch 2.

R = R / 2;

G = G / 2;

B = B / 2;

return new Color(color.r / 2, color.g / 2, color.b / 2);

Zusatz: Multiplikation würde aufhellen; Division dunkelt ab.

Man multipliziert den Rot-Kanal mit einem Faktor > 1 (und begrenzt auf 255)

Rot = min(255, Rot * 1.2); // Faktor > 1 macht es röter // Grün und Blau bleiben gleich

Zusatz: Addition ist falsch, da Schwarz (0) dann rot würde. Subtraktion anderer Kanäle ist falsch, da Weiß (255) dann rötlich würde.

Beschränkung auf wenige Basisfarben, aber Nutzung vieler Helligkeitsabstufungen.

Nutzen: Schafft visuelle Hierarchie und Tiefe, ohne den Nutzer durch zu viele Farben zu überfordern (wirkt harmonisch).

Design, das reale Materialien/Objekte imitiert (z. B. Lederoptik, Schlagschatten).

Nutzen: Erzeugt Vertrautheit und macht Funktionen durch Analogie zur physischen Welt sofort verständlich (intuitive Bedienung).

Klicken einer Digitalkamera, imitiert das mechanische Geräusch einer alten Spiegelreflexkamera

Simulation von Tiefe auf 2D-Flächen durch Licht- und Schatteneffekte (z.B Bevels)

Nutzen: Visualisiert den Zustand (gedrückt/nicht gedrückt) und die Bedienbarkeit (Affordance) von Elementen.

Nutzung vertrauter Metaphern (natürlich), aber erweitert um digitale "Superkräfte" (besser als real).

• Ein digitales Adressbuch sieht aus wie ein Buch (natürlich), hat aber eine Suchfunktion (besser als Blättern).

Verstecken von selten genutzten/komplexen Funktionen, die nur bei Bedarf eingeblendet werden.

Nutzen: Reduziert visuelle Komplexität für Standardnutzer, bietet aber volle Funktionalität für Experten.

1

1. Reduktion von dekorativen UI-Elementen ("Chrome"). Der Inhalt (Text/Bild) wird selbst zum interaktiven Steuerelement.

2. Nutzen: Fokus liegt zu 100% auf der Information; direkte Manipulation statt Umweg über Buttons.

2

1. Strategie, bei der Design & Entwicklung zuerst für mobile Endgeräte erfolgt und später für Desktop erweitert wird.

2. Nutzen: Zwingt zur Fokussierung auf wesentliche Inhalte (Platzmangel) und Performance; einfachere Skalierung nach oben.

1. UX ist das gesamte Erleben vor, während und nach der Nutzung (subjektiv, emotional).

2. Zusatz: Usability ist ein Teil von UX (objektive Bedienbarkeit), UX ergänzt dies um emotionale Faktoren (Spaß, Ästhetik, Motivation).

1. Gesetz der Nähe: Gruppiert Label und Feld (Zugehörigkeit).

2. Gesetz der Ähnlichkeit: Identifiziert gleichartige Elemente (z. B. alle Eingabefelder).

3. Gesetz der guten Fortsetzung: Ausrichtung (Alignment) für den Lesefluss.

1. Zusatz: Schlechte Nähe (zu viel Abstand) führt zu Zuordnungsfehlern.

1. Gesetz der Geschlossenheit (Closure).

2. Erklärung: Das menschliche Gehirn ergänzt ("heilt") unvollständige Umrisse oder Lücken, um eine vollständige, geschlossene Form wahrzunehmen.

Bei CAPTCHAs (Sicherheitsüberprüfungen).

Grund: Menschen können dank Gestaltgesetzen (z. B. Geschlossenheit, Fortsetzung) auch verzerrte oder verdeckte Muster erkennen; Computer scheitern oft daran.

Automatisches Handeln: unbewusst, schnell, wenig kognitive Ressourcen, durch Übung erworben (z.B. Tippen, Autofahren auf bekannter Strecke)

Kontrolliertes Handeln: bewusst, langsam, erfordert Aufmerksamkeit, bei neuentasks

Fehler unterbrechen den Regelkreis (Wahrnehmen → Bewerten → Entscheiden → Ausführen).

Gulf of Execution(Ausführungsphase) :

• Hohe kognitive Last

• Fehlbedienung

Gulf of Evaluation (Evalutionsphase) :

• Fehlendes oder falsches Feedback

• Irritation durch Lagging

Die Fehlerbehandlung sollte: Fehler erkennbar machen, schnelles Rückgängigmachen ermöglichen (Undo), verständliche Fehlermeldungen geben, und den Nutzer nicht bestrafen.

Die Reaktionszeit steigt logarithmisch mit der Anzahl der Auswahlmöglichkeiten. Rolle: Menügestaltung, Fernbedienungen, Navigationssysteme → weniger Optionen = schnellere Entscheidung

Fitts' Law sagt: Je größer und näher ein Ziel ist, desto schneller kann man es anklicken/antippen.

Zwei Faktoren bestimmen die Geschwindigkeit:

Distanz → weit weg = langsamer

Größe → klein = langsamer

Buttons sollten groß sein, damit man sie leicht trifft

Wichtige Buttons sollten nah am Nutzer sein (z.B. nah am Mauszeiger)

Bildschirmecken sind ideal, weil der Mauszeiger dort automatisch stoppt → wirkt wie ein „unendlich großer Button"

Auf Touchscreens braucht man größere Buttons, weil Finger ungenauer sind als eine Maus

Relativ: Aktuelle Position plus getätigte Bewegung (z.B Maus)

Absolut: Arbeitsfläche Eingabegerät entspricht der Fläche des Ausgabegerätes (z.B Touchscreen)

Die Fähigkeit des Gehirns, ein visuelles Feld in ein Hauptelement (Figur) und eine umgebende Fläche (Grund) zu unterteilen. Die Figur steht im Fokus und wirkt räumlich vor dem Hintergrund.

Beispiel: Ein schwarzes Wort auf weißem Papier (Wort = Figur, Papier = Grund).

Sonderfall: Kippbilder (z. B. Rubin-Vase), bei denen Figur und Grund abwechseln.

Nutze Gesten, die das Objekt direkt verändern (Verschieben, Drehen, Skalieren), statt abstrakte Befehle des Betriebssystems aufzurufen.

1. Manipulation Gestures — Gesten, die den Inhalt selbst verändern. Beispiele: Ziehen, Drehen, Skalieren, Zwei‑Finger‑Zoom. Sie vermitteln das Gefühl, das Objekt „anzufassen“.

2. System Gestures — Gesten, die Systemfunktionen auslösen. Beispiele: Vom Rand wischen für OS‑Menüs, Rechtsklick‑Gesten, globale Shortcuts. Sie unterbrechen die Interaktion mit dem Objekt.

Virtuelle Objekte folgen realen mechanischen Gesetzen (Trägheit, Reibung, Schwerkraft). Interaktion erfolgt durch direkte Manipulation (ohne Cursor), um die intuitive Erwartung des Nutzers zu erfüllen.

Inertia (Trägheit): Objekte gleiten nach dem Loslassen weiter.

Friction (Reibung): Objekte werden natürlich langsamer.

Direct Manipulation: 1:1 Reaktion unter dem Finger (keine Latenz).

Bounciness: Elastisches Feedback bei Grenzkontakt (z. B. Bildschirmrand).

Ziel: Minimierung des kognitiven Aufwands durch natürliche Interaktion.

Es entsteht ein Phasensprung (Clipping). Der Buffer endet mitten in der Wellenbewegung. Beim nächsten Methodenaufruf startet die lokale Variable i wieder bei 0. Lösung: Die Phase i muss global/außerhalb der Methode gespeichert werden.

Über Event-Driven Programming, NICHT über Polling (while-Schleifen). Man nutzt Event-Listener für onKeyDown (Zähler +1) und onKeyUp (Zähler -1).

Nach jeder Änderung eine Copie der Object Liste in einen Ringbuffer speichern. Dieser Ringbuffer benötigt drei Indizes einen für den aktuellen Zustand und jeweils einen für den letzten erlaubten Undo- bzw. Redo-Zustand.

Das Command-Pattern (Kommando-Muster). Jede Benutzeraktion wird als eigenes Objekt (Command mit execute und undo Methode) in einem Historien-Stack verwaltet.

1. Sensomotorische Fehler, 2. Gewohnheitsfehler, 3. Unterlassungsfehler, 4. Erkennensfehler, 5. Denk-/Urteilsfehler. (Zusätzlich gibt es noch Systemfehler, die aber nicht beim Nutzer liegen).

Wissnesfehler und Handlungsfehler

1. Nutzungsproblem (Nutzungsmismatch)

  • Was: Das System hat die Funktion, ist aber schlecht bedienbar (UI/UX).

  • Beispiel: Buttons sind zu klein, Menüführung ist unlogisch.

2. Funktionsproblem (Funktionalitätsmismatch)

  • Was: Das System bietet nicht die benötigten Werkzeuge für die Aufgabe oder ist technisch defekt.

  • Beispiel: Word für Buchhaltung nutzen; ein Programm hat ein Speicherleck (Bug).

3. Qualifikationsproblem (Qualifikationsmismatch)

  • Was: Dem Nutzer fehlt das Wissen/Training, um das System für die Aufgabe korrekt zu bedienen.

  • Beispiel: Ein Laie soll komplexe Excel-Makros programmieren.

4. Interaktionsproblem

  • Was: Die Kommunikation zwischen Mensch und Maschine ist gestört (oft als Oberbegriff für Nutzungsprobleme verwendet).

Sensomotorisch: Mentales Modell und Plan sind richtig, aber die Ausführung scheitert motorisch (z.B. Finger rutscht vom Touchscreen ab, man klickt daneben).

​Gewohnheitsfehler: Es wird unbewusst eine eigentlich korrekte, stark automatisierte Routine ausgeführt, die aber im neuen System/Kontext falsch ist (z.B. alte Tastenkombination in neuer Software gedrückt = negativer Transfer).

​Rohdaten aufnehmen: Die reinen Sensordaten (z. B. eine gezeichnete Linie per Maus oder Touchscreen) werden erfasst.

​Normierung: Die erfassten Daten werden auf eine Standardgröße skaliert und z.B. in den Nullpunkt verschoben, damit man unterschiedlich groß oder schnell gezeichnete Gesten vergleichen kann.

​Merkmalsextraktion: Die wichtigsten Eigenschaften der Geste (z. B. Start-/Endpunkte, Anzahl der Richtungswechsel, Winkel) werden herausgefiltert und als Vektor gespeichert.

​Distanzfunktion: Es wird die mathematische Abweichung (Distanz) zwischen den extrahierten Merkmalen der Eingabe und bereits gespeicherten Mustern berechnet.

​Musterklassifikation: Die Geste wird dem Muster zugeordnet, zu dem sie die geringste Distanz bzw. höchste Ähnlichkeit aufweist (z. B. "Das war ein gezeichnetes 'A'").

1. Lautstärke halbieren (Amplitude verringern): Das Endergebnis der Modulo-Operation wird halbiert.

Code: wavBuf[i] = (byte)((i % 256) / 2);

2. Tonhöhe halbieren (Frequenz halbieren/Welle strecken): Der Zeitindex i wird vor der Modulo-Operation halbiert, dadurch dauert ein Wellenzyklus doppelt so lange (eine Oktave tiefer).

Code: wavBuf[i] = (byte)((i / 2) % 256);

1. Effektivität (Wird das Ziel erreicht?)

2. Effizienz (Wie hoch ist der Aufwand/Ressourcenverbrauch dafür?)

3. Zufriedenstellung (Wie angenehm ist die Nutzung?)

Analyse: Erstellung von Personas/Szenarien (Nutzerfokus statt nur Technikfokus).

2. Entwurf: Trennung von UI und Logik (z. B. MVC-Pattern) für bessere Wartbarkeit der Oberfläche.

3. Testen: Usability-Evaluation mit echten Nutzern (statt nur reinem Code-Testing).

Während der klassische Test die funktionale Korrektheit prüft (Unit/Integration Tests), prüft der interaktive Test die Benutzbarkeit (Usability). Ziel ist es, Bedienhürden zu identifizieren, oft durch Beobachtung von Probanden (User-Testing).

​Eingabepuffer (Input Queue):

Das System speichert Events (Klicks/Tastendrücke) in einer Warteschlange. Sobald das System wieder frei ist, werden sie nacheinander abgearbeitet (Text „schießt nach“).

​Unterschied Tastatur vs. Maus:

​Tastatur (diskret): Pufferung funktioniert gut; die Zeichenfolge bleibt korrekt, wir akzeptieren die kurze Pause.

​Maus (kontinuierlich): Kritisch ab ca. 100ms. Die Feedbackschleife bricht ab, es entsteht der „Gummiband-Effekt“ (schwammige Steuerung).

​Gegenmaßnahmen:

​Lokales Echo: Sofortiges Feedback vor der Bestätigung durch das Programm/Server.

​Prädiktion: Vorhersage der nächsten Cursor-Position.

​Interrupts: Eingabegeräte haben im OS höchste Priorität.

Bild/Inhalt passt sich an Bildschirmgröße an

Omnidirektional: Der Nutzer muss nicht auf das Gerät schauen (gut für "Eyes-Free"-Bedienung).

​Transient: Das Signal ist flüchtig und verschwindet sofort wieder.

​Alarmierend: Es zieht starke Aufmerksamkeit auf sich und kann schlecht ignoriert werden.

Touchscreens bieten keine physischen Tasten mehr, wodurch das mechanische Feedback (Tastenwiderstand/Klick) beim Tippen fehlt. Audio wird genutzt, um dieses taktile Defizit auszugleichen. Beispiel: Das künstliche "Tastaturklick"-Geräusch beim Tippen auf einer Smartphone-Tastatur.

Fehlervermeidung: Das System so designen, dass Fehler gar nicht erst passieren (z.B. ungültige Buttons ausgrauen).

​Konstruktive Fehlermeldungen: Dem Nutzer genau sagen, was falsch lief und wie er es beheben kann.

​Reversibilität: Einfaches Rückgängigmachen (Undo-Funktion).

Man zieht in jedem Schritt die gleitreibung von der Geschwindigkeit v ab (bzw. addiert sie bei negativer Geschwindigkeit). Wichtig ist der Check für die Haftreibung: Wenn v durch den Abzug das Vorzeichen wechseln würde (also über Null hinausschießt), setzt man v = 0. Das Objekt steht dann still und die Haftreibung hält es fest.

(Dazu am besten gedanklich den Code-Schnipsel von oben merken)

1. Winkel eines Vektors zur Achse: Geht am einfachsten mit double winkel = Math.atan2(dy, dx);

2. Winkel zwischen zwei Vektoren: Über den Arkuskosinus des Skalarprodukts geteilt durch die Längen der Vektoren:

Math.acos( ((dx1*dx2) + (dy1*dy2)) / (laenge1 * laenge2) );

Es handelt sich um eine lineare Interpolation im dreidimensionalen RGB-Farbraum.

​Formel: C(t) = (1 - t) \cdot col_1 + t \cdot col_2

​Wichtige Regel: Diese Interpolation muss zwingend komponentenweise durchgeführt werden. Das bedeutet, die Formel wird für die Kanäle Rot, Grün und Blau jeweils einzeln berechnet und das Ergebnis am Ende wieder zu einer neuen Farbe zusammengefügt.

Man interpoliert jeden Farbkanal (Rot, Grün, Blau) einzeln mit der Formel: kanal = col1_kanal * (1 - t) + col2_kanal * t.

Beispiel für Rot:

int r = (int) (col1.getRed() * (1 - t) + col2.getRed() * t);

Am Ende gibt man eine neue Farbe mit den berechneten R-, G- und B-Werten zurück.

Werte der Umgebungswerte mitteln/ mittlere Pixel mehr gewichten

Beispiele :

Adaptivität: Das Display dimmt sich bei Dunkelheit (Lichtsensor).

​Relevanz: Eine Shopping-App pusht Coupons, wenn man den Laden betritt (Location-based).

Diskret: Bewegung in festen Schritten

Position springt von Rasterpunkt zu Rasterpunkt

Keine Zwischenwerte

Menü-Navigation

Kontinuierliche:

Stufenlose, fließende Bewegung

Jeder Zwischenwert möglich

Maus Kamerabewegung

Mathe. ToDegrees(Math.atan2(avgDifY,avgDifX)