UX Essentials für Visual Studio

Bewährte Methoden

1. Seien Sie in der Visual Studio-Umgebung konsistent.

• Folgen Sie vorhandenen Interaktionsmustern innerhalb der Shell.

• Designfeatures, die mit den anforderungen der visuellen Sprache und der Handwerkskunst der Shell konsistent sind.

• Verwenden Sie freigegebene Befehle und Steuerelemente, wenn sie vorhanden sind.

• Grundlegendes zur Visual Studio-Hierarchie und zum Einrichten von Kontext und Laufwerken der Benutzeroberfläche.

2. Verwenden Sie den Umgebungsdienst für Schriftarten und Farben.

• Die Benutzeroberfläche sollte die aktuelle Einstellung der Umgebungsschriftart berücksichtigen, es sei denn, sie wird für die Anpassung auf der Seite "Schriftarten und Farben" im Dialogfeld "Optionen" verfügbar gemacht.

• UI-Elemente müssen den VSColor-Dienst verwenden, indem token für gemeinsame Umgebungen oder featurespezifische Token verwendet werden.

3. Gestalten Sie alle Bilder mit dem neuen VS-Stil konsistent.

• Befolgen Sie die Visual Studio-Entwurfsprinzipien für Symbole, Glyphen und andere Grafiken.

• Platzieren Sie Text nicht in Grafikelementen.

4. Entwerfen aus benutzerorientierter Perspektive.

• Erstellen Sie den Aufgabenablauf vor den einzelnen Features darin.

• Machen Sie sich mit Ihren Benutzern vertraut, und machen Sie dieses Wissen in Ihrer Spezifikation explizit.

• Bewerten Sie bei der Überprüfung der Benutzeroberfläche die vollständige Benutzeroberfläche sowie die Details.

• Entwerfen Sie Ihre Benutzeroberfläche so, dass Standard sie unabhängig vom Gebietsschema oder der Sprache funktionsfähig und attraktiv ist.

Bildschirmauflösung

Mindestauflösung

• Die Mindestauflösung für Visual Studio 2015 beträgt 1280x720. Dies bedeutet, dass es möglich ist, Visual Studio in dieser Auflösung zu verwenden, obwohl es möglicherweise keine optimale Benutzererfahrung ist. Es gibt keine Garantie dafür, dass alle Aspekte bei Auflösungen unter 1280x720 verwendet werden können.

• Die Zielauflösung für Visual Studio beträgt 1366 x 768. Dies ist die niedrigste Auflösung, bei der wir eine gute Benutzererfahrung versprechen.

• Die anfängliche Dialoghöhe sollte kleiner als 700 Pixel sein, sodass sie in die minimale Auflösung des IDE-Frames mit 96 DPI passt.

Displays mit hoher Dichte

Die Benutzeroberfläche in Visual Studio muss in allen DPI-Skalierungsfaktoren gut funktionieren, die Windows standardmäßig unterstützt: 150 %, 200 % und 250 %.

Antimuster

Visual Studio enthält viele Beispiele für die Benutzeroberfläche, die unseren Richtlinien und bewährten Methoden entsprechen. In einem Bemühen, konsistent zu sein, leihen Sich Entwickler häufig von Designmustern der Produktbenutzeroberfläche aus, ähnlich dem, was sie erstellen. Obwohl dies ein guter Ansatz ist, der uns hilft, die Konsistenz bei Der Benutzerinteraktion und visuellem Design zu fördern, führen wir gelegentlich Features mit einigen Details aus, die unsere Richtlinien aufgrund von Zeitplanbeschränkungen oder Fehlerpriorisierung nicht erfüllen. In diesen Fällen möchten wir nicht, dass Teams eines dieser "Antimuster" kopieren, da sie in der Visual Studio-Umgebung schlechte oder inkonsistente UI vermehren.

Erforderliche Felder/Einstellungen, die standardmäßig im Fehlerzustand angezeigt werden

Featureteamziele

• Warnen Sie Benutzer, dass sie ein Element hinzugefügt haben, das konfiguriert werden muss.

• Lenken Sie die Aufmerksamkeit des Benutzers auf die Bereiche, die Eingaben benötigen.

Antimusterlösung

Sobald der Benutzer eine Aktion initiiert hat und bevor er die Aufgabe abgeschlossen hat, platzieren Sie sofort kritische Stoppsymbole neben den Bereichen, die eine Konfiguration benötigen.

Beispiel: Manifest-Designer-Deklarationen

Durch das Hinzufügen einer Deklaration zur Liste wird sie sofort in einem Fehlerzustand platziert, der beibehalten wird, bis der Benutzer die erforderlichen Eigenschaften festlegt.

In diesem Fall gibt es ein zusätzliches Problem, da das für die Warnung verwendete Symbol ein "×"-Symbol enthält, sodass das allgemeine Entfernen-Symbol nicht daneben verwendet werden kann. Daher verwendet die Benutzeroberfläche eine Schaltfläche "Entfernen", ein übersichtlicheres Steuerelement.

Das Platzieren der Benutzeroberfläche in einem Fehlerzustand ist standardmäßig ein Visual Studio-Antimuster.

Alternativen

Eine bessere Lösung für dieses Problem ist:

• Ermöglichen Sie dem Benutzer, eine Deklaration ohne Warnung hinzuzufügen, und verschieben Sie dann sofort, um Eigenschaften für das Element festzulegen.

• Fügen Sie das Warnsymbol (Golddreieck) hinzu, wenn der Fokus vom Element verschoben wird, z. B. zum Hinzufügen einer weiteren Deklaration zur Liste oder zum Ändern von Registerkarten innerhalb des Designers.

• Wenn der Benutzer versucht, Registerkarten zu ändern, bevor Eigenschaften für Deklarationen festgelegt werden, fügen Sie ein Dialogfeld auf, in dem erläutert wird, dass die Anwendung nicht erstellt wird (oder was auch immer die Auswirkungen hat), bis die Warnungen aufgelöst werden. Wenn der Benutzer das Dialogfeld schließt und registerkarten trotzdem ändert, wird der Registerkarte "Deklarationen" ein Symbol (kritisch oder ggf. eine Warnung) hinzugefügt.

Mehrere Klicks zum Schließen der Benutzeroberfläche

Featureteamziele

Erlauben Sie dem Benutzer nicht, die Benutzeroberfläche zu schließen, ohne zuerst den Erklärungstext anzuzeigen.

Anti-Muster

Das Team fügt die Videolinks an verschiedene Stellen in der VS-Benutzeroberfläche ein, entschied sich für das allgemeine Muster der "×"-Schließen-Schaltfläche und QuickInfo-Erklärung, wie durch die UX angegeben, und stattdessen wurde ein Dropdown- und "Nicht wieder anzeigen"-Link implementiert.

Beispiel: Videolinks im Team Explorer

Das Erzwingen, dass der Benutzer erklärenden Text vor dem Schließen der Benutzeroberfläche liest, ist ein Antimuster in Visual Studio. Richtig entworfen, Videolinks sollten eine QuickInfo mit zusätzlichen Informationen zum Daraufzeigen anzeigen, und durch Klicken auf die "×" sollte die Nachricht geschlossen werden, ohne dass weitere Interaktionen erforderlich sind.

Falsches Videolinkmuster

Anstelle einer einfachen Schaltfläche zum Schließen (ein Klick) wird der Benutzer gezwungen, zwei Klicks zu verwenden, um die Benutzeroberfläche einfach an jeder Stelle zu schließen, an der die Videolinks angezeigt werden.

Das richtige Design für diese Situation besteht darin, dem muster zu folgen, das internet Explorer, Office und Visual Studio gemeinsam haben: Beim Daraufzeigen kann der Benutzer die QuickInfo-Beschreibung sehen und mit einem Klick die Benutzeroberfläche ausblenden.

Richtiges Videolinkmuster

Verwenden von Befehlsleisten für Einstellungen

Abbildung A stellt dieses Antimuster dar: Platzieren einer Einstellung unter einer Befehlsschaltfläche, die für mehr als nur den Befehl gilt. In dieser Skizze gibt es neben "Debuggen starten" Befehle wie "Im Browser anzeigen", "Ohne Debuggen starten" und "Schritt in", die die ausgewählte Einstellung respektieren.

Abbildung A: Antimuster der Befehlsleiste

Etwas besser, aber dennoch unerwünschte Einstellungen dieses Typs werden in die Symbolleisten eingefügt, wie in Abbildung B dargestellt. Während geteilte Schaltflächen weniger Platz belegen und daher eine Verbesserung gegenüber Dropdowns darstellen, verwenden beide Designs weiterhin eine Symbolleiste, um etwas zu fördern, das nicht wirklich ein Befehl ist.

Abbildung B: Besser, aber dennoch ein Antimuster der Befehlsleiste

Im richtigen Ansatz in Abbildung C ist die Einstellung an eine Reihe von Befehlen gebunden. Es wird keine globale Einstellung festgelegt, und wir wechseln einfach zwischen vier Befehlen. Dies ist die einzige Situation, in der Befehle in der Symbolleiste akzeptabel sind.

Abbildung C: Korrekte Verwendung des Visual Studio-Befehlsleistenmusters

Steuern von Antimustern

Einige Antimuster sind einfach falsche Verwendung oder Darstellung eines Steuerelements oder einer Gruppe von Steuerelementen.

Unterstreichung, die als Gruppenbezeichnung verwendet wird, nicht als Link

Unterstreichung von Text sollte nur für Links verwendet werden.

Schlecht:

Unterstrichener Text, der kein Link ist, ist ein Visual Studio-Antimuster.

Gut:

Richtig formatierter Nicht-Hyperlink-Text wird in der Schriftart der Umgebung nicht angedetert angezeigt.

Wenn Sie auf ein Kontrollkästchen klicken, wird ein Popupdialogfeld angezeigt.

Wenn Sie im Assistenten "Windows Azure-App lizenzierung veröffentlichen" auf das Kontrollkästchen "Remotedesktop für alle Rollen aktivieren" klicken, wird sofort ein Popupdialogfeld angezeigt, ein Visual Studio-Antimuster. Darüber hinaus füllt das Kontrollkästchenfeld nach dem Aktivieren kein Kontrollkästchen, ein anderes Interaktions-Antimuster.

Das Aufrufen eines Dialogfelds nach dem Klicken auf ein Kontrollkästchen ist ein Visual Studio-Antimuster.

Antimuster für Hyperlink

Das folgende Beispiel enthält zwei Antimuster:

1. Der Vordergrund, der rot beim Daraufzeigen aktiviert wird, bedeutet, dass die richtige freigegebene Farbe des Schriftartdiensts nicht verwendet wird.

2. "Weitere Informationen" ist nicht der geeignete Text für einen Link zu einem konzeptionellen Thema. Das Ziel des Benutzers ist es, nicht mehr zu lernen, es ist, die Auswirkungen ihrer Wahl zu verstehen.

   
   Das Ignorieren des Farbdiensts und die Verwendung von "Weitere Informationen" für Hyperlinks sind Visual Studio-Antimuster.

Bessere Lösung: Stellen Sie die Frage, die der Benutzer durch Klicken auf den Link stellen würde. Beispiel:

• Wie funktionieren Windows Azure-Dienste?

• Wann benötige ich ein Windows Azure Mobile Services-Projekt?

Verwenden von "Hier klicken" für Links

Links sollten selbst beschreibend sein. Es handelt sich um ein Antimuster, um "Hier klicken" oder eine ähnliche Variante zu verwenden.

Schlecht: "Klicken Sie hier, um Anweisungen zum Erstellen eines neuen Projekts zu erhalten."

Gut: "Gewusst wie ein neues Projekt erstellen?"