Die Gesetze der UX
(lawsofux.com)- Eine Sammlung von über 30 psychologiebasierten Prinzipien und Mustern, die Designer beim Entwurf von Benutzeroberflächen unter den Gesichtspunkten Design-Usability und kognitive Psychologie berücksichtigen sollten
- Gegliedert nach Kognition und Wahrnehmung, Entscheidungsfindung, Feedback und Reaktion, Immersion und Motivation, Informationsstrukturierung, Gestaltprinzipien, Mustern des Nutzerverhaltens, Gestaltungsprinzipien sowie Zeit- und Aufgabenmanagement
- Die Detailseiten zu jedem Gesetz enthalten die Definition des Gesetzes, zentrale Implikationen, seinen Ursprung sowie weiterführende Links für die praktische Anwendung
Kognition und Wahrnehmung
1. Ästhetik-Usability-Effekt (Aesthetic-Usability Effect)
Nutzer neigen dazu, ästhetisch ansprechende Designs als leichter nutzbar wahrzunehmen
- Visuell ansprechende Designs lösen im Gehirn der Nutzer positive Reaktionen aus und lassen sie glauben, dass sie besser funktionieren, als es ihre tatsächliche Usability vermuten lässt
- Wenn ein Design schön ist, sind Nutzer nachsichtiger gegenüber kleineren Usability-Problemen
- Gleichzeitig besteht das Risiko, dass visuelle Attraktivität Usability-Probleme verdeckt und diese in Usability-Tests nicht entdeckt werden
- Erstmals bestätigt in einer Studie von Masaaki Kurosu und Kaori Kashimura vom Hitachi Design Center aus dem Jahr 1995, in der 26 Varianten einer ATM-UI mit 252 Personen getestet wurden: Die Korrelation zwischen ästhetischer Attraktivität und wahrgenommener Benutzerfreundlichkeit war stärker als die Korrelation zwischen ästhetischer Attraktivität und tatsächlicher Benutzerfreundlichkeit
2. Kognitive Verzerrung (Cognitive Bias)
Ein systematischer Denkfehler bei Urteilen, der die Wahrnehmung der Welt und die Entscheidungsfähigkeit beeinflusst
- Menschen sparen mentale Energie, indem sie statt jeder vollständigen Analyse Faustregeln auf Basis früherer Erfahrungen (Heuristiken) verwenden
- Diese mentalen Abkürzungen ermöglichen schnelle Entscheidungen, beeinflussen aber unbemerkt den Urteils- und Entscheidungsprozess
- Ein typisches Beispiel ist der Bestätigungsfehler (confirmation bias) — die Tendenz, Informationen zu bevorzugen, die bestehende Überzeugungen stützen
- Amos Tversky und Daniel Kahneman führten 1972 das Konzept der kognitiven Verzerrung ein und zeigten mit reproduzierbaren Experimenten, dass menschliches Urteilen und Entscheiden von der Theorie rationaler Entscheidungen abweicht
3. Kognitive Belastung (Cognitive Load)
Die Menge an mentalen Ressourcen, die nötig ist, um eine Benutzeroberfläche zu verstehen und mit ihr zu interagieren
- Wenn die Menge eingehender Informationen den verfügbaren mentalen Spielraum übersteigt, wird die Aufgabe schwieriger, Details gehen verloren und ein Gefühl der Überforderung entsteht
- Intrinsische kognitive Belastung (intrinsic): der Aufwand, der nötig ist, um zielrelevante Informationen zu behalten und neue Informationen aufzunehmen
- Extrinsische kognitive Belastung (extraneous): mentale Verarbeitung, die Ressourcen verbraucht, aber nicht zum Verständnis des Inhalts beiträgt, etwa unnötige Designelemente
- John Sweller entwickelte Ende der 1980er Jahre die Cognitive-Load-Theorie, erweiterte damit George Millers Informationsverarbeitungstheorie und argumentierte, dass sich die kognitive Belastung von Lernenden durch didaktisches Design reduzieren lässt
4. Selektive Aufmerksamkeit (Selective Attention)
Der Prozess, die Aufmerksamkeit nur auf einen Teil der Reize in der Umgebung zu richten, meist auf zielrelevante Reize
- Nutzer richten ihre Aufmerksamkeit selektiv nur auf Informationen, die für ihr Ziel relevant sind, und ignorieren den Rest
- Beim Interface-Design müssen zentrale Informationen und Handlungen visuell hervorgehoben werden, um die Aufmerksamkeit der Nutzer zu gewinnen
- Unnötige visuelle Elemente zerstreuen die Aufmerksamkeit und behindern das Erreichen des Ziels
5. Arbeitsgedächtnis (Working Memory)
Das kognitive System, das Informationen, die zur Erledigung einer Aufgabe nötig sind, vorübergehend speichert und verarbeitet
- Die Kapazität des Arbeitsgedächtnisses ist begrenzt; verlangt eine Benutzeroberfläche mehr Informationen, als diese Grenze erlaubt, sinkt die Usability
- Eng verbunden mit Millers Gesetz, Chunking und kognitiver Belastung
- Beim Design ist entscheidend, die Menge an Informationen, die Nutzer gleichzeitig behalten müssen, zu minimieren
Entscheidungsfindung
6. Auswahlüberlastung (Choice Overload)
Die Tendenz, sich von einer großen Zahl an Auswahlmöglichkeiten überfordert zu fühlen; wird oft mit dem „Paradox of Choice“ gleichgesetzt
- Zu viele Optionen beeinträchtigen die Entscheidungsfähigkeit der Nutzer und wirken sich auch negativ auf die Zufriedenheit mit dem Gesamterlebnis aus
- Wenn Vergleiche nötig sind, kann Überlastung durch eine direkte Gegenüberstellung (side-by-side comparison) relevanter Elemente verringert werden
- Es ist wirksam, die Auswahl vorab einzugrenzen, etwa durch hervorgehobene Produktempfehlungen sowie Such- und Filterwerkzeuge
- Alvin Toffler führte 1970 in seinem Buch Future Shock erstmals den Begriff „overchoice“ ein
- Eng verwandt mit Hick’s Law
7. Hick’s Law
Die Zeit für eine Entscheidung steigt mit der Anzahl und Komplexität der Auswahlmöglichkeiten
- In Situationen, in denen Reaktionszeit wichtig ist, sollten Auswahlmöglichkeiten minimiert werden, um die Entscheidungszeit zu verkürzen
- Komplexe Aufgaben sollten in kleinere Schritte zerlegt werden, um die kognitive Belastung zu verringern
- Empfohlene Optionen sollten hervorgehoben werden, um die Auswahl der Nutzer zu lenken; bei neuen Nutzern sollte progressives Onboarding eingesetzt werden
- Zu starke Vereinfachung kann jedoch zu übermäßiger Abstraktion führen und dadurch eher Verwirrung stiften
- Google-Homepage: Sie minimiert die für die Suche nötigen Entscheidungen und entfernt andere Inhalte, um Einfachheit zu schaffen
- Progressives Onboarding bei Slack: Statt von Anfang an alle Funktionen offenzulegen, werden Nutzer zunächst per Bot an die Nachrichtenfunktion herangeführt, danach werden weitere Funktionen schrittweise eingeführt
- 1952 untersuchten der britische Psychologe William Edmund Hick und der US-amerikanische Psychologe Ray Hyman die Beziehung zwischen der Anzahl von Reizen und der Reaktionszeit und formulierten daraus dieses Gesetz
8. Mentales Modell (Mental Model)
Ein komprimiertes Modell, das darauf basiert, was wir zu wissen glauben, wie ein System funktioniert
- Nutzer übertragen Erwartungen, die aus früheren Erfahrungen entstanden sind, auf neue Produkte
- Wer bestehende mentale Modelle der Nutzer nutzt, kann eine bessere Experience schaffen, bei der sie sich statt auf ein neues Modell auf die eigentliche Aufgabe konzentrieren können
- Direkt mit Jakob’s Law verbunden
Feedback und Reaktion
9. Doherty-Schwelle (Doherty Threshold)
Wenn Computer und Nutzer mit einer Geschwindigkeit interagieren, bei der sie nicht aufeinander warten müssen (unter 400 ms), steigt die Produktivität stark an
- System-Feedback sollte innerhalb von 400 ms erfolgen, um die Aufmerksamkeit der Nutzer zu halten und die Produktivität zu steigern
- Durch Nutzung der wahrgenommenen Performance (perceived performance) lassen sich Reaktionszeiten verbessern und Wartezeiten subjektiv verkürzen
- Animationen sind ein Mittel, Nutzer während des Ladens oder der Verarbeitung im Hintergrund visuell eingebunden zu halten
- Ein Fortschrittsbalken (progress bar) macht Wartezeiten erträglicher, unabhängig von seiner Genauigkeit
- Bewusst hinzugefügte Verzögerungen können den wahrgenommenen Wert eines Prozesses erhöhen und Vertrauen schaffen, selbst wenn die tatsächliche Verarbeitungszeit kurz ist
- 1982 veröffentlichten Walter J. Doherty und Ahrvind J. Thadani im IBM Systems Journal, dass statt des bisherigen Standards von 2 Sekunden eine Antwortzeit von unter 400 ms als Anforderung gelten sollte
10. Fitts’s Law
Die Zeit, die benötigt wird, um ein Ziel zu erfassen, steht in Relation zur Entfernung zum Ziel und zur Größe des Ziels
- Touch-Ziele sollten groß genug sein, damit Nutzer sie präzise auswählen können
- Zwischen Touch-Zielen sollte ausreichend Abstand bestehen
- Schnelle Bewegungen und kleine Ziele führen wegen des Speed-Accuracy-Trade-offs zu hohen Fehlerraten
- Die Praxis, interaktive Buttons auf Mobilgeräten groß zu gestalten, geht auf dieses Gesetz zurück
- 1954 untersuchte der Psychologe Paul Fitts das menschliche motorische System und zeigte, dass die Bewegungszeit zu einem Ziel proportional zur Entfernung und umgekehrt proportional zu seiner Größe ist
Immersion und Motivation
11. Flow
Ein mentaler Zustand energiereicher Konzentration, völliger Vertiefung und Freude während der Ausführung einer Aktivität
- Flow entsteht, wenn der Schwierigkeitsgrad einer Aufgabe und das Kompetenzniveau des Nutzers im Gleichgewicht sind
- Zu schwierige Aufgaben erzeugen Frustration, zu leichte Aufgaben Langeweile
- Für die Gestaltung von Flow ist es entscheidend, angemessenes Feedback zu geben, damit Nutzer verstehen, was sie getan haben und was erreicht wurde
- Unnötige Reibung sollte entfernt und die Reaktionsfähigkeit des Systems optimiert werden, um Abbrüche in der Interaktion zu vermeiden
- 1975 stellte der Psychologe Mihály Csíkszentmihályi das Konzept des „Flow“ vor, das seitdem in vielen Bereichen wie etwa der Ergotherapie breit zitiert wird
12. Zielgradienteneffekt (Goal-Gradient Effect)
Je näher man einem Ziel kommt, desto stärker wird die Tendenz, sich diesem Ziel weiter anzunähern
- Je näher Nutzer dem Abschluss einer Aufgabe kommen, desto schneller arbeiten sie
- Die Bereitstellung eines künstlichen Fortschrittsstatus (z. B. einer bereits teilweise gefüllten Stempelkarte) wirkt motivierend
- Eine klare Fortschrittsanzeige (progress indicator) motiviert Nutzer, eine Aufgabe abzuschließen
- Von Clark Hull 1932 aufgestellte Hypothese: Je näher Ratten ihrem Futter kommen, desto schneller laufen sie allmählich
- Beispiel für die Nutzung bei Uber zur Steuerung der Wahrnehmung von Wartezeit
13. Zeigarnik-Effekt (Zeigarnik Effect)
Menschen erinnern sich besser an unvollendete oder unterbrochene Aufgaben als an abgeschlossene Aufgaben
- Biete klare Signifier für das Vorhandensein zusätzlicher Inhalte, um die Erkundung von Inhalten zu fördern
- Ein künstlicher Fortschrittsstatus in Richtung eines Ziels erhöht die Motivation zum Abschluss einer Aufgabe
- Eine klare Fortschrittsanzeige (progress indication) motiviert Nutzer zum Abschluss
- Die sowjetische Psychologin Bluma Zeigarnik entdeckte in ihren Forschungen zum Gedächtnis in den 1920er Jahren, dass unvollendete Aufgaben leichter erinnerbar sind als abgeschlossene
Informationsstrukturierung
14. Chunking
Der Prozess, einzelne Informationsfragmente zu zerlegen und anschließend zu bedeutungsvollen Ganzheiten zu gruppieren
- Durch Chunking können Nutzer Inhalte leicht scannen, zielrelevante Informationen schnell identifizieren und verarbeiten
- Wenn Inhalte in visuell unterscheidbare Gruppen und mit einer klaren Hierarchie strukturiert werden, entspricht das der Art, wie Nutzer Informationen bewerten und verarbeiten
- Unterstütze das Verständnis zugrunde liegender Beziehungen, indem du Inhalte in eigenständige Module gruppierst, Trennlinien (rule) verwendest und eine Hierarchie anbietest
- Der Begriff stammt aus George A. Millers Aufsatz von 1956 „The Magical Number Seven, Plus or Minus Two“
15. Millers Gesetz (Miller's Law)
Ein durchschnittlicher Mensch kann nur 7 (±2) Elemente im Arbeitsgedächtnis behalten
- Verwende die „magische Zahl 7“ nicht als Rechtfertigung für unnötige Designbeschränkungen
- Organisiere Inhalte in kleinere Chunks, damit Nutzer sie leichter verarbeiten, verstehen und behalten können
- Die Kapazität des Kurzzeitgedächtnisses variiert je nach Vorwissen der Person und situativem Kontext
- 1956 argumentierte George Miller, dass sowohl die Spanne des unmittelbaren Erinnerns als auch das absolute Urteilen auf etwa 7 Informationsfragmente begrenzt seien
16. Serial-Position-Effekt (Serial Position Effect)
Nutzer erinnern sich in einer Serie am besten an den ersten und den letzten Eintrag
- Es ist wirksam, Schlüsselinformationen oder Aktionen am Anfang und Ende einer Liste oder Serie zu platzieren
- Praktische Begründung dafür, in der Navigation die wichtigsten Elemente ganz links und ganz rechts zu platzieren
- Kombination aus Primacy Effect und Recency Effect
Gestaltprinzipien (Gestalt Principles)
17. Gesetz der gemeinsamen Region (Law of Common Region)
Elemente, die einen Bereich mit klaren Grenzen teilen, werden tendenziell als Gruppe wahrgenommen
- Durch das Hinzufügen eines Rahmens um ein Element oder eine Elementgruppe lässt sich leicht eine gemeinsame Region erzeugen
- Eine gemeinsame Region kann auch durch das Definieren einer Hintergrundfarbe hinter Elementen geschaffen werden
- Gemeinsame Regionen schaffen eine klare Struktur und unterstützen dabei, Beziehungen zwischen Elementen und Abschnitten schnell und effektiv zu verstehen
- Eines der Gruppierungsprinzipien der Gestaltpsychologie (Nähe, Ähnlichkeit, Kontinuität, Geschlossenheit, Verbundenheit)
18. Gesetz der Nähe (Law of Proximity)
Objekte, die nahe beieinander liegen oder aneinander angrenzen, werden tendenziell zusammen gruppiert
- Nähe wird genutzt, um Beziehungen zu benachbarten Objekten herzustellen
- Nahe beieinander liegende Elemente werden so wahrgenommen, als teilten sie ähnliche Funktionen oder Eigenschaften
- Google-Suchergebnisseite: Die Abstände zwischen den einzelnen Ergebnissen tragen zur allgemeinen Scanbarkeit bei und gruppieren jedes Ergebnis effektiv als zusammengehörigen Informationscluster
- Ein zentrales Gruppierungsprinzip der Gestaltpsychologie
19. Gesetz der Prägnanz / Gesetz der guten Gestalt (Law of Prägnanz)
Menschen nehmen mehrdeutige oder komplexe Bilder in der einfachstmöglichen Form wahr und interpretieren sie entsprechend
- Es besteht eine Tendenz, Interpretationen zu bevorzugen, die den kognitiven Aufwand minimieren
- Begründung dafür, visuelle Elemente im Design einfach und klar zu halten
- Wird auch „Law of Good Figure“ genannt
20. Gesetz der Ähnlichkeit (Law of Similarity)
Das menschliche Auge neigt dazu, ähnliche Elemente selbst dann als ein vollständiges Bild, eine Form oder eine Gruppe wahrzunehmen, wenn sie getrennt sind
- Visuell ähnliche Elemente (Farbe, Form, Größe) werden als Träger derselben Funktion oder Bedeutung wahrgenommen
- Begründung dafür, Buttons für verwandte Funktionen in Interfaces visuell konsistent zu gestalten
21. Gesetz der einheitlichen Verbundenheit (Law of Uniform Connectedness)
Visuell verbundene Elemente werden als stärker zusammengehörig wahrgenommen als nicht verbundene Elemente
- Stelle Verbindungen zwischen Elementen durch Linien, Farben, Rahmen oder andere visuelle Eigenschaften dar
- Kann ein stärkeres Gruppierungssignal liefern als gemeinsame Region oder Nähe
- Entspricht der fünften Kategorie (Connectedness) der Gestalt-Gruppierungsprinzipien
Muster des Nutzerverhaltens
22. Jakobs Gesetz (Jakob's Law)
Nutzer verbringen die meiste Zeit auf anderen Websites. Deshalb bevorzugen sie, dass deine Website genauso funktioniert wie alle anderen Websites, die sie bereits kennen
- Nutzer übertragen Erwartungen, die sie in vertrauten Produkten gebildet haben, auf andere Produkte mit ähnlichem Erscheinungsbild
- Die Nutzung bestehender mentaler Modelle ermöglicht es Nutzern, sich auf die Aufgabe selbst zu konzentrieren, statt ein neues Modell zu erlernen
- Bei der Einführung von Änderungen sollte Nutzern ermöglicht werden, die bisherige Version weiterhin für einen begrenzten Zeitraum zu verwenden, um Dissonanz zu minimieren
- Beispiel Redesign von YouTube 2017: Desktop-Nutzern wurde die neue Material-Design-UI vorab gezeigt, zugleich wurde eine Option zum Zurückwechseln zur bisherigen Version angeboten, um Konflikte mit dem mentalen Modell zu vermeiden
- Formuliert von Jakob Nielsen (Mitgründer der Nielsen Norman Group)
23. Paradox des aktiven Nutzers (Paradox of the Active User)
Nutzer beginnen sofort mit der Verwendung einer Software, ohne das Handbuch zu lesen
- Nutzer bevorzugen sofortiges Handeln gegenüber dem Lernen und neigen dazu, Anleitungen oder Tutorials zu überspringen
- Interfaces sollten so gestaltet sein, dass sie auch ohne ausdrückliche Schulung intuitiv nutzbar sind
- Erforderlich ist Inline-Lernunterstützung durch kontextbezogene Hinweise, Tooltips, progressive disclosure usw.
24. Peak-End-Regel (Peak-End Rule)
Menschen beurteilen eine Erfahrung nicht anhand der Summe oder des Durchschnitts aller Momente, sondern anhand der Gefühle am Höhepunkt und am Ende
- Der intensivste Moment und der letzte Moment in der User Journey verdienen besondere Aufmerksamkeit
- Identifiziere die Momente, in denen das Produkt am hilfreichsten, wertvollsten oder unterhaltsamsten ist, und gestalte sie so, dass sie Nutzer begeistern
- Menschen erinnern sich an negative Erfahrungen lebhafter als an positive
- Mailchimp: Beim Abschluss des ersten E-Mail-Versands werden statt eines einfachen Bestätigungsmodals Illustrationen, subtile Animationen und Humor eingesetzt, um einen potenziell stressigen Moment abzumildern
- Uber: Fokus auf die Wahrnehmung von Zeit und Wartezeit, um die Abbruchrate nach einer Anfrage zu senken und negative Gefühlsspitzen zu vermeiden
- In einer Studie von Kahneman, Fredrickson u. a. aus dem Jahr 1993 belegt: Probanden entschieden sich bei zwei Versionen einer unangenehmen Erfahrung dafür, die längere Version mit einem leicht besseren Ende zu wiederholen
Visuelle Unterscheidung und Gedächtnis
25. Von-Restorff-Effekt / Isolationseffekt (Von Restorff Effect)
Wenn mehrere ähnliche Objekte vorhanden sind, ist es am wahrscheinlichsten, dass dasjenige erinnert wird, das sich von den anderen unterscheidet
- Wichtige Informationen oder zentrale Aktionen sollten visuell einzigartig gestaltet werden
- Ein übermäßiger Einsatz visueller Hervorhebung birgt das Risiko, dass Elemente miteinander konkurrieren oder für Werbung gehalten werden
- Verlasse dich bei der Vermittlung von Kontrast nicht nur auf Farbe, sondern berücksichtige auch Nutzer mit Farbsehschwäche oder Sehbehinderung
- Wenn Kontrast durch Bewegung vermittelt wird, sollten auch bewegungssensible Nutzer berücksichtigt werden
- 1933 von der deutschen Psychiaterin und Kinderärztin Hedwig von Restorff in einer Studie entdeckt: In einer Liste ähnlicher Elemente verbessert sich die Erinnerung an ein einzelnes einzigartiges und isoliertes Element
26. Primacy-Recency-Effekt → Serial-Position-Effekt
Nutzer neigen dazu, sich in einer Reihe am besten an das erste und das letzte Element zu erinnern
- (Siehe Punkt 14 — dort oben im Abschnitt „Informationsstrukturierung“ ausführlich erläutert)
Gestaltungsprinzipien
27. Teslers Gesetz / Gesetz der Erhaltung von Komplexität (Tesler's Law)
In jedem System gibt es eine bestimmte Menge an Komplexität, die sich nicht reduzieren lässt
- Gutes Design absorbiert den Großteil der Komplexität durch Smart Defaults, Algorithmen usw. auf Entwicklerseite und vereinfacht so die Nutzerinteraktion
- Wenn die UI vom Nutzer viele Einstellungen oder Schritte verlangt, wurde die Komplexität an der falschen Stelle (auf Nutzerseite) bewahrt
- Gutes Design beseitigt Komplexität nicht, sondern verarbeitet sie intern und verbirgt sie
- Von Larry Tesler (Apple Lisa und frühe GUI-Arbeit) in den 1980er-Jahren geprägt
28. Postels Gesetz / Robustheitsprinzip (Postel's Law)
Sei großzügig in dem, was du akzeptierst, und konservativ in dem, was du sendest
- Unterschiedliche Formate und Varianten bei Nutzereingaben flexibel akzeptieren
- Systemausgaben in einem konsistenten und vorhersehbaren Format bereitstellen
- Von Jon Postel als Robustheitsprinzip der TCP/IP-Protokolle formuliert; in der UX-Gestaltung eine Grundlage für Flexibilität bei Eingaben
29. Ockhams Rasiermesser (Occam's Razor)
Unter konkurrierenden Hypothesen, die gleich gut vorhersagen, sollte die mit den wenigsten Annahmen gewählt werden
- In Designlösungen unnötige Komplexität entfernen und den einfachsten Ansatz bevorzugen
- Bevor Funktionen, Elemente oder visuelle Verzierungen hinzugefügt werden, prüfen, ob sie wirklich notwendig sind
- Einfache Interfaces verursachen für Nutzer eine geringere kognitive Belastung
30. Pareto-Prinzip / 80/20-Regel (Pareto Principle)
Ungefähr 80 % der Wirkung stammen aus 20 % der Ursachen
- Erkennen, dass sich 80 % des Nutzerverhaltens auf 20 % der Funktionen konzentrieren
- Design-Ressourcen gezielt auf die 20 % der am häufigsten genutzten Funktionen konzentrieren
- In Kombination mit Parkinsons Gesetz hilfreich für die Priorisierung der wichtigsten Funktionen
Zeit- und Aufgabenmanagement
31. Parkinsons Gesetz (Parkinson's Law)
Jede Aufgabe dehnt sich so aus, dass sie die gesamte verfügbare Zeit in Anspruch nimmt
- Es ist wirksam, Nutzern einen klaren Zeitrahmen für den Abschluss einer Aufgabe zu geben
- Werden einem Formular oder Prozess unnötige Schritte hinzugefügt, steigt die Abschlusszeit überproportional
- Gilt auch für den Designprozess selbst: Ein klarer Umfang und Zeitplan sind wichtig
1 Kommentare
Hacker-News-Kommentare
Das schaue ich mir immer wieder an. Auch das Poster-Design ist gut, und ich finde es immer wieder bemerkenswert, dass viele dieser „Gesetze“ aus den Daten und der Forschung der Nielsen Norman Group über lange Zeit hervorgegangen sind
Es gibt auch viele benannte UX-Konzepte wie Jakob's Law oder Norman Door, und die UX-Branche wird stark von dieser kleinen Gruppe von Beobachtern beeinflusst
Allerdings habe ich den Eindruck, dass die moderne UX/HCI-Theorie zunehmend von solchen weichen Regeln ausgebremst wird. Vor allem scheint man Regeln, die sich aus Nutzungsmustern in nicht-interaktiven Medien wie dem Rundfunk ergeben, zu stark zu verallgemeinern
Die frühere Serienseite war gut, aber diese hier wirkt etwas lieblos gemacht
Zum Beispiel wurde Cognitive Bias nur lexikonartig definiert und dann als „Gesetz“ eingestellt; das ist weder ein Gesetz noch in dieser Form ein praktisches Konzept
Es wirkt weniger wie eine Sammlung von Regeln, die UI-Designer oder Entwickler anwenden können, sondern eher wie ein Paket aus ein paar ausgewählten Begriffen mit Definitionen, das für den Poster-Verkauf zusammengestellt wurde
Solches Material ist gut, und natürlich sind das keine absolut unveränderlichen Regeln
Ich bin kein klassisch ausgebildeter Designer, daher helfen mir solche Best Practices und Gesetzes-Sammlungen sehr. Als Ausgangspunkt dafür, dass eine AI Regeln, die man schwer ständig im Kopf behalten kann, bildschirmweise gesammelt prüft, scheint mir das ideal
Persönlich denke ich, dass sich so ein Set von Gesetzen beim Bauen von Business-Software ähnlich wie ein Quellcode-Formatierungs-Shortcut gut als Shortcut-Workflow für einen Sanity Check nutzen lässt
Tatsächlich habe ich UX-Laws-Screenshots und Dashboard-Screenshots heruntergeladen und ChatGPT sowie Claude gebeten, sie anhand dieser Gesetze zu prüfen und neue Mockups mit den empfohlenen Änderungen zu erstellen
Project 1: CMMS Dashboard For Maintenance
Dashboard old: https://imgur.com/a/R3wrMpr
Dashboard new (Claude): https://imgur.com/a/cYq4gE8
Project 2: Surf-Vorhersage-App von https://swellslots.com
Forecast old: https://imgur.com/a/W3daZrP
Forecast new: https://imgur.com/a/kNi2Nvg
Das Problem bei solchen einander widersprechenden Regelsammlungen ist, dass gute Designer kontextabhängig intuitiv entscheiden, welche Regeln sie ignorieren und welche sie anwenden
Ich frage mich, ob du im Prompt Zweck oder Rolle konkret angegeben hast oder ob du es eher offen gelassen hast
Gesetz Nr. 0 lautet für mich: Lass das UI-Element, das ich anklicken will, nicht reflowen oder hin und her springen
Natürlich wäre die bessere Lösung, wenn Entwickler und Designer für solche Details Handwerksstolz und Professionalität hätten. Bei den schlimmsten Interfaces sieht es meist so aus, als wären sie nur in Umgebungen mit Backend und Gigabit-Verbindung getestet worden und hätten solche Probleme deshalb übersehen
Wenn selbst ein Unternehmen, das als Symbol für Design gilt, noch nicht einmal diese Grundlage hinbekommt, läuft irgendwo in der Branche grundsätzlich etwas schief
Ich halte das für hervorragendes Material
Wenn man sich aber Punkt 2, Choice Overload, ansieht, steht dort, dass Menschen von zu vielen Auswahlmöglichkeiten überfordert werden, während die Seite selbst alle 30 „Gesetze“ komplett als Text vergräbt und die Hälfte des visuellen Raums von 30 irrelevanten Bildern eingenommen wird
Hübsch ist es, aber zum Lernen ist diese Struktur nicht besonders geeignet
Bei Doherty Threshold gilt: Wenn die Interaktion zwischen Computer und Nutzer bei unter 400 ms liegt, sodass keiner auf den anderen warten muss, steigt die Produktivität stark
Deshalb bevorzuge ich beim Programmieren deutlich kleinere Modelle. Sie sind schnell genug, damit der Arbeitsfluss Echtzeit-Charakter behält
Dann zerlegt man die Arbeit auch in kleinere Einheiten und überprüft sie laufend, bleibt also aktiv eingebunden, und auch das mentale Modell driftet nicht ab
Ich habe einmal drei einfache Codeänderungen jeweils einem großen und einem kleinen Modell gegeben, und beide waren erfolgreich. Das große Modell war aber dreimal langsamer und kostete zehnmal so viel
Seitdem ist mein Maßstab für das Best Model nicht mehr Platz 1 in Benchmarks, sondern das kleinste, schnellste und günstigste Modell, das die eigentliche Arbeit zuverlässig erledigt
Stabilität wäre ebenfalls ein guter Punkt. Man sollte nicht ständig etwas ändern, nur um der Veränderung willen oder weil es gerade einen neuen Trend gibt
Man sollte keine bedeutungslosen Icons verwenden
Statt Informationen baumartig zu verstecken und den Nutzer Kästchen einzeln aufklappen zu lassen, ist es besser, sie in einem linearen Ablauf zu zeigen
Außerdem sollte man Meinungen nicht so darstellen, als wären sie Fakten
Beim Redesign einer großen E-Commerce-Plattform in Asien habe ich mehrere der hier aufgeführten Gesetze tatsächlich in die UX-Strategie eingebracht
Danke fürs Teilen. Ich arbeite seit fast 10 Jahren als Full-Stack-Entwickler, gehe aber erst jetzt tiefer in UI hinein, und bei UX kratze ich noch eher an der Oberfläche
Etwas off-topic, aber ich frage mich, ob es eine gute Sammlung häufig genutzter UI-Patterns für Mobile oder Web-Apps gibt, etwa hamburger menu oder toast notification
Ich suche nach einer Website, die das systematisch ordnet, eine große Bandbreite abdeckt und auch visuelle Beispiele zeigt
Damals war das Smartphone-Zeitalter noch am Anfang, deshalb lag der Mobile-Fokus niedriger, aber die aktuelle Ausgabe scheint Mobile deutlich stärker abzudecken
https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/