Påverkan av Microsoft Inclusive Design i Visual Studio Code

Universell, eller inklusive design är en ny designfilosofi Microsoft ser ut att ta ganska seriöst i mjukvaruutveckling nyligen. Inklusive design tar tillgänglig design till nästa nivå, eftersom den ser tillgänglighet från ett mycket bredare perspektiv. När jag testade Microsofts nya källkodsredigerare, Visual Studio Code, frågan om hur de implementerade teorin i praktiken uppstod naturligt i mitt sinne.

Det här inlägget avser inte att vara enbart en beskrivning av Visual Studio Codes tillgänglighetsfunktioner, som i de officiella dokumenten kan du hitta en bra omgång av dem, men syftar snarare till att vara en fallstudie om vad du ska uppmärksamma när du vill utforma en inkluderande app i framtiden.

Eftersom vi kan vara säkra på att inklusivitet snart kommer att vara ett krav både i mjukvara och webbdesign, förstås inte bara av altruistiska skäl, utan för att det kommer att föra många nya användare till bordet.

Microsofts 4 principer för inkluderande design

Windows Dev Center lägger till tillgänglig programdesign inom användbarhetskategorin, och de publicerade också många bra artiklar om ämnet. Microsofts fyra principer för inkluderande design (listade kortfattat nedan) diskuteras i den här artikeln.

1. Tror universell.
2. Gör det personlig.
3. Behåll det enkel.
4. Skapa glädje.

Om du har läst igenom den ursprungliga artikeln kommer du att se principerna förklaras på ett sätt som inte alltid är lätt att testa, genom att använda uttryck som "känslomässig anslutning", "framkalla undra", och "magisk". Så jag vill hellre stanna jordnära, ta bort dessa subjektiva konnotationer och vrid principerna till objektiva kriterier.

När jag analyserar hur de implementeras i Visual Studio Code använder jag dem i följande mening:

1. Tror universell: Tillgänglighet
2. Gör det personlig: Anpassningsbarhet, utdragbarhet
3. Behåll det enkel: Distraktionsfritt, logiskt användargränssnitt
4. Skapa glädje: Funktionsupptäckt

Naturligtvis är det bara en möjlig kategorisering, och det finns många överlappningar, till exempel anpassningsbarhet kan också vara en del av “Skapa glädje” princip, men när vi behöver något konkret, låt oss hålla fast vid denna tolkning för nu.

Medan Windows Dev Center rekommenderar att dessa inkluderande designprinciper tillämpas för Windows 10-apparater, tillägnade Microsoft sin Microsoft Design-webbplats till inkluderande design.

Även om Visual Studio Code inte är enbart för Windows 10 men syftar till att vara a plattformsoftware, vi kan fortfarande försäkra sina funktioner på ett säkert sätt mot de ovan nämnda principerna, eftersom Microsoft tydligt behandlar inkluderande design som den programvaru designväg de vill följa i framtiden.

Tänk Universal

Under “Tänk Universal” Principen, vi ska granska hur tillgänglig Visual Studio Code är för olika användargrupper, som användare av hjälpteknik (oavsett om de använder dem för funktionshinder eller preferenser), personer med begränsad teknik, icke-inhemska engelska talare etc..

1. Zooma

Zoom kan enkelt utföras genom att trycka på Ctrl + = / Cmd + = (Mac) Tangentbordsgenväg för Zooma in, och Ctrl + - / Cmd + - (Mac) genväg för Zooma ut, och vi kan också komma åt zoomfunktionen via menyn översta menyn.

Observera att från och med version 1.1.1 på Windows-tangentbord fungerar + och - tecknen inte på det numeriska tangentbordet till höger, bara på typsnittet (alfanumeriskt) - vilket förmodligen inte är bäst för inklusivitet.

Funktionen för uthållig zoomnivå kompenserar något för detta, eftersom det gör att vi enkelt kan konfigurera en vidhållande zoomnivå i användarinställningarna (läs mitt genomgripande inlägg om hur man gör det här).

2. Hög kontrast tema

Hög kontrast temaer underlätta i bearbetar visuell information för synskadade användare, och därför är de ett viktigt inslag i tillgängligheten.

Det finns en standard hög kontrast tema i Visual Studio Code, som du kan ställa in genom att klicka på Arkiv> Inställningar> Färgtema menyn, men du kan också ladda ner andra från Visual Studio Code Marketplace.

Microsoft introducerade High Contrast-teman i Windows 7, det är trevligt att se att de följer igenom med den här funktionen.

3. Tangentbordnavigering

Att tillhandahålla tangentbordsnavigering är viktigt för personer som inte kan använda musen på grund av synliga eller rörelsehinder. Effektiv tangentbordsnavigering innebär att användarna kan styra alla funktioner av en programvara genom att bara använda tangentbordet.

Visual Studio Code implementerar snygg denna funktion, och även om den har många förinställda nyckelbindningar (se hela listan) kan användarna också anpassa tangentbordsgenvägar med hjälp av en konfigurationsfil för JSON-format.

4. Fliken Navigation

Tab navigation gör det möjligt att hoppa över de olika områdena av Visual Studio Code.

För närvarande, enligt version 1.1.1, stöder VS-kod inte fliknavigering för alla områden, till exempel är menyns översta meny inte tillgänglig på så sätt. Den goda nyheten är att Microsoft erkänner bristen på den här funktionen i de aktuella kända frågorna i dokumenten.

Under provningen fann jag att Redaktör, de Sidobar, de Visa Bar (se namngivningen av VS-kodens områden), och alla deras handlingar och objekt är tillgängliga med Tab-knappen. Även om Tab-användare inte har tillgång till funktionerna i den översta menyraden med tangentbordet. Kommandopaletten F1 kan något ersätta detta, eftersom alla kommandon som finns i toppmenyn också kan nås därifrån.

En viktig tillgänglighetsfunktion för fliknavigering är flikfångst som gör det möjligt för användarna att växla mellan de två funktionerna i flikknappen. Den infångade Tab-knappen gör det möjligt att flytta över de olika delarna av VS-koden, medan normalt Tab-knappen lägger till en fliktecken i textfilen öppna i redigeringsområdet. Användare kan växla mellan de två egenskaperna genom att trycka på Ctrl + M-tangenten.

5. Skärmläsare

Naturligtvis måste en tillgänglig programvara vara fullständigt tillgänglig för användare av skärmläsare. Dokumenterna nämner att VS Code dev lagar testad skärmsläsarens tillgänglighet med NVDA-skärmläsaren.

För testning använde jag två andra skärmsläsare, JAWS som är en av de mest använda skärmläsningsapparna, och Microsoft Narrator som är Windows 10: s inbyggda skärmläsare.

KÄFTAR läsa högt upp alla områden, kommandon och menyer flitigt, men Narrator hade några mindre problem med uppgiften. Till exempel läste man bara de bästa menyalternativen ordentligt när jag flyttade över dem med musen, men inte när jag använde nerpilen på mitt tangentbord. Detta är emellertid snarare en brist på Narrator, inte Visual Studio Code, så vi kan säkert anta att synskadade användare kan få tillgång till alla VS-kodfunktioner genom att använda en mer avancerad skärmläsarapp.

6. Debugger Tillgänglighet

För att göra en app fullt tillgänglig och inkluderande måste vi också ta hand om delar som förmodligen inte kommer först i vårt sinne. Vid Visual Studio Code är Debugger ett bra exempel för detta. The dev team var uppmärksam på att göra det också inkluderat, därför stöder det även Tab och tangentbordnavigering, och det är skärmläsaren tillgänglig.

7. Lokalisering

Nu är vi redo att diskutera tillgänglighetsfunktionerna VS Code listar i dokumenten, men det finns också andra viktiga saker vi måste nämna när vi talar om “Tänk Universal” inklusive designprincipen. En av dessa är lokalisering, eller med andra ord stöd för främmande språk som visningsspråk, så många människor i världen är inte infödda engelska talare.

Visual Studio Code är för närvarande lokaliserad för 10 olika visningsspråk (Engelska, förenklad kinesisk, traditionell kinesisk, fransk, tysk, italiensk, japansk, koreansk, rysk, spansk).

Användare som kommer från dessa språk behöver inte ens konfigurera sitt visningsspråk, som VS-kod hämtar operativsystemets visningsspråk som standard. Om de vill ange ett annat språk som visningsspråk, kan de enkelt konfigurera sina locale.json fil.

Sannolikt är 10 visningsspråk inte så många, men det är inte heller dåligt om vi tar hänsyn till att VS-koden är en ny programvara, och Microsoft kommer sannolikt att stödja mer i framtiden. För närvarande användare vars språk inte är bland de stödda får sin VS-kod installerad på engelska.

8. Tillgänglig storlek

Moderna källkodredigerare är inte riktigt stora, och Microsoft har också gått med i denna trend, eftersom Visual Studio Code är en mindre än 100 MB ladda ner, och dess diskfotavtryck är mindre än 200 MB.

9. Cross-Platform Development

Om vi ​​vill ha inkluderande programvara måste det naturligtvis också vara en plattform som betyder att den måste köras på olika operativsystem. VS-koden uppfyller detta krav, som det stöder Windows, OS X och Linux också.

Göra det personligt

“Göra det personligt” är Microsofts andra princip för inkluderande design, och vi ska ta en titt på anpassningsbarhet och sträckbarhet enligt detta kriterium, som jag lovade det förut. Visual Studio Code uppfyller båda kraven så snyggt att jag även skrev separata inlägg på båda, här på anpassningsbarhet och här på utökningsbarhet.

Kort sagt, anpassningsbarhet implementeras med anpassade teman och modulära konfigurationsinställningar för JSON-format, medan sträckbarhet uppnås genom anpassade tillägg som användare kan hämta från Visual Studio Code Marketplace, eller skapa egna i antingen TypeScript eller JavaScript.

Du kan läsa mer om den tekniska bakgrunden till Visual Studio Codes strategi för utvidgningsbarhet här.

Anpassningsbarhet löses på ett sätt som är idealiskt för tekniskt kunniga personer som är de typiska användarna av källkodredaktörer, eftersom en betydande del av det genomförs via modulära JSON-format konfigurationsfiler.

Det här är en bra lösning, eftersom konfigurationsalternativen inte är dolda bakom en stor menyhierarki som är svår att se igenom. Användare, även om de inte är kodande experter, kan enkelt redigera deras anpassade .json filer, eftersom Visual Studio Code öppnar standard och anpassade inställningar i två redigeringsrutor bredvid varandra, så att användarna enkelt kan experimentera med dem.

Konfigurationsfiler är modulära, de kommer som en logiskt strukturerad hierarki av .json filer, här är en lista över de viktigaste:

1. settings.json för anpassade användarinställningar, tillgänglig via Arkiv> Inställningar> Användarinställningar meny
2. .vscode / settings.json för anpassade arbetsytor inställningar, tillgänglig via Arkiv> Inställningar> Inställningar för Workpraces meny
3. keybindings.json för anpassade nyckelbindningar, tillgänglig via Arkiv> Inställningar> Tangentbordsgenvägar meny
4. javascript.json, php.json, css.json, c.json, och en massa andra .json filer för olika programmeringsspråk för inställning anpassade användarutdrag, tillgänglig via Arkiv> Inställningar> Användarutdrag meny
5. launch.json för anpassade Debugger-inställningar, tillgänglig genom att klicka på kugghjulsikonen på Debug Views toppfält (till vänster om redigeraren)
6. .vscode / locale.json för anpassade visningsspråk inställningar, tillgänglig genom att skriva Konfigurera språk kommandot i kommandopalen (F1)
7. .vscode / tasks.json för anpassade inställningar för uppgiftslöpare, tillgänglig genom att skriva Konfigurera uppgiftslöpare kommandot i kommandopalen (F1)

Jag tror att VS-kodanvändare knappast kan klaga på anpassningsbarhet, eftersom även notering av alternativen var en uttömmande uppgift.

Eftersom konfigurationsalternativen är modulära måste användarna bara ta hand om dem de behöver verkligen, vilket hjälper dem att hålla fokus på de uppgifter de vill utföra. Således kommer de att lämnas med ett mer intuitivt arbetsflöde.

Håll det enkelt

Vi kan möta Microsofts Håll det enkelt inkluderande designprincip på många andra ställen i programmering och design, tänk bara på design-principen KISS (Keep It Simple, Dumbled) och DRY (Do not Repeat Yourself) -utvecklingsprincipen. För detta löpande sammanhang håller vi vårt fokus på enkelheten i användargränssnittet.

När det gäller tillgänglighet rekommenderas vanligtvis ett lättanvänt, enkelt användargränssnitt på grund av användare som har kognitiva och intellektuella funktionshinder. Eftersom Visual Studio Code är en källkodredigerare är det förmodligen inte en programvara som ofta används av personer som har denna typ av försämring, men det kan också finnas några gråa områden.

Enkelhet är inte bara viktigt på grund av dem men, som ett väl utformat, logiskt gränssnitt kan också sänka inlärningskurvan, och öka arbetshastigheten, gör en mjukvara mer tilltalande för den allmänna befolkningen också.

Visual Studio Code också utnyttjar det välkända psyhologiska fenomenet, den enda exponeringseffekten (eller förtroendefenomen), eftersom det antar en grundläggande layout som liknar layouten andra kända källkodredaktörer, som Atom, använder.

Från dokumenten kan vi lära känna att det var en strävan att Microsoft har stor inverkan på:

VS-koden ger också användarna funktionen sida vid sida, som också kan hittas i andra källkodredaktörer, och det är inte en slump, eftersom det gör kodningsprocessen mycket enklare, och bidrar naturligtvis till “Håll det enkelt” inklusive designprincipen också.

Ovanpå det grundläggande användargränssnittet har Visual Studio Code coola funktioner som är värda att nämna i en artikel om inkluderande design, till exempel:

• Intellisense som ger användarna förslag baserat på sammanhang (den bakre delen som använder artificiell intelligens är också en bra lösning)
• Titt (Shift + F12) som visar fullständiga funktionsdefinitioner i ett inline-fönster
• Command Palette (F1) som gör alla kommandon tillgängliga på samma plats.

Skapa Delight

Det är inte särskilt lätt att hitta konkreta kriterier som vi kan använda för att undersöka “Skapa Delight” inklusive designprincipen, så jag bestämde mig äntligen för kriteriet om funktionalitet, som Microsoft definierade denna princip på följande sätt:

Denna formulering kan påminna många av dig om mikrostunder, en av Googles senaste stora saker, och visar därför hur ledande teknikföretag kan komma till liknande slutsatser när de tänker på hur man flyttar branschen framåt.

I inkluderande design är det mycket viktigt att engagera användare, och väcka deras nyfikenhet, att vi kan uppnå förmodligen det bästa om vi hjälpa dem att gå framåt när de nådde en viss punkt i sin användarresa. Bara i rätt ögonblick, inte förr, inte efter.

När vi talar om funktionalitet, den mer världsliga manifestationen att skapa glädje kan det ökas med saker som väl utformad verktygsnavigering, smart dokumentation och stödjande information som dyker upp bara i rätt ögonblick.

Vi kan hitta exempel på alla dessa funktioner i Visual Studio Code, bara tänka på ovan nämnda IntelliSense och Command Palette, men syntaxmarkering och anpassade kod snippets kan också hjälpa användarna att få ut det mesta av programvaran. Du måste bedöma själv om du använder Visual Studio-koden med en känsla av glädje.

För mig själv tyckte jag mer eller mindre om upplevelsen: välstrukturerad online dokumentation, de lätt att navigera i Visual Studio Code Marketplace, och den anpassade färgteman som kan förhandsgranskas i realtid medan du rullar en rullgardinslista (åtkomst till den via Arkiv> Inställningar> Färgtema meny).

Slutord

Eftersom inkluderande design är ett nytt fält ligger teknologinäringen fortfarande i experimentfasen. Jag tror att Microsoft gjorde en betydande milstolpe definiera de fyra principerna för inkluderande design.

Som vi kunde ha sett lyckades de framgångsrikt genomföra teorin i praktiken i sin nya källkodsredigerare, Visual Studio Code, även om det fortfarande finns några fält att förbättra, till exempel att tillhandahålla fullständig Tab support och en global Sök och ersätt funktion.

Som både tillgänglighet och inklusivitet är delar av användarupplevelse, Det kan vara en bra idé att lära sig mer om dem om du vill hålla dig uppdaterad med de senaste branschtrenderna. Här är resurser som kan hjälpa till:

• Windows Dev Center tillgänglighetsartiklar
• Microsoft Design's Inclusive Design Toolkit manual (PDF) (nedladdningsbar)
• Hongkiat.com tillgänglighetsmärkning