jmaxzh/sdlc-ux-design

UX-Design

Anwendbarkeit

• Anwenden auf das angeforderte Aufgabenerlebnisdesign, die Implementierung, Änderung, Überprüfung, Optimierung oder Prinzipienberatung für Desktop, Mobilgeräte und Web. Nur Backend-, Datenbank- und andere Aufgaben ohne benutzerseitige Interaktion liegen außerhalb des Geltungsbereichs dieser Fähigkeit.
• Diese Fähigkeit arbeitet unabhängig vom SDLC-Workflow und kann allein installiert werden. Verwenden Sie für Aufgaben, die auch visuelle Hierarchie, Typografie, Farbe, Layout, Steuerungsgeometrie oder Bewegung umfassen, verfügbare UI-Anleitungen wie sdlc-ui-design für diese Entscheidungen.
• Wenn nur eine Prinzipienberatung angefordert wird, geben Sie eine kurze Antwort auf dieser Ebene, anstatt auf produktspezifisches Design, Implementierung oder Abnahmetests auszuweiten.
• Geben Sie bei reinen Überprüfungsanfragen Ergebnisse und Empfehlungen, ohne ein neues Design zu erstellen oder die Implementierung zu ändern.
• Design-Exploration, Vorschläge, Konzeptvergleiche und Prototypvalidierung erstellen oder ändern nur eigenständige Design-Artefakte. Ändern Sie Produktionscode nur, wenn die Anfrage auch eine Implementierung umfasst.
• Liefern Sie bei gemischten Anfragen zuerst das Design, bevor Sie mit der autorisierten Implementierung fortfahren. Liefern und bewerten Sie jedes separat; die Prototypvalidierung begründet keine Implementierungsabnahme.
• Befolgen Sie für die Implementierung die bestehenden Projektprüfungen. Wenn die aktuelle Umgebung die Reproduktion eines Fehlers unterstützt, verwenden Sie eine gezielte erneute Prüfung dieses Fehlers; wählen Sie Prüfungen für andere Verhaltensänderungen nach Risiko und Umfang aus. Richten Sie keine zusätzlichen Überprüfungsumgebungen ein, erstellen Sie keine formalen Überprüfungsberichte oder duplizieren Sie bestehende Prüfungen nur, um diese Fähigkeit zu erfüllen.
• Berichten Sie für Implementierungsergebnisse über durchgeführte Prüfungen, Beobachtungen und nicht überprüften Umfang. Unterscheiden Sie Laufzeitnachweise, codebasierte Rückschlüsse und subjektive Beurteilungen; die Selbsteinschätzung des Modells ist keine Benutzerabnahme.

Bei Bedarf lesen

• Befolgen Sie die unten stehenden gemeinsamen Prinzipien und lesen Sie die plattformspezifischen Referenzen für das tatsächliche Ziel und Szenario.
• Desktop: Lesen Sie Desktop-Prinzipien.
• Mobil: Lesen Sie Mobil-Prinzipien.
• Web: Lesen Sie Web-Prinzipien.
• Lesen Sie für mobiles Web sowohl die Mobil- als auch die Web-Prinzipien. Laden Sie für andere Kombinationen zusätzliche Referenzen gemäß den Bedingungen der ausgewählten Dokumente.
• Wenn die Plattform nicht angegeben ist, leiten Sie sie zuerst aus dem Aufgaben- und Projektkontext ab. Verwenden Sie für allgemeine Ratschläge nur die gemeinsamen Prinzipien. Fragen Sie nur nach Klärung, wenn eine konkrete Aufgabe immer noch keine notwendige Plattformentscheidung hat.
• Konsultieren Sie für den Kontext oder die Grenzen einer Anpassung den verlinkten Eintrag im Quellenkontext und, falls nötig, die ursprüngliche Passage. Die englischen Anweisungen in dieser Fähigkeit definieren die lokale Anpassung; die Konsultation importiert keine übergeordneten Workflows oder Werkzeugketten.

Designauslieferung

Verwenden Sie diesen Abschnitt für angeforderte Interaktionserkundung, Vorschläge, Konzeptvergleiche oder Prototypvalidierung, unabhängig vom Änderungsumfang. Bei gemischten Aufgaben gilt er für den Designteil; Implementierungsauslieferung und -abnahme folgen der Aufgabe und den bestehenden Projektanforderungen.

• Präsentieren Sie UX-Designs als interaktives einseitiges HTML-Artefakt. Machen Sie die Hauptaktionen, relevanten Zustandsänderungen und notwendigen Rückkehr- oder Wiederherstellungspfade im Prototyp bedienbar. Überprüfen Sie, ob Steuerelemente und Feedback die beabsichtigte Bedienung demonstrieren und relevante Zustände unterscheiden. Quellenkontext.
• Standardmäßig Inline-CSS und -JavaScript verwenden, damit das HTML direkt geöffnet werden kann. Verwenden Sie lokalen Zustand und klar gekennzeichnete illustrative Daten, um den vereinbarten Interaktionsumfang zu demonstrieren.
• Verwenden Sie für kombiniertes UI/UX-Design zuerst die Bildgenerierung für den UI-Vorschlag und stellen Sie einen interaktiven UX-HTML-Prototyp bereit. Wenn die Bildgenerierung nicht verfügbar ist oder fehlschlägt, verwenden Sie ein HTML-Artefakt für beides. Quellenkontext.
• Überprüfen Sie den gerenderten Prototyp im beabsichtigten Viewport unter Verwendung von tatsächlichem Inhalt, falls verfügbar; andernfalls verwenden Sie klar gekennzeichnete repräsentative Inhalte. Quellenkontext.
• Führen Sie die Auslieferung mit der interaktiven Vorschau und der öffenbaren HTML-Datei an. Halten Sie begleitende Prosa kurz und beschränkt auf Öffnungsanweisungen, Simulationsumfang und notwendige Einschränkungen.

Gemeinsame Prinzipien

Anwenden der Prinzipien

• Wenden Sie Prinzipien an, die für die angeforderte Arbeit, die Zielplattform und das Szenario relevant sind.
• Erklären Sie Bedingungen und Abwägungen, die die Empfehlung beeinflussen.
• Überprüfen Sie vor dem Zitieren von numerischen Anforderungen oder Empfehlungen deren Quelle, Einheiten und Anwendbarkeit auf die Zielplattform.

Designprinzipien

• Aufgaben und Ergebnisse: Organisieren Sie die Benutzeroberfläche nach Benutzerzielen und Bedienreihenfolge. Priorisieren Sie Informationen und Aktionen, die für die aktuelle Aufgabe benötigt werden. Bewerten Sie jede Oberfläche danach, was die Benutzer dort erreichen müssen. Quellenkontext.
• Einstiegspunkte und Steuerelemente: Machen Sie primäre Einstiegspunkte auffindbar und die beabsichtigte Aktion jedes Steuerelements klar. Verwenden Sie Schaltflächenbeschriftungen, die Aktionen und ihre Objekte identifizieren; beschriften Sie mehrdeutige Symbole. Quellenkontext.
• Symbolsemantik: Bestimmen Sie die Semantik eines Symbols aus seiner aktuellen Verwendung. Verstecken Sie redundante dekorative Symbole neben sichtbarem Text vor dem Barrierefreiheitsbaum. Stellen Sie einen Textalternativ für bedeutungsvolle eigenständige Symbole bereit. Machen Sie den zugänglichen Namen und den anwendbaren Zustand eines Symbolsteuerelements zugänglich. Quellenkontext.
• Aufgabenpriorität: Lassen Sie auf einem aufgabenorientierten Bildschirm die Frage, die Benutzer zuerst beantworten müssen, die visuelle Betonung und Lesereihenfolge bestimmen. Quellenkontext.
• Präsentationsstruktur: Lassen Sie die Behauptungen einer Präsentationsseite und die Beweise dafür bestimmen, welche Abschnitte sie benötigt und in welcher Reihenfolge. Quellenkontext.
• Faktische und illustrative Inhalte: Stützen Sie Behauptungen und Beweise über reale Produkte, Kunden oder Geschäftsaktivitäten auf verfügbare Fakten. Kennzeichnen Sie illustrative Inhalte klar. Quellenkontext.
• Datenkonsistenz: Halten Sie innerhalb desselben Berichtsumfangs dieselbe Tatsache konsistent, wo immer sie erscheint, und halten Sie abgeleitete Zahlen konsistent mit ihren zugrunde liegenden Daten. Machen Sie Unterschiede im Umfang, Zeitraum oder Berechnungsgrundlage klar. Quellenkontext.
• Kognitive Last: Präsentieren Sie Optionen und Kontext, die für Entscheidungen benötigt werden, reduzieren Sie Auswendiglernen und wiederholte Eingaben, und lassen Sie Benutzer Standardwerte überprüfen und ändern. Zeigen Sie komplexe Optionen an, sobald sie relevant werden. Halten Sie die für eine Entscheidung benötigten Informationen am Entscheidungspunkt verfügbar, auch wenn Schritte reduziert werden. Quellenkontext.
• Lernen: Reduzieren Sie unnötige geistige Anstrengung, die durch die Schnittstelle eingeführt wird. Unterstützen Sie das Lernen, das Benutzern hilft, ihre Aufgabe zu verstehen und zu meistern. Quellenkontext.
• Vereinfachung: Beurteilen Sie die Vereinfachung nach den Hindernissen, die sie aus der Benutzeraufgabe entfernt. Bewahren Sie notwendige Funktionalität, entscheidungsrelevante Informationen und Barrierefreiheit. Quellenkontext.
• Konsistenz: Befolgen Sie plattformübliche Interaktionskonventionen und konsistentes Steuerelementverhalten.
• Status- und Wartefeedback: Zeigen Sie den aktuellen Platz des Benutzers in der Aufgabe oder Navigation, den Verarbeitungsstatus und die Ergebnisse. Unterscheiden Sie Laden, leere Daten und Fehler. Reagieren Sie zeitnah auf Aktionen. Bieten Sie bei langen Vorgängen einen zuverlässigen Status und zeigen Sie den tatsächlichen Fortschritt an, wenn messbar. Skalieren Sie Feedback entsprechend der Wichtigkeit ohne häufige Unterbrechungen. Richten Sie die Präsentation und verfügbaren Aktionen jedes Zustands an seiner Bedeutung aus; unterscheiden Sie schreibgeschützte, deaktivierte und in Bearbeitung befindliche Zustände. Quellenkontext.
• Benutzerkontrolle: Bieten Sie auffindbare Aktionen zum Beenden, Abbrechen und Zurückkehren. Unterstützen Sie Rückgängig und Wiederholen, wo angemessen, und klären Sie, welche Änderungen sie betreffen. Erklären Sie Konsequenzen vor unwiderruflichen Aktionen. Visuelle Übergänge dürfen unterstützte Rückkehr-, Wechsel- oder Abbruchaktionen nicht verhindern. Unterscheiden Sie das Unterbrechen einer Animation vom Abbrechen eines Hintergrundvorgangs. Quellenkontext.
• Modalität: Reservieren Sie modale Interaktion für Aufgaben, die das Unterbrechen der aktuellen Arbeit oder das Schützen des Fokus erfordern. Quellenkontext.
• Fehlervermeidung und -behebung: Geben Sie Eingabe- und Operationsbeschränkungen im Voraus an dem Punkt an, an dem sie gelten. Fordern Sie eine Bestätigung an, wenn die Konsequenzen dies rechtfertigen. Validieren Sie zu angemessenen Zeiten, ohne unvollständige Eingaben zu unterbrechen. Bewahren Sie bei Fehlern gültige Eingaben, identifizieren Sie das Problem und seinen Ort, erklären Sie bekannte Ursachen ohne Vermutungen als Fakten zu präsentieren, und bieten Sie einen Wiederherstellungspfad an.
• Konnektivität und Wiederherstellung: Machen Sie bei netzwerkabhängigen Aufgaben die unter eingeschränkter Konnektivität verfügbaren Fähigkeiten klar. Bieten Sie Fallback- oder Wiederherstellungsaktionen an, die das Produkt tatsächlich unterstützt. Quellenkontext.
• Schnittstellensprache: Verwenden Sie eine Sprache, die die Zielgruppe versteht. Behalten Sie vertraute Fachbegriffe bei, wenn sie die beabsichtigte Bedeutung präzise vermitteln. Quellenkontext.
• Barrierefreie Bedienung: Unterstützen Sie Tastatur und assistive Technologien in der Zielumgebung, mit identifizierbaren Steuerelementnamen, -zuständen und Fokus. Bieten Sie gleichwertige Aktionen für Präzisionseingaben oder komplexe Gesten. Wählen Sie das Interaktionsverhalten basierend auf den tatsächlich verfügbaren Eingabefähigkeiten. Machen Sie primäre Aktionen ohne Hover nutzbar. Quellenkontext.