De invloed van Microsoft Inclusive Design in Visual Studio Code

Universeel of inclusief ontwerp is een nieuwe ontwerpfilosofie die Microsoft de laatste tijd serieus lijkt te nemen in de ontwikkeling van software. Inclusief ontwerp neemt toegankelijk ontwerp naar een hoger niveau, omdat het toegankelijkheid vanuit een veel breder perspectief bekijkt. Toen ik de nieuwe broncode-editor van Microsoft, Visual Studio Code, testte, kwam de vraag hoe ze de theorie in de praktijk implementeerden natuurlijk in mijn gedachten.

Dit bericht is niet bedoeld als een beschrijving van de toegankelijkheidsfuncties van Visual Studio Code, zoals u in de officiële documenten een goede samenvatting kunt vinden, maar eerder als een case study over waar u op moet letten wanneer u wilt ontwerp een inclusieve app in de toekomst.

Omdat we er zeker van kunnen zijn dat inclusiviteit binnenkort een vereiste zal zijn in zowel software als webdesign, natuurlijk niet alleen om altruïstische redenen, maar ook omdat het veel nieuwe gebruikers naar de tafel brengt.

4 principes van Inclusive Design van Microsoft

Windows Dev Center zet toegankelijk softwareontwerp binnen de categorie Usability en ze publiceerden ook veel geweldige artikelen over het onderwerp. De vier principes van inclusief ontwerp van Microsoft (hieronder kort vermeld) worden in dit artikel besproken.

1. Denk universeel .
2. Maak het persoonlijk .
3. Houd het simpel .
4. Maak verrukking .

Als je het originele artikel hebt gelezen, zul je zien dat de principes op een manier worden uitgelegd die niet altijd gemakkelijk te testen is, met behulp van uitdrukkingen als 'emotionele connectie', 'verwondering oproepen' en 'magisch' . Dus ik blijf liever nuchter, verwijder deze subjectieve connotaties en verander de principes in objectieve criteria.

Wanneer ik analyseer hoe ze worden geïmplementeerd in Visual Studio Code, gebruik ik ze in de volgende betekenis:

1. Denk universeel : toegankelijkheid
2. Maak het persoonlijk : aanpasbaarheid, uitbreidbaarheid
3. Houd het simpel : afleiding-vrije, logische gebruikersinterface
4. Maak verrukking : ontdekbaarheid van functies

Natuurlijk is dit slechts één mogelijke categorisering en er zijn veel overlappingen, zo kan aanpasbaarheid ook deel uitmaken van het "Create delight" -principe, maar als we iets tastbaars nodig hebben, houden we ons aan deze interpretatie voor nu.

Hoewel Windows Dev Center deze inclusieve ontwerpprincipes aanbeveelt om te worden toegepast voor Windows 10-apps, heeft Microsoft ook haar Microsoft Design-website gewijd aan inclusief ontwerp.

Hoewel Visual Studio-code niet alleen voor Windows 10 is bedoeld, maar bedoeld is als platformonafhankelijke software, kunnen we de functies ervan nog steeds veilig testen aan de hand van de bovengenoemde principes, aangezien Microsoft inclusieve ontwerpen duidelijk behandelt als het ontwerppad voor software dat ze in de toekomst willen volgen. .

Denk aan Universal

Onder het "Think Universal" -principe zullen we onderzoeken hoe toegankelijk Visual Studio Code is voor verschillende gebruikersgroepen, zoals gebruikers van ondersteunende technologieën (of ze deze gebruiken voor een handicap of voorkeur), mensen met beperkte technologie, niet-native Engelstaligen, enz.

1. Zoom

Zoomen kan eenvoudig worden uitgevoerd door op de sneltoets Ctrl + = / Cmd + = (Mac) voor Zoom In en de sneltoets Ctrl + - / Cmd + - (Mac) voor Zoom Out te drukken, en we hebben ook toegang tot de zoomfunctie via de bovenste menubalk.

Merk op dat vanaf de versie 1.1.1, op Windows-toetsenborden de + en - tekens niet werken op het numerieke toetsenblok aan de rechterkant, alleen op het typerende (alfanumerieke) toetsenbord - wat waarschijnlijk niet het beste is voor inclusiviteit.

De Persisted Zoom Level-functie compenseert dit enigszins, omdat het ons in staat stelt om op eenvoudige wijze een blijvend Zoom-niveau in de Gebruikersinstellingen te configureren (lees mijn doorlatende bericht over hoe dit te doen).

2. Thema met hoog contrast

Thema's met een hoog contrast vergemakkelijken de verwerking van visuele informatie voor gebruikers met een visuele beperking en zijn daarom een ​​belangrijk element van toegankelijkheid.

Er is een standaard Hoog Contrast-thema in Visual Studio-code, dat u kunt instellen door op het menu File > Preferences > Color Theme klikken, maar u kunt ook andere downloaden van de Visual Studio Code Marketplace.

Microsoft heeft High Contrast-thema's geïntroduceerd in Windows 7, het is goed om te zien dat ze deze functie volgen.

3. Toetsenbordnavigatie

Het bieden van toetsenbordnavigatie is essentieel voor mensen die de muis niet kunnen gebruiken vanwege visuele of mobiliteitshandicaps. Effectieve toetsenbordnavigatie houdt in dat gebruikers alle functies van een software kunnen bedienen door alleen het toetsenbord te gebruiken .

Visual Studio Code implementeert deze functie op een prettige manier en hoewel het veel vooraf ingestelde toetsbindingen heeft (zie de volledige lijst), kunnen gebruikers ook sneltoetsen aanpassen met behulp van een configuratiebestand in JSON-indeling.

4. Navigatie op het tabblad

Tabnavigatie maakt het mogelijk om over de verschillende delen van Visual Studio Code te springen .

Vanaf versie 1.1.1 ondersteunt VS Code momenteel geen tabnavigatie voor alle gebieden, zo is de bovenste menubalk bijvoorbeeld niet op deze manier beschikbaar. Het goede nieuws is dat Microsoft het gebrek aan deze functie in de Current Bekende problemen in de documenten erkent.

Tijdens het testen ontdekte ik dat de Editor, de zijbalk, de weergavebalk (zie de naamgeving van de VS Code-gebieden), en al hun acties en items toegankelijk zijn met de Tab-toets. Hoewel Tab-gebruikers met hun toetsenbord geen toegang hebben tot de functies van de bovenste menubalk. De Command Palette F1 kan dit enigszins vervangen, omdat alle commando's die in het hoofdmenu te vinden zijn ook vanaf daar toegankelijk zijn.

Een belangrijke toegankelijkheidsfunctie van tabnavigatie is tab trapping, waarmee gebruikers kunnen schakelen tussen de twee functies van de Tab-toets. De ingesloten Tab-toets maakt het mogelijk om over de verschillende delen van de VS-code te gaan, terwijl normaal gesproken de Tab-toets een Tab-teken toevoegt aan het tekstbestand dat geopend is in het Editor-gebied. Gebruikers kunnen schakelen tussen de twee mogelijkheden door op de Ctrl + M-toetsbinding te drukken.

5. Schermlezers

Natuurlijk moet een toegankelijke software ook volledig beschikbaar zijn voor gebruikers van schermlezers. In de documenten wordt vermeld dat het ontwikkelaarsteam van VS Code de beschikbaarheid van schermlezers met de NVDA-schermlezer heeft getest.

Voor het testen heb ik twee andere schermlezers gebruikt, JAWS, dat een van de meest gebruikte schermleesapps is, en Microsoft Narrator is de ingebouwde schermlezer van Windows 10.

JAWS las ijverig alle gebieden, commando's en menu's voor, maar Narrator had wat kleinere problemen met de taak. Het leest bijvoorbeeld alleen de items in het bovenste menu goed als ik eroverheen bewoog met de muis, maar niet toen ik de pijl-omlaag op mijn toetsenbord gebruikte. Dit is echter eerder een tekortkoming van Narrator, niet Visual Studio Code, dus we kunnen er gerust van uitgaan dat gebruikers met een visuele beperking toegang hebben tot alle VS Code-functies door een geavanceerdere schermleesapp te gebruiken.

6. Toegankelijkheid van Debugger

Om een ​​app volledig toegankelijk en inclusief te maken, moeten we ook zorgen voor onderdelen die waarschijnlijk niet eerst bij ons opkomen. In het geval van Visual Studio Code is de Debugger een goed voorbeeld hiervan. Het dev-team heeft ook aandacht besteed aan het inclusief maken van de inhoud, daarom ondersteunt het ook de Tab- en toetsenbordnavigatie en is het schermlezer toegankelijk.

7. Lokalisatie

Nu zijn we klaar met het bespreken van de VSAC-lijsten in de toegankelijkheidsfuncties in de documenten, maar er zijn nog andere belangrijke dingen die we moeten vermelden wanneer we het hebben over het "Think Universal" inclusief ontwerpprincipe. Een daarvan is lokalisatie, of met andere woorden ondersteuning voor vreemde talen als weergavetaal, aangezien veel mensen ter wereld geen moedertaalsprekers in het Engels zijn.

Visual Studio Code is momenteel gelokaliseerd voor 10 verschillende display-talen (Engels, Vereenvoudigd Chinees, Traditioneel Chinees, Frans, Duits, Italiaans, Japans, Koreaans, Russisch, Spaans) .

Gebruikers die uit deze talen komen, hoeven zelfs hun weergavetaal niet te configureren, omdat de VS-code standaard de weergavetaal van het besturingssysteem oppikt . Als ze een andere taal als weergavetaal willen instellen, kunnen ze eenvoudig hun locale.json bestand configureren.

Waarschijnlijk zijn 10 weergavetalen niet zo veel, maar het is ook niet slecht als we in aanmerking nemen dat VS Code een nieuwe software is en dat Microsoft waarschijnlijk meer zal ondersteunen in de toekomst. Voorlopig krijgen gebruikers van wie de taal niet door de ondersteunde wordt ondersteund, hun VS-code in het Engels geïnstalleerd.

8. Toegankelijke grootte

Moderne broncode-editors zijn niet echt groot en Microsoft heeft zich ook bij deze trend aangesloten, omdat Visual Studio Code minder dan 100 MB groot is en de schijf minder dan 200 MB groot is.

9. Ontwikkeling van verschillende platformen

Als we inclusieve software willen, moet het natuurlijk ook platformonafhankelijk zijn, wat betekent dat het op verschillende besturingssystemen moet draaien. VS Code voldoet aan deze vereiste, omdat het ook Windows, OS X en Linux ondersteunt.

Maak het persoonlijk

"Make It Personal" is het tweede principe van inclusive design van Microsoft en we zullen onder dit criterium de mogelijkheid tot aanpasbaarheid en uitbreidbaarheid bekijken, zoals ik al eerder beloofde. Visual Studio Code voldoet zo goed aan beide vereisten dat ik zelfs afzonderlijke berichten schreef over beide vereisten, hier over aanpasbaarheid en hier over uitbreidbaarheid.

Kort gezegd wordt aanpasbaarheid geïmplementeerd met aangepaste thema's en gemodelleerde configuratieconfiguraties in JSON-indeling, terwijl uitbreidbaarheid wordt bereikt door aangepaste extensies die gebruikers kunnen downloaden van de Visual Studio Code Marketplace of zelf een extensie kunnen maken in TypeScript of JavaScript.

U kunt hier meer lezen over de technische achtergrond van de aanpak van Visual Studio Code voor uitbreidbaarheid.

Aanpasbaarheid is op een manier opgelost die ideaal is voor technisch onderlegde mensen die de typische gebruikers van broncode-editors zijn, aangezien een belangrijk deel ervan wordt geïmplementeerd via gemoduleerde configuratiebestanden in JSON-formaat .

Dit is een geweldige oplossing, omdat de configuratie-opties niet verborgen zijn achter een enorme menushierarchie die moeilijk te doorzien is. Gebruikers, zelfs als ze geen coderende experts zijn, kunnen eenvoudig hun aangepaste .json bestanden bewerken, omdat Visual Studio-code de standaard- en aangepaste instellingen in twee bewerkingsvensters naast elkaar opent, zodat gebruikers er gemakkelijk mee kunnen experimenteren.

Configuratiebestanden zijn modulair opgebouwd, ze komen als een logisch gestructureerde hiërarchie van .json bestanden, hier is een lijst met de belangrijkste:

1. settings.json voor aangepaste gebruikersinstellingen, toegankelijk via het menu File > Preferences > User Settings
2. .vscode/settings.json voor aangepaste werkruimte-instellingen, toegankelijk via het menu File > Preferences > Workpraces Settings
3. keybindings.json voor aangepaste sneltoetsen, toegankelijk via het menu File > Preferences > Keyboard Shortcuts
4. javascript.json, php.json, css.json, c.json en een aantal andere .json bestanden voor verschillende programmeertalen voor het instellen van aangepaste gebruikersfragmenten, toegankelijk via het menu File > Preferences > User Snippets
5. launch.json voor aangepaste Debugger-instellingen, toegankelijk door te klikken op het tandwielpictogram op de bovenste balk van Debug View (aan de linkerkant van de editor)
6. .vscode/locale.json voor aangepaste instellingen voor de displaytaal, toegankelijk door de opdracht Configure Language in het opdrachtpalet in te voeren (F1)
7. .vscode/tasks.json voor aangepaste Task Runner-instellingen, toegankelijk door de opdracht Configure Task Runner in het opdrachtpalet in te voeren (F1)

Ik denk dat VS Code-gebruikers nauwelijks kunnen klagen over aanpasbaarheid, omdat zelfs het opsommen van de opties een uitputtende taak was.

Omdat configuratie-opties modulair zijn, hoeven gebruikers alleen te zorgen voor degenen die ze echt nodig hebben, waardoor ze zich kunnen concentreren op de taken die ze willen uitvoeren. Ze zullen dus worden achtergelaten met een meer intuïtieve workflow.

Hou het simpel

We kunnen op vele andere plaatsen voldoen aan het Keep It Simple inclusieve ontwerpprincipe van Microsoft op het gebied van programmeren en ontwerpen, denk maar aan het KISS (Keep It Simple, Stupid) ontwerpprincipe en het DRY (Do not Repeat Yourself) principe voor software-ontwikkeling. Voor deze actieve context blijven we ons richten op de eenvoud van de gebruikersinterface .

In termen van toegankelijkheid wordt meestal een eenvoudig te gebruiken, eenvoudige gebruikersinterface aanbevolen vanwege gebruikers met cognitieve en intellectuele handicaps. Omdat Visual Studio Code een broncode-editor is, is het waarschijnlijk geen software die vaak wordt gebruikt door mensen met een dergelijke beperking, maar er kunnen ook grijze gebieden zijn.

Eenvoud is niet alleen belangrijk vanwege hen, want een goed ontworpen, logische interface kan ook de leercurve verlagen en de werksnelheid verhogen, waardoor een software ook aantrekkelijker wordt voor de algemene bevolking.

Visual Studio Code maakt ook gebruik van het bekende psyhologische fenomeen, het loutere belichtingseffect (of bekendheidsfenomeen ), omdat het een basislay-out toepast die vergelijkbaar is met de lay-out van andere bekende broncode-editors, zoals Atom, gebruik.

Uit de documenten kunnen we zien dat Microsoft een enorme impact heeft gehad op:

VS Code biedt gebruikers ook de Side by Side Editing-functie die ook te vinden is in andere broncode-editors, en het is geen toeval, omdat het het coderingsproces veel eenvoudiger maakt en natuurlijk bijdraagt ​​aan de "Keep It Simple" inclusief ontwerp principe, ook.

Bovenop de basisgebruikersinterface heeft Visual Studio Code gave functies die het vermelden waard zijn in een artikel over inclusief ontwerp, zoals:

• Intellisense die gebruikers suggesties op basis van context biedt (het backend gedeelte dat kunstmatige intelligentie gebruikt, is ook een leuke oplossing)
• Peek (Shift + F12) die volledige functiedefinities weergeeft in een inlinevenster
• Command Palet (F1) waarmee alle opdrachten op dezelfde plaats toegankelijk zijn.

Maak Delight

Het is niet bepaald eenvoudig om tastbare criteria te vinden die we kunnen gebruiken om het inclusief ontwerpprincipe van "Create Delight" te onderzoeken, dus heb ik uiteindelijk genoegen genomen met het criterium van het ontdekken van kenmerken, omdat Microsoft dit principe op de volgende manier heeft gedefinieerd:

Deze bewoordingen herinneren velen van u aan micromomenten, een van de nieuwste dingen van Google, en laten daarom zien hoe toonaangevende technologiebedrijven tot vergelijkbare conclusies komen als ze nadenken over hoe ze de sector vooruit kunnen helpen.

Bij inclusief ontwerp is het erg belangrijk om gebruikers te betrekken en hun nieuwsgierigheid te wekken, dat we waarschijnlijk het beste kunnen bereiken als we ze helpen verder te gaan wanneer ze een bepaald punt in hun gebruikersreis hebben bereikt. Precies op het goede moment, niet eerder, niet erna.

Wanneer we het hebben over het ontdekken van kenmerken, de meer wereldlijke manifestatie van het creëren van verrukking, kan dit worden vergroot door zaken als goed ontworpen hulpprogramma-navigatie, slimme documentatie en ondersteunende informatie die alleen op het juiste moment verschijnt.

We kunnen voorbeelden vinden voor al deze functies in Visual Studio Code, denk alleen maar aan het eerder genoemde IntelliSense- en opdrachtpalet, maar syntaxisaccentuering en aangepaste codefragmenten kunnen gebruikers ook helpen om het meeste uit de software te halen. U moet zelf beoordelen of het gebruik van Visual Studio Code u het gevoel van genot geeft.

Voor mijzelf vond ik de ervaring min of meer leuk: de goed gestructureerde online documentatie, de gemakkelijk te navigeren Visual Studio Code Marketplace en de aangepaste kleurthema's waarvan een voorbeeld kan worden getoond in real-time tijdens het scrollen van een vervolgkeuzelijst (toegang het via het menu File > Preferences > Color Theme ).

Laatste woorden

Omdat inclusief design een nieuw veld is, bevindt de technologische industrie zich nog in de experimentfase. Ik denk dat Microsoft een belangrijke mijlpaal heeft gemaakt door de vier principes van inclusief ontwerpen te definiëren .

Zoals we hadden kunnen zien, slaagden ze erin om de theorie met succes in hun nieuwe broncode-editor, Visual Studio Code, te implementeren, hoewel er nog enkele velden te verbeteren zijn, zoals het bieden van volledige tab-ondersteuning en een globale zoek- en vervangfunctie.

Omdat zowel toegankelijkheid als inclusiviteit deel uitmaken van de gebruikerservaring, kan het een goed idee zijn om hier meer over te leren als u op de hoogte wilt blijven van de nieuwste trends in de branche. Hier zijn bronnen die kunnen helpen:

• Toegankelijkheidsartikelen van Windows Dev Center
• Microsoft Inclusive Design Toolkit handleiding (PDF) (downloadbaar)
• Hongkiat.com toegankelijkheid tag