UI-Struktur-Standard

Was macht UI-Struktur-Standard?

Schnittstellen werden aufgrund ihrer Struktur schwer zu bedienen, nicht aufgrund ihrer Größe. Eine App mit 300 Einstellungen kann einfach zu navigieren sein und eine App mit 30 kann ein Labyrinth sein. Die Ursachen sind immer dieselben wenigen: dasselbe Steuerelement an mehreren Stellen, Menüs, die den Code oder das Team widerspiegeln, Aktionen, die mit Einstellungen vermischt werden, unbeschriftete Symbole, unsichtbarer Gültigkeitsbereich und dass nie etwas entfernt wird.

Die Lösung besteht darin, das zu tun, was die großen Plattformen bereits tun, und zwar auf die gleiche Weise in jeder App, damit die Leute das nutzen können, was sie bereits kennen:

• Ein vertrautes Layout. Eine durchsuchbare Liste von Kategorien auf der linken Seite, die geöffnete Seite auf der rechten Seite, Zeilen mit der Bezeichnung auf der linken Seite und dem Steuerelement auf der rechten Seite.
• Ein Satz von Kategorienamen. Konto, Benachrichtigungen, Datenschutz und Sicherheit, Barrierefreiheit, Darstellung, Sprache und Region, Daten und Speicher, dann die eigenen Themen des Produkts. Sieben Fragen ordnen jede Einstellung genau einer Kategorie zu.
• Weniger Steuerelemente. Die beste Einstellung ist die, die nie ausgeliefert wird, weil ein besserer Standardwert sie überflüssig gemacht hat.
• Ein Zuhause für jedes verbleibende Steuerelement. Jede Einstellung, jedes Ziel und jeder Befehl ist ein Datensatz in einer Registrierung, jeder Datensatz hat genau ein Zuhause, und die Schnittstelle wird aus den Datensätzen erstellt. Wenn niemand ein Steuerelement von Hand platziert, kann die Struktur nicht abweichen.

Die Aufgabe auswählen

Finden Sie die Anfrage in dieser Tabelle und lesen Sie nur den entsprechenden Abschnitt, plus die darin genannten Dateien.

Die Anfrage	Abschnitt	Auch lesen
„Eine Einstellung / ein Menüelement / eine Schaltfläche hinzufügen“	Hinzufügen eines Steuerelements	Normalerweise nichts weiter
„Diese Benutzeroberfläche ist ein Durcheinander“, „Überprüfen Sie dies“, „Benutzer finden Dinge nicht“	Überprüfen einer vorhandenen Schnittstelle	references/audit.md, references/rules.md
„Einen Einstellungsbildschirm, eine Seitenleiste oder eine Symbolleiste erstellen / entwerfen / neu gestalten“ oder eine Liste von Funktionen, die in eine solche umgewandelt werden sollen	Erstellen einer neuen Oberfläche	references/categories.md, references/visual-design.md, references/record-schema.md
„Unsere Einstellungen organisieren“, „Welche Kategorien sollten wir haben?“	Die Standardkategorien	references/categories.md
„Dies für unser Projekt einrichten“	Einführen der Registrierung	references/record-schema.md

Unabhängig von der Aufgabe respektieren Sie das Projekt, in dem Sie sich befinden. Wenn die Codebasis bereits eine Einstellungsregistrierung, eine Komponentenbibliothek oder eigene Regeln für das Markup hat, erweitern Sie diese; führen Sie kein paralleles System ein. Der Standard beschreibt die Struktur, nicht die Technologie.

Der Ordner evals/ enthält Testfälle für diese Fähigkeit. Es handelt sich nicht um Referenzmaterial; lesen Sie es nicht, während Sie eine Aufgabe erledigen.

Hinzufügen eines Steuerelements

Stellen Sie diese fünf Fragen der Reihe nach und halten Sie bei der ersten „Ja“-Antwort an. Teilen Sie dem Benutzer diese Entscheidung und den Grund mit; führen Sie ihn nicht durch Fragen, die nicht mehr relevant sind.

1. Würde ein besserer Standardwert es überflüssig machen? Wenn das Bedürfnis für alle erfüllt werden kann, indem der Standardwert geändert wird, die Situation erkannt wird oder einfach das Verhalten entfernt wird, das die Leute nicht mögen (eine Bestätigung, die niemand braucht, eine Eingabeaufforderung für etwas, das automatisch gespeichert wird), tun Sie das. Es gibt keine Einstellung.
2. Entscheidet das System oder ein Administrator bereits darüber? Design, Textgröße, Benachrichtigungsberechtigung und Ähnliches gehören zur darunterliegenden Ebene. Folgen Sie ihr. Wenn das Produkt einen echten Grund hat, eine eigene Wahl anzubieten, enthält die Wahl „Systemeinstellung verwenden“ und das ist die Voreinstellung; es ist niemals ein einfacher Ein/Aus-Schalter.
3. Wird es einmal erledigt, nicht eine dauerhafte Wahl? Dann ist es eine Aktion: eine Schaltfläche, getrennt von Kippschaltern, im Kontext oder in einer beschrifteten Gruppe am Fuß ihrer Seite.
4. Wird es wöchentlich oder öfter geändert? Dann lebt das Steuerelement im Kontext, neben der Funktion, die es ändert, mit einem Link zu seiner Startseite. Die Startseite listet es trotzdem auf.
5. Würden weniger als etwa 1 von 20 Leuten es jemals ändern? Dann ist seine Stufe „Erweitert“. Eine Seite mit drei oder mehr erweiterten Elementen zeigt sie in einem Bereich „Erweitert“; bei weniger Elementen handelt es sich um eine normale Zeile, die zuletzt platziert wird.

Andernfalls handelt es sich um eine Standardzeile auf der zugehörigen Themenseite.

Wenn die Antwort auf Frage 1 oder 2 „Ja“ war, sagen Sie dies klar und deutlich und schlagen Sie diese Änderung anstelle der Einstellung vor. Jede Einstellung verursacht Kosten beim Testen, beim Support und bei der Fähigkeit aller anderen, Dinge zu finden, daher sollte der Benutzer zuerst die günstigere Option hören. Er möchte möglicherweise trotzdem die Einstellung; das ist seine Entscheidung. Bieten Sie sie in ein paar Zeilen als Rückfalloption an.

Das Zuhause auswählen. Verwenden Sie die sieben Fragen unter Die Standardkategorien, die auf die vorhandenen Seiten abgebildet werden. Wenn das Steuerelement in keine passt, ist das ein Hinweis auf ein fehlendes Thema: Sagen Sie dies und schlagen Sie eines vor. Erstellen Sie keine Seite mit dem Namen Allgemein, Sonstiges, Andere oder Erweitert. Wenn die vorhandene Schnittstelle bereits eine solche Seite hat, platzieren Sie das neue Steuerelement stattdessen auf der am besten benannten spezifischen Seite und erwähnen Sie den Sammelbegriff in einer Zeile als etwas, das es wert ist, später behoben zu werden. Eine Anfrage zum Hinzufügen eines Steuerelements ist keine Anfrage für eine Überprüfung.

Steuerelemente, die eine Frage stellen. Eine Bestätigung mit „Nicht erneut fragen“ ist ein kontextbezogenes Steuerelement für eine Einstellung (Frage 4): das Kontrollkästchen und die Einstellungszeile sind derselbe Datensatz, sodass die Wahl später gefunden und rückgängig gemacht werden kann. Bieten Sie niemals „Nicht erneut fragen“ an, ohne dass es irgendwo eine Zeile gibt, die es rückgängig macht.

Wie viel dem Benutzer gezeigt werden soll. Wenn das Projekt eine Registrierung hat, schreiben Sie den vollständigen Datensatz (Felder unten) und überprüfen Sie, ob die Seite, auf der er landet, noch innerhalb der Grenzen liegt. Wenn nicht oder der Benutzer nur um Rat gefragt hat, antworten Sie in einfachen Worten: was hinzuzufügen, wo, wie es heißt, was die Voreinstellung ist und warum, und ob es für dieses Gerät oder das gesamte Konto gilt. Felder wie id, tier, owner und reviewed sind Buchhaltung; lassen Sie sie aus einer Konversationsantwort weg. Wenn Sie etwas nicht wissen, was der Datensatz benötigt (ob Einstellungen zwischen Geräten synchronisiert werden, welche Seiten existieren), geben Sie Ihre Annahme in einem Nebensatz an und fahren Sie fort.

Überprüfen einer vorhandenen Schnittstelle

Das Ziel ist eine Liste von konkreten, behebbaren Befunden, die mit Regelnummern verknüpft sind, und eine vorgeschlagene Struktur. Lesen Sie zuerst references/rules.md, damit Befunde Regeln zitieren können, und verwenden Sie die Berichtsvorlage in references/audit.md.

Eine Überprüfung kann Einstellungen, Navigation, Symbolleisten oder alle drei abdecken. Überprüfen Sie, worum der Benutzer gebeten hat und was Sie sehen können. Wenn der Bildschirm keine Einstellungen hat, überspringen Sie die Einstellungsteile der Vorlage; dehnen Sie sie nicht, um sie anzupassen.

1. Inventar. Listen Sie jeden Ort auf, an dem eine Person etwas ändern oder auslösen kann: Einstellungsbildschirme, Kontomenüs, Kontextmenüs, pro-Artikel-Dialoge, Navigationslisten, Symbolleisten, Symbolleisten, Befehlszeilenflags, Konfigurationsdateien. Delegieren Sie in einer großen Codebasis die Suche oder suchen Sie nach den Mustern (Bezeichnungen, Kippschalter, Menüersteller); lesen Sie keine riesigen Dateien vollständig. Notieren Sie für jedes Steuerelement seine angezeigte Bezeichnung, seine Art, wo es sich befindet und wie es erreicht wird. Wenn ein Steuerelement überhaupt keine Bezeichnung hat, sagen Sie dies, beschreiben Sie es nach Position und kennzeichnen Sie jede Vermutung darüber, was es tut, als Vermutung.
2. Messen. Zählen Sie, was die Regeln begrenzen: Orte zum Ändern von Dingen, Navigationseinträge der obersten Ebene, Einstellungen pro Seite, Tiefe, Schaltflächen pro Symbolleiste, nur-Symbol-Steuerelemente, Steuerelemente ohne zugänglichen Namen, Suchfelder und wie viele unterschiedliche Befehlssätze Objekte desselben Typs anzeigen.
3. Die Symptome finden.
   • dieselbe Einstellung oder derselbe Befehl an mehr als einem Ort erreichbar, oder zwei Steuerelemente, die sich stapeln oder bekämpfen
   • ein Thema auf mehrere Seiten verteilt
   • eine Sache mit mehreren Namen; ein Link, dessen Bezeichnung sich vom Titel seines Ziels unterscheidet; nebeneinander liegende, fast identische Namen
   • Seiten mit den Namen Allgemein, Sonstiges, Andere, Erweitert
   • Aktionen (Exportieren, Löschen, Abmelden) zwischen Einstellungen oder zwischen Zielen
   • Gültigkeitsbereich nur im Hinweistext erklärt oder gar nicht
   • Entwicklervokabular in Bezeichnungen
   • Gruppen mit einem Element und Listen, die länger als ihr Limit sind
   • Symbole ohne sichtbare Wörter; ein Symbol für zwei Bedeutungen
   • Symbolleisten mit mehr als fünf Schaltflächen; Befehlssätze, die sich zwischen Objekten desselben Typs unterscheiden
   • keine Markierung für den aktuellen Standort
   • mehr als ein Suchfeld auf einem Bildschirm
   • Ein-, Aus- oder Neuanordnen von Steuerelementen als Heilmittel gegen Unordnung angeboten
4. Vorschlagen. Für Einstellungen: die Standardkategorien, die zutreffen, plus bis zu zwei Produktthemen, insgesamt höchstens neun, wobei jedes Steuerelement genau einem zugeordnet ist. Für die Navigation: höchstens neun Einträge der obersten Ebene, der Rest unter beschrifteten Gruppen. Für Symbolleisten: ein Befehlssatz pro Objekttyp, fünf auf der Leiste, der Rest unter „Mehr“. Listen Sie auf, was die Oberfläche ganz verlässt und wohin es geht. Sagen Sie, dass Gruppierungen Vorschläge sind, die mit einer Kartensortierung und einem Baumtest bestätigt werden müssen (fünf Personen finden die großen Probleme; zielen Sie auf 80 % Aufgabenerfolg ab), da Gruppierungen der Denkweise der Benutzer entsprechen müssen und dies nicht aus dem Code abgelesen werden kann.
5. Ordnen Sie die Änderungen so, dass die, die niemand neu lernen muss, zuerst kommen: Wörter auf Symbolen und eine Markierung des aktuellen Standorts, dann Zusammenführen von Duplikaten und Vereinheitlichen von Namen, dann konsistente Symbolleisten, dann Neugruppierung. Das Verschieben von Dingen kommt spät, da es bestehende Benutzer etwas kostet. Wenn die Einführung einer Registrierung gerechtfertigt ist, kommt sie zuletzt und wird angeboten, nicht aufgedrängt; der Benutzer hat gefragt, was auf dem Bildschirm geändert werden soll.

Ordnen Sie die Befunde danach, wie sehr sie einen neuen Benutzer beeinträchtigen. Würdigen Sie, was bereits funktioniert: Eine bestehende Registrierung, ein Such-, Zurücksetzungs- oder Adressierungsmechanismus ist die Grundlage, auf der die Lösung aufbaut, und dies zu sagen, verhindert eine Neufassung, die niemand braucht.

Erstellen einer neuen Oberfläche

1. Führen Sie zuerst die fünf Fragen zu jedem Element durch. Eine Produktwunschliste enthält immer Dinge, die ein besserer Standardwert sein sollten, zum System gehören oder Aktionen und keine Einstellungen sind. Lassen Sie die gestrichenen Elemente aus der Registrierung und listen Sie sie in Ihrer Zusammenfassung mit dem Grund auf, damit der Benutzer Sie überstimmen kann.
2. Schreiben Sie die Datensätze vor jeglichem Markup, gemäß references/record-schema.md. Wenn eine Registrierung existiert, fügen Sie sie hinzu.
3. Ordnen Sie jeden Datensatz mit den sieben Fragen zu (nächster Abschnitt). Lassen Sie Kategorien weg, die leer wären. Eine Kategorie mit ein oder zwei Einstellungen ist in Ordnung, wenn Benutzer sie beim Namen suchen (Benachrichtigungen); Andernfalls falten Sie sie in ihre Nachbarkategorie. Der Status zu einem Thema bleibt auf der entsprechenden Themenseite; nur appweite Informationen kommen unter „Über“.
4. Überprüfen Sie die Grenzen (unten), manuell oder mit dem Prüfprogramm.
5. Zeichnen Sie das Standardlayout aus den Datensätzen, gemäß references/visual-design.md für Anordnung, Größen, Steuerelemente und Zustände und references/patterns.md für das Verhalten. Kurz gesagt: Kategorieliste neben der Seite auf breiten Bildschirmen und davor auf schmalen; eine Spalte begrenzt auf ca. 1.100 px; Bezeichnung links, Steuerelement oder aktueller Wert rechts; zusammengehörige Zeilen in eingeschlossenen Gruppen; Schalter für Ein und Aus, Optionsfelder für zwei bis fünf Optionen, kein Speichern-Button; Ziele mindestens 24 px und 44 bis 48 px für Touch; Textkontrast 4,5:1; nichts wird nur durch Farbe angezeigt. Jede Zeile zeigt ihren Gültigkeitsbereich und, wenn sie vom Standard abweicht, einen geänderten Marker mit Zurücksetzen. Die Suche befindet sich oben. Jeder Datensatz hat eine stabile Adresse. Aktionen sind getrennt von Einstellungen, destruktive Aktionen noch einmal getrennt.
6. Sagen Sie, was Sie angenommen haben: Standardwerte, Gültigkeitsbereiche und Eigentümer, die Sie erraten mussten, muss der Benutzer bestätigen. Verwenden Sie unassigned für einen unbekannten Eigentümer; erfinden Sie keine Teamnamen.

Die Standardkategorien

Stellen Sie diese in der Reihenfolge und halten Sie bei der ersten „Ja“-Antwort an. Die Reihenfolge ist der Tie-Breaker.

#	Die Frage	Kategorie
1	Geht es darum, wer Sie sind, wie Sie hereinkommen oder was Sie bezahlen?	Konto
2	Bestimmt es, wann oder wie das Produkt Sie unterbricht?	Benachrichtigungen
3	Kontrolliert es, was andere Personen, andere Apps oder der Dienst sehen, behalten oder tun können?	Datenschutz und Sicherheit
4	Existiert es, damit jemand mit einem bestimmten Bedarf das Produkt sehen, hören oder bedienen kann?	Barrierefreiheit
5	Ändert es nur, wie Dinge aussehen?	Darstellung
6	Geht es um Sprache, Zeit oder Formate?	Sprache und Region
7	Geht es darum, wo Daten gespeichert werden, wie viel oder über welches Netzwerk?	Daten und Speicher
	Andernfalls: Welche Funktion ändert es?	Eines von bis zu zwei Produktthemen (Nachrichten, Editor, Wiedergabe)

„Über“ (Version, Hilfe, Rechtliches) ist ein Link am Ende und wird nicht mitgezählt. Einstellungen, die ein Administrator für alle vornimmt, sind eine separate Oberfläche. Eine kleine App mit weniger als etwa 15 Einstellungen verwendet eine Seite mit diesen Namen als Gruppenüberschriften.

Ein Rufton für Anrufe ist also unter Benachrichtigungen, nicht unter Anrufe; „Bewegung reduzieren“ ist unter Barrierefreiheit, nicht unter Darstellung. Wenn eine Einstellung in zwei Kategorien passen könnte, ordnen Sie sie nach der ersten „Ja“-Antwort zu und fügen Sie die Wörter der anderen Kategorie in ihre Suchwörter ein. references/categories.md behandelt große Produkte, Suiten, Benennung und die Begründung.

Diese Namen sind die, die Betriebssysteme bereits verwenden. Beginnen Sie mit ihnen und ändern Sie sie nur, wenn die eigenen Benutzer des Produkts in einer Kartensortierung die Dinge anders gruppieren.

Der Datensatz

Feld	Die Frage, die es beantwortet	Zulässige Werte
id	Was ist sein dauerhafter Name?	Ein Punkt-Pfad wie chat.notifications.sound. Niemals wiederverwendet oder umbenannt.
kind	Was für eine Art von Ding ist es?	preference, action, status, list, destination, command
subject	Auf welches eine Nomen bezieht es sich?	Genau ein Thema. Dies ist sein Zuhause.
scope	Wen oder was ändert es?	item, device, account, organization
tier	Wie viele Leute brauchen es?	everyday, standard, advanced
label, summary	Wie heißt es und was macht es?	Eine einfache Bezeichnung; ein Satz über das Ergebnis
search	Was würde jemand tippen, um es zu finden?	Synonyme, der alte Name, der Fachjargonbegriff
value	Welche Art von Wert enthält es?	Ein Typ mit Optionen oder einem Bereich
default, default_reason	Was passiert, wenn niemand es anfasst?	Der Wert, den die meisten Leute wählen würden, und warum
risk	Was bricht, wenn es geändert wird?	safe, care (wiederherstellbar), destructive (endgültig verloren)
owner, reviewed	Wer entscheidet, wann es entfernt wird?	Ein Eigentümer und das Datum, an dem es zuletzt gerechtfertigt wurde

Ziele und Befehle verwenden einen kürzeren Satz von Feldern. Das vollständige Schema befindet sich in references/record-schema.md, und assets/registry.example.json ist ein funktionierendes Beispiel.

Die Grenzen

| Grenze | Wert | Woher es kommt |

…

[gekürzt zur Übersetzung]