Der Einfluss von Microsoft Inclusive Design in Visual Studio-Code

Universal, oder inklusive Design ist eine neue Design-Philosophie, die Microsoft in der Softwareentwicklung in letzter Zeit recht ernst zu nehmen scheint. Inklusives Design bringt barrierefreies Design auf die nächste Ebene, da es die Barrierefreiheit aus einer viel breiteren Perspektive betrachtet. Als ich den neuen Quellcode-Editor von Microsoft, Visual Studio Code, testete, stellte sich die Frage nach wie sie die Theorie in die Praxis umgesetzt haben natürlich entstand in meinem Kopf.

Dieser Beitrag soll nicht nur eine Beschreibung der Eingabehilfefunktionen von Visual Studio Code sein, da Sie in den offiziellen Dokumenten eine großartige Zusammenfassung finden, sondern eher eine Fallstudie darüber, worauf Sie achten sollten, wenn Sie dies möchten eine inklusive app entwerfen in der Zukunft.

Weil wir sicher sein können, dass Inklusivität bald sowohl in der Software als auch im Webdesign eine Anforderung sein wird, natürlich nicht nur aus altruistischen Gründen, sondern weil es viele neue Benutzer an den Tisch bringt.

Microsofts 4 Prinzipien des inklusiven Designs

Windows Dev Center bietet ein barrierefreies Softwaredesign innerhalb der Usability-Kategorie, und sie veröffentlichten auch viele großartige Artikel zu diesem Thema. Microsofts vier Prinzipien des inklusiven Designs (kurz unten aufgeführt) werden in diesem Artikel beschrieben.

1. Denken Universal-.
2. Mach es persönlich.
3. Behalte es einfach.
4. Erstellen Freude.

Wenn Sie den Originalartikel gelesen haben, werden Sie sehen, dass die Prinzipien auf eine Art und Weise erklärt werden, die nicht einfach zu testen ist, indem Sie Ausdrücke wie verwenden "Emotionale Verbindung", "Wunder" hervorrufen, und "magisch". Also bleibe ich lieber bodenständig, entferne diese subjektiven Konnotationen und verwandle die Prinzipien in objektive Kriterien.

Wenn ich analysiere, wie sie in Visual Studio Code implementiert werden, verwende ich sie in folgendem Sinne:

1. Denken Universal-: Zugänglichkeit
2. Mach es persönlich: Anpassbarkeit, Erweiterbarkeit
3. Behalte es einfach: Ablenkungsfreie, logische Benutzeroberfläche
4. Erstellen Freude: Feature-Erkennbarkeit

Natürlich ist dies nur eine mögliche Kategorisierung, und das gibt es viele Überlappungen, Zum Beispiel kann die Anpassbarkeit auch Teil der sein “Schaffen Sie Freude” Prinzip, aber da wir etwas Greifbares brauchen, bleiben wir zunächst bei dieser Interpretation.

Während Windows Dev Center empfiehlt, diese inklusiven Designprinzipien für Windows 10-Apps anzuwenden, hat Microsoft seine Microsoft Design-Site auch dem inklusiven Design gewidmet.

Obwohl Visual Studio Code nicht nur für Windows 10 ist, sondern als Ziel dient Plattformübergreifende Software, Wir können seine Funktionen weiterhin sicher gegen die oben genannten Prinzipien testen, da Microsoft inklusives Design eindeutig als den Weg des Software-Designs betrachtet, dem sie in der Zukunft folgen möchten.

Denken Sie universell

Unter dem “Denken Sie universell” Prinzipiell untersuchen wir, wie zugänglich Visual Studio-Code ist für verschiedene Benutzergruppen, B. Benutzer von assistiven Technologien (unabhängig davon, ob sie diese für Behinderungen oder Präferenzen einsetzen), Personen mit begrenzten Technologien, nicht-englische Muttersprachler usw.

1. Zoom

Das Zoomen kann einfach durch Drücken von Strg + = / Cmd + = ausgeführt werden (Mac) Tastenkombination für Hineinzoomen, und die Strg + - / Cmd + - (Mac) Abkürzung für Rauszoomen, Auf die Zoom-Funktion können Sie auch über die obere Menüleiste zugreifen.

Beachten Sie, dass ab Version 1.1.1 auf Windows-Tastaturen die Plus- und Minuszeichen nicht auf dem numerischen Tastenfeld rechts funktionieren, sondern nur auf dem alphanumerischen Tastenfeld. Dies ist wahrscheinlich nicht das Beste für Inklusivität.

Die Funktion "Persisted Zoom Level" kompensiert dies etwas, da wir so eine leicht konfigurieren können dauerhafte Zoomstufe in den Benutzereinstellungen (lesen Sie in meinem ausführlichen Beitrag, wie das geht).

2. Kontrastreiches Thema

Kontrastreiche themen erleichtern in Verarbeitung visueller Informationen für sehbehinderte Benutzer, und daher sind sie ein wichtiges Element der Erreichbarkeit.

Da ist ein Standardmäßiges High Contrast-Design in Visual Studio Code, den Sie durch Klicken auf die Schaltfläche festlegen können Datei> Voreinstellungen> Farbdesign Sie können jedoch auch andere vom Visual Studio Code Marketplace herunterladen.

Microsoft hat High Contrast-Designs in Windows 7 eingeführt. Es ist schön zu sehen, dass sie mit dieser Funktion durchgehen.

3. Tastaturnavigation

Die Bereitstellung der Tastaturnavigation ist für Personen unerlässlich, die die Maus aufgrund von Seh- oder Mobilitätsbehinderungen nicht verwenden können. Effektive Tastaturnavigation bedeutet, dass die Benutzer kann jede Funktionalität steuern einer Software indem Sie nur die Tastatur verwenden.

Visual Studio Code implementiert diese Funktion sehr gut und es gibt viele voreingestellte Tastenzuordnungen (siehe vollständige Liste) können Benutzer Tastenkombinationen auch mithilfe einer Konfigurationsdatei im JSON-Format anpassen.

4. Tab Navigation

Tabulatornavigation macht es möglich überspringen Sie die verschiedenen Bereiche von Visual Studio Code.

Derzeit unterstützt VS Code ab Version 1.1.1 nicht die Tabulatornavigation für alle Bereiche. Beispielsweise ist die obere Menüleiste nicht auf diese Weise verfügbar. Die gute Nachricht ist, dass Microsoft das Fehlen dieser Funktion in den aktuellen bekannten Problemen in den Dokumenten anerkennt.

Während des Tests habe ich festgestellt, dass die Editor, das Seitenstange, das Bar anzeigen (Siehe Benennung der Bereiche von VS Code), und alle ihre Aktionen und Elemente sind mit der Tabulatortaste erreichbar. Tab-Benutzer können zwar nicht über die Tastatur auf die Funktionen der oberen Menüleiste zugreifen. Die Befehlspalette F1 kann dies etwas ersetzen, da auf alle Befehle, die im oberen Menü zu finden sind, auch von dort aus zugegriffen werden kann.

Eine wichtige Eingabehilfe der Registerkartennavigation ist die Überfüllung der Registerkarten, mit der Benutzer zwischen den beiden Funktionen der Tabulatortaste wechseln können. Die überbrückte Tab-Taste macht es möglich Bewegen Sie sich über die verschiedenen Teile von VS Code, während normalerweise die Tabulatortaste fügt der Textdatei ein Tabulatorzeichen hinzu im Editorbereich öffnen. Benutzer können zwischen den beiden Funktionen wechseln, indem Sie die Tastenkombination Strg + M drücken.

5. Bildschirmleser

Natürlich muss eine barrierefreie Software auch für Benutzer von Bildschirmlesern verfügbar sein. Die Dokumente erwähnen, dass das VS-Code-Entwickler-Team die Verfügbarkeit von Bildschirmlesern mit dem NVDA-Bildschirmleser getestet hat.

Zum Testen habe ich zwei weitere Bildschirmleser verwendet, JAWS, eine der am häufigsten verwendeten Bildschirmlese-Apps, und Microsoft Narrator, den integrierten Bildschirmleser von Windows 10.

JAWS Lesen Sie sorgfältig alle Bereiche, Befehle und Menüs sorgfältig durch, jedoch hatte der Sprecher einige kleinere Probleme mit der Aufgabe. Zum Beispiel werden die oberen Menüpunkte nur richtig gelesen, wenn ich sie mit der Maus darüber bewegt habe, nicht aber, wenn ich den Abwärtspfeil auf meiner Tastatur verwendet habe. Dies ist jedoch eher ein Manko von Narrator, nicht von Visual Studio Code. Wir können also davon ausgehen, dass sehbehinderte Benutzer mit einer erweiterten Screenreader-App auf alle VS-Code-Funktionen zugreifen können.

6. Debugger-Zugänglichkeit

Um eine App vollständig zugänglich und inklusiv zu machen, müssen wir uns auch um Teile kümmern, die uns wahrscheinlich zuerst nicht in den Sinn kommen. Im Fall von Visual Studio Code ist der Debugger ein gutes Beispiel dafür. Das Entwicklerteam hat darauf geachtet, dass es auch inklusiv ist. Daher unterstützt es auch die Tab- und Tastaturnavigation sowie den Bildschirmleser.

7. Lokalisierung

Jetzt sind wir bereit, die VS-Codelisten für Eingabehilfen in den Dokumenten zu diskutieren, aber es gibt noch andere wichtige Dinge, die wir erwähnen müssen, wenn wir über die “Denken Sie universell” inklusive Designprinzip. Eine davon ist Lokalisierung oder mit anderen Worten Unterstützung für Fremdsprachen Als Anzeigesprache sind viele Menschen auf der Welt nicht englischsprachig.

Visual Studio Code ist derzeit für lokalisiert 10 verschiedene Anzeigesprachen (Englisch, vereinfachtes Chinesisch, traditionelles Chinesisch, Französisch, Deutsch, Italienisch, Japanisch, Koreanisch, Russisch, Spanisch).

Benutzer aus diesen Sprachen müssen nicht einmal ihre Anzeigesprache als VS-Code konfigurieren übernimmt standardmäßig die Anzeigesprache des Betriebssystems. Wenn sie eine andere Sprache als Anzeigesprache einstellen möchten, können sie ihre Sprache leicht konfigurieren locale.json Datei.

Wahrscheinlich sind zehn Anzeigesprachen nicht so viele, aber es ist auch nicht schlecht, wenn wir bedenken, dass VS Code eine neue Software ist und Microsoft höchstwahrscheinlich in Zukunft mehr unterstützen wird. Für den Benutzer, dessen Sprache nicht unter den unterstützten ist, wird der VS-Code auf Englisch installiert.

8. Zugängliche Größe

Moderne Quellcode-Editoren sind nicht wirklich groß, und Microsoft hat sich diesem Trend angeschlossen, da Visual Studio Code a ist weniger als 100 MB herunterladen, und der Speicherplatz auf der Festplatte beträgt weniger als 200 MB.

9. Plattformübergreifende Entwicklung

Wenn wir umfassende Software wünschen, muss sie natürlich auch plattformübergreifend sein, dh sie muss auf verschiedenen Betriebssystemen laufen. VS Code erfüllt diese Anforderung, da es unterstützt wird Windows, OS X und Linux auch.

Mach es persönlich

“Mach es persönlich” ist Microsofts zweites Prinzip des inklusiven Designs, und wir werden es uns ansehen Anpassbarkeit und Erweiterbarkeit unter diesem Kriterium, wie ich es zuvor versprochen hatte. Visual Studio Code erfüllt beide Anforderungen so gut, dass ich für beide sogar separate Beiträge geschrieben habe, hier zur Anpassbarkeit und zur Erweiterbarkeit.

Kurz gesagt, Anpassungsfähigkeit wird mit implementiert benutzerdefinierte themen und modularisierte Konfigurationseinstellungen im JSON-Format, Die Erweiterbarkeit wird durch erreicht benutzerdefinierte Erweiterungen Benutzer können sie vom Visual Studio Code Marketplace herunterladen oder in TypeScript oder JavaScript erstellen.

Weitere Informationen zum technischen Hintergrund des Erweiterungsansatzes von Visual Studio Code finden Sie hier.

Die Anpassbarkeit wird auf eine Weise gelöst, die ideal für technisch versierte Leute ist, die typische Benutzer von Quellcode-Editoren sind, da ein wesentlicher Teil davon über implementiert wird modularisierte Konfigurationsdateien im JSON-Format.

Dies ist eine großartige Lösung, da die Konfigurationsoptionen nicht hinter einer riesigen Menühierarchie verborgen sind, die schwer durchschaubar ist. Benutzer, auch wenn sie keine Programmier-Experten sind, können dies leicht bearbeiten ihre Gewohnheit .Json Dateien, Mit Visual Studio Code werden die Standardeinstellungen und die benutzerdefinierten Einstellungen in zwei Editorfenstern direkt nebeneinander geöffnet, sodass Benutzer problemlos mit ihnen experimentieren können.

Konfigurationsdateien sind modularisiert und haben eine logisch strukturierte Hierarchie von .Json Dateien, hier eine Liste der wichtigsten:

1. einstellungen.json zum benutzerdefinierte Benutzereinstellungen, erreichbar über die Datei> Voreinstellungen> Benutzereinstellungen Speisekarte
2. .vscode / einstellungen.json zum benutzerdefinierte Arbeitsbereichseinstellungen, erreichbar über die Datei> Voreinstellungen> Workpraces-Einstellungen Speisekarte
3. keybindings.json zum benutzerdefinierte Schlüsselbindungen, erreichbar über die Datei> Voreinstellungen> Tastenkombinationen Speisekarte
4. javascript.json, php.json, css.json, c.json, und ein paar andere .Json Dateien für verschiedene Programmiersprachen zum Einrichten benutzerdefinierte Benutzerausschnitte, erreichbar über die Datei> Voreinstellungen> Benutzerausschnitte Speisekarte
5. launch.json zum benutzerdefinierte Debugger-Einstellungen, erreichbar durch Klicken auf das Zahnradsymbol in der oberen Leiste der Debug-Ansicht (links im Editor)
6. .vscode / locale.json zum benutzerdefinierte Anzeigesprache-Einstellungen, erreichbar durch Eingabe der Sprache konfigurieren Befehl in die Befehlspalette (F1)
7. .vscode / aufgaben.json zum benutzerdefinierte Task Runner-Einstellungen, erreichbar durch Eingabe der Task Runner konfigurieren Befehl in die Befehlspalette (F1)

Ich denke, VS-Code-Benutzer können sich über die Anpassbarkeit kaum beschweren, da es sogar eine erschöpfende Aufgabe war, die Optionen aufzulisten.

Da die Konfigurationsoptionen modularisiert sind, müssen sich die Benutzer nur um diese kümmern sie brauchen wirklich, Dies hilft ihnen, sich auf die Aufgaben zu konzentrieren, die sie ausführen möchten. So bleibt ihnen ein intuitiverer Arbeitsablauf.

Halte es einfach

Wir können uns mit Microsoft treffen Halte es einfach Umfassendes Designprinzip an vielen anderen Stellen in Programmierung und Design. Denken Sie nur an das Designprinzip von KISS (Keep It Simple, Stupid) und das DRY-Prinzip (Don't Repeat Yourself). Für diesen laufenden Kontext behalten wir den Fokus auf Einfachheit der Benutzeroberfläche.

In Bezug auf die Zugänglichkeit wird in der Regel eine benutzerfreundliche, einfache Benutzeroberfläche empfohlen, die sich an Benutzer mit kognitiven und intellektuellen Behinderungen richtet. Da es sich bei Visual Studio Code um einen Quellcode-Editor handelt, handelt es sich wahrscheinlich nicht um eine Software, die häufig von Menschen mit einer solchen Beeinträchtigung verwendet wird. Es kann jedoch auch einige graue Bereiche geben.

Einfachheit ist jedoch nicht nur deshalb wichtig, da eine durchdachte, logische Schnittstelle dies auch kann senken Sie die Lernkurve, und Erhöhen Sie die Arbeitsgeschwindigkeit, eine Software auch für die allgemeine Bevölkerung attraktiver machen.

Visual Studio Code auch nutzt das bekannte psychologische Phänomen, der bloße Belichtungseffekt (oder Vertrautheitsphänomen), da es ein grundlegendes Layout annimmt, das dem Layout ähnelt, das von anderen bekannten Quellcode-Editoren, z. B. Atom, verwendet wird.

Aus den Dokumenten können wir erfahren, dass es ein Unternehmen war, auf das Microsoft großen Einfluss hatte:

VS Code bietet Benutzern die Side-by-Side-Bearbeitungsfunktion, die auch in anderen Quellcode-Editoren zu finden ist. Dies ist kein Zufall Dadurch wird der Kodierungsprozess erheblich vereinfacht, und trägt natürlich dazu bei “Halte es einfach” auch inklusives Designprinzip.

Zusätzlich zu der grundlegenden Benutzeroberfläche verfügt Visual Studio Code über coole Funktionen, die in einem Artikel über inklusives Design erwähnt werden sollten, z.

• Intellisense Benutzer erhalten auf Kontext basierende Vorschläge (der Backend-Teil, der künstliche Intelligenz verwendet, ist auch eine gute Lösung)
• Spähen (Umschalt + F12) zeigt vollständige Funktionsdefinitionen in einem Inline-Fenster an
• Befehlsleiste (F1), um alle Befehle an derselben Stelle zugänglich zu machen.

Erstelle Freude

Es ist nicht besonders leicht, greifbare Kriterien zu finden, anhand derer wir das untersuchen können “Erstelle Freude” inklusive Designprinzip, so dass ich mich endlich für das Kriterium von entschieden habe Feature-Erkennbarkeit, Microsoft hat dieses Prinzip folgendermaßen definiert:

Diese Formulierung mag viele von Ihnen an Mikro-Momente erinnern, eine der letzten großen Sachen von Google, und zeigt daher, wie führende Technologieunternehmen zu ähnlichen Schlussfolgerungen kommen können, wenn sie darüber nachdenken, wie sie die Branche vorantreiben können.

Im inklusiven Design ist es sehr wichtig Benutzer engagieren, und wecken ihre neugier, dass wir wahrscheinlich das Beste erreichen können, wenn wir Hilf ihnen, sich vorwärts zu bewegen wenn sie einen bestimmten Punkt auf ihrer Benutzerreise erreichten. Gerade im richtigen Moment, nicht vorher, nicht danach.

Wenn wir darüber sprechen Feature-Erkennbarkeit, Je mehr weltliche Manifestation Freude bereitet, kann sie durch Dinge wie eine gut durchdachte Hilfsnavigation, intelligente Dokumentation und unterstützende Informationen erhöht werden, die nur im richtigen Moment auftauchen.

Beispiele für all diese Funktionen finden Sie in Visual Studio Code IntelliSense und Befehlsleiste, aber Satzstellung markieren und benutzerdefinierte Codeausschnitte kann Benutzern auch dabei helfen, die Software optimal zu nutzen. Sie müssen selbst beurteilen, ob Sie mit Visual Studio Code Freude haben.

Für mich hat die Erfahrung mehr oder weniger gut gefallen: die gut strukturierte Online-Dokumentation, das einfach zu navigieren in Visual Studio Code Marketplace, und das benutzerdefinierte Farbthemen Dies kann in Echtzeit als Vorschau angezeigt werden, während Sie durch eine Dropdown-Liste scrollen Datei> Voreinstellungen> Farbdesign Speisekarte).

Letzte Worte

Da inklusives Design ein neues Feld ist, befindet sich die Technologieindustrie noch in der Experimentierphase. Ich denke, Microsoft hat einen bedeutenden Meilenstein erreicht Definition der vier Prinzipien des inklusiven Designs.

Wie wir gesehen haben, ist es ihnen gelungen, die Theorie in ihrem neuen Quellcode-Editor Visual Studio Code erfolgreich in die Praxis umzusetzen. Es gibt jedoch noch einige zu verbessernde Felder, z. B. vollständige Tab-Unterstützung und eine globale Such- und Ersetzungsfunktion.

Da sind sowohl Zugänglichkeit als auch Inklusivität Teile der Benutzererfahrung, Es empfiehlt sich, mehr darüber zu erfahren, wenn Sie mit den neuesten Branchentrends Schritt halten möchten. Hier sind Ressourcen, die helfen können:

• Artikel zur Barrierefreiheit von Windows Dev Center
• Handbuch zum Inclusive Design Toolkit von Microsoft Design (PDF) (herunterladbar)
• Hongkiat.com-Eingabehilfe