Påvirkningen av Microsoft Inclusive Design i Visual Studio Code

Universell, eller inkluderende design er en ny designfilosofi Microsoft ser ut til å ta ganske seriøst i programvareutvikling nylig. Inklusiv design tar tilgjengelig design til neste nivå, da det ser tilgjengelighet fra et mye bredere perspektiv. Da jeg testet Microsofts nye kildekode editor, Visual Studio Code, spørsmålet om hvordan de implementerte teorien i praksis oppstod naturligvis i mitt sinn.

Dette innlegget har ikke til hensikt å være en eneste beskrivelse av Visual Studio Codes tilgjengelighetsfunksjoner, som i de offisielle dokumentene kan du finne et godt sammendrag av dem, men retter seg mot å være et casestudie om hva du skal være oppmerksom på når du vil utform en inkluderende app i fremtiden.

Fordi vi kan være sikre på at inklusivitet snart vil være et krav i både programvare og webdesign, selvfølgelig ikke bare av altruistiske grunner, men fordi det vil bringe mange nye brukere til bordet.

Microsofts 4 prinsipper for inkluderende design

Windows Dev Center setter tilgjengelig programvareutforming inne i brukerkategorien, og de publiserte også mange gode artikler om emnet. Microsofts fire prinsipper for inkluderende design (oppført kort nedenfor) diskuteres i denne artikkelen.

1. Synes at universell.
2. Klare det personlig.
3. Behold det enkel.
4. Skape glede.

Hvis du har lest gjennom den opprinnelige artikkelen, vil du se prinsippene forklares på en måte som ikke alltid er lett å teste, ved å bruke uttrykk som "følelsesmessig forbindelse", "fremkalle rart", og "Magisk". Så jeg vil helst være jordnær, fjerne disse subjektive konnotasjonene, og slå prinsippene til objektive kriterier.

Når jeg analyserer hvordan de implementeres i Visual Studio Code, bruker jeg dem i følgende forstand:

1. Synes at universell: Tilgjengelighet
2. Klare det personlig: Tilpassbarhet, utvidbarhet
3. Behold det enkel: Distraksjon-fri, logisk brukergrensesnitt
4. Skape glede: Funksjonsoppdagbarhet

Selvfølgelig er dette bare en mulig kategorisering, og det er mange overlapper, for eksempel tilpassbarhet kan også være en del av “Lag glede” prinsipp, men da vi trenger noe håndgripelig, la oss holde fast ved denne tolkningen for nå.

Mens Windows Dev Center anbefaler disse inkluderende designprinsippene som skal brukes for Windows 10-apper, har Microsoft også dedikert sitt Microsoft Design-nettsted til inkluderende design.

Selv om Visual Studio Code ikke bare er tilgjengelig for Windows 10, men som mål å være a tversplattform programvare, vi kan fortsatt trygt teste sine funksjoner mot de nevnte prinsippene, da Microsoft klart behandler inkluderende design som programvarenes designbane de vil følge i fremtiden.

Tenk Universal

Under “Tenk Universal” prinsippet, vil vi undersøke hvor tilgjengelig Visual Studio Code er tilgjengelig for ulike brukergrupper, for eksempel brukere av assistentteknologi (om de bruker dem for funksjonshemminger eller preferanser), personer med begrenset teknologi, ikke-engelsktalende engelsktalere osv..

1. Zoom

Zoom kan enkelt utføres ved å trykke på Ctrl + = / Cmd + = (Mac) tastaturgenvei for Zoom inn, og Ctrl + - / Cmd + - (Mac) snarvei for Zoome ut, og vi kan også få tilgang til zoom-funksjonen via toppmenyen.

Merk at fra og med versjon 1.1.1 på Windows-tastaturer fungerer + og - tegnene ikke på talltastaturet til høyre, bare på tastaturet (alfanumerisk) - som sannsynligvis ikke er best for inklusivitet.

Funksjonen for vedvarende zoomnivå kompenserer noe for dette, da det gjør at vi enkelt kan konfigurere en vedvarende zoomnivå i brukerinnstillingene (les mitt gjennomgripende innlegg om hvordan du gjør dette).

2. Høy kontrast tema

Høy kontrast temaer lette inn behandler visuell informasjon for synskadede brukere, og derfor er de et viktig element i tilgjengelighet.

Det er en standard høy kontrast tema i Visual Studio Code, som du kan angi ved å klikke på Fil> Innstillinger> Farge tema menyen, men du kan også laste ned andre fra Visual Studio Code Marketplace.

Microsoft introduserte High Contrast-temaer i Windows 7, det er fint å se at de følger gjennom med denne funksjonen.

3. Tastaturnavigasjon

Å gi tastaturnavigasjon er viktig for folk som ikke kan bruke musen på grunn av syns- eller mobilitetshemming. Effektiv tastaturnavigasjon innebærer at brukerne kan kontrollere alle funksjoner av en programvare ved å bruke bare tastaturet.

Visual Studio Code implementerer pent denne funksjonen, og mens den har mange forhåndsinnstilte nøkkelbindinger (se hele listen), kan brukerne også tilpasse hurtigtastene ved hjelp av en konfigurasjonsfil for JSON-format.

4. Tab Navigasjon

Tab navigering gjør det mulig å hoppe over de forskjellige områdene av Visual Studio Code.

For tiden, fra versjon 1.1.1 støtter VS-koden ikke fanefunksjon for alle områder, for eksempel er toppmenylinjen ikke tilgjengelig på denne måten. Den gode nyheten er Microsoft anerkjenner mangelen på denne funksjonen i gjeldende kjente problemer i dokumentene.

Under testen fant jeg ut at Redaktør, de Side Bar, de Se Bar (se navnet på VS-kodens områder), og alle handlinger og gjenstander er tilgjengelige med Tab-tasten. Selv om Tab-brukere ikke har tilgang til funksjonene i toppmenylinjen med tastaturet. Kommandopaletten F1 kan noe erstatte dette, da alle kommandoer som finnes i toppmenyen, kan nås også derfra.

En viktig tilgjengelighetsfunksjon i kategorien navigering er tabulering som lar brukerne bytte mellom de to funksjonene i Tab-tasten. Den fangede Tab-tasten gjør det mulig å Flytt over de forskjellige delene av VS-koden, mens normalt Tab-tasten legger til et fane tegn i tekstfilen åpne i redigeringsområdet. Brukere kan bytte mellom de to funksjonene ved å trykke på Ctrl + M-nøkkelen.

5. Skjermlesere

Selvfølgelig må en tilgjengelig programvare være fullt tilgjengelig for brukerne av skjermleseren. Dokumentene nevner at VS Code dev lag testet skjermleser tilgjengelighet med NVDA-skjermleseren.

For testing brukte jeg to andre skjermlesere, JAWS som er en av de mest brukte skjermlesingsappene, og Microsoft Narrator som er Windows 10s innebygde skjermleser.

KJEVER les høyt alle områder, kommandoer og menyer flittig, men Narrator hadde noen mindre problemer med oppgaven. For eksempel leser bare de øverste menyelementene riktig når jeg flyttet over dem med musen, men ikke når jeg brukte pil ned på tastaturet. Dette er imidlertid snarere en mangel på Narrator, ikke Visual Studio Code, så vi kan trygt anta at synskadede brukere kan få tilgang til alle VS Code-funksjonaliteter ved å bruke en mer avansert skjermleser-app.

6. Debugger Tilgjengelighet

For å gjøre en app fullt tilgjengelig og inkluderende, må vi også ta vare på deler som sannsynligvis ikke kommer først til vårt sinn. Ved Visual Studio Code er Debugger et godt eksempel på dette. The dev team oppmerksom på å gjøre det også inkluderende, derfor støtter det også Tab og tastaturnavigasjon, og det er skjermleser tilgjengelig.

7. Lokalisering

Nå er vi klare med å diskutere tilgjengelighetsfunksjonene VS Code lister i docs, men det er også andre viktige ting vi må nevne når vi snakker om “Tenk Universal” inkluderende designprinsipp. En av disse er lokalisering, eller med andre ord støtte for fremmedspråk som visningsspråk, så mange mennesker i verden er ikke innfødte engelsktalende.

Visual Studio Code er for øyeblikket lokalisert for 10 forskjellige visningsspråk (Engelsk, forenklet kinesisk, tradisjonell kinesisk, fransk, tysk, italiensk, japansk, koreansk, russisk, spansk).

Brukere som kommer fra disse språkene trenger ikke engang å konfigurere sitt visningsspråk, som VS-kode henter opp språket for operativsystemet som standard. Hvis de vil sette et annet språk som visningsspråk, kan de enkelt konfigurere deres locale.json fil.

Sannsynligvis er 10 visningsspråk ikke så mange, men det er heller ikke dårlig hvis vi tar i betraktning at VS Code er en ny programvare, og Microsoft vil mest sannsynlig støtte mer i fremtiden. For nå, brukere som ikke er blant de støttede, får sin VS-kode installert på engelsk.

8. Tilgjengelig størrelse

Moderne kildekode redaktører er ikke veldig store, og Microsoft har også sluttet seg til denne trenden, da Visual Studio Code er en mindre enn 100 MB laste ned, og diskopptaket er mindre enn 200 MB.

9. Cross-Platform Development

Hvis vi ønsker inkluderende programvare, må det selvfølgelig også være en kryssplattform som betyr at den må kjøre på forskjellige operativsystemer. VS-koden oppfyller dette kravet, som det støtter Windows, OS X og Linux også.

Gjør det personlig

“Gjør det personlig” er Microsofts andre prinsipp for inkluderende design, og vi vil se på skreddersy og utvidelses under dette kriteriet, som jeg lovet det før. Visual Studio Code oppfyller begge kravene så pent at jeg selv skrev separate innlegg på begge, her på tilpassbarhet, og her på utvidbarhet.

Kort sagt er tilpassbarhet implementert med tilpassede temaer og Modularized JSON-format konfigurasjonsinnstillinger, mens utvidbarhet oppnås ved egendefinerte utvidelser som brukere kan laste ned fra Visual Studio Code Marketplace, eller lage egne i enten TypeScript eller JavaScript.

Du kan lese mer om den tekniske bakgrunnen til Visual Studio Code's tilnærming til utvidbarhet her.

Tilpasningsevnen er løst på en måte som er ideell for teknisk-kunnskapsrike mennesker som er de typiske brukerne av kildekode redaktører, da en betydelig del av den er implementert via Modularized JSON-format konfigurasjonsfiler.

Dette er en flott løsning, da konfigurasjonsalternativene ikke er skjult bak et stort menyhierarki som er vanskelig å se gjennom. Brukere, selv om de ikke er kodende eksperter, kan enkelt redigere deres egendefinerte .json filer, som Visual Studio Code åpner standard og de egendefinerte innstillingene i to redigeringsrutene rett ved siden av hverandre, slik at brukerne enkelt kan eksperimentere med dem.

Konfigurasjonsfiler er modulære, de kommer som et logisk strukturert hierarki av .json filer, her er en liste over de viktigste:

1. settings.json til egendefinerte brukerinnstillinger, tilgjengelig via Fil> Innstillinger> Brukerinnstillinger Meny
2. .vscode / settings.json til tilpassede arbeidsområdeinnstillinger, tilgjengelig via Fil> Innstillinger> Arbeidsinnstillinger Meny
3. keybindings.json til egendefinerte nøkkelbindinger, tilgjengelig via Fil> Innstillinger> Tastaturgenveier Meny
4. javascript.json, php.json, css.json, c.json, og en gjeng med andre .json filer for forskjellige programmeringsspråk for oppsett egendefinerte brukerutdrag, tilgjengelig via Fil> Innstillinger> Brukerutdrag Meny
5. launch.json til tilpassede Debugger-innstillinger, tilgjengelig ved å klikke på tannhjulikonet på Debug View's øverste linje (til venstre for redaktøren)
6. .vscode / locale.json til tilpassede skjermsproginnstillinger, tilgjengelig ved å skrive inn Konfigurer språk kommandoen i kommandopalen (F1)
7. .vscode / tasks.json til Tilpassede oppgaveløperinnstillinger, tilgjengelig ved å skrive inn Konfigurer oppgaveløper kommandoen i kommandopalen (F1)

Jeg tror at VS Code-brukere nesten ikke kan klage på tilpassbarhet, for selv å notere alternativene var en uttømmende oppgave.

Som konfigurasjonsalternativer er modulære, må brukerne bare ta vare på dem de trenger virkelig, som hjelper dem med å holde fokus på oppgavene de vil utføre. Dermed vil de bli igjen med en mer intuitiv arbeidsflyt.

Hold det enkelt

Vi kan møte Microsofts Hold det enkelt inkluderende designprinsipp på mange andre steder i programmering og design, bare tenk på designkriteriet KISS (Keep It Simple, Dumb, Simple) og DRY (Do not Repeat Yourself) programvareutviklingsprinsippet. For denne løpende konteksten vil vi holde fokus på enkelhet av brukergrensesnittet.

Når det gjelder tilgjengelighet, er det lett å bruke, enkelt brukergrensesnitt, vanligvis anbefalt på grunn av brukere som har kognitive og intellektuelle funksjonshemminger. Siden Visual Studio Code er en kildekode editor, er det sannsynligvis ikke en programvare som ofte brukes av folk som har denne typen forringelse, men det kan også være noen grå områder.

Enkelhet er ikke bare viktig på grunn av dem, men som et godt designet, logisk grensesnitt kan også senk lærekurven, og øke hastigheten på arbeidet, gjør en programvare mer tiltalende for den generelle befolkningen også.

Visual Studio Code også utnytter det velkjente psyhologiske fenomenet, Bare eksponeringseffekten (eller kjennskap fenomenet), da det vedtar en grunnleggende layout som ligner på utformingen andre kjente kildekoden redaktører, for eksempel Atom, bruk.

Fra docs kan vi bli kjent med at det var en innsats Microsoft gjorde en stor innvirkning på:

VS-kode gir også brukere funksjonen side om side redigering som også finnes i andre kildekoden redaktører, og det er ikke en tilfeldighet, som det gjør kodingsprosessen mye enklere, og selvfølgelig bidrar til “Hold det enkelt” inkluderende designprinsipp, også.

På toppen av det grunnleggende brukergrensesnittet har Visual Studio Code kule funksjoner som er verdt å nevne i en artikkel om inkluderende design, for eksempel:

• IntelliSense som gir brukere forslag basert på kontekst (backend-delen som bruker kunstig intelligens er også en fin løsning)
• Peek (Shift + F12) som viser fullstendige funksjondefinisjoner i et inline-vindu
• Kommandopaletten (F1) som gjør alle kommandoer tilgjengelige på samme sted.

Lag glede

Det er ikke spesielt lett å finne konkrete kriterier vi kan bruke til å undersøke “Lag glede” inkluderende designprinsipp, så jeg endelig slo meg til kriteriet for har funn, som Microsoft definerte dette prinsippet på følgende måte:

Denne formuleringen kan minne mange av dere om mikromomenter, en av Googles nyeste store ting, og viser derfor hvordan ledende teknologiselskaper kan komme til lignende konklusjoner når de tenker på hvordan man kan bevege bransjen fremover.

I inkluderende design er det veldig viktig å engasjere brukere, og vekke nysgjerrigheten deres, at vi kan oppnå sannsynligvis det beste hvis vi hjelpe dem å gå videre da de nådde et visst punkt i deres brukerreise. Bare i riktig øyeblikk, ikke før, ikke etter.

Når vi snakker om har funn, jo mer verdslige manifestasjon av å skape glede, det kan økes av ting som godt utformet verktøynavigering, smart dokumentasjon og støttende informasjon som bare dukker opp i riktig øyeblikk.

Vi kan finne eksempler for alle disse funksjonene i Visual Studio Code, bare tenk på det nevnte IntelliSense og Kommandopaletten, men syntaksutheving og egendefinerte kodestykker kan også hjelpe brukerne til å få mest mulig ut av programvaren. Du må dømme selv om bruk av Visual Studio-kode gir deg følelsen av glede.

For meg selv likte jeg mer eller mindre opplevelsen: godt strukturert elektronisk dokumentasjon, de Lett å navigere i Visual Studio Code Marketplace, og tilpassede farge temaer som kan forhåndsvises i sanntid mens du ruller ned en rullegardinliste (få tilgang til den via Fil> Innstillinger> Farge tema Meny).

Endelige ord

Som inkluderende design er et nytt felt, er teknologibransjen fortsatt i eksperimentasjonsfasen. Jeg tror Microsoft gjorde en betydelig milepæl av definere de fire prinsippene for inkluderende design.

Som vi kunne ha sett, klarte de å klare å implementere teorien i praksis i sin nye kildekodeditor, Visual Studio Code, selv om det fortsatt er noen felt å forbedre, for eksempel å gi full Tab-støtte og en global Søk og erstatt-funksjon.

Som både tilgjengelighet og inklusivitet er deler av brukeropplevelsen, Det kan være en god ide å lære mer om dem hvis du vil følge med de nyeste bransjetrendene. Her er ressurser som kan hjelpe:

• Windows Dev Center er tilgjengelighetsartikler
• Microsoft Design's Inclusive Design Toolkit manual (PDF) (nedlastbar)
• Hongkiat.com tilgjengelighet tag