de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Der Einfluss von Microsoft-Inclusive-Design in Visual Studio-Code

Universelles oder integratives Design ist eine neue Design-Philosophie, die Microsoft in der Softwareentwicklung in letzter Zeit sehr ernst nimmt. Integratives Design bringt zugängliches Design auf die nächste Ebene, da es die Zugänglichkeit aus einer viel breiteren Perspektive betrachtet. Als ich den neuen Quellcode-Editor von Microsoft, Visual Studio Code, getestet habe, ist mir natürlich die Frage aufgefallen, wie sie die Theorie in die Praxis umgesetzt haben .

Dieser Beitrag soll nicht nur eine Beschreibung der Zugänglichkeitsfunktionen von Visual Studio Code sein, da sie in den offiziellen Dokumenten eine Zusammenfassung finden, sondern eine Fallstudie sein soll, auf die man achten sollte, wenn man möchte Entwerfen Sie in Zukunft eine inklusive App .

Denn wir können sicher sein, dass Inklusivität in Software und Webdesign bald eine Anforderung wird, natürlich nicht nur aus altruistischen Gründen, sondern weil sie viele neue Benutzer an den Tisch bringt.

Microsofts 4 Prinzipien des integrativen Designs

Das Windows Dev Center stellt zugängliches Software-Design in die Kategorie Usability und veröffentlichte auch viele großartige Artikel zum Thema. Microsofts vier Prinzipien des inklusiven Designs (nachfolgend kurz aufgeführt) werden in diesem Artikel diskutiert.

  1. Denke universell .
  2. Mach es persönlich .
  3. Halte es einfach .
  4. Schaffen Sie Freude .

Wenn Sie den Originalartikel gelesen haben, werden Sie sehen, dass die Prinzipien auf eine Weise erklärt werden, die nicht immer einfach zu testen ist, indem Ausdrücke wie "emotionale Verbindung", "Wunder hervorbringen" und "magisch" verwendet werden . 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 sind, verwende ich sie in folgendem Sinne:

  1. Denken Sie universell : Zugänglichkeit
  2. Mach es persönlich : Anpassbarkeit, Erweiterbarkeit
  3. Ganz einfach : Ablenkungsfreie, logische Benutzeroberfläche
  4. Erstellen Sie Freude : Feature-Auffindbarkeit

Natürlich ist dies nur eine mögliche Kategorisierung, und es gibt viele Überschneidungen, zum Beispiel kann die Anpassbarkeit auch Teil des Prinzips "Create delight" sein, aber da wir etwas Greifbares brauchen, bleiben wir bei dieser Interpretation vorerst.

Während das Windows-Entwicklungscenter empfiehlt, diese umfassenden Designprinzipien für Windows 10-Anwendungen zu verwenden, hat Microsoft seine Microsoft Design-Website auch dem Inklusivdesign gewidmet.

Obwohl Visual Studio Code nicht ausschließlich für Windows 10 gedacht ist, sondern als plattformübergreifende Software gedacht ist, können wir seine Funktionen trotzdem sicher gegen die oben genannten Prinzipien testen, da Microsoft integratives Design eindeutig als den Software-Designpfad bezeichnet, dem sie in Zukunft folgen wollen .

Denke universell

Unter dem Motto "Think Universal" werden wir untersuchen, wie zugänglich Visual Studio Code für verschiedene Benutzergruppen ist, z. B. Benutzer von unterstützenden Technologien (ob sie sie für Behinderungen oder Vorlieben verwenden), Menschen mit eingeschränkten Technologien, nicht-englische Muttersprachler, etc.

1. Zoom

Der Zoom kann einfach ausgeführt werden, indem Sie die Tastenkombination Strg + = / Cmd + = (Mac) für das Vergrößern und die Tastenkombination Strg + - / Cmd + - (Mac) für das Verkleinern drücken . Außerdem können Sie auf die Zoomfunktion zugreifen die obere Menüleiste.

Beachten Sie, dass ab der Version 1.1.1 auf Windows-Tastaturen die Zeichen + und - nicht auf der numerischen Tastatur auf der rechten Seite funktionieren, sondern nur auf der alphanumerischen Tastatur (was wahrscheinlich nicht die beste Inklusivität ist).

Die Funktion "Beliebter Zoomfaktor" gleicht dies etwas aus, da es uns ermöglicht, in den Benutzereinstellungen einfach eine beständige Zoomstufe zu konfigurieren (lesen Sie dazu meinen vorherigen Beitrag).

2. Kontrastreiches Thema

Themen mit hohem Kontrast erleichtern die Verarbeitung visueller Informationen für sehbehinderte Benutzer und sind daher ein wichtiges Element der Zugänglichkeit.

Es gibt ein standardmäßiges kontrastreiches Design in Visual Studio Code, das Sie durch Klicken auf das Menü " File > Preferences > Color Theme Voreinstellungen" File > Preferences > Color Theme festlegen können. Sie können jedoch auch andere aus dem Visual Studio Code Marketplace herunterladen.

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

3. Tastaturnavigation

Die Tastaturnavigation ist für Personen wichtig, die die Maus aufgrund von Sehbehinderungen oder Behinderungen nicht verwenden können. Effektive Tastaturnavigation bedeutet, dass Benutzer alle Funktionen einer Software steuern können, indem sie nur die Tastatur verwenden .

Visual Studio Code implementiert dieses Feature auf angenehme Weise, und obwohl es über viele voreingestellte Tastenbelegungen verfügt (siehe vollständige Liste), können Benutzer Tastenkürzel auch mithilfe einer Konfigurationsdatei im JSON-Format anpassen.

4. Tab Navigation

Tab-Navigation ermöglicht es, über die verschiedenen Bereiche von Visual Studio Code zu springen .

Gegenwärtig unterstützt VS Code ab Version 1.1.1 nicht mehr die Tab-Navigation für alle Bereiche, zum Beispiel ist die obere Menüleiste nicht auf diese Weise verfügbar. Die gute Nachricht ist, dass Microsoft das Fehlen dieses Features in den aktuellen bekannten Problemen in den Dokumenten anerkennt.

Während des Tests habe ich festgestellt, dass der Editor, die Seitenleiste, die Ansichtsleiste (siehe die Benennung der VS-Code-Bereiche) und alle ihre Aktionen und Elemente mit der Tab-Taste zugänglich sind. Tab-Benutzer können zwar mit ihrer Tastatur nicht auf die Funktionen der oberen Menüleiste zugreifen. Die Befehlspalette F1 kann dies etwas ersetzen, da von dort aus auf alle Befehle im Hauptmenü zugegriffen werden kann.

Eine wichtige Eingabehilfefunktion der Tab-Navigation ist Tab Trapping, mit der Benutzer zwischen den beiden Funktionalitäten der Tab-Taste wechseln können. Mit der Tabulator-Taste können Sie zwischen den verschiedenen Teilen von VS Code wechseln, während die Tab-Taste der Textdatei, die im Editor-Bereich geöffnet wird, normalerweise ein Tab-Zeichen hinzufügt . Benutzer können zwischen den beiden Funktionen wechseln, indem sie die Tastenkombination Strg + M drücken.

5. Bildschirmleser

Natürlich muss eine zugängliche Software auch für Screenreader-Benutzer vollständig verfügbar sein. In den Dokumenten wird erwähnt, dass das VS Code-Entwicklerteam die Verfügbarkeit von Bildschirmleseprogrammen mit dem Bildschirmleser von NVDA getestet hat.

Zu Testzwecken habe ich zwei andere Bildschirmleseprogramme verwendet, JAWS, eine der am weitesten verbreiteten Apps zum Lesen von Bildschirmtexten, und Microsoft Narrator, den integrierten Bildschirmleser von Windows 10.

JAWS las gewissenhaft alle Bereiche, Befehle und Menüs vor, aber Erzähler hatte einige kleinere Probleme mit der Aufgabe. Zum Beispiel lies es nur die oberen Menüpunkte richtig, wenn ich mit der Maus über sie hinwegging, aber nicht, wenn ich den Abwärtspfeil auf meiner Tastatur benutzte. Dies ist jedoch eher ein Mangel von Narrator, nicht Visual Studio Code, so dass wir davon ausgehen können, dass sehbehinderte Benutzer auf alle VS Code-Funktionen zugreifen können, indem sie eine erweiterte Screenreader-App verwenden.

6. Debugger Zugänglichkeit

Um eine App vollständig zugänglich und inklusiv zu machen, müssen wir auch auf Teile achten, die uns wahrscheinlich zunächst nicht in den Sinn kommen. Im Falle von Visual Studio Code ist der Debugger ein gutes Beispiel dafür. Das Entwickler-Team hat darauf geachtet, es auch inklusive zu machen, daher unterstützt es auch Tab- und Tastaturnavigation und es ist Screenreader zugänglich.

7. Lokalisierung

Jetzt sind wir bereit mit der Erörterung der Barrierefreiheitsfunktionen VS Codelisten in den Dokumenten, aber es gibt noch andere wichtige Dinge, die wir erwähnen müssen, wenn wir über das "Think Universal" inklusive Designprinzip sprechen. Eine davon ist die Lokalisierung oder, mit anderen Worten, Unterstützung für Fremdsprachen als Anzeigesprache, da viele Menschen auf der Welt keine englischen Muttersprachler sind.

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

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

Wahrscheinlich sind 10 Anzeigesprachen nicht so viele, aber es ist auch nicht schlecht, wenn wir berücksichtigen, dass VS-Code eine neue Software ist, und Microsoft wird wahrscheinlich in Zukunft mehr unterstützen. Für Benutzer, deren Sprache nicht zu den unterstützten Sprachen gehört, wird der VS-Code auf Englisch installiert.

8. Zugängliche Größe

Moderne Quellcode-Editoren sind nicht wirklich groß, und Microsoft ist diesem Trend ebenfalls beigetreten, da Visual Studio Code weniger als 100 MB groß ist und weniger als 200 MB Speicherplatz benötigt.

9. Plattformübergreifende Entwicklung

Wenn wir inklusive Software haben wollen, muss es natürlich auch plattformübergreifend sein, dh es muss auf verschiedenen Betriebssystemen laufen. VS Code erfüllt diese Anforderung, da er auch Windows, OS X und Linux unterstützt .

Mach es persönlich

"Make It Personal" ist Microsofts zweites Prinzip des inklusiven Designs, und wir werden die Anpassbarkeit und Erweiterbarkeit unter diesem Kriterium untersuchen, wie ich es zuvor versprochen habe. Visual Studio Code erfüllt beide Anforderungen so gut, dass ich sogar separate Beiträge zu beiden geschrieben habe, hier zur Anpassbarkeit und hier zur Erweiterbarkeit.

Kurz gesagt, die Anpassbarkeit wird mit benutzerdefinierten Designs und modularisierten Konfigurationseinstellungen im JSON-Format implementiert, während die Erweiterbarkeit durch benutzerdefinierte Erweiterungen erreicht wird, die Benutzer vom Visual Studio Code Marketplace herunterladen oder in TypeScript oder JavaScript selbst erstellen können.

Sie können hier mehr über den technischen Hintergrund des Visual Studio Code-Ansatzes zur Erweiterbarkeit lesen.

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

Dies ist eine großartige Lösung, da die Konfigurationsoptionen nicht hinter einer riesigen Menühierarchie verborgen sind, die schwer zu durchschauen ist. Benutzer können, auch wenn sie keine Experten sind , ihre benutzerdefinierten .json Dateien problemlos bearbeiten, da Visual Studio-Code die Standardeinstellungen und die benutzerdefinierten Einstellungen in zwei nebeneinander liegenden .json öffnet, sodass Benutzer problemlos mit ihnen experimentieren können.

Konfigurationsdateien sind modularisiert, sie kommen als eine logisch strukturierte Hierarchie von .json Dateien, hier ist eine Liste der wichtigsten:

  1. settings.json für benutzerdefinierte Benutzereinstellungen, auf die über das Menü File > Preferences > User Settings werden kann
  2. .vscode/settings.json für benutzerdefinierte Workspace-Einstellungen, auf die über das Menü File > Preferences > Workpraces Settings werden kann
  3. keybindings.json für benutzerdefinierte File > Preferences > Keyboard Shortcuts, auf die über das Menü File > Preferences > Keyboard Shortcuts werden kann
  4. javascript.json, php.json, css.json, c.json und eine Reihe anderer .json Dateien für verschiedene Programmiersprachen zum Einrichten benutzerdefinierter Benutzer-Snippets, auf die über das Menü File > Preferences > User Snippets werden kann
  5. launch.json für benutzerdefinierte Debugger-Einstellungen, auf die durch Klicken auf das Zahnradsymbol in der oberen Leiste der Debug-Ansicht (auf der linken Seite des Editors) launch.json
  6. .vscode/locale.json für benutzerdefinierte Einstellungen für die .vscode/locale.json können, indem Sie den Befehl " Configure Language in die Befehlspalette eingeben (F1)
  7. .vscode/tasks.json für benutzerdefinierte Task Runner-Einstellungen, auf die .vscode/tasks.json, indem Sie den Befehl Configure Task Runner in die Befehlspalette (F1) eingeben

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

Da die Konfigurationsoptionen modularisiert sind, müssen sich die Benutzer nur um diejenigen kümmern, die sie wirklich benötigen. So können sie sich auf die Aufgaben konzentrieren, die sie ausführen möchten. Dadurch bleibt ihnen ein intuitiverer Workflow.

Halte es einfach

Wir können Microsofts Keep It Simple- Designprinzip an vielen anderen Stellen in Programmierung und Design erfüllen, denken Sie nur an das KISS (Keep It Simple, Stupid) Designprinzip und das DRY (Do not Repair Yourself) Software-Entwicklungsprinzip. Für diesen laufenden Kontext werden wir uns weiterhin auf die Einfachheit der Benutzeroberfläche konzentrieren .

Im Hinblick auf die Zugänglichkeit wird in der Regel eine einfach zu bedienende, einfache Benutzeroberfläche empfohlen, da Benutzer kognitive und intellektuelle Behinderungen haben. Da es sich bei Visual Studio Code um einen Quellcode-Editor handelt, handelt es sich wahrscheinlich nicht um eine Software, die häufig von Benutzern mit dieser Art von Beeinträchtigung verwendet wird. Es kann jedoch auch Grauzonen geben.

Einfachheit ist nicht nur deshalb wichtig, weil eine gut durchdachte, logische Schnittstelle auch die Lernkurve senken und die Arbeitsgeschwindigkeit erhöhen kann, was eine Software auch für die allgemeine Bevölkerung attraktiver macht.

Visual Studio Code nutzt auch das bekannte psychologische Phänomen, den bloßen Belichtungseffekt (oder Vertrautheitsphänomen ), da es ein Grundlayout annimmt, das dem Layout anderer bekannter Quellcode-Editoren, wie Atom, ähnlich ist.

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

VS Code bietet Benutzern auch die Side-by-Side Editing-Funktion, die auch in anderen Quellcode-Editoren zu finden ist, und es ist kein Zufall, da dies den Codierungsprozess viel einfacher macht und natürlich zum "Keep It Simple" beiträgt Design-Prinzip auch.

Visual Studio Code hat neben den grundlegenden UI-Funktionen einige coole Funktionen, die in einem Artikel über integratives Design erwähnt werden sollten:

  • Intellisense, die den Benutzern kontextbezogene Vorschläge liefert (der Backend-Teil, der künstliche Intelligenz verwendet, ist ebenfalls eine gute Lösung)
  • Peek (Shift + F12) zeigt vollständige Funktionsdefinitionen in einem Inline-Fenster an
  • Befehlspalette (F1), die alle Befehle an derselben Stelle zugänglich macht.

Schaffen Sie Freude

Es ist nicht besonders einfach, greifbare Kriterien zu finden, mit denen wir das Create Delight- Designprinzip untersuchen können. Daher entschied ich mich schließlich für das Kriterium der Auffindbarkeit von Features, da Microsoft dieses Prinzip folgendermaßen definiert hat:

Diese Formulierung erinnert viele von Ihnen an Mikromomente, eine der neuesten Entwicklungen von Google, und zeigt damit, wie führende Technologieunternehmen zu ähnlichen Schlussfolgerungen kommen können, wenn sie darüber nachdenken, wie sie die Branche voranbringen können.

Im Inklusiv-Design ist es sehr wichtig, die Nutzer zu involvieren und ihre Neugier zu wecken, dass wir wahrscheinlich das Beste erreichen können, wenn wir ihnen helfen, voranzukommen, wenn sie einen bestimmten Punkt auf ihrer Nutzerreise erreicht haben. Genau im richtigen Moment, nicht vorher, nicht danach.

Wenn wir über die Auffindbarkeit von Features sprechen, um so mehr weltliche Manifestationen von Freude erzeugen, kann dies durch Dinge wie gut gestaltete Utility-Navigation, intelligente Dokumentation und unterstützende Informationen, die nur im richtigen Moment auftauchen, gesteigert werden.

Beispiele für all diese Funktionen finden Sie in Visual Studio Code. Denken Sie nur an die bereits erwähnte IntelliSense- und Befehlspalette. Syntaxhervorhebungen und benutzerdefinierte Code-Snippets können Benutzern jedoch helfen, das Beste aus der Software herauszuholen. Sie müssen selbst beurteilen, ob Sie mit dem Visual Studio Code das Gefühl der Freude haben.

Für mich selbst gefiel mir die Erfahrung mehr oder weniger: die gut strukturierte Online-Dokumentation, der einfach zu navigierende Visual Studio Code Marketplace und die benutzerdefinierten Farbthemen, die beim Scrollen einer Dropdown-Liste in Echtzeit angezeigt werden können (Zugriff über das Menü " File > Preferences > Color Theme .

Letzte Worte

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

Wie wir gesehen haben konnten, gelang es ihnen, die Theorie in ihrem neuen Quellcode-Editor, dem Visual Studio Code, in der Praxis erfolgreich umzusetzen, obwohl noch einige Felder verbessert werden müssen, wie die vollständige Unterstützung von Tabs und eine globale Funktion zum Suchen und Ersetzen.

Da Zugänglichkeit und Inklusivität Teil der Benutzererfahrung sind, kann es eine gute Idee sein, mehr über sie zu erfahren, wenn Sie mit den neuesten Branchentrends Schritt halten wollen. Hier sind Ressourcen, die helfen können:

  • Windows Dev Center Accessibility-Artikel
  • Das Inclusive Design Toolkit-Handbuch von Microsoft Design (PDF) (herunterladbar)
  • Hongkiat.com Accessibility-Tag

Von Kanten und scharfen Ecken - 20 coole geometrische Kunststücke

Von Kanten und scharfen Ecken - 20 coole geometrische Kunststücke

Geometrische Formen werden heutzutage im Grafikdesign häufig verwendet. Sie können sie auf Gegenstände wie T-Shirts zu Untersetzer finden. Es ist einer der großen Trends, der schwer zu definieren ist und komplexe und großformatige Muster sowie einfache Formen umfasst .Ein gewöhnliches Dreieck oder ein Kreis kann ein Foto oder eine Illustration völlig verändern und ihm neues Geheimnis, Tiefe und Bedeutung geben .Hier ha

(Tech- und Design-Tipps)

Wie man die Schreibzone findet und dort bleibt

Wie man die Schreibzone findet und dort bleibt

Die Zone des Läufers ist eine Situation, die auftritt, wenn Sie lange Zeit gelaufen sind und Ihr Körper einen "Ort" findet, an dem er seine Höchstleistung erreicht. Ihr Körper synchronisiert Ihre Atemzüge und bewegt sich effizienter, wodurch Sie sich "in der Zone" befinden. Nun, Schriftsteller haben auch eine Zone. Es

(Tech- und Design-Tipps)