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, aan het testen was, was de vraag hoe ze de theorie in de praktijk hebben geïmplementeerd kwam van nature in mijn gedachten op.

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 dit 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 zal brengen.

4 principes van Inclusive Design van Microsoft

Windows Dev Center zet toegankelijke software-ontwerp binnen de categorie Usability, en ze publiceerden ook veel geweldige artikelen over het onderwerp. Microsoft's vier principes van inclusief design (hieronder kort weergegeven) worden in dit artikel besproken.

1. Denken universeel.
2. Maak het persoonlijk.
3. Houd het eenvoudig.
4. creëren genot.

Als je het originele artikel hebt gelezen, zul je zien dat de principes worden uitgelegd op een manier die niet altijd gemakkelijk te testen is, met uitdrukkingen zoals "emotionele band", "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. Denken universeel: Toegankelijkheid
2. Maak het persoonlijk: Aanpasbaarheid, uitbreidbaarheid
3. Houd het eenvoudig: Distraction-vrije, logische gebruikersinterface
4. creëren genot: Eigenschap vindbaarheid

Dit is natuurlijk slechts een mogelijke categorisering en dat is het geval veel overlappingen, zo kan aanpasbaarheid ook deel uitmaken van de “Maak plezier” principe, maar omdat we iets tastbaars nodig hebben, houden we ons voorlopig aan deze interpretatie.

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, maar bedoeld is als een platformonafhankelijke software, we kunnen de functies nog steeds veilig testen aan de hand van de bovengenoemde principes, aangezien Microsoft duidelijk inclusief design als het pad van het softwareontwerp dat ze in de toekomst willen volgen, duidelijk behandelt.

Denk aan Universal

Onder de “Denk aan Universal” In principe gaan we na hoe toegankelijk de Visual Studio-code is voor diverse gebruikersgroepen, zoals gebruikers van ondersteunende technologieën (of ze deze gebruiken voor een handicap of voorkeur), mensen met beperkte technologie, niet-native Engelssprekenden, enz..

1. Zoom

Zoom kan eenvoudig worden uitgevoerd door op Ctrl + = / Cmd + = te drukken (Mac) sneltoets voor In zoomen, en de Ctrl + - / Cmd + - (Mac) snelkoppeling voor Uitzoomen, 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 eenvoudig een a te configureren blijvend zoomniveau in de gebruikersinstellingen (lees mijn doorlatende bericht over hoe dit te doen).

2. Thema met hoog contrast

Hoog contrast thema's vergemakkelijken in verwerking van visuele informatie voor gebruikers met een visuele beperking, en daarom vormen ze een belangrijk element van toegankelijkheid.

Er is een standaard Hoog contrast thema in Visual Studio Code, die u kunt instellen door op de. te klikken Bestand> Voorkeuren> Kleurthema menu, 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. Toetsenbord navigatie

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

Met Visual Studio-code wordt deze functie netjes geïmplementeerd en hoewel er vele zijn vooraf ingestelde sneltoetsen (zie de volledige lijst), gebruikers kunnen ook sneltoetsen aanpassen met behulp van een configuratiebestand in JSON-indeling.

4. Tab Navigatie

Tabnavigatie maakt het mogelijk om spring over de verschillende gebieden van Visual Studio Code.

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 ontbreken van deze functie in de Current Bekende problemen in de documenten erkent.

Tijdens het testen, vond ik dat de Editor, de Zijbalk, de Bar bekijken (zie de naamgeving van de gebieden van de VS-code) en al hun acties en items zijn toegankelijk 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 je in het bovenste menu kunt vinden, daar ook toegankelijk zijn.

Een belangrijke toegankelijkheidsfunctie van tabbladnavigatie is tab-trapping, waarmee gebruikers kunnen schakelen tussen de twee functies van de Tab-toets. De ingesloten Tab-toets maakt het mogelijk om verplaats de verschillende delen van de VS-code, terwijl normaal de Tab-toets voegt een Tab-teken toe aan het tekstbestand open 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. De documenten vermelden dat het devonteam 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 lees hardop alle gebieden, commando's en menu's, 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 alle VS Code-functies kunnen gebruiken door een geavanceerdere app voor schermlezers 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 ontwikkelaarsteam heeft ook aandacht besteed aan het inclusief maken, en ondersteunt daarom ook de tab- en toetsenbordnavigatie en de schermlezer is toegankelijk.

7. Lokalisatie

Nu zijn we klaar met het bespreken van de toegankelijkheidsfuncties VS-codelijsten in de documenten, maar er zijn nog andere belangrijke dingen die we moeten vermelden wanneer we het hebben over de “Denk aan Universal” inclusief ontwerpprincipe. Een daarvan is lokalisatie, of met andere woorden ondersteuning voor vreemde talen als weergavetaal, omdat veel mensen ter wereld geen moedertaalsprekers 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 uit deze talen hoeven zelfs hun weergavetaal niet als VS-code in te stellen pakt standaard de weergavetaal van het besturingssysteem op. Als ze een andere taal als weergavetaal willen instellen, kunnen ze eenvoudig hun eigen taal configureren locale.json het dossier.

Waarschijnlijk zijn 10 weergavetalen niet zo veel, maar het is ook niet slecht als we in overweging nemen dat VS Code een nieuwe software is, en Microsoft zal waarschijnlijk meer in de toekomst ondersteunen. 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 een is minder dan 100 MB download en de schijfvoetafdruk is minder dan 200 MB.

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 deze ondersteuning biedt Windows, OS X en Linux ook.

Maak het persoonlijk

“Maak het persoonlijk” is Microsoft's tweede principe van inclusief ontwerpen, en we zullen een kijkje nemen customizability en rekbaarheid volgens dit criterium, zoals ik eerder beloofde. Visual Studio Code voldoet zo goed aan beide vereisten dat ik zelfs afzonderlijke posts schreef over beide vereisten, hier over aanpasbaarheid, en hier over uitbreidbaarheid.

Kort gezegd, aanpasbaarheid wordt geïmplementeerd met aangepaste thema's en gemodelleerde configuratie-instellingen in JSON-formaat, terwijl uitbreidbaarheid wordt bereikt door aangepaste extensies die gebruikers kunnen downloaden van de Visual Studio Code Marketplace, of hun eigen in TypeScript of JavaScript kunnen maken.

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

Aanpasbaarheid is opgelost op een manier 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 kunnen, zelfs als ze geen coderende experts zijn gemakkelijk hun eigen aanpassen .json bestanden, als Visual Studio-code opent de standaard en de aangepaste instellingen in twee deelvensters van de editor naast elkaar, zodat gebruikers er gemakkelijk mee kunnen experimenteren.

Configuratiebestanden worden gemoduleerd, 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 de Bestand> Voorkeuren> Gebruikersinstellingen menu
2. .vscode / settings.json voor aangepaste werkruimte-instellingen, toegankelijk via de Bestand> Voorkeuren> Workpraces-instellingen menu
3. keybindings.json voor aangepaste toetscombinaties, toegankelijk via de Bestand> Voorkeuren> Sneltoetsen op het toetsenbord menu
4. javascript.json, php.json, css.json, c.json, en een stel andere .json bestanden voor verschillende programmeertalen voor het instellen aangepaste gebruikersfragmenten, toegankelijk via de Bestand> Voorkeuren> Gebruikersfragmenten menu
5. launch.json voor aangepaste instellingen voor debugger, 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 het te typen Configureer taal commando in het Command Palet (F1)
7. .vscode / tasks.json voor aangepaste Taak Runner-instellingen, toegankelijk door het te typen Configureer Taak Runner commando in het Command Palet (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 er alleen maar voor te zorgen ze hebben het echt nodig, wat hen helpt gefocust te blijven op de taken die ze willen uitvoeren. Ze zullen dus worden achtergelaten met een meer intuïtieve workflow.

Hou het simpel

We kunnen Microsoft's ontmoeten Hou het simpel inclusief ontwerpprincipe op veel andere plaatsen in programmeren en ontwerpen, denk alleen maar aan het KISS (Keep It Simple, Stupid) ontwerpprincipe en het DRY (Do not Repeat Yourself) principe voor softwareontwikkeling. Voor deze lopende context houden we onze focus 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 enkele grijze gebieden zijn.

Eenvoud is niet alleen belangrijk vanwege hen, want een goed ontworpen, logische interface kan dat ook verlaag de leercurve, en verhoog de snelheid van het werk, een software aantrekkelijker maken voor de algemene bevolking.

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

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 maakt het coderingsproces veel eenvoudiger, en draagt ​​natuurlijk bij aan de “Hou het simpel” inclusief ontwerpprincipe.

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

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

Maak Delight

Het is niet eenvoudig om tastbare criteria te vinden die we kunnen gebruiken om de “Maak Delight” inclusief ontwerpprincipe, dus heb ik uiteindelijk genoegen genomen met het criterium van functie vindbaarheid, toen Microsoft dit principe op de volgende manier definieerde:

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 betrekken, en hun nieuwsgierigheid opwekken, dat we waarschijnlijk de beste kunnen bereiken als we dat doen help ze vooruit te gaan toen ze een bepaald punt in hun gebruikersreis bereikten. Net op het juiste moment, niet eerder, niet daarna.

Als we het over hebben functie vindbaarheid, de meer wereldlijke manifestatie van het creëren van plezier, het kan worden vergroot door zaken als goed ontworpen hulpprogramma navigatie, slimme documentatie en ondersteunende informatie die opduikt alleen op het juiste moment.

We kunnen voorbeelden vinden voor al deze functies in Visual Studio Code, denk alleen maar aan het bovenstaande IntelliSense en Opdrachtpalet, maar syntaxisaccentuering en aangepaste codefragmenten kan gebruikers ook helpen om het meeste uit de software te halen. U moet zelf beoordelen of het gebruik van Visual Studio Code u met het gevoel van verrukking laat.

Zelf vond ik de ervaring min of meer leuk: de goed gestructureerde online documentatie, de eenvoudig te navigeren Visual Studio Code Marketplace, en de aangepaste kleurenthema's dat kan in real-time worden bekeken tijdens het scrollen van een vervolgkeuzelijst (toegang via de Bestand> Voorkeuren> Kleurthema menu).

Laatste woorden

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

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

Omdat zowel toegankelijkheid als inclusiviteit zijn delen van gebruikerservaring, het kan een goed idee zijn om meer over hen te weten te komen 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