L'influenza di Microsoft Inclusive Design nel codice di Visual Studio

universale, o design inclusivo è una nuova filosofia di design che Microsoft sembra prendere molto seriamente nello sviluppo del software di recente. Design inclusivo porta il design accessibile al livello successivo, dal momento che considera l'accessibilità da una prospettiva molto più ampia. Quando stavo testando il nuovo editor di codice sorgente di Microsoft, Visual Studio Code, la domanda di come hanno implementato la teoria nella pratica naturalmente sorto nella mia mente.

Questo post non intende essere solo una descrizione delle funzionalità di accessibilità del codice di Visual Studio, come nei documenti ufficiali è possibile trovare un riepilogo grande di loro, ma piuttosto si propone di essere un caso di studio su cosa prestare attenzione quando si desidera progetta un'app inclusiva nel futuro.

Perché possiamo essere sicuri che l'inclusività sarà presto un requisito sia nel software che nel web design, ovviamente non solo per ragioni altruistiche, ma perché porterà molti nuovi utenti al tavolo.

I 4 principi di progettazione inclusiva di Microsoft

Windows Dev Center mette a disposizione progettazione software accessibile all'interno della categoria Usabilità, e hanno anche pubblicato molti fantastici articoli sull'argomento. Microsoft quattro principi del design inclusivo (elencati brevemente di seguito) sono discussi in questo articolo.

1. Pensare universale.
2. Fallo personale.
3. Tienilo semplice.
4. Creare diletto.

Se hai letto l'articolo originale, vedrai che i principi sono spiegati in un modo che non è sempre facile da testare, usando espressioni come "connessione emotiva", "evoca meraviglia", e "magico". Quindi preferirei stare con i piedi per terra, rimuovere queste connotazioni soggettive e trasformare i principi in criteri oggettivi.

Quando analizzo come sono implementati in Visual Studio Code, li uso nel seguente senso:

1. Pensare universale: Accessibilità
2. Fallo personale: Personalizzazione, estensibilità
3. Tienilo semplice: Interfaccia utente logica e priva di distrazioni
4. Creare diletto: Rilevabilità delle funzionalità

Naturalmente, questa è solo una possibile categorizzazione, e ci sono molte sovrapposizioni, per esempio la personalizzazione può anche essere parte del “Crea piacere” principio, ma poiché abbiamo bisogno di qualcosa di tangibile, restiamo fedeli a questa interpretazione per ora.

Mentre Windows Dev Center consiglia di applicare questi principi di progettazione inclusiva per le app di Windows 10, Microsoft ha dedicato anche il proprio sito di progettazione Microsoft al design inclusivo.

Sebbene Visual Studio Code non sia solo per Windows 10 ma abbia lo scopo di essere un software multipiattaforma, possiamo ancora testare in sicurezza le sue caratteristiche rispetto ai principi sopra menzionati, dato che Microsoft considera il design inclusivo come il percorso di progettazione del software che vogliono seguire in futuro.

Pensa universale

Sotto il “Pensa universale” In linea di principio, esamineremo quanto è accessibile il codice di Visual Studio per diversi gruppi di utenti, come utenti di tecnologie assistive (indipendentemente dal fatto che li utilizzino per disabilità o preferenza), persone con tecnologie limitate, parlanti madrelingua inglesi, ecc..

1. Zoom

Lo zoom può essere facilmente eseguito premendo Ctrl + = / Cmd + = (Mac) scorciatoia da tastiera per Ingrandire, e Ctrl + - / Cmd + - (Mac) scorciatoia per Zoom indietro, e possiamo anche accedere alla funzione Zoom tramite la barra dei menu in alto.

Si noti che, a partire dalla versione 1.1.1, sulle tastiere Windows i segni + e - non funzionano sul tastierino numerico sulla destra, solo sulla tastiera di digitazione (alfanumerica) - che probabilmente non è il migliore per l'inclusività.

La funzione Persisted Zoom Level in qualche modo compensa questo, in quanto ci permette di configurare facilmente a livello di zoom persistente nelle Impostazioni utente (leggi il mio post precedente su come farlo).

2. Tema ad alto contrasto

Temi ad alto contrasto facilitano elaborazione delle informazioni visive per gli utenti ipovedenti e quindi rappresentano un elemento importante dell'accessibilità.

C'è un tema di contrasto elevato predefinito in Visual Studio Code, che puoi impostare facendo clic sul File> Preferenze> Tema colore menu, ma puoi anche scaricarne altri dal Marketplace di Visual Studio.

Microsoft ha introdotto temi ad alto contrasto in Windows 7, è bello vedere che seguono questa funzionalità.

3. Navigazione tramite tastiera

Fornire la navigazione tramite tastiera è essenziale per le persone che non possono utilizzare il mouse a causa di disabilità visive o di mobilità. L'efficace navigazione da tastiera comporta che gli utenti può controllare ogni funzionalità di un software usando solo la tastiera.

Il codice di Visual Studio implementa piacevolmente questa funzionalità e mentre ne ha molti associazioni di tasti preimpostate (vedi l'elenco completo), gli utenti possono anche personalizzare le scorciatoie da tastiera con l'aiuto di un file di configurazione in formato JSON.

4. Navigazione a schede

La navigazione a schede rende possibile saltare in tutte le diverse aree di codice di Visual Studio.

Attualmente, a partire dalla versione 1.1.1, VS Code non supporta la navigazione delle schede per tutte le aree, ad esempio la barra dei menu in alto non è disponibile in questo modo. La buona notizia è che Microsoft riconosce la mancanza di questa funzionalità nei problemi noti correnti nei documenti.

Durante i test, ho scoperto che il editore, il Side Bar, il Visualizza barra (vedere la denominazione delle aree di VS Code) e tutte le loro azioni e voci sono accessibili con il tasto Tab. Sebbene gli utenti della scheda non possano accedere alle funzionalità della barra dei menu in alto con la loro tastiera. La Command Palette F1 può in qualche modo sostituirsi a questo, poiché tutti i comandi che si possono trovare nel menu principale sono accessibili anche da lì.

Un'importante funzione di accessibilità della navigazione a schede è il trapping delle schede che consente agli utenti di passare tra le due funzionalità del tasto Tab. Il tasto Tab intrappolato rende possibile spostarsi tra le diverse parti del codice VS., mentre normalmente il tasto Tab aggiunge un carattere Tab al file di testo aprire nell'area Editor. Gli utenti possono passare tra le due funzionalità premendo il tasto Ctrl + M.

5. Lettori di schermo

Ovviamente, un software accessibile deve essere pienamente disponibile anche per gli utenti di screen reader. I documenti riportano che il team di sviluppatori di VS Code ha testato la disponibilità dello screen reader con lo screen reader NVDA.

Per il test, ho usato due altri screen reader, JAWS che è una delle app di lettura schermo più utilizzate e Microsoft Narrator che è lo screen reader integrato di Windows 10.

JAWS leggere ad alta voce tutte le aree, i comandi e i menu in modo diligente, tuttavia Narratore ha avuto alcuni problemi minori con l'attività. Ad esempio, legge le voci del menu in alto solo quando le ho spostate con il mouse, ma non quando ho usato la freccia giù sulla tastiera. Questo, tuttavia, è piuttosto una mancanza di Narratore, non di Visual Studio Code, quindi possiamo tranquillamente supporre che gli utenti ipovedenti possano accedere a tutte le funzionalità di VS Code utilizzando un'app screen reader più avanzata.

6. Accessibilità del debugger

Per rendere un'app completamente accessibile e inclusiva, dobbiamo anche occuparci di parti che probabilmente non ci vengono in mente all'inizio. Nel caso di Visual Studio Code, il Debugger è un buon esempio per questo. Il team di sviluppo ha prestato attenzione a renderlo inclusivo, pertanto supporta anche la navigazione con scheda e tastiera, ed è accessibile allo screen reader.

7. Localizzazione

Ora siamo pronti a discutere le caratteristiche di accessibilità degli elenchi VS Code nei documenti, ma ci sono anche altre cose importanti che dobbiamo menzionare quando parliamo del “Pensa universale” principio di progettazione inclusivo. Uno di questi è la localizzazione o con altre parole supporto per le lingue straniere come linguaggio di visualizzazione, come molte persone nel mondo non sono madrelingua inglese.

Il codice di Visual Studio è attualmente localizzato per 10 diverse lingue di visualizzazione (Inglese, cinese semplificato, cinese tradizionale, francese, tedesco, italiano, giapponese, coreano, russo, spagnolo).

Gli utenti che arrivano da queste lingue non hanno nemmeno bisogno di configurare la loro lingua di visualizzazione, come VS Code per impostazione predefinita seleziona la lingua di visualizzazione del sistema operativo. Se vogliono impostare un'altra lingua come lingua di visualizzazione, possono facilmente configurarne la lingua locale.json file.

Probabilmente 10 lingue di visualizzazione non sono così tante, ma non è male se prendiamo in considerazione che VS Code è un nuovo software, e Microsoft probabilmente supporterà di più in futuro. Per ora, gli utenti la cui lingua non è tra quelle supportate ottengono il loro codice VS installato in inglese.

8. Dimensioni accessibili

I moderni editor di codice sorgente non sono molto grandi e Microsoft ha anche aderito a questa tendenza, in quanto Visual Studio Code è un meno di 100 MB download e il suo footprint del disco è inferiore a 200 MB.

9. Sviluppo multipiattaforma

Se vogliamo software inclusivo, ovviamente è necessario che sia anche multipiattaforma, il che significa che deve essere eseguito su diversi sistemi operativi. VS Code soddisfa questo requisito, in quanto supporta Windows, OS X e Linux anche.

Rendilo personale

“Rendilo personale” è il secondo principio di progettazione inclusiva di Microsoft, e daremo un'occhiata a personalizzazione e estensibilità sotto questo criterio, come l'avevo promesso prima. Visual Studio Code soddisfa entrambi i requisiti così bene che ho persino scritto post separati su entrambi, qui su customizability e qui su estensibilità.

In breve, la personalizzazione è implementata con temi personalizzati e impostazioni di configurazione in formato JSON modulare, mentre l'estensibilità è raggiunta da estensioni personalizzate che gli utenti possono scaricare da Visual Studio Code Marketplace o crearne di propri in TypeScript o JavaScript.

Puoi leggere di più sul background tecnico dell'approccio del codice di Visual Studio all'estensibilità qui.

La personalizzazione è risolta in un modo che è ideale per le persone esperte di tecnologia che sono gli utenti tipici degli editor di codice sorgente, poiché una parte significativa di esso viene implementata tramite file di configurazione in formato JSON modulare.

Questa è un'ottima soluzione, in quanto le opzioni di configurazione non sono nascoste dietro un'enorme gerarchia di menu che è difficile da vedere. Gli utenti, anche se non sono esperti di codifica, possono farlo modifica facilmente la loro abitudine .jSON File, come codice Visual Studio apre le impostazioni predefinite e personalizzate in due riquadri di editor l'uno accanto all'altro, consentendo agli utenti di sperimentare facilmente con loro.

I file di configurazione sono modularizzati, vengono come una gerarchia strutturata logicamente di .jSON file, ecco una lista dei più importanti:

1. settings.json per Impostazioni utente personalizzate, accessibile tramite il File> Preferenze> Impostazioni utente menu
2. .vscode / settings.json per Impostazioni personalizzate dello spazio di lavoro, accessibile tramite il File> Preferenze> Impostazioni WorkPraces menu
3. keybindings.json per associazioni di tasti personalizzate, accessibile tramite il File> Preferenze> Tasti di scelta rapida menu
4. javascript.json, php.json, css.json, c.json, e un mucchio di altri .jSON file per diversi linguaggi di programmazione per l'impostazione frammenti utente personalizzati, accessibile tramite il File> Preferenze> Frammenti utente menu
5. launch.json per Impostazioni personalizzate del debugger, accessibile facendo clic sull'icona dell'ingranaggio sulla barra superiore di Debug View (a sinistra dell'editor)
6. .vscode / locale.json per impostazioni della lingua di visualizzazione personalizzate, accessibile digitando il Configura lingua comando nella palette dei comandi (F1)
7. .vscode / tasks.json per Impostazioni personalizzate del Runner delle attività, accessibile digitando il Configura Task Runner comando nella palette dei comandi (F1)

Penso che gli utenti del codice VS difficilmente possano lamentarsi della personalizzazione, poiché persino elencare le opzioni era un compito completo.

Poiché le opzioni di configurazione sono modularizzate, gli utenti devono solo occuparsene loro hanno davvero bisogno, che li aiuta a rimanere concentrati sulle attività che vogliono eseguire. Pertanto, saranno lasciati con un flusso di lavoro più intuitivo.

Keep It Simple

Possiamo incontrare Microsoft Keep It Simple principio di progettazione inclusivo in molti altri aspetti della programmazione e del design, basti pensare al principio di progettazione KISS (Keep It Simple, Stupid) e al principio di sviluppo del software DRY (Do not Repeat Yourself). Per questo contesto in esecuzione, terremo il nostro focus su semplicità dell'interfaccia utente.

In termini di accessibilità, una semplice interfaccia utente di facile utilizzo è generalmente consigliata a causa di utenti con disabilità intellettive e cognitive. Poiché Visual Studio Code è un editor di codice sorgente, probabilmente non è un software utilizzato frequentemente da persone con questo tipo di compromissione, tuttavia potrebbero esserci anche alcune aree grigie.

La semplicità non è importante solo a causa loro, ma anche come un'interfaccia logica ben progettata abbassare la curva di apprendimento, e aumentare la velocità di lavoro, rendere un software più attraente per la popolazione generale.

Codice di Visual Studio anche sfrutta il noto fenomeno psicologico, l'effetto di semplice esposizione (o fenomeno della familiarità), poiché adotta un layout di base simile a quello di altri ben noti editor di codice sorgente, come Atom, usa.

Dai documenti possiamo sapere che è stato uno sforzo che Microsoft ha avuto un enorme impatto su:

VS Code fornisce anche agli utenti la funzione di modifica Side by Side che può essere trovata anche in altri editor di codice sorgente, e non è una coincidenza, come rende il processo di codifica molto più semplice, e naturalmente contribuisce al “Keep It Simple” principio di progettazione inclusiva, anche.

Oltre all'interfaccia utente di base, Visual Studio Code presenta funzionalità interessanti che vale la pena citare in un articolo sul design inclusivo, come ad esempio:

• Intellisense che fornisce agli utenti suggerimenti in base al contesto (anche la parte di backend che utilizza l'intelligenza artificiale è una buona soluzione)
• Sbirciare (Maiusc + F12) che visualizza le definizioni di funzioni complete in una finestra in linea
• Tavolozza dei comandi (F1) che rende tutti i comandi accessibili nello stesso posto.

Crea piacere

Non è particolarmente facile trovare criteri tangibili che possiamo usare per esaminare il “Crea piacere” principio del design inclusivo, quindi alla fine ho optato per il criterio di funzionalità Discoverability, come Microsoft ha definito questo principio nel seguente modo:

Questo fraseggio può ricordare a molti di voi micro-momenti, una delle ultime novità di Google, e quindi mostrare come le principali aziende tecnologiche possono arrivare a conclusioni simili quando pensano a come far avanzare il settore.

Nel design inclusivo, è molto importante coinvolgere gli utenti, e suscitare la loro curiosità, che possiamo ottenere probabilmente il meglio se noi aiutali ad andare avanti quando hanno raggiunto un certo punto nel loro viaggio utente. Appena nel momento giusto, non prima, non dopo.

Quando parliamo funzionalità Discoverability, la manifestazione più mondana di creare piacere, può essere aumentata da cose come navigazione di utilità ben progettata, documentazione intelligente e informazioni di supporto che si aprono solo nel momento giusto.

Possiamo trovare esempi per tutte queste funzionalità in Visual Studio Code, basti pensare a quanto sopra IntelliSense e Tavolozza dei comandi, ma evidenziazione della sintassi e snippet di codice personalizzati può anche aiutare gli utenti a sfruttare al massimo il software. Devi giudicare da te se usare Visual Studio Code ti lascia con la sensazione di piacere.

Per me stesso, ho più o meno apprezzato l'esperienza: il documentazione online ben strutturata, il Mercato dei codici di Visual Studio facile da navigare, e il temi di colore personalizzati che può essere visualizzato in anteprima in tempo reale mentre si scorre un elenco a discesa (accedendolo tramite il pulsante File> Preferenze> Tema colore menu).

Parole finali

Poiché il design inclusivo è un nuovo campo, l'industria tecnologica è ancora in fase di sperimentazione. Penso che Microsoft abbia fatto una pietra miliare significativa definire i quattro principi del design inclusivo.

Come abbiamo potuto vedere, sono riusciti a implementare con successo la teoria in pratica nel loro nuovo editor di codice sorgente, Visual Studio Code, anche se ci sono ancora alcuni campi da migliorare, come fornire il completo supporto Tab e una funzionalità di ricerca e sostituzione globale.

Come sono accessibilità e inclusività parti dell'esperienza utente, può essere una buona idea saperne di più su di loro se vuoi stare al passo con le ultime tendenze del settore. Qui ci sono risorse che possono aiutare:

• Articoli sull'accessibilità di Windows Dev Center
• Manuale del toolkit Inclusive Design di Microsoft Design (PDF) (scaricabile)
• Tag di accessibilità Hongkiat.com