Interactive Design Lab

Paul Fitts formulierte 1954 ein Gesetz, das jedem Interaction Designer bekannt sein sollte: Die Zeit um ein Ziel zu treffen hängt logarithmisch von Größe und Entfernung ab. Ein Knopf der doppelt so groß ist, ist nicht doppelt so leicht zu treffen — er ist unverhältnismäßig viel leichter.

Die praktischen Konsequenzen sind tiefgreifend: Der Zurück-Button im Browser sollte groß sein, nicht klein. Submit-Buttons sollten die prominenteste Interaktionsfläche auf einem Formular sein. Navigation am Bildschirmrand (macOS Menübar) profitiert davon, dass der Cursor nicht über den Rand hinausschießen kann — eine unendlich breite Fläche.

Donald Norman hat den Begriff "Affordance" für UX-Design populär gemacht — eigentlich aus James Gibson's ökologischer Psychologie. Eine Affordance ist die wahrgenommene Handlungsmöglichkeit, die ein Objekt anbietet. Eine Türklinke bietet Greifen an. Ein flacher Tisch bietet Ablegen an.

Im digitalen Interface fehlen physische Eigenschaften. Designer ersetzen sie durch visuelle Konventionen: Schatten, Erhöhung, Farbe, Bewegung. Das Problem: zu viele Konventionen führen zu Erwartungskonflikten.

Jakob Nielsen hat 1993 drei Zeitgrenzen definiert: 0.1 Sekunden fühlt sich sofortig an — der Nutzer glaubt, er kontrolliert direkt. 1 Sekunde ist die Grenze für einen ununterbrochenen Gedankenfluss — kein Ladeindikator nötig. 10 Sekunden ist die Aufmerksamkeits-Grenze — danach wandert der Fokus.

Feedback ist nicht nur Timing. Es ist auch Modalität: visuelle Bestätigung (Button-State-Wechsel), akustisches Feedback (Click-Sound), haptisches Feedback (Vibration auf Mobile), textliches Feedback ("Gespeichert"). Mehrere Kanäle gleichzeitig verstärken die Wahrnehmung.

Google's Material Design spezifiziert Timing-Empfehlungen: Kleine Elemente: 100–200ms. Mittlere Elemente: 200–300ms. Komplexe Layouts: 300–500ms. Die Dauer skaliert mit der visuellen Komplexität — aber niemals mechanisch linear.

Easing-Funktionen bestimmen den Charakter der Bewegung. ease-out (schnell anfangen, langsam aufhören) fühlt sich natürlich an für Elemente die erscheinen — wie ein Ball der landet. ease-in (langsam anfangen, schnell aufhören) für Elemente die verschwinden. Linear fühlt sich mechanisch-tot an.

Microinteractions sind die Signatur eines Products. Facebooks "Like" ist ein Microinteraction. Das iPhone-Tastatur-Feedback ist eines. Das Bounce beim iOS-Scroll-Ende ist eines. Sie transportieren Persönlichkeit in Momenten, die zu klein für explizites Design scheinen.

Die Gefahr: Overengineering. Wenn Microinteractions zu aufwendig sind, stehlen sie Aufmerksamkeit von der eigentlichen Aufgabe. Sie sollen ergänzen — nicht unterhalten. Die beste Microinteraction ist die, die man erst bemerkt wenn sie fehlt.

Gestalt-Prinzipien sind keine Design-Regeln im Sinne von Best Practices — sie beschreiben, wie das visuelle System des Gehirns Muster erkennt. Design gegen Gestalt zu arbeiten bedeutet, gegen die menschliche Neurologie zu arbeiten. Das ist möglich — aber teuer.

Progressive Disclosure ist kein Trick zum Verstecken von Features — es ist Respekt vor der kognitiven Kapazität des Nutzers. Jedes sichtbare Element kostet Aufmerksamkeit. Elemente die nicht relevant sind, sollten nicht sichtbar sein.

Die Gefahr: Wichtiges zu weit verstecken. Progressive Disclosure ist nur dann gut, wenn die primären Nutzungspfade oberflächlich erreichbar sind. Was 80% der Nutzer 80% der Zeit brauchen, darf nicht zwei Klicks tief vergraben sein.

William Edmund Hick und Ray Hyman haben 1952 gezeigt: Reaktionszeit = a + b × log₂(n + 1). Die Konsequenz für Design: Weniger ist messbar schneller. Ein Dropdown mit 5 Optionen führt schneller zu einer Auswahl als ein Dropdown mit 15.

Das scheinbare Paradox: Nutzer wollen Auswahl. Sie fühlen sich mit mehr Optionen mächtiger. Aber sie entscheiden langsamer und sind weniger zufrieden (Barry Schwartz: "The Paradox of Choice", 2004). Die Lösung: Defaults setzen, häufige Optionen hervorheben, seltene verbergen.

Ein Mental Model ist die interne Repräsentation eines Systems, die ein Nutzer im Kopf hat. Es basiert auf früheren Erfahrungen mit ähnlichen Systemen, auf visuellen Metaphern, auf Analogien aus der physischen Welt. Das Interface muss das Mental Model bestätigen oder sanft korrigieren — nicht brechen.

Wenn ein Nutzer auf einen Button klickt und nichts passiert was er erwartet hat, scheitert das System nicht wegen eines Bugs — es scheitert wegen eines Mental-Model-Mismatch. Der Designer hat etwas anderes implementiert als was der Nutzer erwartet hat.

Die Herausforderung: Das Mental Model des Designers ist nach wochenlanger Arbeit an einem System fundamental anders als das des Nutzers der es zum ersten Mal sieht. Deshalb ist User Research keine Dekoration — es ist die einzige Methode, das eigene Mental Model zu korrigieren.

Jakobs Nielsen Usability Heuristik 5: "Error prevention" steht über "Error recovery". Es ist billiger, Fehler durch Design zu verhindern als sie danach zu kommunizieren und zu reparieren. Constraining the user — das Einschränken auf erlaubte Aktionen — ist keine Bevormundung, es ist gutes Design.

Beispiele für Error Prevention in Praxis: Disabled-State für Buttons wenn Voraussetzungen nicht erfüllt sind. Confirmation-Dialog vor irreversiblen Aktionen. Input-Masken für strukturierte Daten (Datum, IBAN). Real-time Validation statt Submit-time Validation.

Ben Schneiderman definierte 1982 Direct Manipulation als Interface-Paradigma mit drei Eigenschaften: Kontinuierliche Repräsentation der Objekte und Aktionen. Physische Aktionen statt komplexer Syntax. Schnelles inkrementelles und rückgängig machbares Feedback.

Das Gegenprogramm: Command-Line Interfaces. CLI ist mächtiger für Experten aber opak für Einsteiger. Direktmanipulation macht das Interface erkundbar — man kann probieren ohne zu wissen was möglich ist. Das iPhone hat Direct Manipulation radikalisiert: kein Zeigegerät, kein Pointer — nur die Hand direkt auf dem Inhalt.

Die Herausforderung heute: Direkte Manipulation auf Touch braucht andere Gestaltung als auf Desktop. Pinch-to-zoom, Swipe, Long-Press — diese Gesten müssen entdeckbar sein, ohne dass man einen Kurs absolviert. Entdeckbarkeit ist das zentrale Problem der Touch-UX.

Räumliches Gedächtnis ist eines der ältesten und verlässlichsten menschlichen Gedächtnissysteme. Wir navigieren unsere Wohnung im Dunkeln, weil wir den Raum kennen. Ein stabiles Interface nutzt dieses System: der Nutzer weiß wo die Schaltfläche ist ohne zu suchen — weil sie immer dort war.

Die Konsequenzen für Design: Navigation darf nicht bewegen. Buttons dürfen nicht ihre Position ändern. Icons dürfen nicht ihre Bedeutung ändern. Jede Layoutänderung kostet den Nutzer sein räumliches Gedächtnis — er muss von vorn beginnen, die Oberfläche zu kartieren.

Das gilt besonders für häufig benutzte Tools. Microsoft hat mit dem Office 2007 Ribbon-Redesign eine Generation von Power-Usern entfremdet, nicht weil das neue Design schlechter war — sondern weil es das räumliche Gedächtnis von Millionen Menschen löschte.

Google's Material Design hat 2014 den Begriff "Meaningful Motion" geprägt: Animationen sollen nicht unterhalten — sie sollen räumliche Zusammenhänge kommunizieren. Ein Element das von Position A nach B animiert, zeigt dem Nutzer: das ist dasselbe Objekt — es hat sich nur bewegt.

Transition-Kategorien: Navigational Transitions zeigen Bewegung durch eine Hierarchie (rein/raus aus einem Sub-Screen). Container Transforms morphen ein Element in eine neue Ansicht (Karte öffnet sich zum Detail). Shared Axis verbinden Screens die eine Dimension teilen (Tabs die sich lateral verschieben).

Das häufigste Fehler: Übergänge die räumlich inkonsistent sind. Eine App bei der manche Screens von rechts, manche von unten kommen, manche über Fade erscheinen — das erzeugt Desorientierung. Ein einziges konsistentes Bewegungsmodell ist mehr wert als zehn verschieden schöne Animationen.

Apple's Human Interface Guidelines: minimum 44×44pt. Google's Material Design: minimum 48×48dp. Microsoft's Fluent: minimum 44×44px effective. Alle drei führenden Design-Systeme konvergieren auf dieselbe Zahl — weil sie dieselbe Biologie bedienen.

Das visuelle Ziel muss nicht so groß sein wie das Touch-Target. Ein 20px-Icon kann ein 44px-Touch-Target haben — das Mehrklick-Volumen liegt unsichtbar um das Icon herum. Wichtig ist der tatsächliche tappable Bereich, nicht die sichtbare Größe.

Jeder Button hat mindestens 8 Zustände — und die meisten Design-Specs zeigen 2. Das ist der Unterschied zwischen einem Design das aussieht und einem das funktioniert. Vergessene Zustände werden zu Fehlern im Produkt: der Focused-State der fehlt macht das Interface für Tastatur-Nutzer unzugänglich. Der Loading-State der fehlt lässt Nutzer mehrfach klicken.

Robert Penner hat 2002 in "Programming Macromedia Flash MX" die ersten systematischen Easing-Funktionen für Webanimationen beschrieben. Heute sind sie Standard in jedem Framework. Aber ihr Verständnis bleibt lückenhaft: die meisten Animationen im Web benutzen noch immer ease oder ease-in-out — ohne bewusste Entscheidung.

Spring-based animation (Framer Motion, iOS UIKit, Android MotionLayout) ist der nächste Schritt: statt kubischer Bezier-Kurven werden physikalische Federn simuliert. Stiffness, Damping, Mass — echte physikalische Größen die natürlichere Bewegung erzeugen. Der Unterschied ist subtil aber messbar wahrnehmbar.

Herbert Simon hat 1971 als erster beschrieben: eine informationsreiche Welt erzeugt eine Aufmerksamkeits-Armut. Das menschliche Gehirn kann nur einen Fokus gleichzeitig halten. Jeder Notification-Dot, jede Animation, jeder ungelesene Badge kämpft um diesen Fokus.

Die dunklere Seite: Variable Reward Schedules (unregelmäßige Belohnungen) sind das süchtigmachendste Feedback-Muster das Psychologie kennt. Social Media nutzt es systematisch: manchmal ist ein Like da, manchmal nicht — das unvorhersehbare Muster hält die Aufmerksamkeit besser als jedes vorhersehbare.

Für ehrliches Interface-Design bedeutet das: Notifications nur wenn wirklich nötig. Kein Unread-Count der künstlich Anxiety erzeugt. Keine Autoplay-Videos. Kein Infinite Scroll ohne Stoppmechanismus. Das ist nicht naive Ethik — es ist die Bedingung für Vertrauen.

Larry Tesler, der Erfinder von Cut/Copy/Paste, hat auch dem Undo-Konzept wesentliche Form gegeben. Sein Prinzip: Jede Aktion sollte umkehrbar sein. Nicht weil Nutzer Fehler machen — sondern weil Exploration ohne Sicherheitsnetz nicht stattfindet.

Undo ermöglicht mutige Interaktion. Wenn ich weiß dass ich alles rückgängig machen kann, probiere ich mehr aus. Ich lösche Elemente um zu sehen ob ich sie brauche. Ich verschiebe Dinge um andere Arrangements auszuprobieren. Ohne Undo wird das Interface defensiv benutzt.

In modernen Web-Apps ist Undo komplex, aber lösbar: Toast-Benachrichtigungen mit "Rückgängig"-Option sind eine hervorragende Lösung für Soft-Deletes. Gmail macht es seit 2009 vor. Auch Server-seitige Aktionen können "undoable" sein — durch Soft-Delete mit 30-Sekunden-Fenster bevor die Aktion wirklich ausgeführt wird.

Die EU Digital Services Act (2022) und der Accessibility Act regulieren Dark Patterns erstmals rechtsverbindlich. Cookies-Dialoge die Ablehnen verstecken, Abonnements ohne klare Kündigung, vorausgewählte Add-ons — das ist zunehmend illegal, nicht nur unethisch.

Die Ironie: Dark Patterns funktionieren kurzfristig, zerstören langfristig Vertrauen. Conversion Rates steigen — Net Promoter Scores fallen. Nutzer die sich manipuliert fühlen, wandern ab und sprechen darüber. Die Kosten kommen verzögert, sind aber real.

Calm Technology ist das Gegenmodell zur Attention Economy: statt um Aufmerksamkeit zu kämpfen, soll gute Technologie im Hintergrund existieren und nur dann ins Bewusstsein treten, wenn es wirklich nötig ist. Amber Case hat das Konzept 2015 für die Design-Praxis reaktiviert.

Calm Technology hat acht Prinzipien: Technologie soll informieren ohne zu überfordern. Sie soll auf allen Aufmerksamkeitsstufen kommunizieren — von peripherem Gewahrsein bis zu direktem Fokus. Die seltene Ressource ist nicht Information, sondern Aufmerksamkeit. Ein gutes System beansprucht so wenig davon wie möglich.

Praktische Konsequenzen: Status-Leuchten statt Notification-Dialoge. Ambient Display für Nicht-Kritisches. Sounds für asynchrone Ereignisse. Zusammenfassungen statt Echtzeit-Streams. Das Cockpit, das Victors Systeme überwacht, sollte Calm Technology sein: ruhig wenn alles läuft, aufmerksam wenn etwas abweicht — und nie aufdringlich.