Påvirkningen af ​​Microsoft Inclusive Design i Visual Studio Code

Universel, eller inklusive design er en ny designfilosofi Microsoft synes at tage ret seriøst i softwareudvikling for nylig. Inklusive design tager tilgængelig design til næste niveau, da det ser tilgængelighed ud fra et meget bredere perspektiv. Da jeg testede Microsofts nye kildekode editor, Visual Studio Code, spørgsmålet om hvordan de implementerede teorien i praksis naturligt opstod i mit sind.

Dette indlæg har ikke til hensigt at være en eneste beskrivelse af Visual Studio Code's tilgængelighed, som i de officielle dokumenter kan du finde en god omtale af dem, men retter sig mod at være et casestudie om, hvad man skal være opmærksom på, når man vil design en inkluderende app i fremtiden.

Fordi vi kan være sikre på, at inklusivitet snart vil være et krav i både software og webdesign, selvfølgelig ikke kun af altruistiske årsager, men fordi det vil bringe mange nye brugere til bordet.

Microsofts 4 principper for inklusiv design

Windows Dev Center sætter tilgængeligt software design inde i kategorien Usability, og de udgav også mange gode artikler om emnet. Microsofts fire principper for inkluderende design (angivet kort nedenfor) diskuteres i denne artikel.

1. Tænke universel.
2. Lav det personlig.
3. Behold det enkel.
4. skab glæde.

Hvis du har læst den oprindelige artikel, vil du se principperne forklares på en måde, der ikke altid er let at teste, ved hjælp af udtryk som "følelsesmæssig forbindelse", "fremkald vidunder", og "Magiske". Så jeg vil hellere forblive jordnær, fjerne disse subjektive konnotationer og omdanne principperne til objektive kriterier.

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

1. Tænke universel: Tilgængelighed
2. Lav det personlig: Tilpasningsevne, udvidelighed
3. Behold det enkel: Distraktionsfri, logisk brugergrænseflade
4. skab glæde: Funktionsopdagelse

Selvfølgelig er dette kun en mulig kategorisering, og der er mange overlapninger, Tilpasningsevne kan f.eks. også være en del af “Opret glæde” princip, men da vi har brug for noget håndgribeligt, lad os holde os til denne fortolkning for nu.

Mens Windows Dev Center anbefaler, at disse inkluderende designprincipper anvendes til Windows 10-apps, har Microsoft også dedikeret sit Microsoft Design-websted til inkluderende design.

Selvom Visual Studio Code ikke udelukkende er til Windows 10, men har til formål at være en platforme software, vi kan stadig sikkert afprøve sine funktioner mod ovennævnte principper, da Microsoft klart behandler inkluderende design som den software designbane, de vil følge i fremtiden.

Tænk Universal

Under “Tænk Universal” Princippet, vi vil undersøge, hvor tilgængelig Visual Studio Code er til forskellige brugergrupper, f.eks. brugere af hjælpeteknologier (uanset om de bruger dem til handicap eller præference), personer med begrænset teknologi, ikke-indfødte engelsktalende osv..

1. Zoom

Zoom kan nemt udføres ved at trykke på Ctrl + = / Cmd + = (Mac) tastaturgenvej til Zoom ind, og Ctrl + - / Cmd + - (Mac) genvej til Zoome ud, og vi kan også få adgang til zoom-funktionen via topmenuen.

Bemærk, at i version 1.1.1 på Windows-tastaturer fungerer + og - tegnene ikke på det numeriske tastatur til højre, kun på tastaturet (alfanumerisk) - hvilket sandsynligvis ikke er bedst for inklusivitet.

Funktionen vedvarende zoomniveau kompenserer noget for dette, da det giver os mulighed for nemt at konfigurere en vedholdende zoomniveau i brugerindstillingerne (læs mit gennemtrængelige indlæg om hvordan man gør dette).

2. Høj kontrast tema

Høj kontrast temaer letter ind behandler visuel information for synshandicappede brugere, og derfor er de et vigtigt element i tilgængelighed.

Der er en standard høj kontrast tema i Visual Studio Code, som du kan indstille ved at klikke på Fil> Indstillinger> Fargetema menuen, men du kan også downloade andre fra Visual Studio Code Marketplace.

Microsoft introducerede høj kontrast temaer i Windows 7, det er rart at se, at de følger med denne funktion.

3. Tastaturnavigation

At tilvejebringe tastaturnavigation er afgørende for personer, der ikke kan bruge musen på grund af syns- eller mobilitetshæmning. Effektiv tastaturnavigation indebærer, at brugere kan styre alle funktioner af en software ved kun at bruge tastaturet.

Visual Studio Code implementerer pænt denne funktion, og mens den har mange forudindstillede nøglebindinger (se den fulde liste) kan brugerne også tilpasse tastaturgenveje ved hjælp af en konfigurationsfil af JSON-format.

4. Tab Navigation

Tab navigation gør det muligt at hoppe over de forskellige områder af Visual Studio Code.

I øjeblikket understøtter VS Code, som i version 1.1.1, ikke fane navigation for alle områder, for eksempel er den øverste menulinje ikke tilgængelig på denne måde. Den gode nyhed er, at Microsoft erkender manglen på denne funktion i de nuværende kendte problemer i dokumenterne.

Under testningen fandt jeg, at Editor, det Side Bar, det Se Bar (se navnet på VS-kodes områder), og alle deres handlinger og genstande er tilgængelige med Tab-tasten. Selvom Tab-brugere ikke har adgang til funktionerne i den øverste menulinje med deres tastatur. Kommandopaletten F1 kan noget erstatte dette, da alle kommandoer, der findes i topmenuen, også kan hentes derfra.

En vigtig tilgængelighed ved hjælp af fanebladnavigation er tabfinding, som gør det muligt for brugerne at skifte mellem de to funktioner i Tab-tasten. Den fangede Tab-tast gør det muligt at Flyt på tværs af de forskellige dele af VS-koden, mens normalt Tab-tasten tilføjer et faneblad til tekstfilen Åbn i redigeringsområdet. Brugere kan skifte mellem de to funktioner ved at trykke på Ctrl + M-nøglen.

5. Skærmlæsere

Selvfølgelig skal en tilgængelig software være fuldt tilgængelig for brugerne af skærmlæserne. Dokumenterne nævner, at VS Code dev har testet skærmlæseren tilgængelighed med NVDA-skærmlæser.

Til testning brugte jeg to andre skærmlæsere, JAWS, der er en af ​​de mest anvendte skærmlæsningsapps, og Microsoft Narrator, der er Windows 10s indbyggede skærmlæser.

JAWS læse højt alle områder, kommandoer og menuer flittigt, men Narrator havde nogle mindre problemer med opgaven. For eksempel læste den kun de øverste menupunkter korrekt, da jeg flyttede over dem med musen, men ikke da jeg brugte pil ned på mit tastatur. Dette er dog snarere en mangel på fortælleren, ikke Visual Studio Code, så vi kan sikkert gå ud fra, at synshandicappede brugere kan få adgang til alle VS Code-funktionaliteter ved at bruge en mere avanceret skærmlæserapp.

6. Debugger tilgængelighed

For at gøre en app fuldt tilgængelig og inklusiv, skal vi også passe på dele, der sandsynligvis ikke kommer i første omgang til vores sind. I tilfælde af Visual Studio Code er Debugger et godt eksempel på dette. Dev teamet var opmærksom på at gøre det også inkluderende, derfor understøtter det også Tab og tastaturnavigation, og det er skærmlæser tilgængeligt.

7. Lokalisering

Nu er vi klar til at diskutere tilgængelighedsfunktionerne VS Code lister i docs, men der er også andre vigtige ting, vi skal nævne, når vi taler om “Tænk Universal” inkluderende designprincip. En af disse er lokalisering eller med andre ord støtte til fremmedsprog som display sprog, så mange mennesker i verden er ikke indfødte engelsktalende.

Visual Studio Code er i øjeblikket lokaliseret til 10 forskellige visningssprog (Engelsk, forenklet kinesisk, traditionel kinesisk, fransk, tysk, italiensk, japansk, koreansk, russisk, spansk).

Brugere, der kommer fra disse sprog, behøver ikke engang at konfigurere deres visningssprog som VS-kode henter systemets displaysprog som standard. Hvis de ønsker at indstille et andet sprog som visningssprog, kan de nemt konfigurere deres locale.json fil.

Sandsynligvis er 10 display sprog ikke så mange, men det er heller ikke dårligt, hvis vi tager i betragtning, at VS Code er en ny software, og Microsoft vil sandsynligvis støtte mere i fremtiden. For nu er brugere, hvis sprog ikke er blandt de understøttede, fået deres VS-kode installeret på engelsk.

8. Tilgængelig størrelse

Moderne kildekode redaktører er ikke rigtig store, og Microsoft har også tiltrådt denne trend, da Visual Studio Code er en mindre end 100 MB download, og dens disk footprint er mindre end 200 MB.

9. Cross-Platform Development

Hvis vi ønsker inklusiv software, skal det naturligvis også være en platform, der betyder, at den skal køre på forskellige operativsystemer. VS-koden opfylder dette krav, som det understøtter Windows, OS X og Linux såvel.

Gør det personligt

“Gør det personligt” er Microsofts andet princip om inkluderende design, og vi får et kig på customizability og udvidelsesmuligheder under dette kriterium, som jeg lovede det før. Visual Studio Code opfylder begge krav så smukt, at jeg selv skrev separate indlæg på begge dem, her på customizability, og her på udvidelighed.

Kort sagt er customizability implementeret med brugerdefinerede temaer og modulopbyggede JSON-formatkonfigurationsindstillinger, mens strækbarhed opnås ved tilpassede udvidelser som brugere kan downloade fra Visual Studio Code Marketplace, eller oprette deres egne i enten TypeScript eller JavaScript.

Du kan læse mere om den tekniske baggrund for Visual Studio Code's tilgang til udvidelighed her.

Tilpasningsevne løses på en måde, der er ideel til teknologisk kyndige mennesker, der er de typiske brugere af kildekode redaktører, da en væsentlig del af det implementeres via modulære JSON-format konfigurationsfiler.

Dette er en fantastisk løsning, da konfigurationsindstillingerne ikke er skjult bag et stort menulinjearki, der er svært at se igennem. Brugere, selvom de ikke er kodende eksperter, kan nemt redigere deres brugerdefinerede .jSON filer, da Visual Studio Code åbner standard og brugerdefinerede indstillinger i to redigeringspaneler lige ved siden af ​​hinanden, så brugerne nemt kan eksperimentere med dem.

Konfigurationsfilerne er modulære, de kommer som et logisk struktureret hierarki af .jSON filer, her er en liste over de vigtigste:

1. settings.json til brugerdefinerede brugerindstillinger, tilgængelig via Fil> Indstillinger> Brugerindstillinger menu
2. .vscode / settings.json til brugerdefinerede arbejdsområdeindstillinger, tilgængelig via Fil> Indstillinger> Arbejdsindstillinger menu
3. keybindings.json til brugerdefinerede nøglebindinger, tilgængelig via Fil> Indstillinger> Tastaturgenveje menu
4. javascript.json, php.json, css.json, c.json, og en masse andre .jSON filer til forskellige programmeringssprog til opsætning brugerdefinerede brugeruddrag, tilgængelig via Fil> Indstillinger> Brugeruddrag menu
5. launch.json til Brugerdefinerede Debugger-indstillinger, tilgængelig ved at klikke på tandhjulsikonet på Debug Views øverste bjælke (til venstre for editoren)
6. .vscode / locale.json til brugerdefinerede skærm sprogindstillinger, tilgængelig ved at skrive Konfigurer sprog kommando ind i kommandopaletten (F1)
7. .vscode / tasks.json til Brugerdefinerede Opgave Runner Indstillinger, tilgængelig ved at skrive Konfigurer Opgave Runner kommando ind i kommandopaletten (F1)

Jeg tror, ​​at VS Code-brugere næsten ikke kan klage over customizability, da selv optagelse af mulighederne var en udtømmende opgave.

Da konfigurationsmuligheder er modulære, skal brugerne kun tage sig af dem de har virkelig brug for, som hjælper dem med at holde fokus på de opgaver, de ønsker at udføre. Således vil de blive efterladt af en mere intuitiv arbejdsgang.

Hold det simpelt

Vi kan møde Microsofts Hold det simpelt inklusiv designprincip på mange andre steder i programmering og design, skal du bare tænke på design-princippet KISS (Keep It Simple, Stupid) og DRY (Do not Repeat Yourself) softwareudviklingsprincippet. For denne løbende kontekst holder vi vores fokus på enkelhed af brugergrænsefladen.

Med hensyn til tilgængelighed anbefales en brugervenlig, simpel brugergrænseflade normalt på grund af brugere, der har kognitive og intellektuelle handicap. Da Visual Studio Code er en kildekode editor, er det nok ikke en software, der ofte bruges af mennesker, der har denne form for forringelse, men der kan også være nogle grå områder.

Enkelhed er ikke kun vigtig på grund af dem, men som en veludformet, logisk grænseflade kan også sænk læringskurven, og øge arbejdshastigheden, gøre en software mere tiltrækkende for den generelle befolkning også.

Visual Studio Code også udnytter det velkendte psyhologiske fænomen, den blot eksponerede effekt (eller kendskabsfænomen), da det vedtager et grundlæggende layout, der ligner layoutet andre kendte kildekode redaktører, såsom Atom, bruger.

Fra docs kan vi få at vide, at det var en indsats, at Microsoft har stor indflydelse på:

VS-kode giver også brugere funktionen side om side redigering, som også kan findes i andre kildekode redaktører, og det er ikke tilfældigt, som det gør kodingsprocessen meget enklere, og selvfølgelig bidrager til “Hold det simpelt” inkluderende designprincip også.

På toppen af ​​det grundlæggende brugergrænseflade har Visual Studio Code cool funktioner, der er værd at nævne i en artikel om inkluderende design, såsom:

• Intellisense der giver brugerne forslag baseret på kontekst (den bagvedliggende del, der bruger kunstig intelligens er også en god løsning)
• Peek (Shift + F12), der viser komplette funktionsdefinitioner i et inline vindue
• Kommandopaletten (F1), der gør alle kommandoer tilgængelige på samme sted.

Opret glæde

Det er ikke særlig nemt at finde konkrete kriterier, vi kan bruge til at undersøge “Opret glæde” inklusiv design princip, så jeg endelig afgjort for kriteriet om funktionalitet, som Microsoft definerede dette princip på følgende måde:

Denne formulering kan minde mange af jer om mikro-øjeblikke, en af ​​Googles seneste store ting, og viser derfor, hvordan førende teknologivirksomheder kan komme til lignende konklusioner, når de tænker på, hvordan man kan bevæge branchen fremad.

I inkluderende design er det meget vigtigt at engagere brugere, og vække deres nysgerrighed, at vi nok kan opnå det bedste, hvis vi hjælpe dem med at bevæge sig fremad da de nåede et bestemt punkt i deres brugerrejse. Lige i det rigtige øjeblik, ikke før, ikke efter.

Når vi taler om funktionalitet, jo mere verdslige manifestation for at skabe glæde, det kan øges af ting som veldesignet brugervenlighed, smart dokumentation og understøttende information, der kun vises i det rigtige øjeblik.

Vi kan finde eksempler på alle disse funktioner i Visual Studio Code, tænk bare på de førnævnte IntelliSense og Kommandopaletten, men syntax fremhævning og brugerdefinerede kodeuddrag kan også hjælpe brugerne med at få mest muligt ud af softwaren. Du skal bedømme selv om du bruger Visual Studio-koden, så du får glæde af følelsen.

For mig selv kunne jeg mere eller mindre lide oplevelsen: velstruktureret online dokumentation, det let at navigere i Visual Studio Code Marketplace, og brugerdefinerede farvetemaer der kan forhåndsvises i realtid, mens du ruller en rulleliste (adgang til den via Fil> Indstillinger> Fargetema menu).

Endelige Ord

Da inklusiv design er et nyt felt, er teknologibranchen stadig i eksperimentationsfasen. Jeg tror, ​​at Microsoft lavede en betydelig milepæl definere de fire principper for inkluderende design.

Som vi kunne have set, lykkedes de at gennemføre teorien i praksis i deres nye kildekode editor, Visual Studio Code, selv om der stadig er nogle felter, der skal forbedres, såsom at give fuld Tab support og en global Søg og erstat funktion.

Som både tilgængelighed og inklusivitet er dele af brugeroplevelse, Det kan være en god idé at lære mere om dem, hvis du vil holde øje med de nyeste branchetendenser. Her er ressourcer, der kan hjælpe:

• Windows Dev Center's tilgængelighed artikler
• Microsoft Design's Inclusive Design Toolkit manual (PDF) (downloades)
• Hongkiat.com tilgængelighed tag