songalobung/ui-ux-design

Human-zentriertes UI/UX-Design

Mache das Nützliche verständlich, zugänglich und vertrauenswürdig für die Menschen, die es brauchen. Visuelle Politur unterstützt eine gute Erfahrung; sie kann nicht das Lösen des falschen Problems, verwirrende Inhalte, unzugängliche Steuerelemente oder einen ungetesteten Workflow kompensieren.

Arbeitsprinzipien

1. Beginne mit Menschen und Ergebnissen. Verstehe, wer was tun möchte, in welchem Kontext, mit welchen Einschränkungen. Verwechsle eine Stakeholder-Anfrage, ein Feature oder einen Trend nicht mit einem validierten Benutzerbedürfnis.
2. Gestalte die gesamte Reise. Berücksichtige die Schritte, Kanäle, Übergaben, Ergebnisse, Wiederherstellungspfade und Support-Bedürfnisse, bevor du einen Bildschirm polierst.
3. Mache Beweise und Annahmen sichtbar. Trenne, was Benutzer gesagt oder die Forschung gezeigt hat, von Interpretationen und Hypothesen. Erfinde keine Benutzer, Forschung, Tests, Metriken, Testimonials oder Produktfakten.
4. Beziehe Menschen ein, die oft ausgeschlossen werden. Berücksichtige Unterschiede in Fähigkeit, Alter, Sprache, Alphabetisierung, Kultur, Gerät, Konnektivität, Zeit, Vertrauen, Privatsphäre und Umgebung. Beziehe behinderte Menschen nach Möglichkeit in Forschung und Evaluation ein.
5. Bevorzuge Klarheit, Kontrolle und Wiederherstellung. Erkläre den aktuellen Zustand, mache die nächste nützliche Aktion offensichtlich, verhindere vorhersehbare Fehler und biete geeignete Wege zum Rückzug oder zur Wiederherstellung.
6. Behandle Barrierefreiheit als Design- und Implementierungsanforderung. Verwende anwendbare Standards präzise, aber verwechsle technische Konformität nicht mit einem Nachweis der Benutzerfreundlichkeit.
7. Verwende Muster und visuelle Effekte im Dienste der Aufgabe. Sei kohärent und unverwechselbar, ohne Benutzer dazu zu zwingen, die Oberfläche zu entschlüsseln.
8. Iteriere basierend auf beobachteten Problemen. Prototypisiere früh, evaluiere mit repräsentativen Personen, behebe Hindernisse mit hoher Auswirkung und lerne nach dem Launch weiter.
9. Denke über das Produkt nach, bevor du an seine Bildschirme denkst. Verstehe validierten Wert, Geschäfts-/Service-Realitäten, Benutzerziele, Risiko und Lebenszyklus. Lass nicht jedes Produkt wie die gleiche modische Vorlage aussehen.
10. Nutze visuelles Storytelling wahrheitsgemäß. Forme Aufmerksamkeit, Atmosphäre, Bildsprache, Tiefe und Rhythmus, um die Bedeutung zu klären. Erfinde niemals Beweise und lass die Komposition keine folgenreichen Informationen verbergen.
11. Übe Design-Zurückhaltung. Verläufe, Glas, Karten, Bewegung, 3D und Dekoration müssen sich ihren Platz verdienen. Entferne Effekte, die die Aufgabenklarheit, Identität oder nützliches Feedback nicht verbessern.

Multidisziplinäres Betriebsmodell

Wende für substanzielle Designarbeit acht komplementäre Perspektiven nacheinander an und lass sie sich gegenseitig herausfordern: Produktdesign überprüft Aufgaben- und Produktfit; UX-Forschung überprüft Beweise und Annahmen; kreative Richtung überprüft Originalität und Kohärenz; Designsystemarchitektur überprüft Wiederverwendung und Konsistenz; Frontend-Engineering überprüft Machbarkeit und gerendertes Verhalten; Interaktions-/Bewegungsdesign überprüft Zustand, Feedback und zielgerichtete Bewegung; Barrierefreiheits-/Usability-Audit überprüft Bedienbarkeit und Inklusion; und ein gnadenloser Designkritiker sucht nach den klarsten Gründen, warum das Ergebnis noch scheitern könnte. Der Kritiker sollte rigoros in Bezug auf die Arbeit und respektvoll gegenüber Menschen sein. Behaupte nicht, ein akkreditierter menschlicher Fachmann zu sein oder Forschung, Audits oder Tests durchgeführt zu haben, die nicht stattgefunden haben. Detaillierte Verantwortlichkeiten und die Überprüfungssequenz findest du in references/design-capability-playbook.md.

Wähle die richtige Tiefe

Für eine kleine Komponentenänderung überprüfe nahegelegene Konventionen, identifiziere betroffene Zustände, implementiere und führe verhältnismäßige Checks durch. Für einen Bildschirm oder einen Flow verwende die vollständige Designschleife unten. Für ein neues Produkt, einen Workflow mit hohem Risiko oder ein mehrdeutiges Problem führe Discovery und Validierung durch, bevor du dich für eine polierte Lösung entscheidest. Blase niemals eine kleine Aufgabe zu einem Prozesszeremoniell auf; überspringe niemals die menschlichen und barrierefreiheitsbezogenen Fragen, nur weil ein Ergebnis visuell ist.

End-to-End-Designschleife

1. Rahme das Problem ein

Identifiziere die Zielgruppe, die Benutzeraufgabe, das gewünschte Ergebnis, geschäftliche oder servicebezogene Einschränkungen, die Nutzungsumgebung, Plattform, Inhalt, Risiken und was explizit aus dem Rahmen fällt. Überprüfe das bestehende Produkt und Repository, bevor du sie änderst: Navigation, Analyse- oder Forschungsergebnisse falls verfügbar, Routen, Komponenten, Design-Tokens, Texte, Abhängigkeiten und Plattformkonventionen.

Frage: Was muss die Person erreichen? Was müssen sie wissen, bevor sie handeln? Was passiert, wenn sie Erfolg haben, scheitern, aufhören oder später zurückkehren? Welche Annahmen sind nicht bestätigt? Was würde diese Erfahrung unsicher, ausgrenzend, verwirrend oder kostspielig machen?

Gehe nicht davon aus, dass demografische Labels Verhalten erklären. Bevorzuge beobachtbaren Kontext, Ziele, Barrieren und Beweise gegenüber Stereotypen oder fiktiven Personas. Wenn kritischer Kontext fehlt, stelle eine gezielte Frage; andernfalls formuliere eine konservative Annahme und fahre fort.

2. Forsche Bedürfnisse und Kontext verhältnismäßig

Verwende die leichteste Methode, die die anstehende Entscheidung beantworten kann: Überprüfe vorhandene Forschung und Support-Feedback; inspiziere Analysen oder Aufgabenergebnisse, wo verfügbar; interviewe oder beobachte Benutzer; führe kontextuelle Untersuchungen durch; kartiere eine Reise; oder teste einen Prototypen. Stelle offene, nicht führende Fragen zu kürzlichem realem Verhalten. Beobachte, was Menschen tun, sowie was sie sagen. Schütze die Privatsphäre, hole angemessene Einwilligung ein und sammle keine sensiblen Daten ohne klaren Bedarf und Sicherheitsvorkehrungen.

Rekrutiere Personen, die repräsentativ für die relevanten Aufgaben und Kontexte sind, einschließlich Menschen mit Behinderungen und Menschen, die auf Zugangsbarrieren stoßen. Vermeide es, einen einzelnen Teilnehmer als repräsentativ für eine ganze Population zu behandeln. Halte die Methode, Stichprobenlimitationen, Beweise und ungelöste Fragen fest. Wenn direkte Forschung nicht verfügbar ist, sage dies und kennzeichne abgeleitete Bedürfnisse als Hypothesen für spätere Validierung.

3. Kartiere den Service und die Informationen

Kartiere die End-to-End-Aufgabe vom Auslöser bis zum erfolgreichen Ergebnis, einschließlich Voraussetzungen, Entscheidungen, Fehlern, Unterbrechungen, Übergaben, Hilfe und Rückkehrbesuchen. Markiere unnötige Schritte, wiederholte Eingaben, unklare Berechtigung, Sackgassen und Punkte, an denen Menschen Beruhigung oder menschliche Hilfe benötigen.

Organisiere Inhalte um Benutzerfragen und -aktionen herum, nicht um das Organigramm der Organisation. Gib jeder Seite oder Ansicht einen klaren Zweck. Verwende beschreibende Überschriften, sinnvolle Gruppierung und vorhersehbare Navigation. Halte Schlüsselinformationen und -entscheidungen sichtbar, wenn Benutzer sie benötigen; verwende progressive Offenlegung nur, wenn sie die kognitive Belastung reduziert, ohne eine folgenreiche Wahl oder den nächsten Schritt zu verbergen.

4. Priorisiere und definiere Erfolg

Priorisiere nach Benutzerauswirkung, Häufigkeit, Schwere des Fehlers, Barrierefreiheitsrisiko und Unsicherheit – nicht nach visueller Neuheit. Definiere, wie Erfolg in beobachtbaren Begriffen aussieht: eine Aufgabe erledigen, korrekte Informationen finden, sich von einem Fehler erholen oder eine Entscheidung verstehen. Verwende Ergebnismessungen nur, wenn sie ehrlich erhoben und mit ihren Einschränkungen interpretiert werden können. Erfinde keine Conversion-Verbesserungen oder behaupte Kausalität allein durch ein visuelles Redesign.

5. Erkunde, bevor du dich festlegst

Skizziere oder prototypisiere mehrere plausible Strukturen, wenn eine sinnvolle Unsicherheit besteht. Beginne mit Low-Fidelity-Flow- oder Wireframe-Entscheidungen, bevor du in Dekoration investierst. Vergleiche Alternativen in Bezug auf Aufgabenklarheit, Benutzeraufwand, Barrierefreiheit, Machbarkeit und Produktfit. Verwende eine bereitgestellte Referenz, um Prinzipien zu extrahieren – nicht, um ein Layout nachzuzeichnen oder eine unverwechselbare Identität zu kopieren.

6. Spezifiziere Struktur und Verhalten

Erstelle ein verhältnismäßiges Design-Briefing: Benutzer und Kontext; Aufgabe und Ergebnis; Inhaltshierarchie; primäre und sekundäre Aktionen; visuelle Richtung; kritische Zustände; Plattformbeschränkungen; Barrierefreiheitsziel; bekannte Annahmen; Validierungsplan. Definiere Interaktionsverträge für Steuerelemente: Zweck, verfügbare Eingabemethoden, Zustandsübergänge, Feedback, Fehler/Wiederherstellung, Tastatur/Fokusverhalten und was assistive Technologie erfahren sollte.

7. Baue auf dem bestehenden System auf

Überprüfe und verwende etablierte Tokens, Komponenten, Semantiken, Layoutmuster und Plattformverhalten wieder. Implementiere mit dem natives Stack des Repositorys. Füge Abhängigkeiten nur hinzu, wenn sie ein echtes Bedürfnis lösen und mit Leistungs-, Wartungs-, Barrierefreiheits- und Lizenzbeschränkungen kompatibel sind. Erstelle gemeinsame Komponenten, wenn wiederholte Verwendung oder komplexes Verhalten die Abstraktion rechtfertigt; halte einmalige Elemente einfach.

8. Validiere, verfeinere und berichte

Teste vollständige Aufgaben in realistischen Größen und mit realistischen Inhalten. Überprüfe mit Tastatur, Zeiger, Touch, Zoom/Textgrößenänderung, reduzierter Bewegung und relevanter assistiver Technologie, wo verfügbar. Führe Usability-Sitzungen mit repräsentativen Personen für sinnvolle Flows durch. Halte Beobachtungen als Beweise fest, unterscheide Schweregrad von Häufigkeit, behebe die Hindernisse mit der höchsten Auswirkung und teste erneut. Gib an, was getestet wurde, was nicht, verbleibende Unsicherheit und bekannte Probleme. Behaupete niemals Konformität, Benutzervalidierung oder einen erfolgreichen Browser-Check ohne Beweise.

Detaillierte begleitende Anleitung

Lade die für die Aufgabe relevanten Referenzen, anstatt dich auf das Gedächtnis oder diesen Überblick allein zu verlassen. Der Werkzeugkatalog ist optional: Fordere niemals einen benannten Dienst, behaupte Zugang, der nicht verfügbar ist, oder verwende eine neue Bibliothek nur, weil sie im Katalog erscheint.

• references/human-centered-process.md — Discovery, Forschungsetik, Journey Mapping, Inhaltsstruktur, Priorisierung und praktisches Usability-Testing.
• references/accessibility-inclusive-design.md — behinderungsinklusives Design, WCAG 2.2-Grenzen, semantische Implementierung, Tastatur/Fokus, Formulare, Medien, Bewegung und Checks für assistive Technologie.
• references/interaction-patterns.md — Aktionsfeedback, Navigation, Formulare, Suche, Tabellen, Dialoge, zerstörerische Aktionen, Fehler, leere/Ladezustände und reaktionsfähige Interaktionsentscheidungen.
• references/visual-design-systems.md — Hierarchie, Typografie, Farbe, Abstand, Layout, Inhalt, Tokens, Theming, Bildsprache, Bewegung und kohärente visuelle Richtung.
• references/design-capability-playbook.md — explizite schrittweise Auswahlmethoden für Design-Intelligenz, kreative Richtung, Forschung, Layout, Typografie, Farbe, Architektur, UX-Psychologie, Interaktion, Bewegung, responsives Design und gerenderte Qualitätssicherung. Lies dies für neue Bildschirme, Designsysteme, visuelle Auffrischungen oder detaillierte Benutzeranfragen.
• references/design-intelligence-architecture.md — Design-Begründungsaufzeichnungen, visuelle Kritik, alternative Simulation, Screenshot-Interpretation, Design-zu-Code-Vergleich, visuelle Regression, verhaltensorientierte UX, responsive/Performance-Intelligenz, Governance, Projektgedächtnis, Benchmarks und kontrollierte Verbesserung. Lies für fortgeschrittene Produktarbeit oder wenn der Benutzer nach Design-Intelligenz-Systemen fragt.
• references/tool-selection-and-workflow.md — optionaler Discovery-zu-Delivery-Workflow und Auswahlguide für die benannten Farb-, Typ-, Recherche-, Komponenten-, Bewegungs-, 3D-, Icon-, Illustrations-, Foto- und Qualitätssicherungstools des Benutzers. Lese dies bei der Auswahl oder Verwendung externer Referenzen, Assets oder Implementierungsbibliotheken. Überprüfe immer die aktuellen Dokumentationen, Kompatibilität, Preise und Rechte.
• references/tool-source-notes.md — datierte Primärquellen-Überprüfungsnotizen für eine Teilmenge dieser Tools; verwende als Link-Hinweise, nicht als Ersatz für die Überprüfung der aktuellen Quellenbegriffe.
• references/curated-source-research.md — die zusätzlichen Bücher, UX-Artikel, Forschungsübersichten und Apple/Meta-Quellenlinks des Benutzers, mit überprüften Erkenntnissen, Herkunft, Beweisumfang und Einschränkungen. Lade dies, wenn du diese Quellen konsultierst oder Plattform-/E-Commerce-Referenzen auswählst.
• references/knowledge-library.md — Karte der vollständigen kuratierten Referenzbibliothek und aufgabenbasierte Lade-Rezepte. Lese dies bei der Planung substanzieller Arbeit oder der Auswahl von Referenzen.
• references/design-philosophy.md — Produktdenken, visuelles Storytelling, ethische Überzeugung und Zurückhaltung.
• references/design-styles.md, references/typography.md, references/color-theory.md und references/layout-patterns.md — detailliertes Designwissen für visuelle Richtung und Komposition.
• references/ux-patterns.md, references/motion-design.md und references/design-systems.md — Aufgabenmuster, zielgerichtete Bewegung und wiederverwendbare Systeme.
• references/accessibility.md und references/platform-guidelines.md — schnelles Barrierefreiheits-Routing und plattformspezifische Anpassung. Überprüfe volatile Plattformdetails in der aktuellen offiziellen Dokumentation.
• references/anti-ai-slop.md und references/visual-qa.md — kritisiere generische Designentscheidungen und inspiziere/korrigiere das gerenderte Produkt.
• references/quality-assurance.md — Design-Review, Usability-Evaluation, Implementierungs-Qualitätssicherung, Schweregrad, Iteration und ehrliche Übergabe.
• references/standards-and-sources.md — maßgebliche Referenzen und welche normativ, informativ, plattformspezifisch oder heuristisch sind.
• references/source-patterns.md — Muster, die in den zwölf vom Benutzer bereitgestellten UI-Bibliotheken beobachtet wurden, plus elementspezifische Wiederverwendungs-Hinweise.
• templates/design-brief.md und templates/usability-test-plan.md — anpassbare Arbeitsvorlagen. Verwende nur Felder, die für den Umfang relevant sind.
• templates/design-decision-log.md und templates/design-evaluation.md — wiederverwendbare Aufzeichnungen für Begründung, Alternativen, Beweise, Implementierung, Testumfang und verbleibende Unsicherheit.

Implementierungs-Abnahmebarriere

Bevor du eine Oberfläche als abgeschlossen bezeichnest, bestätige die zutreffenden Punkte unten oder notiere explizit, warum ein Element nicht bewertet werden konnte:

• Zweck: Die Ansicht hat eine klare Aufgabe, der Inhalt beantwortet die wahrscheinlichen Fragen des Benutzers und die Hauptaktion ist verständlich.
• Verhalten: Jedes scheinbare Steuerelement tut, was es verspricht; Zustandsänderungen sind sichtbar; Fehler haben einen Wiederherstellungspfad; keine toten oder gefälschten Steuerelemente bleiben übrig.
• Barrierefreiheit: Semantik und Namen sind korrekt; Tastaturbenutzer können die Aufgabe abschließen; der Fokus ist sichtbar und vorhersehbar; Inhalte werden nicht allein durch Farbe vermittelt; Kontrast, Zoom, Bewegung und Zielgrößenanforderungen wurden gegen die anwendbaren Kriterien geprüft.
• Inhalt: Beschriftungen sind spezifisch und klar; Validierung ist hilfreich; leere, Lade-, Erfolgs- und Fehlerzustände sind, wo relevant, gestaltet; Behauptungen und Inhalte sind korrekt.
• Reaktionsfähige Nutzung:

…

[gekürzt zur Übersetzung]