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);

1. Das Phänomen (Der flüchtige Blick): Nutzer lesen Webinhalte am Bildschirm meist nicht Wort für Wort, sondern scannen sie in Form eines „F“ ab:

• Schritt 1 (Oben): Ein horizontaler Blick über den oberen Bereich (der obere Balken des F).

• Schritt 2 (Mitte): Ein zweiter, kürzerer Blick etwas weiter unten (der mittlere Balken des F).

• Schritt 3 (Links): Ein vertikaler Blick entlang der linken Kante nach unten.

2. Die biologische Ursache: Sakkaden (unbewusste Blickbewegungen) richten das Auge so aus, dass nur ein minimaler Bereich foveal (mit höchster Auflösung) erfasst wird. Der Rest wird nur peripher wahrgenommen.

3. Konsequenz für das Design („First 2 Words“): Die ersten zwei Wörter eines Satzes, einer Überschrift oder eines Aufzählungspunkts sind der entscheidende Signalgeber für das Auge. Wichtige Schlüsselwörter und Kernaussagen müssen daher zwingend ganz links bzw. am Anfang stehen, um beim Scannen erfasst zu werden.

Eine Brotkrümelnavigation zeigt den aktuellen Standort des Nutzers innerhalb der Seitenstruktur an.

Nutzen:

• Verbessert die Orientierung.

• Macht den Navigationspfad sichtbar.

• Ermöglicht schnelles Zurückspringen auf höhere Ebenen.

• Verringert das Risiko, sich in der Website zu verirren.

Beispiel:

Startseite > Kurse > Informatik > Künstliche Intelligenz > Kapitel 3

Visuelle Hierarchie bezeichnet die gezielte Anordnung und Gestaltung von Elementen (z. B. Größe, Farbe, Kontrast), sodass wichtige Informationen zuerst wahrgenommen werden.

Nutzen:

• Erleichtert die Orientierung.

• Lenkt die Aufmerksamkeit auf wichtige Inhalte.

• Reduziert die kognitive Belastung.

• Verbessert die Effizienz der Nutzung.

Beispiel: Auf einer E-Learning-Plattform ist der Button „Kurs starten“ größer und farblich hervorgehoben als weniger wichtige Funktionen.

Das menschliche Auge besitzt unterschiedliche Empfindlichkeiten für Lichtwellenlängen (Grün-Rezeptoren wirken physiologisch viel heller als Blau- oder Rot-Rezeptoren). Daher nutzt man gewichtete Formeln (z. B. $Y = 0{,}3 R + 0{,}59 G + 0{,}11 B$).

1. Cognitive Walkthrough: Durchgeführt von Usability-Experten (ohne Anwender), die eine Handlungsschritt-Folge gedanklich aus Sicht eines Einsteigers evaluieren.

2. Thinking Aloud (Lautes Denken): Durchgeführt mit echten Testpersonen/Nutzer, die während der Bearbeitung von Aufgaben alle Gedanken laut aussprechen.

Aktive User Guidance: Das System ergreift von sich aus die Initiative und führt den Nutzer aktiv oder weist ihn proaktiv hin.

• Beispiele: Einrichtungswizards / Eingabeassistenten, interaktive Onboarding-Touren, automatische Warnhinweise / Inline-Validierung.

• Passive User Guidance: Der Nutzer muss die Hilfe explizit anfordern; das System bleibt im Hintergrund passiv.

  • Beispiele: Tooltips (Mouseover-Text), Online-Dokumentation / F1-Hilfedialoge, Suchfunktion im Hilfesystem.

1. Bedeutung: Rahmen, Linien und Abstände werden optisch an die Eigenschaften der verwendeten Schrift angepasst (z. B. Strichstärke, Eckenabrundung/Serifen, Kontrast).

2. Ziel: Erzeugt eine harmonische, einheitliche visuelle Sprache, bei der Text und umgebende UI-Elemente wie aus einem Guss wirken.

1. Wie: Durch Anpassen von Abständen (White Space), Schriftgrößen und Komponenten-Skalierung je nach Anwendungsfall (z. B. Compact für Datenanalysen vs. Spacious für Consumer-Apps).

2. Nutzen: Ausgewogenheit zwischen Umfang (genug Daten auf einen Blick) und Lesbarkeit (Vermeidung von kognitiver Überlastung).

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

Definition Mode Error: Ein Fehler, der entsteht, wenn der Nutzer vergisst, in welchem Zustand/Modus sich das System befindet (da dieselbe Eingabe je nach Modus unterschiedliche Wirkungen hat, z. B. Einfüge- vs. Überschreibe-Modus).

• Vermeidungsvorschläge:

  1. Mode-Free Design: Auf Modi weitgehend verzichten, sodass jede Aktion immer dieselbe Auswirkung hat.

  2. Deutliches Feedback / Indikatoren: Den aktiven Modus visuell oder akustisch unmissverständlich anzeigen (z. B. geänderter Mauszeiger, farbiger Statusrahmen, hervorgehobener Button).

  3. Quasi-Modi (Spring-loaded Modes): Der Modus bleibt nur aktiv, solange eine Taste physisch gedrückt gehalten wird (z. B. Shift für Großbuchstaben).

Auditory Icons: Nutzen alltägliche, natürliche Geräusche aus der Umwelt als direkte Metapher für Systemaktionen (intuitiv verständlich).

• Beispiel: Geräusch von zerknülltem Papier beim Leeren des Papierkorbs, Türschließen-Sound beim Ausloggen.

• Earcons: Kurze, abstrakte, musikalische Tonfolgen oder Motive ohne natürlichen Bezug zur Aktion (müssen vom Nutzer erlernt werden).

  • Beispiel: Windows-Startsound, Benachrichtigungston bei Eingang einer neuen E-Mail.

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. Usability (Pragmatische Qualität):

   • Fokussiert auf die aufgabenorientierte Gebrauchstauglichkeit (Effektivität, Effizienz und Zufriedenheit bei der Zielerreichung nach ISO 9241-11).

   • Frage des Nutzers: „Kann ich meine Aufgabe schnell und fehlerfrei erledigen?“

2. User Experience / UX (Hedonische Qualität):

   • Umfasst das gesamtheitliche Nutzererlebnis – inklusive emotionaler Aspekte, Ästhetik, Freude an der Nutzung (Joy of Use), Identifikation und Stimulation.

   • Wirkt vor, während und nach der eigentlichen Nutzung.

   • Frage des Nutzers: „Fühlt sich die Interaktion gut an und bereitet sie mir Freude?“

Fazit: Usability ist ein Teilbereich der UX. Ein System kann eine hohe Usability besitzen (pragmatisch gut), aber eine schlechte UX bieten, wenn das emotionale Erleben (hedonisch) fehlt.

final int SIZE = 50;

ObjectList[] ringbuffer = new ObjectList[SIZE];

int current = -1;

int maxIndex = -1;

int count = 0; // Anzahl verfügbarer Undo-Schritte

void saveState(ObjectList state) {

current = (current + 1) % SIZE;

ringbuffer[current] = state.deepCopy();

maxIndex = current; // Redo-Zukunft ab hier verwerfen

if (count < SIZE) {

count++;

}

}

void undo() {

if (count > 1) { // count > 1, damit der Initialzustand erhalten bleibt

current = (current - 1 + SIZE) % SIZE;

workspace.restore(ringbuffer[current]);

count--;

}

}

void redo() {

if (current != maxIndex) {

current = (current + 1) % SIZE;

workspace.restore(ringbuffer[current]);

count++;

}

}

int r = 0, g = 0, b = 0;

for (int dy = -1; dy <= 1; dy++) {

for (int dx = -1; dx <= 1; dx++) {

int p = srcImage.getPixel(x + dx, y + dy);

r += (p >> 16) & 0xFF;

g += (p >> 8) & 0xFF;

b += p & 0xFF;

}

}

// In separates Zielbild schreiben (verhindert In-Place-Fehler)

dstImage.setPixel(x, y, (255 << 24) | ((r / 9) << 16) | ((g / 9) << 8) | (b / 9));

1. 1. Abstrakte Basisklasse UIObject:

   • Attribute: int x, y, width, height; boolean isSelected;

   • Methoden: abstract void draw(Graphics g); und abstract boolean contains(int px, int py); (Hit-Testing)

2. 2. Konkrete Elementklassen (Rectangle, Circle etc.): Erben von UIObject und überschreiben draw() sowie contains().

3. 3. Verwalterklasse Workspace / Canvas:

   • Attribute: List<UIObject> objects; (verwaltet alle Objekte; Index 0 ist ganz hinten, das Listenende ganz vorne)

   • Zeichnen (paintComponent): Iteriert vorwärts von 0 bis size()-1 und ruft obj.draw(g) auf.

   • Event-Handling (onMouseClick): Durchläuft objects rückwärts (vom Listenende zu Index 0). Das erste Objekt mit obj.contains(px, py) == true wird ausgewählt (break).

Prinzip: Ein zweidimensionales Array zBuffer[WIDTH][HEIGHT] speichert für jeden Bildschirmpixel $(x, y)$ den bisher kleinsten Tiefenwert $z$ (Abstand zur Kamera). Ein neuer Pixel wird nur gezeichnet, wenn sein $z$-Wert kleiner (näher am Betrachter) ist als der aktuell gespeicherte $z$-Wert an dieser Stelle.

// 1. Initialisierung mit maximaler Tiefe (unendlich)

double[][] zBuffer = new double[WIDTH][HEIGHT];

for (int x = 0; x < WIDTH; x++) {

for (int y = 0; y < HEIGHT; y++) {

zBuffer[x][y] = Double.POSITIVE_INFINITY;

}

}

// 2. Zeichnen eines Pixels an Position (x, y) mit Tiefe z

void drawPixelWithZBuffer(int x, int y, double z, Color color) {

if (x >= 0 && x < WIDTH && y >= 0 && y < HEIGHT) {

if (z < zBuffer[x][y]) { // Tiefentest: Liegt der neue Pixel näher?

zBuffer[x][y] = z; // Tiefenwert aktualisieren

setFrameBufferColor(x, y, color); // Pixel zeichnen

}

}

}

1. Entwurfsmuster: Anwendung des State-Patterns (Zustandsmuster) bzw. Strategy / Tool-Patterns.

2. Klassen & Rollen:

   • 1. Abstrakte Werkzeug-Schnittstelle (Tool): Deklariert die einheitlichen Schnittstellen-Methoden für alle eingehenden Interaktions-Ereignisse (z. B. Event-Empfänger für Mausklicks und Drag-Aktionen).

   • 2. Konkrete Modus-Klassen (SelectionTool, RectangleTool etc.): Implementieren das modusspezifische Verhalten. Jede Klasse kapselt die Logik und die temporären Zustände für genau einen Modus.

   • 3. Kontext / Verwalter (Canvas / Workspace): Baut die Zeichenfläche auf, hält eine Referenz auf das aktuell aktive Werkzeug (Active Tool) und ermöglicht das Umschalten zwischen Modi.

3. Interaktionsfluss (Delegation & Polymorphie):

   • Eingehende System-Events treffen beim Canvas ein.

   • Der Canvas verarbeitet die Events nicht selbst, sondern delegiert sie direkt an das aktuell aktive Tool-Objekt.

Psychoakustische Maskierung beschreibt das Phänomen des menschlichen Gehörs, bei dem ein lauterer Schalldruck bzw. eine dominante Frequenz andere, leichtere Töne in zeitlicher oder frequenzmäßiger Nähe unhörbar verdeckt.

1. Physikalisches Prinzip: Ein frequenzstarkes oder lautes Audiosignal verdeckt schwächere Frequenzanteile im Frequenzspektrum (Frequenzmaskierung) oder kurz vor/nach dem Signal (zeitliche Maskierung).

2. Technische Umsetzung: > 1. Das Audiosignal wird in Frequenzbänder zerlegt (Transformation in den Frequenzraum via FFT/MDCT). 2. Das psychoakustische Modell berechnet die dynamische Hörschwelle (Maskierungsschwelle). 3. Frequenzanteile unterhalb dieser Schwelle werden quantisiert oder komplett gelöscht, da sie keinen wahrnehmbaren Informationswert besitzen.

3. Technischer Nutzen: Massive Reduktion der Bitrate/Dateigröße bei gleichbleibend hoher wahrgenommener Audioqualität.

1. Das Modell (Vester/Kreidel):

   • Sensorische Aufnahme: Das Auge und andere Sinnesorgane nehmen riesige Datenmengen auf ($\approx 10^7\text{ bis }10^9\text{ Bit/s}$).

   • Bewusste Verarbeitung (Flaschenhals): Das Bewusstsein / Arbeitsgedächtnis kann nur ca. $10^2\text{ Bit/s}$ ($100\text{ Bit/s}$) bewusst verarbeiten.

2. Unterschied im Handeln:

   • Kontrolliertes Handeln: Bewusst, langsam, sequenziell, benötigt Aufmerksamkeit (stößt sofort an den Flaschenhals).

   • Automatisches Handeln: Unbewusst, parallel, schnell und effizient (entlastet den Flaschenhals).

3. Konsequenz für den UI-Entwurf:

   UIs müssen so gestaltet sein, dass Nutzer wiederkehrende Handlungen rasch automatisieren können (z. B. durch Tastenkombinationen, bekannte Metaphern und Konsistenz), um das kognitive System nicht zu überlasten.

Nutzung hoher Frequenzen, prägnanter Tonintervalle (z. B. Quarte) und hoher Lautstärke, da diese Geräuschkulissen besser durchdringen.

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.

1] Warnehmen-> Bewerten -> Entscheiden ->Ausführen

2] Entdeckung -> Diagnose -> Korrektur

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.

Die 256 passen im letzten Aufruf nichtmehr ganz rein.

Set<Integer> pressedKeys = new HashSet<>();

boolean invalid = false;

void keyPressed(KeyEvent e)

{ if (e.keyCode != KEY_SHIFT && e.keyCode != KEY_CTRL && e.keyCode != KEY_ALT)

{ pressedKeys.add(e.keyCode); // Ersetzt pressedCount++ (verhindert Auto-Repeat-Fehler!)

if (pressedKeys.size() >= 2) { // Ersetzt pressedCount >= 2

invalid = true; } } }

void keyReleased(KeyEvent e)

{ if (e.keyCode != KEY_SHIFT && e.keyCode != KEY_CTRL && e.keyCode != KEY_ALT)

{ pressedKeys.remove(e.keyCode); // Ersetzt pressedCount--

if (pressedKeys.size() < 2) { // Ersetzt pressedCount < 2

invalid = false; } } }

1. Bedeutung: Interaktion durch fließende Eingaben (z.B. Schieberegler, Drag-and-Drop) statt isolierter Einzelbefehle (z.B. Tippen von Werten, Button-Klicks).

2. Nutzen: Ermöglicht präzise Feinjustierung durch sofortiges visuelles Feedback und verhindert Unterbrechungen im Arbeitsfluss.

10dB Zuwachs entspricht zehnfacher Schallintensität, wird als doppelt so laut empfunden

Informative (übermittelt hilfreiches Feedback), Honest (repräsentiert die Marke authentisch) und Reassuring (vermittelt Sicherheit und Aufmerksamkeit nur bei Bedarf).

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) (Interaktionsproblem)

  • 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.

Dithering ist das gezielte Hinzufügen von feinem Rauschen oder Rastermustern beim Reduzieren der Farb- oder Bit-Tiefe. Sein Nutzen liegt darin, störende Artefakte wie harte Farbabstufungen (Color Banding) zu verhindern und dem menschlichen Auge oder Ohr fließende Zwischenwerte vorzutäuschen.

​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.

wavBuf[i] = (byte) ((((i % 256) - 128) / 2) + 128);

wavBuf[i] = (byte) ((((i & 255) - 128) / 2) + 128); //bei zeichen und

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

Layout

Material Design verwendet ein Raster (Grid-System) und feste Abstände, damit Oberflächen übersichtlich, konsistent und leicht bedienbar sind. Inhalte werden klar strukturiert und nach ihrer Bedeutung angeordnet.

Responsiveness

Responsiveness bedeutet, dass sich die Benutzeroberfläche automatisch an verschiedene Bildschirmgrößen und Geräte anpasst, z. B. Smartphone, Tablet oder Desktop. Elemente können ihre Größe, Position oder Anordnung ändern, damit die Bedienung auf jedem Gerät komfortabel bleibt.

Feedback gibt dem Nutzer eine Rückmeldung über den aktuellen Systemzustand oder das Ergebnis einer Aktion.

Beispiel: Ein Button wird nach dem Klicken grün oder eine Bestätigungsmeldung erscheint.

Feedforward zeigt dem Nutzer mögliche nächste Aktionen oder die erwarteten Auswirkungen einer Aktion.

Beispiel: Ein Hinweis „Bitte zuerst Datei auswählen“.

Nutzen:

Reduzierung der kognitiven Belastung

Bessere Orientierung im System

Vermeidung von Fehlern

Höhere Effizienz und schnellere Aufgabenerledigung

Verbesserte Usability und Lernbarkeit

Affordance beschreibt die wahrnehmbaren Eigenschaften eines Objekts oder Bedienelements, die dem Nutzer zeigen, wie es verwendet werden kann.

Beispiele:

Ein Button wirkt klickbar.

Ein Textfeld signalisiert, dass Text eingegeben werden kann.

Ein Schieberegler wirkt verschiebbar.

Nutzen:

Intuitive Bedienung

Weniger Bedienfehler

Geringere kognitive Belastung

Höhere Usability

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).

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) = col1_rot * (1 - t) + col2_rot * t.

​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.

public int[] blendColors(int[] c1, int[] c2, double factor) { int r = (int) (c1[0] * (1 - factor) + c2[0] * factor); int g = (int) (c1[1] * (1 - factor) + c2[1] * factor); int b = (int) (c1[2] * (1 - factor) + c2[2] * factor); return new int[]{r, g, b}; }

1. Minimale physikalische Größe: 7*7

2. Minimale Bildschirmauflösung: 44*44 (Empfohlener Komfortbereich: 9*9 mm}$ bzw. 48*48 Pixel.

// Klickprüfer (Bounding Box):

boolean contains(double mx, double my) {

return (mx >= x && mx <= x + width && my >= y && my <= y + height);

}

// Physik-Update mit Reibung:

void updatePosition(double friction) {

x += vx;

y += vy;

vx *= friction;

vy *= friction; // z.B. friction = 0.95

if (Math.sqrt(vx*vx + vy*vy) < 0.05) {

vx = 0; vy = 0; // Haftreibung / Stopp

}

}

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)

Jakob Nielsen definiert drei entscheidende Schwellenwerte für die Antwortzeit interaktiver Systeme:

• 0,1 Sekunden: Das System reagiert quasi instant. Die Aktion fühlt sich direkt an und es gibt keine Beeinflussung des Arbeitsflusses (Gefühl von direkter Manipulation).

• 1,0 Sekunde: Der Nutzer bemerkt die Verzögerung, aber der Gedankenfluss/Fokus kann noch beibehalten werden. Eine spezielle Rückmeldung ist noch nicht zwingend nötig.

• 10 Sekunden: Das Limit für die Aufmerksamkeit. Ab hier verliert der Nutzer den Fokus und wendet sich ab oder erledigt nebenbei andere Aufgaben. Ein Feedback (z. B. ein Ladebalken oder Fortschrittsanzeige) ist ab dieser Dauer zwingend erforderlich.

Make it Direct bedeutet, dass Nutzer Objekte auf dem Bildschirm unmittelbar selbst greifen und verändern können (z. B. per Drag-and-Drop), anstatt Aktionen über abstrakte Menüs oder Formulare auszuführen.

Nutzen:

Es verringert die kognitive Belastung, da die Interaktion intuitiv erlernbar ist und durch sofortiges visuelles Feedback eine schnellere, fehlerärmere Bedienung ermöglicht.

Extras on Demand: Strukturierung für Nutzer-Level (Anfänger sehen Basisansicht; Profis können erweiterte Werkzeuge dauerhaft zuschalten).

Progressive Disclosure: Sequenzielle Führung durch einen komplexen Prozess (Informationen/Optionen werden schrittweise erst dann enthüllt, wenn der jeweilige Handlungsschritt ansteht, z. B. Checkout-Wizards).

Weder extrem flach (64 Buttons auf einmal überfordern kognitiv) noch extrem tief (10 Klick-Ebenen führen zu Orientierungsverlust). Optimal ist eine ausgewogene Baumstruktur (z. B. 8 \times 8 Kategorien), bei der Kategorien logisch gruppiert sind.

Rechtecksignal (Square Wave): Der Ternär-Operator springt hart zwischen zwei Extremwerten (+120 und -120) hin und her.

Sägezahnsignal (Sawtooth Wave): i & 255 entspricht i % 256 und erzeugt ein stetig steigendes Rampensignal von 0 bis 255, das nach 256 Schritten wieder auf 0 abfällt.

Sägezahnsignal mit doppelter Amplitude / Lautstärke: Der Faktor 2 verdoppelt den Anstieg pro Schritt, wodurch das Signal lauter / steiler wird.