Influența designului Microsoft Inclusive în Visual Studio Code

universal, sau inclusiv design este o filozofie de design nouă Microsoft pare să ia destul de serios în dezvoltarea de software recent. Design incluziv ia design accesibil la nivelul următor, deoarece privește accesibilitatea dintr-o perspectivă mult mai largă. Când am fost testarea Microsoft nou editor de cod sursă, Visual Studio Code, întrebarea modul în care au implementat teoria în practică în mod natural a apărut în mintea mea.

Această postare nu intenționează să fie doar o descriere a caracteristicilor de accesibilitate ale Visual Studio Code, deoarece în documentele oficiale puteți găsi o recapitulare mare a acestora, ci mai degrabă intenționează să fie un studiu de caz cu privire la ce să acordați atenție atunci când doriți proiectați o aplicație inclusivă in viitor.

Pentru că putem fi siguri că incluziunea va deveni în curând o cerință atât în ceea ce privește software-ul, cât și în ceea ce privește designul web, desigur, nu numai din motive altruiste, ci pentru că va aduce mulți noi utilizatori la masă.

Cele 4 principii ale design-ului incluziv al Microsoft

Windows Dev Center pune proiectarea software-ului accesibil din categoria Utilizabilitate, și au publicat, de asemenea, numeroase articole extraordinare pe această temă. Microsoft patru principii de design incluziv (enumerate pe scurt în continuare) sunt discutate în acest articol.

Gândi universal.
Fă-o personal.
Păstrează-l simplu.
Crea încântare.

Dacă ați citit articolul original, veți vedea că principiile sunt explicate într-un mod care nu este întotdeauna ușor de testat, folosind expresii ca "conexiune emoțională", "evoca mirare", și "magic". Așadar, aș prefera să stau pe pământ, să eliminăm aceste conotații subiective și să transformăm principiile în criterii obiective.

Când analizez modul în care sunt implementate în Visual Studio Code, le folosesc în următorul sens:

Gândi universal: Accesibilitate
Fă-o personal: Personalizabilitate, extensibilitate
Păstrează-l simplu: Interfață logică fără distragere
Crea încântare: Descoperirea caracteristicilor

Desigur, aceasta este doar o posibilă categorizare, și există multe suprapuneri, de exemplu, personalizarea poate fi, de asemenea, parte din “Creați plăcere” dar, pentru că avem nevoie de ceva tangibil, să rămânem la această interpretare deocamdată.

În timp ce Windows Dev Center recomandă ca aceste principii de design inclusive să fie aplicate pentru aplicațiile Windows 10, Microsoft a dedicat de asemenea site-ul Microsoft Design pentru designul incluziv.

Deși Visual Studio Code nu este numai pentru Windows 10, ci pentru a fi a software-ul cross-platform, putem testa în continuare în condiții de siguranță caracteristicile sale împotriva principiilor menționate mai sus, întrucât Microsoft tratează în mod clar designul incluziv ca cale de proiectare a software-ului pe care doresc să o urmeze în viitor.

Gândiți-vă Universal

Sub “Gândiți-vă Universal” principiu, vom examina cât de accesibil este Visual Studio Code pentru diverse grupuri de utilizatori, cum ar fi utilizatorii de tehnologii de asistență (indiferent dacă le folosesc pentru dizabilități sau preferințe), persoane cu tehnologii limitate, vorbitori de limbă non-nativă etc.

1. Măriți

Zoomul poate fi efectuat cu ușurință apăsând pe Ctrl + = / Cmd + = (Mac) comanda rapidă pentru tastatură Mareste, și Ctrl + - / Cmd + - (Mac) comenzi rapide pentru A micsora, și putem accesa de asemenea funcția Zoom prin bara de meniu de sus.

Rețineți că începând cu versiunea 1.1.1, pe tastaturile Windows semnele + și - nu funcționează pe tastatura numerică din dreapta, numai pe tastatura de tipar (alfanumerică) - care probabil nu este cea mai bună pentru includerea.

Funcția de nivel de persistență a zoomului oarecum compensează acest lucru, deoarece ne permite să configurați cu ușurință a persistent Nivel de transfocare în setările de utilizator (citiți postarea mea perversă despre cum să faceți acest lucru).

2. Tema de contrast ridicat

Temele cu contrast ridicat facilitează prelucrarea informațiilor vizuale pentru utilizatorii cu deficiențe de vedere și, prin urmare, ele reprezintă un element important al accesibilității.

E a implicită temă de contrast înaltă în Visual Studio Code, pe care îl puteți seta făcând clic pe Fișier> Preferințe> Temă culori , dar puteți descărca și alte persoane din Visual Studio Code Marketplace.

Microsoft a introdus teme High Contrast în Windows 7, este frumos să vedem că acestea urmează această caracteristică.

3. Navigare cu tastatură

Furnizarea navigației cu tastatură este esențială pentru persoanele care nu pot folosi mouse-ul din cauza disfuncțiilor vizuale sau de mobilitate. Navigarea eficientă de la tastatură implică faptul că utilizatorii poate controla fiecare funcționalitate a unui software utilizând numai tastatura.

Visual Studio Code implementează frumos această caracteristică, și în timp ce are multe presetări corecte (a se vedea lista completă), utilizatorii pot personaliza comenzile rapide de la tastatură cu ajutorul unui fișier de configurare în format JSON.

4. Navigare tab

Navigarea de pe table permite sari peste toate zonele diferite din Codul Visual Studio.

În prezent, de la versiunea 1.1.1, codul VS nu suportă navigarea în tab-uri pentru toate zonele, de exemplu, bara de meniu de sus nu este disponibilă în acest fel. Vestea bună este că Microsoft recunoaște lipsa acestei caracteristici în Documentele curente cunoscute.

În timpul testării, am constatat că Editor, Bară laterală, Bara de vizualizare (vezi denumirea zonelor codului VS) și toate acțiunile și elementele lor sunt accesibile cu tasta Tab. Deși utilizatorii de fișiere Tab nu pot accesa funcțiile din bara de meniu de sus cu tastatura lor. Comanda Palette F1 poate înlocui oarecum acest lucru, deoarece toate comenzile care pot fi găsite în meniul de sus pot fi accesate și de acolo.

O caracteristică importantă de accesibilitate a navigării pe tab-uri este capturarea filelor, care permite utilizatorilor să comute între cele două funcții ale tastei Tab. Tasta Tab închisă face posibilă treceți peste diferitele părți ale Codului VS, în timp ce în mod normal tasta Tab adaugă un caracter Tab la fișierul text deschideți în zona editorului. Utilizatorii pot comuta între cele două capabilități atingând legătura cu tastele Ctrl + M.

5. Cititoare de ecran

Desigur, un software accesibil trebuie să fie pe deplin disponibil pentru utilizatorii de cititoare de ecran, de asemenea. Documentele menționează că echipa VS Code dev a testat disponibilitatea cititorului de ecran cu cititorul de ecran NVDA.

Pentru testare, am folosit alte două cititoare de ecran, JAWS, una dintre cele mai utilizate aplicații de citire a ecranului, și Microsoft Narrator, care este cititorul de ecran încorporat Windows 10.

FĂLCI citiți cu voce tare toate domeniile, comenzile și meniurile cu sârguință, cu toate acestea Narrator a avut unele probleme mai mici cu sarcina. De exemplu, a citit corect numai elementele de meniu de sus atunci când m-am mutat peste ele cu mouse-ul, dar nu când am folosit săgeata în jos de pe tastatura mea. Acest lucru este însă mai degrabă un neajuns al lui Narrator, nu al Visual Studio Code, astfel încât să putem presupune în siguranță că utilizatorii cu deficiențe de vedere pot accesa toate funcționalitățile codului VS utilizând o aplicație de cititoare de ecran mai avansată.

6. Accessibility Debugger

Pentru a face o aplicație pe deplin accesibilă și incluzivă, trebuie să avem grijă și de părțile care, probabil, nu vin la prima vedere în mintea noastră. În cazul codului Visual Studio, Debuggerul este un bun exemplu pentru acest lucru. Echipa Dev a acordat o atenție deosebită și pentru includerea acesteia în tabloul și tastatura, și este accesibil și cititorului de ecran.

7. Localizarea

Acum suntem pregătiți să discutăm liste de coduri VS în documentele de acces, dar sunt și alte lucruri importante, pe care trebuie să le menționăm atunci când vorbim despre “Gândiți-vă Universal” incluzând principiul designului. Unul dintre acestea este localizarea, sau cu alte cuvinte sprijin pentru limbile străine ca limbă de afișare, deoarece mulți oameni din lume nu sunt vorbitori de limbă maternă.

Codul Visual Studio este în prezent localizat pentru 10 limbi diferite de afișare (Engleză, chineză simplificată, chineză tradițională, franceză, germană, italiană, japoneză, coreeană, rusă, spaniolă).

Utilizatorii care vin din aceste limbi nu trebuie nici măcar să-și configureze limba de afișare, cum ar fi codul VS preia limba de afișare a sistemului de operare în mod implicit. Dacă doresc să seteze o altă limbă ca limbă de afișare, pot să le configureze cu ușurință locale.json fişier.

Probabil 10 limbi de afișare nu sunt atât de multe, dar nu este rău dacă luăm în considerare faptul că VS Code este un software nou, iar Microsoft va sprijini cel mai probabil mai mult în viitor. Deocamdată, utilizatorii ale căror limbi nu se numără printre cei susținuți primesc codul VS instalat în limba engleză.

8. Dimensiune accesibilă

Editorii de cod sursă moderni nu sunt foarte mari, iar Microsoft sa alăturat acestei tendințe, deoarece Visual Studio Code este a mai puțin de 100 MB descărcare, iar amprenta discului este mai mică de 200 MB.

9. Dezvoltarea pe mai multe platforme

Dacă vrem software incluziv, desigur, trebuie să fie și cross-platform, ceea ce înseamnă că trebuie să ruleze pe diferite sisteme de operare. Codul VS îndeplinește această cerință, pe care îl susține Windows, OS X și Linux de asemenea.

Faceți-o personală

“Faceți-o personală” este al doilea principiu al Microsoft al design-ului incluziv și ne vom uita la personalizare și extensibilitate în conformitate cu acest criteriu, așa cum am promis înainte. Visual Studio Code îndeplinește atât cerințele atât de frumos încât am scris chiar postări separate pe ambele, aici pe personalizabilitate, și aici pe extensibilitate.

Pe scurt, personalizarea este implementată cu teme personalizate și modulele configurate în format JSON, în timp ce extensibilitatea este realizată prin extensii personalizate pe care utilizatorii le pot descărca de pe Visual Studio Code Marketplace sau pot crea propriile lor fișiere în formular sau JavaScript.

Puteți citi mai multe despre fundalul tehnic al abordării Visual Studio Code privind extensibilitatea aici.

Personalizabilitatea este rezolvată într-un mod care este ideal pentru persoanele cu experiență în tehnologie, care sunt utilizatorii tipici ai editorilor de cod sursă, deoarece o parte semnificativă a acestora este implementată prin fișiere de configurare în format JSON modularizate.

Aceasta este o soluție excelentă, deoarece opțiunile de configurare nu sunt ascunse în spatele unei ierarhii uriașe de meniuri, care este greu de văzut. Utilizatorii, chiar dacă nu sunt experți în codificare, pot modificați cu ușurință obiceiul lor .JSON fișiere, deoarece Visual Studio Code deschide setările implicite și personalizate în două ferestre de editare, unul lângă celălalt, permițând utilizatorilor să experimenteze cu ușurință cu ei.

Fișierele de configurare sunt modularizate, ele vin ca o ierarhie logic structurată .JSON fișiere, iată o listă cu cele mai importante:

settings.json pentru Setări personalizate ale utilizatorului, accesibil prin Fișier> Preferințe> Setări utilizator meniul
.vscode / settings.json pentru setările pentru spațiul de lucru personalizat, accesibil prin Fișier> Preferințe> Setări Workpraces meniul
keybindings.json pentru personalizări cheie personalizate, accesibil prin Fișier> Preferințe> Comenzi rapide de la tastatură meniul
javascript.json, php.json, css.json, c.json, și o grămadă de alții .JSON fișiere pentru diferite limbi de programare pentru configurare Fragmente utilizator personalizate, accesibil prin Fișier> Preferințe> Fragmente de utilizator meniul
launch.json pentru setările personalizate pentru Debugger, accesibil făcând clic pe pictograma roată din bara de sus a Debug View (în partea stângă a editorului)
.vscode / locale.json pentru setările personalizate pentru afișarea limbii, accesibil prin tastarea textului Configurați limba comandă în paleta de comandă (F1)
.vscode / tasks.json pentru setările personalizate pentru Runner Task, accesibil prin tastarea textului Configurați Runner de activități comandă în paleta de comandă (F1)

Cred că utilizatorii VS Code nu se pot plânge de personalizare, deoarece listarea opțiunilor a fost o sarcină exhaustivă.

Deoarece opțiunile de configurare sunt modulare, utilizatorii trebuie să aibă grijă de aceștia au nevoie într-adevăr, care îi ajută să se concentreze asupra sarcinilor pe care doresc să le îndeplinească. Astfel, ei vor fi lăsați cu un flux de lucru mai intuitiv.

Nu te complica

Ne putem întâlni cu Microsoft Nu te complica incluzând principiul designului în multe alte locuri în programare și design, gândiți-vă doar la principiul de proiectare KISS (Keep It Simple, Stupid) și la principiul dezvoltării software-ului DRY (Do not Repeat Yourself). Pentru acest context de funcționare, ne vom concentra pe simplitatea interfeței cu utilizatorul.

În ceea ce privește accesibilitatea, o interfață ușor de utilizat și ușor de utilizat este de obicei recomandată din cauza utilizatorilor care au dizabilități cognitive și intelectuale. Din moment ce Visual Studio Code este un editor de cod sursă, probabil că nu este un software folosit frecvent de persoane care au un astfel de tip de deteriorare, dar pot exista și unele zone gri.

Simplitatea nu este importantă doar datorită acestora, ci și ca interfață logică bine concepută reducerea curbei de învățare, și măriți viteza de lucru, făcând un software mai atrăgător și pentru populația generală.

Visual Studio Code, de asemenea folosește bine-cunoscutul fenomen psihologic, efectul de expunere simplă (sau fenomenul familiarității), deoarece adoptă un layout de bază care este similar cu aspectul altor editori binecunoscuți cod sursă, cum ar fi Atom, folosiți.

Din docs putem să aflăm că a fost un efort Microsoft a pus un impact imens asupra:

Codul VS oferă, de asemenea, utilizatorilor funcția de editare Side by Side care poate fi găsită și în alți editori de cod sursă și nu este o coincidență, face procesul de codificare mult mai simplu, și, desigur, contribuie la “Nu te complica” inclusiv principiul designului incluziv.

Pe partea de sus a UI de bază, Visual Studio Code are caracteristici interesante care merită menționate într-un articol despre designul incluziv, cum ar fi:

IntelliSense care oferă utilizatorilor sugestii bazate pe context (partea din spate care utilizează inteligența artificială este, de asemenea, o soluție plăcută)
Arunca o privire (Shift + F12) care afișează definiții complete ale funcțiilor într-o fereastră inline
Comandă Paletă (F1) care face ca toate comenzile să fie accesibile în același loc.

Creați plăcere

Nu este foarte ușor să găsim criterii tangibile pe care le putem folosi pentru a examina “Creați plăcere” incluzând principiul designului, așa că am stabilit în final criteriul caracteristică de descoperire, deoarece Microsoft a definit acest principiu în felul următor:

Această formulare vă poate aminti multor micro-momente, una dintre cele mai recente lucruri de la Google, și, prin urmare, arată modul în care companiile de vârf ale tehnologiei pot ajunge la concluzii similare atunci când se gândesc la modul de avansare a industriei.

În designul incluziv, este foarte important să implicați utilizatorii, și trezesc curiozitatea lor, pe care le putem obține probabil cel mai bun dacă noi ajutați-i să avanseze când au ajuns într-un anumit moment în călătoria lor către utilizator. Doar în momentul potrivit, nu înainte, nu după.

Când vorbim caracteristică de descoperire, cu cât mai multă manifestare lumească de a crea încântare, ea poate fi mărită de lucruri precum o navigație de utilitate bine concepută, o documentație inteligentă și informații de susținere care apar numai în momentul potrivit.

Putem găsi exemple pentru toate aceste caracteristici în Visual Studio Code, gândiți-vă doar la cele menționate mai sus IntelliSense și Comandă Paletă, dar sintaxă evidențierea și fragmente de cod personalizate poate ajuta, de asemenea, utilizatorii să profite la maximum de software-ul. Trebuie să vă judecați dacă folosiți codul Visual Studio vă lasă sentimentul de încântare.

Pentru mine, mai mult sau mai puțin mi-a plăcut experiența: o documentație online bine structurată, ușor de navigat Visual Studio Code Marketplace, si culori personalizate care poate fi previzualizat în timp real în timp ce derulați o listă derulantă (accesați-o prin Fișier> Preferințe> Temă culori meniul).

Cuvintele finale

Deoarece designul incluziv este un domeniu nou, industria tehnologică se află încă în faza de experimentare. Cred că Microsoft a făcut o piatră de hotar semnificativă definind cele patru principii ale design-ului incluziv.

Așa cum am fi văzut, au reușit să pună în aplicare cu succes teoria în practică în noul editor de cod sursă, Visual Studio Code, deși mai există câțiva câmpuri de îmbunătățire, cum ar fi furnizarea de asistență Tab complet și o caracteristică globală Search and Replace.

Atât accesibilitatea cât și incluziunea sunt părți ale experienței utilizatorului, poate fi o idee bună să aflați mai multe despre ele dacă doriți să respectați ultimele tendințe din industrie. Iată resurse care vă pot ajuta:

Articolele de accesibilitate ale Windows Dev Center
Manualul de proiectare Microsoft Inclusive Design Toolkit (PDF) (descărcabil)
Eticheta de accesibilitate Hongkiat.com